/* Base dos painéis; paleta-interna.css aplica as cores MCArkhe aos portais internos. */
@import url("fontes.css");
@import url("paleta.css");

:root{
  --bg:var(--arq-sheet); --bg-raised:var(--arq-panel); --surface:var(--arq-panel-right); --surface-2:var(--arq-panel); --surface-3:color-mix(in srgb,var(--arq-panel-line) 40%,var(--arq-panel-right));
  --line:var(--arq-panel-line); --line-strong:var(--arq-panel-line);
  --text:var(--arq-ink); --text-2:var(--arq-muted); --text-3:var(--arq-muted);
  --accent:var(--arq-gold); --accent-strong:#e4c49b; --accent-ink:var(--arq-button-ink);
  --accent-soft:rgba(202,164,119,.13); --accent-line:rgba(202,164,119,.45); --focus:var(--arq-gold);
  --st-pend:#d6b25e; --st-pend-bg:rgba(214,178,94,.12);
  --st-ok:#7fb38a;   --st-ok-bg:rgba(127,179,138,.13);
  --st-bad:#d47a6a;  --st-bad-bg:rgba(212,122,106,.12);
  --st-run:#7ea6cf;  --st-run-bg:rgba(126,166,207,.13);
  --scrim:rgba(2,10,27,.62);
  --shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-sm:0 4px 14px rgba(0,0,0,.4);
  --logo-claro:block;   /* o logótipo branco, para o fundo escuro */
  --logo-escuro:none;
  --logo-filtro:invert(1) hue-rotate(180deg);   /* um logótipo preto lido no escuro */

  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sb-w:236px; --sb-w-min:56px; --top-h:48px; --r:6px; --r-lg:10px;

  /* Os nomes de sempre, agora sinónimos da paleta nova. */
  --ink:var(--text); --paper:var(--bg); --paper-2:var(--surface-2); --dark:var(--bg-raised);
  --stone:var(--text-2); --stone-2:var(--text-3); --stone-1:var(--text-2); --stone-line:var(--line);
  --accent-2:var(--accent); --accent-wash:var(--accent-soft);
  --good:var(--st-ok); --good-wash:var(--st-ok-bg); --bad:var(--st-bad); --bad-wash:var(--st-bad-bg);
  --font-body:var(--f-ui); --font-display:var(--f-ui);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:var(--arq-sheet); --bg-raised:var(--arq-panel); --surface:var(--arq-panel-right); --surface-2:var(--arq-panel); --surface-3:color-mix(in srgb,var(--arq-panel-line) 40%,var(--arq-panel-right));
    --line:var(--arq-panel-line); --line-strong:var(--arq-panel-line);
    --text:var(--arq-ink); --text-2:var(--arq-muted); --text-3:var(--arq-muted);
    --accent:var(--arq-gold); --accent-strong:#6d4c29; --accent-ink:var(--arq-button-ink);
    --accent-soft:rgba(129,93,53,.09); --accent-line:rgba(129,93,53,.4); --focus:var(--arq-gold);
    --st-pend:#8a6a12; --st-pend-bg:rgba(178,140,30,.13);
    --st-ok:#2f7a45;   --st-ok-bg:rgba(47,122,69,.1);
    --st-bad:#b0442f;  --st-bad-bg:rgba(176,68,47,.09);
    --st-run:#2f6496;  --st-run-bg:rgba(47,100,150,.1);
    --scrim:rgba(22,20,15,.35);
    --shadow:0 16px 40px rgba(22,20,15,.16), 0 0 0 1px rgba(22,20,15,.06);
    --shadow-sm:0 4px 14px rgba(22,20,15,.08);
    --logo-claro:none; --logo-escuro:block; --logo-filtro:none;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:var(--arq-sheet); --bg-raised:var(--arq-panel); --surface:var(--arq-panel-right); --surface-2:var(--arq-panel); --surface-3:color-mix(in srgb,var(--arq-panel-line) 40%,var(--arq-panel-right));
  --line:var(--arq-panel-line); --line-strong:var(--arq-panel-line);
  --text:var(--arq-ink); --text-2:var(--arq-muted); --text-3:var(--arq-muted);
  --accent:var(--arq-gold); --accent-strong:#6d4c29; --accent-ink:var(--arq-button-ink);
  --accent-soft:rgba(129,93,53,.09); --accent-line:rgba(129,93,53,.4); --focus:var(--arq-gold);
  --st-pend:#8a6a12; --st-pend-bg:rgba(178,140,30,.13);
  --st-ok:#2f7a45;   --st-ok-bg:rgba(47,122,69,.1);
  --st-bad:#b0442f;  --st-bad-bg:rgba(176,68,47,.09);
  --st-run:#2f6496;  --st-run-bg:rgba(47,100,150,.1);
  --scrim:rgba(22,20,15,.35);
  --shadow:0 16px 40px rgba(22,20,15,.16), 0 0 0 1px rgba(22,20,15,.06);
  --shadow-sm:0 4px 14px rgba(22,20,15,.08);
  --logo-claro:none; --logo-escuro:block; --logo-filtro:none;
  color-scheme:light;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--f-ui); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
      -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--f-ui); font-weight:600; margin:0 0 .6rem; letter-spacing:-.005em; color:var(--text); }
h1{ font-size:1.45rem; font-stretch:118%; letter-spacing:-.015em; line-height:1.2; }
h2{ font-size:1.05rem; }
h3{ font-size:.95rem; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-strong); }
p{ margin:.5rem 0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
::selection{ background:var(--accent); color:var(--accent-ink); }
code, kbd, .mono{ font-family:var(--f-mono); }
kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px;
  font-size:10.5px; font-weight:500; line-height:1; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px;
}
.skip{ position:absolute; left:12px; top:-48px; z-index:300; padding:8px 12px; background:var(--accent);
       color:var(--accent-ink); border-radius:var(--r); font-weight:600; }
.skip:focus{ top:8px; }
.i{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.i--xs{ width:12px; height:12px; }
.logo-l{ display:var(--logo-claro); }
.logo-d{ display:var(--logo-escuro); }

label{ display:block; font-size:.8rem; font-weight:500; color:var(--text-2); margin-bottom:.3rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=url],
input[type=date], input[type=time], input[type=month], input[type=search], input[type=datetime-local], textarea, select{
  width:100%; padding:.5rem .65rem; min-height:36px; border:1px solid var(--line-strong); border-radius:var(--r);
  font-family:inherit; font-size:.9rem; background:var(--surface); color:var(--text);
  transition:border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
input[readonly], input:disabled, select:disabled, textarea[readonly]{ background:var(--surface-2); color:var(--text-2); }
input[type=checkbox], input[type=radio]{ accent-color:var(--accent); }
input[type=file]{ font-size:.85rem; color:var(--text-2); }
input[type=file]::file-selector-button{
  font:inherit; font-weight:500; margin-right:.6rem; padding:.35rem .7rem; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text); cursor:pointer;
}
textarea{ min-height:6rem; resize:vertical; }
::placeholder{ color:var(--text-3); }
.field{ margin-bottom:1.1rem; }
.field-hint{ font-size:.78rem; color:var(--text-3); margin-top:.3rem; }
.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }

/* ---------- botões ---------- */
.btn{ display:inline-flex; align-items:center; gap:.4rem; height:34px; padding:0 .85rem; border-radius:var(--r);
      font-weight:500; font-size:.85rem; border:1px solid var(--line-strong); cursor:pointer; font-family:inherit;
      white-space:nowrap; flex-shrink:0; background:var(--surface-2); color:var(--text); text-decoration:none;
      transition:background .12s, border-color .12s, color .12s; }
.btn:hover{ background:var(--surface-3); color:var(--text); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink); }
.btn-outline{ background:var(--surface-2); border-color:var(--line-strong); color:var(--text); }
.btn-outline:hover{ background:var(--surface-3); border-color:var(--text-3); }
.btn-danger{ background:transparent; color:var(--st-bad); border-color:var(--st-bad-bg); }
.btn-danger:hover{ background:var(--st-bad-bg); border-color:var(--st-bad); color:var(--st-bad); }
.btn-sm{ height:28px; padding:0 .6rem; font-size:.78rem; }
.btn[disabled], .btn:disabled{ opacity:.45; cursor:not-allowed; }
button{ font-family:inherit; }

/* ==========================================================================
   A moldura: barra lateral + área principal (includes/painel.php)
   ========================================================================== */
.admin-shell{ display:flex; min-height:100vh; min-height:100dvh; }
.admin-sidebar{
  width:var(--sb-w); flex-shrink:0; background:var(--bg-raised); color:var(--text-2);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh;
  border-right:1px solid var(--line); z-index:40;
}
.sb-top{ padding:12px 10px 10px; border-bottom:1px solid var(--line); display:grid; gap:10px; }
.admin-brand{ display:flex; align-items:center; gap:10px; padding:0 4px; color:var(--text); text-decoration:none; }
/* O logótipo tem a assinatura "construção e remodelação" desenhada lá dentro, e é largo:
   cresce à largura da coluna, com um teto. */
.admin-brand img{ width:auto; height:30px; max-width:130px; }
.admin-brand span{ font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
                   color:var(--accent); padding-top:6px; }
.admin-brand:hover{ color:var(--text); }
.sb-search{
  display:flex; align-items:center; gap:8px; width:100%; height:32px; padding:0 6px 0 9px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text-3);
  font-size:.82rem; cursor:pointer; text-align:left;
}
.sb-search span{ flex:1; }
.sb-search:hover{ border-color:var(--line-strong); color:var(--text-2); }

.admin-sidebar nav{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:1px;
                    scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.admin-sidebar nav a{
  position:relative; display:flex; align-items:center; gap:9px; min-height:30px; padding:4px 8px; border-radius:5px;
  color:var(--text-2); font-size:.86rem; line-height:1.25; text-decoration:none;
}
.admin-sidebar nav a:hover{ background:var(--surface-3); color:var(--text); }
.admin-sidebar nav a.active{ background:var(--surface-3); color:var(--text); font-weight:500; }
.admin-sidebar nav a.active .i{ color:var(--accent); }
.sb-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.count{
  display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:17px; padding:0 5px;
  border-radius:999px; font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  background:var(--accent-soft); color:var(--accent); flex:none;
}

/* ============ Grupos de menu recolhíveis (acordeão por secção) ============
   Fechados ao entrar, um aberto de cada vez -- as regras são as de sempre (nav-groups.js e
   nav-grupo-aberto.php); só o desenho é novo. */
.nav-group{ margin:2px 0 0; }
.nav-group-toggle{
  width:100%; display:flex; align-items:center; gap:9px; min-height:30px; padding:4px 8px;
  background:none; border:none; border-radius:5px; cursor:pointer; text-align:left; font-family:inherit;
  font-size:.86rem; color:var(--text-2); font-weight:400;
}
.nav-group-toggle:hover{ background:var(--surface-3); color:var(--text); }
.nav-group-chevron{ display:inline-flex; color:var(--text-3); transition:transform .15s ease; flex-shrink:0; transform:rotate(90deg); }
.nav-group.nav-group-collapsed .nav-group-chevron{ transform:none; }
/* O total do grupo só se vê com ele fechado -- aberto, cada página mostra o seu. */
.nav-group:not(.nav-group-collapsed) > .nav-group-toggle .count{ display:none; }
.nav-group-items{ display:flex; flex-direction:column; gap:1px; margin:1px 0 4px; padding-left:17px; position:relative; }
.nav-group-items::before{ content:""; position:absolute; left:16px; top:2px; bottom:2px; border-left:1px solid var(--line); }
.nav-group-items a{ min-height:28px !important; padding-left:12px !important; font-size:.84rem !important; }
.nav-group-items a.active::before{ content:""; position:absolute; left:-1px; top:6px; bottom:6px; border-left:2px solid var(--accent); }
.nav-group.nav-group-collapsed .nav-group-items{ display:none; }

.admin-sidebar-foot{ flex-shrink:0; border-top:1px solid var(--line); padding:8px; display:grid; gap:6px; }
.sb-pessoa{ display:flex; align-items:center; gap:9px; padding:4px 4px; min-width:0; }
.sb-pessoa b{ display:block; font-size:.82rem; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-pessoa small{ display:block; font-size:.72rem; color:var(--text-3); }
.av{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:50%;
     font-size:10.5px; font-weight:600; color:var(--text); background:var(--surface-3); border:1px solid var(--line-strong); }
.sb-acoes{ display:flex; gap:4px; }
.sb-btn{ flex:1; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
         border-radius:var(--r); background:transparent; color:var(--text-2); cursor:pointer; }
.sb-btn:hover{ background:var(--surface-3); color:var(--text); }

/* ---- barra lateral recolhida: só ícones (o botão guarda a escolha) ---- */
@media (min-width:881px){
  .sb-recolhida .admin-sidebar{ width:var(--sb-w-min); }
  .sb-recolhida .admin-sidebar .sb-label, .sb-recolhida .admin-sidebar .count, .sb-recolhida .nav-group-chevron,
  .sb-recolhida .admin-brand span, .sb-recolhida .sb-search span, .sb-recolhida .sb-search kbd,
  .sb-recolhida .nav-group-items{ display:none !important; }
  .sb-recolhida .admin-brand img{ height:22px; max-width:40px; object-fit:cover; object-position:left; }
  .sb-recolhida .admin-sidebar nav a, .sb-recolhida .nav-group-toggle, .sb-recolhida .sb-search{ justify-content:center; padding:0; }
  .sb-recolhida .sb-acoes{ flex-direction:column; }
  .sb-recolhida .sb-pessoa{ justify-content:center; }
  .sb-recolhida .nav-group.tem-pendentes > .nav-group-toggle{ position:relative; }
  .sb-recolhida .nav-group.tem-pendentes > .nav-group-toggle::after{
    content:""; position:absolute; top:6px; right:9px; width:6px; height:6px; border-radius:50%; background:var(--accent);
  }
}

/* ---- área principal e barra de cima ---- */
/* A margem dos lados vive numa variável: a barra de cima estica-se até à borda com ela, e
   as duas nunca podem discordar (discordaram: 3px de scroll de lado no telemóvel). */
.admin-main{ --pad:clamp(1rem,2.4vw,2rem); flex:1; min-width:0; padding:0 var(--pad) 4rem; }
.painel-top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; height:var(--top-h);
  margin:0 calc(-1 * var(--pad)) 1.4rem; padding:0 var(--pad);
  background:var(--bg); border-bottom:1px solid var(--line);
}
.painel-top-marca{ display:none; }
.crumbs{ display:flex; align-items:center; gap:7px; min-width:0; font-size:.85rem; color:var(--text-3); white-space:nowrap; overflow:hidden; }
.crumbs a{ color:var(--text-3); }
.crumbs a:hover{ color:var(--text); }
.crumbs b{ color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.crumbs .sep{ color:var(--line-strong); }
.top-sp{ flex:1; }
.cmd-btn{ display:flex; align-items:center; gap:8px; height:32px; width:290px; max-width:40vw; padding:0 6px 0 10px;
          border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text-3);
          font-size:.84rem; cursor:pointer; text-align:left; }
.cmd-btn span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-btn:hover{ border-color:var(--line-strong); color:var(--text-2); }
.top-btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
          border-radius:var(--r); background:transparent; color:var(--text-2); cursor:pointer; }
.top-btn:hover{ background:var(--surface-3); color:var(--text); }

/* ---- mensagens de retorno (o flash) ---- */
.admin-flash{ display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .9rem; border-radius:var(--r);
              margin-bottom:1.2rem; font-size:.88rem; border:1px solid var(--line); border-left-width:3px;
              background:var(--surface); color:var(--text); }
.admin-flash-success{ border-left-color:var(--st-ok); background:var(--st-ok-bg); }
.admin-flash-error{ border-left-color:var(--st-bad); background:var(--st-bad-bg); }
.admin-flash a{ color:inherit; text-decoration:underline; }

.admin-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.admin-page-head h1{ margin:0; }

.admin-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem 1.3rem; margin-bottom:1.2rem; }

/* ---------- tabelas: densas, com o cabeçalho em versaletes ---------- */
table.admin-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
                   border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
table.admin-table th, table.admin-table td{ text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--line);
                                            font-size:.86rem; vertical-align:middle; }
table.admin-table th{ background:var(--surface-2); font-size:.72rem; font-weight:500; text-transform:uppercase;
                      letter-spacing:.05em; color:var(--text-3); white-space:nowrap; }
table.admin-table tbody tr:hover td{ background:var(--surface-2); }
table.admin-table tr:last-child td{ border-bottom:none; }

/* AS MINIATURAS DAS LISTAS DO ADMIN.
   A regra estava presa a `table.admin-table` -- e as listas passaram todas para
   `fat-linhas` entretanto. Resultado: a classe `thumb` continuava no HTML, nao tinha regra
   nenhuma a aplicar-se, e a foto saia em TAMANHO REAL. A lista dos Servicos ficou com uma
   fotografia de mil pixeis dentro de uma celula, a empurrar a tabela toda para fora do ecra
   -- foi o que ele viu: «as imagens que ficam anexadas tem de ficar reduzidas no admin, ou
   fica tudo desformatado».
   Agora a classe vale onde quer que esteja. */
img.thumb{ width:44px; height:44px; object-fit:cover; border-radius:6px; display:block; }

/* E A REDE, para os sitios que se esquecam da classe: qualquer imagem dentro de uma celula
   de tabela do admin fica limitada, e uma pagina nova que mostre uma foto nasce arrumada em
   vez de desformatar a lista.
   O `:not()` nao e' enfeite. Esta regra tem MAIS PESO do que a `.thumb` (duas classes
   contra uma), e por isso o `width:auto` daqui anulava os 44px de la' -- a `.thumb` ficava
   decorativa, e quem a lesse ficava a pensar que mandava no tamanho. Apanhado a olhar para
   a fotografia do ecra, e nao a ler o codigo. */
.fat-linhas td img:not(.thumb):not(.current-thumb),
table.admin-table td img:not(.thumb):not(.current-thumb){
  max-width:120px; max-height:80px; width:auto; height:auto; object-fit:cover;
  border-radius:6px; display:block;
}
.admin-actions{ display:flex; gap:.5rem; }
.admin-empty{ color:var(--text-3); font-size:.9rem; padding:2rem; text-align:center; background:var(--surface);
              border:1px dashed var(--line-strong); border-radius:var(--r-lg); }

/* Uma tabela larga rola dentro desta caixa, e nunca empurra a página para o lado — que é o
   que estraga um site num telemóvel: perde-se o menu, o cabeçalho e a noção de onde se está.
   A sombra na direita é a única pista de que há mais coluna para o lado: num telemóvel não
   há barra de deslocamento visível. O `background-attachment:local` é o que a faz
   desaparecer quando se chega ao fim. */
.tabela-rolavel{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background-image:linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0) 24px);
  background-position:right center; background-repeat:no-repeat; background-size:24px 100%;
  background-attachment:local;
}

.admin-tabs{ display:flex; gap:.2rem; margin-bottom:1.3rem; border-bottom:1px solid var(--line); }
/* Os separadores nasceram como botões, com o painel a trocar em JavaScript. Quando cada
   vista tem os seus próprios controlos é melhor que sejam links, e que o servidor mande só a
   vista pedida. Daí o seletor aceitar os dois. */
.admin-tabs button, .admin-tabs a{ font-family:inherit; font-size:.85rem; font-weight:500; padding:.55rem .85rem; border:none;
  background:none; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  text-decoration:none; display:inline-block; white-space:nowrap; }
.admin-tabs button:hover, .admin-tabs a:hover{ color:var(--text); }
.admin-tabs button.active, .admin-tabs a.active{ color:var(--text); border-color:var(--accent); }
.admin-tab-panel{ display:none; }
.admin-tab-panel.active{ display:block; }

/* ---------- entrar ---------- */
.admin-login-wrap{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem 1rem;
  background-color:var(--bg);
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px; background-position:center;
}
.admin-login-card{ background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:2.2rem 2rem 2rem;
                   width:min(380px,100%); box-shadow:var(--shadow); }
.admin-login-card h1{ font-size:1.3rem; margin-bottom:1.2rem; }
/* O topo do cartão: o logo, e por baixo o nome do portal em que se está a entrar -- são seis
   com a mesma cara, por isso tem de se ler qual é sem hesitar. O logótipo dos ficheiros de
   entrar é o preto; no escuro inverte-se (o hue-rotate devolve o laranja ao laranja). */
.admin-login-marca{ text-align:center; margin-bottom:1.6rem; }
.admin-login-marca img{ max-width:150px; height:auto; display:block; margin:0 auto .8rem; filter:var(--logo-filtro); }
.admin-login-marca p{ margin:0; font-family:var(--f-mono); font-size:.72rem; color:var(--text-3);
                      text-transform:uppercase; letter-spacing:.08em; }
.admin-login-card .btn-primary{ height:40px; }

/* 168px e não 150: "COLABORADORES" -- a etiqueta mais comprida que aqui aparece -- precisa
   de uns 117px em maiúsculas com espaçamento. O telemóvel tem o seu próprio mínimo, mais abaixo. */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:.8rem; margin-bottom:1.8rem; }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem 1.1rem; }
.stat-card b{ display:block; font-family:var(--f-ui); font-stretch:118%; font-weight:600; font-size:1.7rem; line-height:1.1;
              font-variant-numeric:tabular-nums; color:var(--text); margin-bottom:.3rem; }
/* Valores em euros: ao tamanho normal partiam-se em duas linhas. */
.stat-card b.stat-valor{ font-size:1.3rem; white-space:nowrap; }
/* O `overflow-wrap:anywhere` é o que impede uma etiqueta comprida ("COLABORADORES") de sair
   do cartão, seja qual for a palavra que lá venha a estar. */
.stat-card span{ font-family:var(--f-mono); font-size:.7rem; color:var(--text-3); text-transform:uppercase;
                 letter-spacing:.06em; overflow-wrap:anywhere; }

.current-thumb{ width:120px; border-radius:8px; border:1px solid var(--line); display:block; margin-bottom:.6rem; }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.7rem; margin:.8rem 0; }
.gallery-grid .g-item{ position:relative; }
.gallery-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.gallery-grid .g-remove{ position:absolute; top:4px; right:4px; background:var(--scrim); color:#fff; border-radius:50%; width:22px; height:22px; font-size:.75rem; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }

.toggle-row{ display:flex; align-items:center; gap:.7rem; }
/* As etiquetas de estado: uma pílula com um ponto -- e o ponto muda de FORMA com o estado
   (cheio = feito, contorno = à espera, traço = recusado), para não depender só da cor. */
.badge{ display:inline-flex; align-items:center; gap:.35rem; height:20px; padding:0 .55rem; border-radius:999px;
        font-size:.72rem; font-weight:500; white-space:nowrap; color:var(--text-2); background:var(--surface-3); }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-on{ background:var(--st-ok-bg); color:var(--st-ok); }
.badge-off{ background:var(--surface-3); color:var(--text-3); }
.badge-bad{ background:var(--st-bad-bg); color:var(--st-bad); }
.badge-bad::before{ height:1.5px; width:7px; border-radius:1px; }
/* A quarta cor: "já se mexeu, falta decidir". */
.badge-wait{ background:var(--st-pend-bg); color:var(--st-pend); }
.badge-wait::before{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; }
/* A etiqueta do tipo de ficheiro (PDF, Word…) não leva ponto: é um rótulo, não um estado. */
.badge-tipo{ margin-left:.45rem; vertical-align:.06em; white-space:nowrap; font-family:var(--f-mono); font-size:.66rem;
             letter-spacing:.04em; text-transform:uppercase; border-radius:4px; height:18px; }
.badge-tipo::before{ display:none; }
/* Um número ao lado de uma ligação do menu (À espera de ti) não é um estado. */
.admin-sidebar .badge::before{ display:none; }

/* ---- A janela da pré-visualização de documentos -------------------------------------
   Serve todos os portais. O documento é desenhado pelo próprio browser dentro de um
   <iframe>: tem procura, zoom e impressão, e não há visualizador que faça melhor. */
.janela-ficheiro{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; padding:2rem 1rem; background:var(--scrim);
}
.janela-ficheiro[hidden]{ display:none; }
.janela-ficheiro .jf-caixa{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow);
  width:min(1100px, 100%); height:min(90vh, 100%); display:flex; flex-direction:column; overflow:hidden;
}
.janela-ficheiro .jf-barra{ display:flex; align-items:center; gap:1rem; padding:.55rem .9rem;
  border-bottom:1px solid var(--line); background:var(--surface-2); }
.janela-ficheiro .jf-titulo{ font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.janela-ficheiro .jf-abrir{ margin-left:auto; font-size:.85rem; white-space:nowrap; }
.janela-ficheiro .jf-fechar{ background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--text-3); padding:0 .2rem; }
.janela-ficheiro .jf-fechar:hover{ color:var(--text); }
/* O documento lê-se sempre em papel branco, seja qual for o tema. */
.janela-ficheiro iframe{ flex:1; width:100%; border:0; background:var(--surface); }
@media (max-width: 640px){
  .janela-ficheiro{ padding:0; }
  .janela-ficheiro .jf-caixa{ height:100%; border-radius:0; }
}
/* As cores que as pessoas já associam a cada programa -- reconhecem-se antes de se ler a palavra. */
.tipo-pdf{    background:rgba(214,72,60,.14);  color:#d4685c; }
.tipo-word{   background:rgba(64,120,210,.15); color:#6f9be0; }
.tipo-excel{  background:rgba(48,150,90,.15);  color:#5cb37e; }
.tipo-ppt{    background:rgba(220,120,50,.15); color:#e08a4c; }
.tipo-imagem{ background:rgba(130,90,200,.15); color:#a68ae0; }
.tipo-cad{    background:rgba(40,140,160,.15); color:#52b0c0; }
.tipo-outro{  background:var(--surface-3); color:var(--text-3); }

/* Rodapé legal dos portais: discreto, mas sempre presente -- quem entra num portal deixa
   cá dados pessoais e tem direito a saber o que lhes acontece. */
.portal-legal{ margin:3rem 0 1rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.78rem; }
.portal-legal a{ color:var(--text-3); text-decoration:none; }
.portal-legal a:hover{ color:var(--accent); text-decoration:underline; }
.portal-copyright{ margin-left:auto; color:var(--text-3); }
@media (max-width:640px){ .portal-copyright{ margin-left:0; } }

/* ============ Telemóvel / tablet -- o menu lateral vira gaveta ============ */
.admin-nav-toggle{ display:none; }
.admin-scrim{ display:none; }
.admin-topbar{ display:none; }
.admin-nav-toggle-btn{ display:none; }
.tabbar{ display:none; }

@media (max-width:880px){
  .admin-main{ --pad:1rem; padding-bottom:3rem; }
  .painel-top{ margin-bottom:1rem; padding:0 .6rem 0 .5rem; gap:6px; }
  .painel-top-marca{ display:flex; }
  .painel-top-marca img{ height:26px; }
  .crumbs{ display:none; }
  .cmd-btn{ width:auto; max-width:none; padding:0; width:36px; height:36px; justify-content:center; }
  .cmd-btn span, .cmd-btn kbd{ display:none; }
  .top-btn{ width:36px; height:36px; }
  .admin-nav-toggle-btn{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0;
    border-radius:var(--r); cursor:pointer; color:var(--text);
  }
  .admin-nav-toggle-btn .i{ width:20px; height:20px; }
  .admin-sidebar{
    position:fixed; top:0; left:0; height:100vh; height:100dvh; width:min(300px,86vw); z-index:220;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow);
  }
  .admin-nav-toggle:checked ~ .admin-sidebar{ transform:translateX(0); }
  .admin-scrim{
    display:block; position:fixed; inset:0; background:transparent; pointer-events:none; z-index:210;
    transition:background .25s ease;
  }
  .admin-nav-toggle:checked ~ .admin-scrim{ background:var(--scrim); pointer-events:auto; }
  /* Na gaveta os alvos crescem: é um dedo, não um rato. */
  .admin-sidebar nav a, .nav-group-toggle{ min-height:42px; font-size:.95rem; }
  .nav-group-items a{ min-height:40px !important; font-size:.92rem !important; }
  .sb-search kbd, .sb-btn--recolher{ display:none; }
  .admin-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .admin-tabs button, .admin-tabs a{ flex-shrink:0; }
  .admin-page-head h1{ font-size:1.25rem; }
  .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
}

/* A barra de separadores de baixo: o que se abre todos os dias, à mão do polegar. */
@media (max-width:760px){
  body.painel{ font-size:15px; }
  .tabbar{
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:200;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background:var(--bg-raised); border-top:1px solid var(--line);
  }
  .tabbar:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .tabbar:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .tabbar > a, .tabbar > button, .tabbar > label{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; margin:0;
    border:0; background:none; color:var(--text-3); font-size:.68rem; font-weight:500; text-decoration:none; cursor:pointer;
    border-radius:8px;
  }
  .tabbar > [aria-current="page"]{ color:var(--accent); }
  .tabbar-ic{ position:relative; display:inline-flex; }
  .tabbar-ic .i{ width:22px; height:22px; }
  .tabbar-ic .count{ position:absolute; top:-5px; left:14px; height:16px; min-width:16px; font-size:9.5px; background:var(--accent); color:var(--accent-ink); }
  .admin-main{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .admin-main:has(.fat-barra-guardar){ padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px)); }
  .fat-barra-guardar{ bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
  /* A faixa de "instalar no telemóvel" fica por cima da barra, e não por baixo dela. */
  .faixa-instalar{ bottom:calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (hover:none){ .sb-search kbd, .cmd-btn kbd{ display:none; } }


/* ============ Calendário de férias (portal de colaboradores) ============
   Uma grelha de 12 meses x 31 dias. Os meios-dias mostram-se com metade da célula
   preenchida -- em cima a manhã, em baixo a tarde -- em vez de cores diferentes: assim
   vê-se logo QUAL metade do dia foi marcada, e usa-se só a laranja da marca. */
.ferias-opcoes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.ferias-opcao{
  display:flex; align-items:center; gap:.5rem; margin:0; cursor:pointer;
  border:1px solid var(--stone-line); border-radius:8px; padding:.5rem .8rem; background:var(--surface);
  font-size:.85rem; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0;
}
.ferias-opcao:has(input:checked){ border-color:var(--accent-2); background:var(--accent-wash); }
.ferias-opcao input{ margin:0; accent-color:var(--accent-2); }
.ferias-opcao b{ color:var(--stone-2); font-size:.78rem; font-weight:600; }
.ferias-amostra{ width:16px; height:16px; border:1px solid var(--stone-line); border-radius:3px; background:var(--surface); }
.ferias-amostra-inteiro{ background:var(--accent-2); }
.ferias-amostra-manha{ background:linear-gradient(to bottom, var(--accent-2) 50%, var(--surface) 50%); }
.ferias-amostra-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--accent-2) 50%); }

.ferias-calendario-wrap{ overflow-x:auto; border:1px solid var(--stone-line); border-radius:8px; }
.ferias-calendario{ border-collapse:collapse; width:100%; font-size:.76rem; }
.ferias-calendario th{
  font-family:var(--font-body); font-weight:600; color:var(--stone-2); background:var(--paper-2);
  padding:.35rem 0; text-align:center; font-size:.7rem;
}
/* As colunas de sabado e domingo ja se distinguem no cabecalho, e nao so nas celulas --
   assim ve-se a risca vertical do fim de semana de cima a baixo. */
.ferias-calendario th.ferias-col-fim-semana{ color:var(--stone-line); }
.ferias-calendario th.ferias-mes{
  text-align:left; padding:.35rem .7rem; white-space:nowrap; min-width:104px;
  position:sticky; left:0; z-index:1; background:var(--paper-2); color:var(--ink);
}
.ferias-calendario td{
  width:2.1rem; height:1.9rem; text-align:center; border:1px solid var(--stone-line);
  color:var(--stone); background:var(--surface); user-select:none;
}
/* Todas as regras de estado levam ".ferias-calendario td" a frente de proposito: sem isso
   perdiam para a regra base (.ferias-calendario td, que tambem tem uma classe e um
   elemento) e o fundo branco dela ganhava. Notou-se porque os meios-dias, que tem duas
   classes, apareciam bem e os dias inteiros nao. */
.ferias-calendario td.ferias-vazio{ background:var(--paper); border-color:var(--paper-2); }
.ferias-calendario td.ferias-fechado{ background:var(--paper-2); color:var(--stone-2); }
/* Um Feriado nao e o mesmo que um sabado: leva o vermelho claro da paleta, para se ver de
   relance onde caem e se poderem escolher os dias a volta deles. */
.ferias-calendario td.ferias-feriado{ background:var(--bad-wash); color:var(--bad); }
.ferias-calendario td.ferias-livre{ cursor:pointer; }
.ferias-calendario td.ferias-livre:hover{ background:var(--accent-wash); }

/* A marcar agora, e ja pedido/aprovado: fundo solido para o dia completo, e meia celula
   para manha/tarde -- em cima a manha, em baixo a tarde. */
.ferias-calendario td.ferias-sel{ background:var(--accent-2); color:var(--accent-ink); font-weight:600; }
.ferias-calendario td.ferias-sel.ferias-meio-manha{ background:linear-gradient(to bottom, var(--accent-2) 50%, var(--surface) 50%); color:var(--ink); }
.ferias-calendario td.ferias-sel.ferias-meio-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--accent-2) 50%); color:var(--ink); }
.ferias-calendario td.ferias-pedido-pendente{ background:var(--accent-wash); color:var(--accent); font-weight:600; cursor:not-allowed; }
.ferias-calendario td.ferias-pedido-pendente.ferias-meio-manha{ background:linear-gradient(to bottom, var(--accent-wash) 50%, var(--surface) 50%); }
.ferias-calendario td.ferias-pedido-pendente.ferias-meio-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--accent-wash) 50%); }
.ferias-calendario td.ferias-pedido-aprovado{ background:var(--good-wash); color:var(--good); font-weight:600; cursor:not-allowed; }
.ferias-calendario td.ferias-pedido-aprovado.ferias-meio-manha{ background:linear-gradient(to bottom, var(--good-wash) 50%, var(--surface) 50%); }
.ferias-calendario td.ferias-pedido-aprovado.ferias-meio-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--good-wash) 50%); }

.ferias-legenda{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.7rem; font-size:.76rem; color:var(--stone-2); }
.ferias-legenda span{ display:inline-flex; align-items:center; gap:.35rem; }
.ferias-chip{ width:13px; height:13px; border:1px solid var(--stone-line); border-radius:3px; display:inline-block; }
.ferias-chip-sel{ background:var(--accent-2); }
.ferias-chip-pendente{ background:var(--accent-wash); }
.ferias-chip-aprovado{ background:var(--good-wash); }
.ferias-chip-fechado{ background:var(--paper-2); }
.ferias-chip-feriado{ background:var(--bad-wash); }

/* O conjunto das etiquetas de dias de um pedido de férias. Existe para ser um bloco só:
   ver o comentário em vacation_days_html(). Quebra de linha quando não cabe. */
.ferias-etiquetas{ display:inline-flex; flex-wrap:wrap; align-items:baseline; }
.ferias-etiqueta{
  display:inline-block; background:var(--paper-2); border-radius:4px; padding:.1rem .35rem;
  margin:.1rem .15rem .1rem 0; font-size:.76rem; white-space:nowrap;
}
.ferias-etiqueta-meio{ background:var(--accent-wash); color:var(--accent); }
.ferias-etiqueta small{ font-size:.62rem; font-weight:700; margin-left:.15rem; }

/* ============ Registo Semanal — a grelha da semana ============
   Uma linha por tarefa, uma coluna por dia. Os totais (do dia, da linha, da semana) sao
   calculados no browser a cada tecla, mas revalidados sempre no servidor. */
.rs-semana{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.rs-wrap{ overflow-x:auto; border:1px solid var(--stone-line); border-radius:8px; }
.rs-grelha{ border-collapse:collapse; width:100%; font-size:.85rem; background:var(--surface); }
.rs-grelha th, .rs-grelha td{ border:1px solid var(--stone-line); padding:.3rem .35rem; text-align:center; }
.rs-grelha thead th{ background:var(--paper-2); color:var(--stone-2); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-body); font-weight:600; }
.rs-grelha thead th small{ font-weight:400; text-transform:none; letter-spacing:0; }
/* A coluna da tarefa fica parada enquanto os dias rolam -- é o mesmo que o calendário de
   Férias já fazia. Sem isto, num telemóvel arrasta-se às cegas: vêm-se números sem se saber
   de que tarefa são. A sombra faz de risca: com "sticky", a borda da célula rola com a
   tabela e a coluna ficava colada aos dias. */
.rs-grelha th.rs-tarefa{
  text-align:left; min-width:200px; background:var(--paper-2);
  position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--stone-line);
}
.rs-grelha thead th.rs-tarefa{ z-index:2; }
.rs-grelha tbody th.rs-tarefa{ font-weight:500; font-family:var(--font-body); font-size:.84rem;
  color:var(--ink); text-transform:none; letter-spacing:0; background:var(--surface); }
.rs-estado{ display:block; color:var(--stone-2); font-size:.7rem; font-weight:400; }
.rs-grelha th.rs-fechado{ color:var(--stone-line); }
.rs-fim-semana{ background:var(--paper); }
.rs-grelha td.rs-total, .rs-grelha th.rs-total{ font-weight:600; background:var(--paper-2); }
.rs-grelha tfoot td{ font-weight:600; background:var(--paper-2); }
.rs-h{ width:2.6rem; padding:.2rem; text-align:center; border:1px solid var(--stone-line);
  border-radius:4px; font-family:inherit; font-size:.84rem; }
.rs-h[readonly]{ background:var(--paper-2); color:var(--stone-2); }
.rs-nota{ border:none; background:none; cursor:pointer; color:var(--stone-line); font-size:.8rem; padding:0 .1rem; }
.rs-nota:hover{ color:var(--accent-2); }
.rs-nota-cheia{ color:var(--accent-2); }
/* Dia ja decidido (aprovado ou rejeitado) ou de ferias: a celula fica so de leitura, e o
   comentario e o comprovativo acompanham-na -- deixar o lapis a abrir uma caixa que nao vai
   gravar nada e pior do que nao o mostrar. Alterar isto passa a ser so na aplicacao. */
.rs-nota:disabled{ cursor:not-allowed; color:var(--stone-line); opacity:.45; }
.rs-nota:disabled:hover{ color:var(--stone-line); }
.rs-recusa{ color:var(--bad); font-weight:700; cursor:help; }
.rs-automatica td{ background:var(--good-wash); color:var(--good); font-weight:600; }
.rs-excede{ color:var(--bad) !important; }
.rs-falta{ color:var(--accent) !important; }
.rs-rodape{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.rs-escolher{ width:auto; min-width:230px; max-width:100%; }
.rs-balanco{ margin-left:auto; font-size:.85rem; color:var(--stone-2); }
.rs-balanco b{ font-size:1.05rem; color:var(--ink); }
.rs-anexo{ cursor:pointer; color:var(--stone-line); font-size:.8rem; margin:0; display:inline; }
.rs-anexo:hover{ color:var(--accent-2); }
.rs-anexo-cheio{ color:var(--good); }
.rs-anexo-ver{ font-size:.75rem; }
/* Horas Extra: sabado, domingo e feriado nao bloqueiam -- so se assinalam, porque e o que
   faz variar o valor a receber. */
.rs-grelha th.he-especial, .rs-grelha td.he-especial{ background:var(--accent-wash); }
.he-feriado{ color:var(--bad); font-weight:600; }

/* ------------------------------------------------------------------ Detalhe da fatura
   Reproduz a leitura do documento emitido (blocos, linhas, resumo de IVA, totais à
   direita) na paleta do Portal: onde o original usa azul, usa-se o laranja da casa. */
.fat-doc{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.2rem; align-items:start; }
/* Sem coluna lateral (a ficha sem fotografia, por exemplo) nao ha nada a reservar: o corpo
   ocupa a largura toda, em vez de deixar 300px em branco a direita. */
.fat-doc:not(:has(.fat-totais)){ grid-template-columns:minmax(0,1fr); }
.fat-corpo{ display:flex; flex-direction:column; gap:1.2rem; min-width:0; }

/* Os blocos estavam encostados uns aos outros, em todas as páginas dos quatro portais:
   dois blocos seguidos liam-se como um só, e o cabeçalho cor-de-laranja do segundo
   parecia mais uma linha do primeiro. A margem vai no `+` e não em todos, para o
   último de uma página não deixar um vão por baixo. */
.fat-bloco{ background:var(--surface); border:1px solid var(--stone-line); border-radius:10px; overflow:hidden; }
/* Só o que vem DEPOIS de um bloco. O `.stat-grid` e o `.admin-card` já têm margem em
   baixo -- pôr também aqui dava o dobro do espaço. */
.fat-bloco + .fat-bloco,
.fat-bloco + .stat-grid,
.fat-bloco + .admin-card{ margin-top:1.1rem; }
.fat-bloco h3, .fat-bloco > h2{ margin:0; padding:.7rem 1.2rem; background:var(--accent-wash);
               color:var(--accent); font-size:.95rem; border-bottom:1px solid var(--stone-line);
               display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fat-bloco.fat-preenchido > h2{ margin-bottom:1.1rem; }
.fat-bloco > p, .fat-bloco > .fat-campos, .fat-bloco > div[style], .fat-bloco > table{ margin:0; }
.fat-bloco > p{ padding:1rem 1.2rem; }
.fat-vazio{ color:var(--stone-2); font-size:.88rem; }

.fat-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
             gap:1rem 1.4rem; padding:1.1rem 1.2rem; }
.fat-campos > div{ min-width:0; }
.fat-campos span{ display:block; font-size:.74rem; text-transform:uppercase;
                  letter-spacing:.05em; color:var(--stone-2); margin-bottom:.15rem; }
.fat-campos strong{ font-weight:600; font-size:.95rem; word-break:break-word; }
.fat-campos .fat-largo{ grid-column:span 2; }

.fat-linhas{ width:100%; border-collapse:collapse; font-size:.88rem; }
.fat-linhas th{ text-align:left; padding:.6rem .8rem; background:var(--paper-2);
                color:var(--stone); font-size:.74rem; text-transform:uppercase;
                letter-spacing:.04em; font-weight:600; white-space:nowrap; }
.fat-linhas td{ padding:.65rem .8rem; border-top:1px solid var(--stone-line); vertical-align:top; }
.fat-linhas .num{ text-align:right; white-space:nowrap; }
.fat-isento{ color:var(--accent); font-weight:600; }
.fat-resumo th, .fat-resumo td{ font-size:.86rem; }

.fat-motivo{ padding:1rem 1.2rem; margin:0; font-size:.9rem; }
.fat-motivo strong{ color:var(--accent); }
.fat-mencao{ padding:0 1.2rem 1.1rem; margin:0; color:var(--good); font-size:.86rem; }
.fat-duas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }

.fat-totais{ background:var(--surface); border:1px solid var(--stone-line); border-radius:10px;
             overflow:hidden; position:sticky; top:1rem; }
.fat-totais h3{ margin:0; padding:.7rem 1.2rem; background:var(--accent-wash);
                color:var(--accent); font-size:.95rem; border-bottom:1px solid var(--stone-line); }
.fat-totais dl{ margin:0; padding:.6rem 1.2rem 1rem; }
.fat-totais dl > div{ display:flex; justify-content:space-between; gap:.8rem;
                      padding:.45rem 0; font-size:.88rem; }
.fat-totais dt{ color:var(--stone-2); }
.fat-totais dd{ margin:0; font-weight:600; white-space:nowrap; }
.fat-totais .fat-realce{ border-top:1px solid var(--stone-line); }
.fat-totais .fat-total{ border-top:2px solid var(--accent-2); margin-top:.3rem; padding-top:.6rem; }
.fat-totais .fat-total dt{ color:var(--ink); font-weight:600; }
.fat-totais .fat-total dd{ font-size:1.1rem; color:var(--accent); }
.fat-paga{ margin:0; padding:.7rem 1.2rem; background:var(--good-wash); color:var(--good);
           font-size:.82rem; font-weight:600; }

@media (max-width:900px){
  .fat-doc{ grid-template-columns:1fr; }
  .fat-totais{ position:static; }
  .fat-campos .fat-largo{ grid-column:auto; }
}

/* A barra de gravar dos formularios de edicao. Fica presa no fundo do ecra: num formulario
   de sete blocos, o botao estava no fim do scroll e so se lá chegava a rolar. */
.fat-barra-guardar{ position:sticky; bottom:.6rem; z-index:5; display:flex; gap:.6rem;
                    align-items:center; flex-wrap:wrap; padding:.9rem 1.2rem;
                    background:var(--surface); border:1px solid var(--stone-line); border-radius:10px;
                    box-shadow:0 -2px 10px rgba(23,21,18,.10); margin-top:1.4rem; }
/* Espaco para o conteudo poder passar por baixo da barra sem ficar tapado. */
.admin-main:has(.fat-barra-guardar){ padding-bottom:7rem; }

/* O painel de entrada do portal do colaborador: os cartoes de numeros passaram a ser
   links, e os dez atalhos que eram uma parede de paragrafos passaram a duas listas. */
a.stat-card{ text-decoration:none; color:inherit; transition:border-color .12s ease; }
a.stat-card:hover{ border-color:var(--accent-2); }
/* A seta nao herda o maiusculas do rotulo do cartao -- ali e um rotulo, aqui e uma frase. */
.stat-card .stat-seta{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--accent);
                       font-weight:600; text-transform:none; letter-spacing:0; }
.stat-grid a.stat-card{ display:flex; flex-direction:column; }
.stat-grid a.stat-card .stat-seta{ margin-top:auto; padding-top:.5rem; }
.portal-atalhos{ list-style:none; margin:0; padding:1rem 1.2rem; display:flex;
                 flex-direction:column; gap:.75rem; }
.portal-atalhos li{ min-width:0; }
.portal-atalhos li > a{ font-weight:600; }
.portal-atalhos li > span{ display:block; font-size:.82rem; color:var(--stone-2);
                           margin-top:.1rem; }

/* O resumo das fichas que ja tinham separadores (Colaborador, Obra): nao pode ir para a
   coluna direita do fat-doc, porque os separadores ocupam a largura toda -- fica em cima,
   em linha, com os mesmos numeros. */
.fat-resumo-topo{ background:var(--surface); border:1px solid var(--stone-line); border-radius:10px;
                  overflow:hidden; margin-bottom:1.2rem; }
.fat-resumo-topo h3{ margin:0; padding:.7rem 1.2rem; background:var(--accent-wash);
                     color:var(--accent); font-size:.95rem;
                     border-bottom:1px solid var(--stone-line); }
.fat-resumo-topo dl{ margin:0; padding:.9rem 1.2rem; display:grid;
                     grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.9rem 1.4rem; }
.fat-resumo-topo dl > div{ min-width:0; }
.fat-resumo-topo dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
                     color:var(--stone-2); margin-bottom:.15rem; }
.fat-resumo-topo dd{ margin:0; font-weight:600; font-size:.95rem; word-break:break-word; }
.fat-resumo-topo .destaque dd{ color:var(--accent); }
.fat-resumo-topo .mau dd{ color:var(--bad); }

/* A nota explicativa que estava num .admin-card cinzento por cima de tudo. Passa a ser
   discreta -- o texto continua la, mas deixa de competir com o conteudo. */
.fat-nota{ background:var(--paper-2); border:1px solid var(--stone-line); border-radius:8px;
           padding:.8rem 1.2rem; margin-bottom:1.2rem; color:var(--stone-2); font-size:.84rem; }
.fat-nota p{ margin:0; }

/* Variante do bloco para as fichas do admin, cujo conteudo (field/field-row/formularios)
   vinha dentro de .admin-card e trazia de la o espacamento. Sem isto, converter um cartao
   num bloco encostava tudo as bordas. */
.fat-bloco.fat-preenchido{ padding-bottom:1.1rem; }
.fat-bloco.fat-preenchido > h3{ margin-bottom:1.1rem; }
.fat-bloco.fat-preenchido > *:not(h3):not(h2){ margin-left:1.2rem; margin-right:1.2rem; }
.fat-bloco.fat-preenchido > .field:last-child,
.fat-bloco.fat-preenchido > .field-row:last-child{ margin-bottom:0; }
.fat-bloco.fat-preenchido > div[style]{ margin-left:1.2rem; margin-right:1.2rem; }
/* As tabelas e o aviso continuam a sangrar de bordo a bordo, como nos outros blocos. */
.fat-bloco.fat-preenchido > .fat-envolve, .fat-bloco.fat-preenchido > table,
.fat-bloco.fat-preenchido > .fat-aviso{ margin-left:0; margin-right:0; }

/* As listas do admin usam os mesmos blocos: a contagem no titulo, os filtros numa linha
   propria e a nota de "so consulta" no rodape, em vez do cartao cinzento que estava por
   cima de tudo. */
.fat-bloco h3 .fat-cont{ margin-left:auto; font-weight:600; color:var(--stone-2);
                         font-size:.76rem; text-transform:none; letter-spacing:0; }
.fat-filtros{ display:flex; gap:.9rem; align-items:flex-end; flex-wrap:wrap;
              padding:.9rem 1.2rem; border-bottom:1px solid var(--stone-line); }
.fat-filtros label{ display:flex; flex-direction:column; gap:.2rem; font-size:.74rem;
                    text-transform:uppercase; letter-spacing:.05em; color:var(--stone-2); }
.fat-filtros select, .fat-filtros input{ font-size:.88rem; padding:.35rem .5rem;
                                         border:1px solid var(--stone-line); border-radius:6px;
                                         background:var(--surface); color:var(--ink); min-width:160px; }
.fat-rodape{ margin:0; padding:.8rem 1.2rem; border-top:1px solid var(--stone-line);
             color:var(--stone-2); font-size:.82rem; }
.fat-somatorio{ display:flex; gap:1.4rem; justify-content:flex-end; flex-wrap:wrap;
                padding:.8rem 1.2rem; border-top:1px solid var(--stone-line);
                font-size:.88rem; font-variant-numeric:tabular-nums; }
.fat-somatorio span{ color:var(--stone-2); }
.fat-somatorio strong{ margin-left:.4rem; }
.fat-somatorio .destaque strong{ color:var(--accent); }
.fat-somatorio .bom strong{ color:var(--good); }
/* A taxa de IVA de uma linha, por baixo do valor. Discreta de propósito: o número
   que se lê é o valor; a taxa está lá para se confirmar, não para competir. */
.mapa-iva{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.02em;
           color:var(--stone-2); margin-top:.1rem; }
.fat-aviso{ margin:0; padding:.7rem 1.2rem; background:var(--bad-wash); color:var(--bad);
            font-size:.82rem; font-weight:600; }

/* O orcamento pede uma decisao ao Cliente -- o bloco fica em cima, antes do documento, e
   marcado, para nao se perder entre os blocos de leitura. */
/* Linhas de estrutura de um Mapa de Orçamento (Cabeçalho, Subtotal, Total Geral): não são
   trabalho, são a arrumação do mapa -- e têm de se distinguir das linhas normais. */
.fat-linha-destaque td{ background:var(--accent-wash); font-weight:600; }

/* --- Linhas do Mapa de Orçamento (detalhe interno) ------------------------------------
   Não é tabela de propósito. Uma tabela larga com campos editáveis dentro é o pior que se
   põe num telemóvel: ou desliza para o lado -- e perde-se a descrição de vista enquanto se
   escreve o preço -- ou aperta os campos até o dedo não lhes acertar. Aqui cada linha é uma
   grelha: em ecrã largo as colunas alinham e lê-se como uma tabela; em ecrã estreito cada
   linha vira um cartão, com o rótulo de cada campo ao lado. */
.mapa-linhas{ display:flex; flex-direction:column; gap:1px; background:var(--stone-line);
  border:1px solid var(--stone-line); border-radius:8px; overflow:hidden; }
.mapa-linha{
  display:grid; align-items:center; gap:.5rem;
  /* O preço e o valor com 8rem: com 6,5 um «595 842,50 €» a negrito partia o «€» para a
     linha de baixo. A largura sai da Descrição, que é a única que cresce. */
  grid-template-columns:5rem minmax(0,1fr) 5.5rem 4.5rem 8rem 8rem 5rem 7rem;
  padding:.5rem .7rem; background:var(--linha-cor, var(--surface));
}
.mapa-linha-cabeca{ background:var(--paper-2); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.03em; color:var(--stone-2); font-weight:600; }
/* As linhas de estrutura, cada uma com o seu peso: um Cabeçalho abre um capítulo, um
   Subtotal fecha-o, e o Total Geral fecha o mapa. Partilhavam todas o mesmo tom, e num mapa
   com doze capítulos não se distinguia o fim de um do princípio do outro. Não levam a cor da
   linha: essa é para marcar trabalho, e estas não são trabalho. */
.mapa-linha-estrutura{ font-weight:600; }
.mapa-linha[data-tipo="Cabeçalho"]{
  background:var(--accent-wash); color:var(--accent);
  text-transform:uppercase; letter-spacing:.02em; font-size:.9em;
  border-top:2px solid var(--accent-2);
}
.mapa-linha[data-tipo="Subtotal"]{ background:var(--paper-2); font-style:italic; }
/* O Texto Livre: uma nota escrita na aplicação, de ponta a ponta da linha. O verde-água é o
   mesmo do ecrã da aplicação e do Excel -- é por ele que se reconhece, de relance, que
   aquela linha não é trabalho nem dinheiro. A cor vem na --linha-cor quando ele lhe pôs
   outra; o valor aqui é só a rede de segurança. */
.mapa-linha-texto{ background:var(--linha-cor, #dff2ec); }
/* O envio de SMS escrito a mao (Admin -> SMS -> Enviar SMS). Duas colunas em ecra largo --
   quem recebe a' esquerda, o texto a' direita -- e uma so' num telemovel. */
.sms-enviar-grelha{ display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  gap:1rem; align-items:start; }
@media (max-width: 720px){ .sms-enviar-grelha{ grid-template-columns:1fr; } }
.sms-lista-contactos{ max-height:260px; overflow:auto; border:1px solid var(--line);
  border-radius:8px; padding:.5rem; background:var(--surface); }

/* ------------------------------------------------------------------- A GALERIA
   O repositorio interno de fotos de obra (admin/empresa e portal de colaboradores).
   A grelha enche-se sozinha: em ecra largo cabem seis ou sete miniaturas por linha, num
   telemovel cabem duas -- e nao ha' aqui medida fixa nenhuma por isso mesmo. */
/* O `.fat-bloco` normal (sem `.fat-preenchido`) nao tem padding nenhum dos seus -- quem o
   usa costuma ser so' moldura a' volta de um `<table>` ou de cartoes aninhados (que se
   colam de proposito a`s bordas). A Galeria e' o unico sitio que poe conteudo solto (o
   formulario de filtros) directamente la' dentro, sem um cartao a' volta -- e por isso
   ficava colado a` borda esquerda, ele: «esta muito colado a esquerda». `.gal-pagina` da'
   ao wrapper o mesmo respiro que um `.fat-preenchido` da' ao que esta' dentro dele; os
   cartoes aninhados (Pastas, Carregar fotos) continuam a esticar-se de borda a borda. */
.gal-pagina{ padding:0 1.2rem 1.2rem; }
.gal-pagina > .fat-bloco{ margin-left:-1.2rem; margin-right:-1.2rem; }
.gal-filtros{ display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; margin-bottom:1rem; }
.gal-filtros label{ display:block; font-size:.8rem; color:var(--stone-2); margin-bottom:.2rem; }
.gal-cabeca{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:0 0 .6rem; flex-wrap:wrap; }
.gal-cabeca h3{ margin:0; }
.gal-grelha{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:.8rem; margin-bottom:1rem; }
.gal-foto{ position:relative; }
.gal-foto img{ width:100%; height:120px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); display:block; background:var(--paper-2); }
.gal-foto .legenda{ font-size:.78rem; color:var(--stone-2); margin:.25rem 0 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* AQUI ESTEVE `.gal-foto .apagar{ position:absolute; top:.3rem; right:.3rem; opacity:.9 }`,
   de quando o apagar era um botao com a palavra, sozinho no canto. Ficou para tras quando os
   dois icones entraram -- e como o botao novo TAMBEM tem a classe `apagar`, a regra velha
   apanhava-o, tirava-o do `.gal-acoes` e colava-o ao canto POR CIMA do descarregar. Via-se
   um icone onde ha' dois, e o de baixo nao se podia sequer carregar.

   Nao se renomeou a classe nova: o que estava a mais era a regra, e uma classe chamada
   `apagar` num botao de apagar e' o nome certo. */
/* AS DUAS ACCOES DA FOTO -- descarregar e apagar -- em icone, e nao em palavra. Com
   cinquenta fotos, a palavra «Apagar» repetida cinquenta vezes era o que mais se via na
   grelha; agora o que se ve' e' a fotografia.

   Redondos e pequenos, com sombra: e' a sombra que os faz ler-se por cima de uma foto
   clara, onde uma borda fina sozinha desaparece. */
.gal-acoes{ position:absolute; top:.3rem; right:.3rem; display:flex; gap:.25rem; z-index:2; }
.gal-btn{ width:26px; height:26px; border-radius:50%; border:1px solid var(--stone-line);
  background:var(--surface); color:var(--stone); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:background .12s, color .12s, border-color .12s; }
.gal-btn svg{ width:14px; height:14px; }
.gal-btn:hover{ background:var(--surface); color:var(--ink); }
/* O VERMELHO SO' NO ICONE, ate' se lhe tocar. Um botao cheio de vermelho em cada foto
   gritava mais do que a propria fotografia; ao passar o rato enche-se, que e' quando a
   pessoa precisa de ter a certeza do que vai carregar. */
.gal-btn.apagar{ color:var(--bad); border-color:var(--st-bad-bg); }
.gal-btn.apagar:hover{ background:var(--bad); color:var(--accent-ink); border-color:var(--bad); }
.gal-btn.descarregar:hover{ background:var(--accent-2); color:var(--accent-ink); border-color:var(--accent-2); }
/* O teclado tem de ver onde esta' -- os icones nao tem texto que o diga. */
.gal-btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
/* A CAIXA DE SELECIONAR, no canto oposto ao Apagar -- ele: «queria um seleccionar varias
   imagens para conseguir apagar». Fica sempre visivel (nao so' ao passar o rato): num
   telemovel nao ha' "passar o rato", e e' la' que a selecao multipla mais serve. */
.gal-foto-check{ position:absolute; top:.4rem; left:.4rem; z-index:2; width:20px; height:20px;
  cursor:pointer; accent-color:var(--accent-2); }
.gal-barra-selecao{ display:none; }
.gal-barra-selecao.mostrar{ display:flex; }
/* AS PASTAS, numa lista com um apagar por cada -- ele: «na galeria como apago pastas?».
   So' havia criar; isto e' a lista que faltava, sem ter de entrar "dentro" de cada pasta
   primeiro para descobrir que existe. */
.gal-pastas-lista{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.gal-pasta-chip{ display:inline-flex; align-items:center; gap:.3rem; background:var(--paper-2);
  border:1px solid var(--stone-line); border-radius:20px; padding:.35rem .4rem .35rem .8rem;
  font-size:.8rem; }
.gal-pasta-apagar,
.gal-pasta-renomear{ border:0; background:transparent; color:var(--stone-2); cursor:pointer;
  font-size:1.05rem; line-height:1; width:20px; height:20px; border-radius:50%; padding:0; }
.gal-pasta-apagar:hover{ background:var(--bad-wash); color:var(--bad); }
/* O RENOMEAR NAO ACENDE A VERMELHO. Partilha a forma do apagar -- sao dois botoes no
   mesmo sitio e tem de parecer irmaos --, mas o vermelho e' o sinal do que nao se desfaz,
   e mudar o nome a uma pasta desfaz-se mudando-o outra vez. */
.gal-pasta-renomear{ font-size:.85rem; }
.gal-pasta-renomear:hover{ background:var(--paper); color:var(--ink); }

/* A MEDIÇÃO: de onde vem a quantidade da linha de cima. Lê-se recuada e mais discreta --
   não é um trabalho a par dos outros, é a conta de um deles. O recuo é no descritivo e não
   na linha toda: as colunas dos números têm de continuar alinhadas com as de cima, senão
   os 38,32 deixam de se ler debaixo dos 76. */
.mapa-linha-medicao{ background:var(--surface-2); font-size:.92em; color:var(--text-2); }
/* A linha por m² (área × preço por m²): o preço da obra, ou de um capítulo, e não um
   trabalho. Fundo laranja claro, como na aplicação. */
.mapa-linha-m2{ background:var(--accent-soft); font-weight:600; }
.mapa-linha-medicao .mapa-c-desc{ padding-left:1.6rem; }
.mapa-linha-medicao .mapa-c-artigo{ padding-left:.8rem; }
/* E na tabela do Portal de Clientes, que é uma <table> e não esta grelha. */
tr.mapa-linha-medicao > td{ background:var(--surface-2); font-size:.92em; }
tr.mapa-linha-medicao > td:nth-child(2){ padding-left:1.6rem; }
/* A AGREGAÇÃO é o total de um conjunto de linhas (a negrito); a ANEXA é uma parte do que ela
   cobra -- mais discreta, mas SEM recuo: fica no capítulo onde está e lê-se como uma linha
   do capítulo. A nota diz a que total pertence. */
.mapa-linha-agregacao{ font-weight:600; }
.mapa-linha-anexa{ background:var(--surface-2); font-size:.92em; color:var(--text-2); }
tr.mapa-linha-anexa > td{ background:var(--surface-2); font-size:.92em; }
.mapa-anexa-nota{ display:block; font-size:.85em; font-style:italic; color:var(--text-2); }
.mapa-c-texto{ grid-column:1 / 8; white-space:pre-wrap; line-height:1.45; }
.mapa-c-texto[data-negrito="1"]{ font-weight:700; }
.mapa-c-texto[data-italico="1"]{ font-style:italic; }
.mapa-c-texto[data-tamanho="Pequeno"]{ font-size:.85em; }
.mapa-c-texto[data-tamanho="Grande"]{ font-size:1.15em; }
.mapa-linha-texto.fat-linha-rasurada .mapa-c-texto{ text-decoration:line-through; }
.mapa-linha[data-tipo="Total Geral"]{ background:var(--text); color:var(--bg); }
.mapa-linha[data-tipo="Total Geral"] .mapa-status-texto{ color:inherit; opacity:.7; }
/* No telemovel cada linha e um cartao, e os rotulos vem de ::before em cinzento -- que
   sobre o fundo escuro do Total Geral nao se le. */
.mapa-linha[data-tipo="Total Geral"] > span::before{ color:inherit; opacity:.65; }
.mapa-linha[data-tipo="Total Geral"] .mapa-c-desc{ border-bottom-color:currentColor; }
.mapa-linha .mapa-c-qtd, .mapa-linha .mapa-c-preco, .mapa-linha .mapa-c-valor{ text-align:right; }
/* Um número nunca se parte: «595 842,50» numa linha e o «€» noutra lia-se como dois valores. */
.mapa-linha > .mapa-c-qtd, .mapa-linha > .mapa-c-preco, .mapa-linha > .mapa-c-valor{ white-space:nowrap; }
.mapa-linha-cabeca .mapa-c-qtd, .mapa-linha-cabeca .mapa-c-preco,
.mapa-linha-cabeca .mapa-c-valor{ text-align:right; }
/* A taxa: ao lado do valor, e em tom mais calmo -- e o qualificador do numero, nao o
   numero. Ao centro e nao a direita: a direita encostava ao "Cor / Rasura" que vem a
   seguir e alinha a esquerda, e as duas palavras acabavam coladas no cabecalho. */
.mapa-linha .mapa-c-iva, .mapa-linha-cabeca .mapa-c-iva{ text-align:center; }
.mapa-linha .mapa-c-iva{ color:var(--stone-2); font-size:.85rem; white-space:nowrap; }
.mapa-linha.fat-linha-rasurada .mapa-c-iva{ text-decoration:line-through; }
.mapa-linha input[type=text]{
  width:100%; padding:.3rem .4rem; text-align:right; font:inherit;
  border:1px solid var(--stone-line); border-radius:5px; background:var(--surface); min-width:0;
}
.mapa-linha .mapa-c-uni input[type=text]{ text-align:left; }
.mapa-linha input[type=color]{
  width:2rem; height:1.8rem; padding:0; border:1px solid var(--stone-line);
  border-radius:5px; background:var(--surface); cursor:pointer; vertical-align:middle;
}
.mapa-c-extra{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mapa-rasurar{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem;
  color:var(--stone); cursor:pointer; }
.mapa-rasurar input{ margin:0; }
/* O Status é o ícone. O texto ao lado só aparece quando há espaço -- num telemóvel o ícone
   diz o que é preciso, e é para isso que ele existe. */
.mapa-status{ display:inline-block; margin-left:.35rem; font-size:.95rem; white-space:nowrap; }
.mapa-status-texto{ font-size:.75rem; color:var(--stone-2); }
.mapa-guardar{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
/* Ha alteracoes por gravar: o botao chama por si. Sem isto, escolher uma cor e sair da
   pagina perdia a escolha, e nada no ecra dizia que faltava um passo. */
.mapa-guardar-urgente{ box-shadow:0 0 0 3px var(--accent-wash); }
#mapa-por-gravar{ color:var(--accent); font-weight:600; }

/* Uma linha rasurada, aqui dentro. A regra geral de cima risca `td`, e nestas linhas as
   células são `span` -- não lhes chegava. E risca-se a descrição e o valor, que é onde a
   rasura quer dizer alguma coisa, e não a linha inteira: um campo de texto riscado por
   dentro não se lê, e os campos têm de continuar a servir para desfazer a rasura. */
.mapa-linha.fat-linha-rasurada{ color:var(--text-3); }
.mapa-linha.fat-linha-rasurada .mapa-c-desc,
.mapa-linha.fat-linha-rasurada .mapa-c-valor{ text-decoration:line-through; }
.mapa-linha.fat-linha-rasurada .fat-rasura,
.mapa-linha.fat-linha-rasurada .mapa-status{ text-decoration:none; display:inline-block; }

/* A conversa dos Ajustes */
.mapa-conversa{ list-style:none; margin:.6rem 0 0; padding:0; display:flex;
  flex-direction:column; gap:.6rem; }
.mapa-conversa li{ border:1px solid var(--stone-line); border-radius:8px; padding:.6rem .8rem;
  background:var(--surface); }
.mapa-conversa-quem{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  font-size:.8rem; color:var(--stone-2); }
.mapa-conversa-quem strong{ color:var(--ink); font-size:.9rem; }
.mapa-conversa li p{ margin:.35rem 0 0; }
.mapa-novo-ajuste{ margin-top:.8rem; display:flex; flex-direction:column; gap:.5rem;
  align-items:flex-start; }
.mapa-novo-ajuste textarea{ width:100%; padding:.5rem .6rem; font:inherit;
  border:1px solid var(--stone-line); border-radius:6px; }

/* 780 e nao 560, que era onde isto estava. As oito colunas da grelha somam 40rem de medida
   fixa (640px), mais sete gaps de meio rem e o padding: a linha nao cabe em menos de ~718px,
   e o `.mapa-linhas` tem `overflow:hidden` (precisa dele para os cantos redondos). Resultado,
   entre os 561px e os ~750px: a ultima coluna -- "Cor / Rasura", ou "Status" para quem so le
   -- ficava CORTADA, e sem barra nenhuma para la chegar. Nao se riscava uma linha nem se lhe
   mudava a cor.
   Apanhava o iPad mini ao alto (744px), o ecra dividido do iPad, os tablets Android e o
   iPhone deitado. O corte tem de ser onde a grelha deixa de caber, nao onde comeca o
   telemovel. */
@media (max-width:780px){
  .mapa-linhas{ display:flex; flex-direction:column; gap:.6rem; background:none;
    border:none; border-radius:0; overflow:visible; }
  .mapa-linha{
    display:block; border:1px solid var(--stone-line); border-radius:8px;
    padding:.7rem .8rem; background:var(--linha-cor, var(--surface));
  }
  /* Depois do .mapa-linha, e nao antes: a linha de cabecalho tem as duas classes, e com a
     mesma especificidade ganha a que vem por ultimo. Ao contrario, o display:block
     desfazia este display:none -- a linha de titulos ficava a vista E, por ser uma grelha
     de sete colunas fixas, esticava a caixa toda para la da largura do ecra. */
  .mapa-linha-cabeca{ display:none; }
  /* Cada campo numa linha sua: rótulo à esquerda, o que interessa à direita, onde o polegar
     já está. */
  .mapa-linha > span{
    display:flex; justify-content:space-between; align-items:center; gap:.8rem;
    padding:.3rem 0; text-align:right;
  }
  .mapa-linha > span::before{
    content:attr(data-rotulo); flex:0 0 auto; text-align:left;
    font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--stone-2);
  }
  /* A descrição é o título do cartão, não um campo. */
  .mapa-linha > span.mapa-c-texto{ display:block; text-align:left; padding:0; }
  .mapa-linha > span.mapa-c-texto::before{ content:none; }
  .mapa-linha > span.mapa-c-desc{ display:block; text-align:left; font-weight:600;
    padding:0 0 .4rem; border-bottom:1px solid var(--stone-line); margin-bottom:.3rem; }
  .mapa-linha > span.mapa-c-desc::before{ content:none; }
  /* O artigo vive por cima da descrição, pequeno -- e desaparece quando não há. */
  .mapa-linha > span.mapa-c-artigo{ display:block; text-align:left; padding:0;
    font-size:.75rem; color:var(--stone-2); }
  .mapa-linha > span.mapa-c-artigo::before{ content:none; }
  /* As células vazias das linhas de estrutura não viram linhas em branco no cartão. O
     :empty não chega -- uma célula com só espaços não é "empty" para o CSS --, e por isso
     quem a desenha marca-a. Em ecrã largo ela fica: é uma grelha, e sem a célula as colunas
     seguintes subiam uma posição. */
  .mapa-linha > span:empty,
  .mapa-linha > span.mapa-c-vazia{ display:none; }
  .mapa-linha input[type=text]{ width:8.5rem; padding:.45rem .5rem; }
  .mapa-c-extra{ justify-content:space-between; }
}

/* O botao de gravar a ocupar a largura toda e coisa de telemovel, e nao do cartao: fica nos
   560, onde sempre esteve. Subiu com o resto quando o bloco de cima passou para 780, e num
   tablet de 700px dava um botao de ponta a ponta sem razao nenhuma. */
@media (max-width:560px){
  .mapa-guardar .btn{ width:100%; text-align:center; }
}

/* Linha rasurada: foi cortada do mapa. Continua à vista -- é isso que dá a transparência
   de "isto esteve aqui e saiu" -- mas tem de se ler como cortada sem se ir procurar, e
   não conta no total. */
.fat-linha-rasurada td{ text-decoration:line-through; color:var(--text-3); opacity:.75; }
.fat-linha-rasurada td strong{ font-weight:400; }
.fat-rasura{
  display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:3px;
  background:var(--surface-3); color:var(--text-3); font-size:.72rem; letter-spacing:.02em;
  text-decoration:none; vertical-align:middle;
}
.fat-nota-rasura{ margin:.5rem 0 0; color:var(--text-3); font-size:.85rem; }

/* «* VALOR A DEFINIR» -- a marca de uma linha cujo valor ainda nao esta fechado.
   Vem da aplicacao, que marca a linha; aqui so se pinta. Nao se risca nem se sublinha: e
   uma afirmacao ("este valor vem depois"), e o vermelho ja diz que e para reparar.
   O mesmo vermelho dos estados anulados da aplicacao, para ser a mesma linguagem. */
.mapa-a-definir{ color:var(--st-bad); font-weight:700; white-space:nowrap; }
.fat-linha-rasurada .mapa-a-definir{ color:var(--text-3); }

.fat-decisao{ border-left:4px solid var(--accent-2); }
.fat-decisao h3{ margin-top:0; }

/* ------------------------------------------------------------------ TELEMOVEL
   O admin e os tres portais (colaboradores, clientes, subempreiteiros) partilham esta
   folha e a mesma estrutura de pagina, por isso o que esta aqui serve os quatro.

   Ja havia dois cortes: aos 880px a barra lateral vira menu de hamburguer, e aos 900px o
   detalhe da fatura passa a uma coluna. O que faltava era o telemovel a serio -- abaixo dos
   560px, onde uma tabela de oito colunas empurra a PAGINA para o lado e se perde a conta ao
   que se esta a ler.

   A regra e sempre a mesma: o que e largo rola dentro da sua propria caixa, nunca a pagina.
   As tabelas ficam com `display:block` para poderem rolar sozinhas -- e assim nao foi
   preciso embrulhar 101 tabelas em 60 ficheiros PHP a mao. */

@media (max-width:560px){
  .admin-main{ --pad:.8rem; }

  /* Os separadores e as barras de botoes cabem sempre: ou rolam de lado, ou quebram linha. */
  .admin-tabs button{ font-size:.82rem; padding:.5rem .7rem; }
  .admin-actions{ flex-wrap:wrap; }

  /* ---- As listas passam a cartões, uma linha por cartão ----------------------
     Rolar de lado numa lista de faturas é o mesmo que não a conseguir ler: vê-se o número e
     perde-se o valor, ou o contrário. Num cartão vê-se a fatura toda de uma vez.
     O nome de cada coluna vem do `data-rotulo` que o tabelas-telemovel.js escreve a partir
     dos cabeçalhos — por isso isto vale para as 101 tabelas sem se ter tocado no PHP.
     Ficam de fora as grelhas (Registo Semanal, calendário de Férias), que continuam a rolar:
     aí as colunas são dias, e um cartão por linha não diria nada. */
  table.admin-table, table.fat-linhas:not(.fat-resumo){
    display:block; border:none; background:none; border-radius:0;
  }
  table.admin-table thead, table.fat-linhas:not(.fat-resumo) thead{
    /* Escondido para quem vê, mas continua lá para quem usa leitor de ecrã. */
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  table.admin-table tbody, table.fat-linhas:not(.fat-resumo) tbody{ display:block; }
  table.admin-table tbody tr, table.fat-linhas:not(.fat-resumo) tbody tr{
    display:block; background:var(--surface); border:1px solid var(--stone-line); border-radius:10px;
    padding:.35rem .1rem; margin-bottom:.7rem;
  }
  table.admin-table tbody td, table.fat-linhas:not(.fat-resumo) tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    width:auto; padding:.4rem .8rem; border:none; text-align:left; font-size:.88rem;
    /* Rede de segurança: uma célula com vários elementos lá dentro (etiquetas, distintivos)
       dá vários itens de flex. Sem o wrap, ficam todos na mesma linha e os últimos saem
       para fora do cartão -- perde-se informação sem se dar por ela. */
    flex-wrap:wrap;
  }
  table.admin-table tbody td + td, table.fat-linhas:not(.fat-resumo) tbody td + td{
    border-top:1px solid var(--paper-2);
  }
  table.admin-table tbody td::before, table.fat-linhas:not(.fat-resumo) tbody td::before{
    content:attr(data-rotulo); flex:0 0 auto; max-width:45%;
    font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--stone-2); font-weight:600;
  }
  /* Uma célula sem rótulo (miniatura, botões de ação) ocupa a linha toda, sem etiqueta. */
  table.admin-table tbody td:not([data-rotulo]),
  table.fat-linhas:not(.fat-resumo) tbody td:not([data-rotulo]){ display:block; }
  table.admin-table tbody td:not([data-rotulo])::before{ content:none; }
  /* Menos a dos botões: o `display:block` acima é mais específico do que o `.admin-actions`
     de cima da folha, e desfazia-lhe o flex -- o "Gerir" e o "Apagar" ficavam um debaixo do
     outro, cada um a ocupar uma linha do cartão. */
  table.admin-table tbody td.admin-actions,
  table.fat-linhas:not(.fat-resumo) tbody td.admin-actions{
    display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start;
  }
  table.admin-table tbody td.admin-actions::before,
  table.fat-linhas:not(.fat-resumo) tbody td.admin-actions::before{ content:none; }
  /* A linha de "ainda não há nada aqui" não é um registo: fica um aviso, não um cartão. */
  table.admin-table tbody tr[data-linha-unica]{ text-align:center; color:var(--stone-2); }
  table.admin-table tbody tr[data-linha-unica] td{ display:block; }
  .admin-actions{ justify-content:flex-end; }
  /* O rodapé de totais (a última linha de uma tabela de linhas) mantém-se legível. */
  table.fat-linhas:not(.fat-resumo) tfoot{ display:block; }
  table.fat-linhas:not(.fat-resumo) tfoot tr{ display:flex; flex-wrap:wrap; justify-content:space-between;
                                              gap:.4rem; padding:.5rem .8rem; font-weight:600; }
  table.fat-linhas:not(.fat-resumo) tfoot td, table.fat-linhas:not(.fat-resumo) tfoot th{
    display:inline; border:none; padding:0; }

  /* Os resumos estreitos continuam tabela, só mais compactos. */
  .fat-resumo th, .fat-resumo td{ padding:.45rem .5rem; }
  /* A sombra de "há mais coluna para o lado" deixa de fazer sentido: aqui já não se rola
     nada, cada linha é um cartão. As grelhas que continuam a rolar têm caixa própria
     (.rs-wrap, .ferias-calendario-wrap) e mantêm a sua. */
  .tabela-rolavel{ background-image:none; overflow-x:visible; }

  /* Os formularios passam a uma coluna. O auto-fit ja o fazia na maioria dos casos, mas com
     220px de minimo havia ecras estreitos onde ficava a meio caminho. */
  .field-row{ grid-template-columns:1fr; gap:.7rem; }
  /* Com 120px de mínimo cabiam três cartões por linha num telemóvel, e cada um ficava com
     cerca de 90px por dentro -- menos do que "COLABORADORES" ocupa. Com 140 passam a dois
     por linha em qualquer telemóvel, e as etiquetas cabem sem se partirem. As margens
     internas também encolhem: num cartão de 130px, 1.3rem de cada lado era metade dele. */
  .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; }
  .stat-card{ padding:.9rem 1rem; }
  .stat-card b{ font-size:1.5rem; }
  .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }

  /* O iOS aumenta o zoom sozinho quando se toca num campo com letra abaixo de 16px, e
     depois a pagina fica desalinhada e o utilizador tem de a voltar a encolher a mao. Nao e
     preferencia de tamanho: e a unica maneira de o impedir. */
  .field input, .field select, .field textarea,
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=search], input[type=tel], select, textarea{
    font-size:16px;
  }

  /* Botoes com area de toque decente e a ocupar a largura quando estao sozinhos numa barra. */
  .btn, button.btn, a.btn{ min-height:42px; }

  /* A grelha do Registo Semanal e larga por natureza: sete dias mais a tarefa nao cabem num
     telemovel, e rola dentro do .rs-wrap. A coluna da Tarefa fica presa a esquerda -- sem
     isso, ao rolar para ver quinta e sexta, deixa de se saber a que tarefa pertence a linha
     que se esta a preencher. (O calendario de ferias ja tinha isto na coluna do mes.) */
  .rs-grelha th.rs-tarefa{
    position:sticky; left:0; z-index:2; background:var(--paper-2);
    min-width:130px; font-size:.78rem;
  }
  .rs-h{ width:2.2rem; }

  /* As duas tabelas largas têm `width:100%`, e num telemóvel isso é o contrário do que se
     quer: em vez de manterem a largura e deixarem rolar, encolhem para caber e esmagam as
     células. No calendário de férias, com 31 colunas mais o nome do mês, os números ficavam
     por cima uns dos outros e deixava de se conseguir marcar um dia.
     Com `max-content` a tabela fica com a largura de que precisa e quem rola é a caixa. */
  .ferias-calendario, .rs-grelha{ width:max-content; min-width:100%; }
  .ferias-calendario td{ min-width:1.6rem; }
}

/* Ecras muito estreitos (iPhone SE e afins). So o que ainda aperta aos 560. */
/* No telemóvel a semana toda não cabe -- mas pode faltar pouco. Encolhe-se o que dá para
   encolher (a coluna da tarefa, as caixas, os espaçamentos) para o arrastar ficar curto, em
   vez de ser meia página. A grelha continua a rolar: uma coluna por dia não vira cartão. */
@media (max-width:560px){
  .rs-grelha{ font-size:.78rem; }
  .rs-grelha th, .rs-grelha td{ padding:.22rem .12rem; }
  .rs-grelha th.rs-tarefa{ min-width:86px; max-width:96px; }
  .rs-grelha tbody th.rs-tarefa{ font-size:.76rem; white-space:normal; overflow-wrap:anywhere; }
  .rs-grelha thead th{ font-size:.62rem; letter-spacing:0; }
  /* A data por baixo do dia é o primeiro a sair: o dia da semana chega para se saber onde
     se está, e são sete colunas a poupar espaço cada uma. */
  .rs-grelha thead th small{ display:none; }
  .rs-h{ width:1.7rem; font-size:.76rem; padding:.15rem .04rem; }
  .rs-estado{ font-size:.64rem; }
  .rs-nota, .rs-anexo{ font-size:.72rem; }
}

@media (max-width:380px){
  .admin-main{ --pad:.6rem; }
  .admin-tabs button{ font-size:.78rem; padding:.45rem .55rem; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  /* Aqui o cartao fica com cerca de 98px por dentro, e "COLABORADORES" ao tamanho normal
     precisa de mais do que isso: o overflow-wrap salvava-o de sair fora, mas partia-o a
     meio ("COLABORADOR / ES"). Com a letra e o espacamento mais apertados, cabe inteiro. */
  .stat-card{ padding:.8rem .7rem; }
  .stat-card span{ font-size:.68rem; letter-spacing:.02em; }
  .stat-card b{ font-size:1.35rem; }
  .stat-card b.stat-valor{ font-size:1.05rem; }
}

/* ------------------------------------------------- A faixa de "instalar no telemóvel"
   Só aparece no telemóvel, a quem ainda não instalou e não a dispensou -- ver o
   instalar-app.js. Fica colada ao fundo: é onde o polegar chega, e não tapa o cabeçalho
   nem o conteúdo que a pessoa foi ali ver.

   De um lado ao outro do ecrã, sem margens: com margens ficava uma faixa da cor do fundo à
   volta dela, e na página de login -- que é escura -- isso via-se logo. */
.faixa-instalar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem .9rem; border-radius:14px 14px 0 0;
  background:var(--bg-raised); color:var(--text); border-top:1px solid var(--line);
  box-shadow:0 -4px 22px rgba(0,0,0,.28);
  font-size:.84rem; line-height:1.35;
}
/* Uma faixa fixa tapa sempre o fundo do ecrã -- na página de login, tapava o botão "Entrar".
   O JS mede a altura real dela (que muda com o texto) e põe-na aqui; o resto é só afastar o
   conteúdo o suficiente. A página de login não rola: em vez de a empurrar para baixo,
   encolhe-se a área centrada, para o cartão ficar centrado no que sobra. */
body.com-faixa-instalar{ padding-bottom:var(--faixa-altura,0px); }
body.com-faixa-instalar .admin-login-wrap{ min-height:calc(100vh - var(--faixa-altura,0px)); }

.faixa-instalar-icone{ width:38px; height:38px; border-radius:9px; flex-shrink:0; background:var(--surface); }
.faixa-instalar-texto{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.faixa-instalar-texto strong{ font-size:.86rem; }
.faixa-instalar-texto span{ color:var(--text-2); font-size:.78rem; }
.faixa-instalar-texto b{ color:var(--text); }
/* O símbolo de Partilhar do iPhone, desenhado à mão: a instrução sem ele obriga a
   adivinhar em qual dos ícones da barra se toca. */
.faixa-instalar-simbolo{ width:.9em; height:.9em; vertical-align:-.1em; fill:currentColor; }
.faixa-instalar-botoes{ display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.faixa-instalar-fechar{
  border:none; background:none; color:var(--text-3); cursor:pointer;
  font-size:1.3rem; line-height:1; padding:.2rem .35rem; font-family:inherit;
}
.faixa-instalar-fechar:hover{ color:var(--text); }

@media (max-width:420px){
  /* Só quando há botão "Instalar": aí o texto e o botão lado a lado não cabem, e o botão
     passa para baixo com a largura toda, para não ficar um alvo pequeno. Sem botão (iPhone)
     não se mexe em nada -- senão o × sozinho ocupava uma linha inteira. */
  .faixa-instalar--com-botao{ flex-wrap:wrap; }
  .faixa-instalar--com-botao .faixa-instalar-texto{ flex:1 1 100%; order:2; }
  .faixa-instalar--com-botao .faixa-instalar-icone{ order:1; }
  .faixa-instalar--com-botao .faixa-instalar-botoes{ order:3; flex:1 1 100%; justify-content:space-between; }
  .faixa-instalar--com-botao .faixa-instalar-botoes .btn{ flex:1; justify-content:center; }
}

/* ------------------------------------------------- O mapa de férias do Admin
   Um colaborador por linha, os dias do mês em colunas. É o contrário da grelha do Portal
   (essa é de uma pessoa só, meses em linhas): aqui a pergunta não é "que dias marquei eu",
   é "quem está fora e quando" -- e é a sobreposição entre linhas que interessa ver.

   O nome fica colado à esquerda ao rolar, senão a meio do mês deixa de se saber de quem é
   a linha que se está a ler. */
/* Sem `min-width:100%`: com ele, a coluna do nome esticava para preencher a página e
   ficava um vão enorme entre os nomes e o dia 1. A tabela ocupa o que precisa. */
.ferias-mapa{ border-collapse:collapse; font-size:.7rem; width:max-content; }
.ferias-mapa th, .ferias-mapa td{ border:1px solid var(--stone-line); padding:0; }
.ferias-mapa thead th{
  background:var(--paper-2); color:var(--stone-2); font-weight:600;
  width:19px; height:22px; text-align:center; font-size:.62rem;
}
.ferias-mapa th.ferias-mapa-quem{
  width:auto; min-width:150px; text-align:left; padding:.3rem .55rem;
  font-size:.76rem; color:var(--ink); background:var(--surface);
  position:sticky; left:0; z-index:1; border-right:1px solid var(--stone-line);
}
.ferias-mapa thead th.ferias-mapa-quem{ background:var(--paper-2); color:var(--stone-2); }
.ferias-mapa td{ width:19px; height:21px; background:var(--surface); }
.ferias-mapa th.ferias-mapa-total, .ferias-mapa td.ferias-mapa-total{
  width:38px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--paper); color:var(--ink);
}
/* Os estados levam ".ferias-mapa td" à frente para ganharem à regra base acima, que também
   tem uma classe -- o mesmo cuidado que a grelha do Portal já precisou de ter. */
.ferias-mapa td.ferias-mapa-fds{ background:var(--paper-2); }
.ferias-mapa thead th.ferias-mapa-fds{ color:var(--stone-line); }
.ferias-mapa td.ferias-mapa-feriado{ background:var(--bad-wash); }
.ferias-mapa td.ferias-mapa-aprovado{ background:var(--good); }
.ferias-mapa td.ferias-mapa-pendente{ background:var(--accent-2); }
/* Meio-dia: metade pintada, metade não -- de manhã em cima, de tarde em baixo, tal como no
   Portal, para quem já conhece uma grelha reconhecer a outra. */
.ferias-mapa td.ferias-mapa-aprovado.ferias-mapa-meio-manha{ background:linear-gradient(to bottom, var(--good) 50%, var(--surface) 50%); }
.ferias-mapa td.ferias-mapa-aprovado.ferias-mapa-meio-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--good) 50%); }
.ferias-mapa td.ferias-mapa-pendente.ferias-mapa-meio-manha{ background:linear-gradient(to bottom, var(--accent-2) 50%, var(--surface) 50%); }
.ferias-mapa td.ferias-mapa-pendente.ferias-mapa-meio-tarde{ background:linear-gradient(to bottom, var(--surface) 50%, var(--accent-2) 50%); }

.ferias-mapa-legenda{
  display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.7rem;
  font-size:.74rem; color:var(--stone-2); align-items:center;
}
.ferias-mapa-amostra{
  display:inline-block; width:13px; height:13px; border:1px solid var(--stone-line);
  border-radius:3px; vertical-align:-2px; margin-right:.3rem; background:var(--surface);
}
/* As amostras da legenda repetem as cores acima. Não podiam reaproveitar aquelas regras:
   estas são <i>, e lá os seletores estão presos a `.ferias-mapa td` para ganharem à regra
   base da célula. */
.ferias-mapa-amostra.ferias-mapa-aprovado{ background:var(--good); }
.ferias-mapa-amostra.ferias-mapa-pendente{ background:var(--accent-2); }
.ferias-mapa-amostra.ferias-mapa-fds{ background:var(--paper-2); }
.ferias-mapa-amostra.ferias-mapa-feriado{ background:var(--bad-wash); }
.ferias-mapa-amostra.ferias-mapa-aprovado.ferias-mapa-meio-manha{
  background:linear-gradient(to bottom, var(--good) 50%, var(--surface) 50%);
}

/* ---- O mapa de férias ao alto, no telemóvel ---------------------------------
   Trinta e um dias em colunas não cabem num ecrã de telemóvel, por mais que se aperte: o
   mês ficava cortado a meio e só se via até ao dia 12. Ao alto, os dias passam a linhas e
   os colaboradores a colunas -- três a dez pessoas cabem à vontade -- e o mês lê-se a
   deslizar para BAIXO, que é o gesto que já se faz na página toda.

   São as duas tabelas desenhadas, e é o CSS que escolhe qual se vê. É o preço de as duas
   leituras serem estruturalmente diferentes: a mesma tabela não se vira ao contrário só com
   CSS sem perder os cabeçalhos. */
.ferias-mapa-alto{ display:none; }

@media (max-width:560px){
  .ferias-mapa-largo{ display:none; }
  .ferias-mapa-alto{ display:block; }

  .ferias-mapa-vertical thead th{ height:auto; padding:.35rem .15rem; }
  /* A coluna do dia fica colada à esquerda: a meio do mês, a rolar, é o que diz em que dia
     se está. */
  .ferias-mapa-vertical th.ferias-mapa-dia{
    width:auto; min-width:58px; text-align:left; padding:.25rem .4rem;
    background:var(--surface); position:sticky; left:0; z-index:1;
    border-right:1px solid var(--stone-line); font-size:.72rem; color:var(--ink);
  }
  .ferias-mapa-vertical thead th.ferias-mapa-dia{ background:var(--paper-2); color:var(--stone-2); }
  .ferias-mapa-vertical th.ferias-mapa-dia b{ font-weight:700; }
  .ferias-mapa-vertical th.ferias-mapa-dia span{ color:var(--stone-2); font-weight:400; margin-left:.15rem; }
  .ferias-mapa-vertical th.ferias-mapa-pessoa{
    min-width:42px; font-size:.62rem; line-height:1.15; padding:.35rem .1rem;
    overflow-wrap:anywhere;
  }
  .ferias-mapa-vertical td{ width:auto; min-width:42px; height:24px; }

  /* Fim de semana e feriado marcam a LINHA toda -- ao alto é a linha que é o dia, e assim
     as semanas leem-se como faixas, tal como as riscas verticais faziam ao comprido. */
  .ferias-mapa-vertical tr.ferias-mapa-linha-fds th.ferias-mapa-dia{ background:var(--paper-2); }
  .ferias-mapa-vertical tr.ferias-mapa-linha-feriado th.ferias-mapa-dia{ background:var(--bad-wash); color:var(--bad); }
  /* O dia de hoje, para não se perder a conta ao rolar. */
  .ferias-mapa-vertical tr.ferias-mapa-linha-hoje th.ferias-mapa-dia{
    background:var(--accent-wash); color:var(--accent); font-weight:700;
  }
}

/* O título de cada grupo de números no Resumo. O Resumo tem dois mundos -- o que vem da
   aplicação pela API, e o que se vê no site público -- e há nomes que existem nos dois:
   "Obras" no Website são as do portefólio, "Obras" na Gestão são as obras a sério. Sem um
   título a dizer de onde vêm, os dois números lado a lado parecem não bater certo. */
.stat-titulo{
  font-family:var(--f-ui); font-size:.95rem; font-weight:600;
  margin:0 0 .6rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.stat-titulo small{
  font-family:var(--font-body); font-size:.76rem; font-weight:400; color:var(--stone-2);
}
.stat-grid + .stat-titulo{ margin-top:.4rem; }


/* ---- Os capítulos de um Mapa de Orçamento, a abrir e a fechar ---------------------
   Começa tudo fechado: um mapa de 76 linhas é uma tira que não se percorre, e no
   telemóvel -- onde cada linha vira um cartão -- são 76 cartões. Fechado, cada capítulo
   é um cartão com o nome e o valor.
   As linhas SOLTAS não têm capítulo e por isso nunca se escondem: são de propósito. */
.mapa-linha-escondida{ display:none !important; }

.mapa-dobra{
  appearance:none; border:none; background:none; cursor:pointer; padding:0 .5rem 0 0;
  margin:0; color:inherit; font:inherit; line-height:1; vertical-align:baseline;
}
.mapa-dobra-seta{
  display:inline-block; width:0; height:0; vertical-align:middle;
  border-left:.42rem solid currentColor; border-top:.3rem solid transparent;
  border-bottom:.3rem solid transparent; transition:transform .12s ease-out;
}
[aria-expanded="true"] .mapa-dobra-seta{ transform:rotate(90deg); }
.mapa-dobra:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.mapa-dobra-conta{
  margin-left:.5rem; font-weight:400; font-size:.8em; color:var(--stone-2);
}
.mapa-linha[data-tipo="Cabeçalho"], tr[data-capitulo-id]{ cursor:pointer; }

.mapa-dobra-barra{
  display:flex; gap:.4rem; margin:0 0 .5rem; flex-wrap:wrap;
}

/* Imprimir com os capítulos fechados dava uma folha com onze linhas e mais nada. O
   beforeprint já os abre; isto é a rede por baixo, para os browsers que não o dão. */
@media print{
  .mapa-linha-escondida{ display:revert !important; }
  .mapa-dobra, .mapa-dobra-barra{ display:none !important; }
}

/* Um rótulo vazio é de propósito (ver mapa-orcamento-detalhe.php): a célula é o título do
   cartão e não um par nome/valor. Sem isto ficava um espaço a mais à frente dele. */
table.admin-table tbody td[data-rotulo=""]::before,
table.fat-linhas:not(.fat-resumo) tbody td[data-rotulo=""]::before{ display:none; }

/* ---- Relatórios de Serviço --------------------------------------------------------
   Um relatório é um texto que se lê, não uma linha de tabela: cada um é um cartão com o
   assunto à cabeça e a data à direita. */
.fat-relatorio{
  border:1px solid var(--stone-line); border-radius:10px; padding:.9rem 1rem;
  margin-bottom:.9rem; background:var(--surface);
}
.fat-relatorio h4{ margin:0 0 .5rem; display:flex; justify-content:space-between;
  align-items:baseline; gap:1rem; flex-wrap:wrap; }
.fat-relatorio-data{ font-weight:400; font-size:.82rem; color:var(--stone-2); }
.fat-relatorio p{ margin:.25rem 0; }

/* A escolha das fotos de um relatório: a fotografia É a caixa de selecção -- carregar na
   imagem marca-a. Uma grelha de quadradinhos ao lado de miniaturas obrigava a apontar ao
   sítio certo, e no telemóvel isso não se faz. */
.fat-fotos-escolha{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.2rem 0 .9rem; }
.fat-foto-escolha{ position:relative; cursor:pointer; display:block; }
.fat-foto-escolha img{
  width:120px; height:90px; object-fit:cover; border-radius:6px;
  border:2px solid var(--stone-line); display:block;
}
.fat-foto-escolha input{ position:absolute; top:.3rem; left:.3rem; z-index:1; }
.fat-foto-escolha input:checked + img{ border-color:var(--accent); }

.fat-escolha{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem; }
.fat-linha-detalhe td{ background:var(--paper-2); font-size:.9rem; }


/* ============ Kanban de Obras e Serviços ============
   Uma coluna por estado, um cartão por obra ou serviço. Só de leitura: o estado muda-se na
   aplicação Arquimim, que é a fonte de verdade.

   Os cartões têm todos a MESMA ALTURA -- foi pedido, e tem razão de ser: com alturas
   diferentes a coluna lê-se como uma pilha desarrumada, e o olho não compara linhas que não
   começam no mesmo sítio. O que não cabe corta-se com reticências, e o nome inteiro fica no
   `title` do cartão. */
.kanban-colunas{ display:flex; gap:.9rem; align-items:flex-start; overflow-x:auto;
  padding-bottom:.6rem; }
.kanban-coluna{ flex:0 0 250px; background:var(--paper-2); border:1px solid var(--stone-line);
  border-radius:10px; padding:.7rem; }
.kanban-cabeca{ display:flex; align-items:baseline; justify-content:space-between; }
.kanban-cabeca h3{ margin:0; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--stone-2); }
.kanban-conta{ font-size:.75rem; color:var(--stone-2); }
/* Ocupa sempre a linha, mesmo sem total: sem isto os cartões da coluna sem dinheiro
   começavam mais acima do que os das outras. */
.kanban-total{ font-size:.8rem; font-weight:700; color:var(--accent); margin:.15rem 0 .5rem;
  min-height:1.1em; }
/* A altura e MINIMA, nao fixa: o cartao cresceu quando ganhou a barra do progresso e a
   linha que diz de onde vem o numero, e com a altura fixa cortava o nome a meio e comia o
   texto do progresso. Cartoes de alturas diferentes na mesma coluna leem-se bem; texto
   cortado nao. */
.kanban-cartao{
  display:flex; flex-direction:column; gap:.15rem; min-height:132px;
  background:var(--surface); border:1px solid var(--stone-line); border-left:3px solid var(--accent-2);
  border-radius:8px; padding:.6rem .7rem; margin-bottom:.5rem;
  text-decoration:none; color:inherit;
}
.kanban-cartao:hover{ border-color:var(--accent); box-shadow:0 1px 6px rgba(0,0,0,.07); }
.kanban-cartao:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.kanban-cartao.e-servico{ border-left-color:var(--stone-2); }
.kanban-marca{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--stone-2); line-height:1.2; }
/* Tres linhas para o nome -- os nomes das obras levam a referencia, o tipo e a morada
   ("R008 - Apartamento: Rua Faria Guimaraes 528") e em duas linhas cortavam a morada. */
.kanban-nome{ font-weight:600; font-size:.84rem; line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.kanban-cliente{ font-size:.76rem; color:var(--stone); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.kanban-valor{ font-size:.84rem; font-weight:700; margin-top:auto; }
.kanban-valor.zero{ color:var(--stone-2); font-weight:400; }
/* A barra do progresso e a linha que diz de onde vem o numero. A barra so aparece quando
   HA numero -- ver o comentario no kanban-vista.php. */
.kanban-barra{ height:8px; background:var(--paper-2); border-radius:999px; overflow:hidden;
  margin:.3rem 0 .15rem; flex:0 0 auto; }
.kanban-barra > i{ display:block; height:100%; background:var(--accent-2); min-width:8px; }
.kanban-barra.e-cheia > i{ background:var(--good); }
.kanban-barra.e-dinheiro > i{ background:var(--stone-2); }
.kanban-progresso{ font-size:.74rem; color:var(--stone-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; padding-bottom:.1rem; }
.kanban-vazio{ font-size:.8rem; color:var(--stone-2); text-align:center; padding:.8rem 0; }

@media (max-width:780px){
  /* Colunas a rolar de lado num ecrã estreito são colunas que ninguém lê: cada estado passa
     a ser uma faixa, uma debaixo da outra, com os cartões a toda a largura. */
  .kanban-colunas{ display:block; overflow-x:visible; }
  .kanban-coluna{ width:auto; margin-bottom:.8rem; }
  .kanban-coluna:last-child{ margin-bottom:0; }
  .kanban-cabeca h3{ font-size:.9rem; }
  .kanban-cartao{ min-height:112px; }
}

/* A BARRA DO «ESTAS A VER COMO» -- so' aparece quando um parceiro esta' dentro de um
   cliente. Destaca-se sem alarmar: nao e' um erro nem um aviso, e' um lembrete de contexto
   que tem de estar a' vista o tempo todo. */
.portal-como{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem; background:var(--accent-wash); border:1px solid var(--accent-2);
  border-radius:8px; padding:.7rem 1rem; margin-bottom:1rem; font-size:.86rem;
  color:var(--ink); }
.portal-como strong{ font-weight:700; }

/* ==========================================================================
   A paleta de comandos (Ctrl+K) — includes/painel.php e assets/js/painel.js
   ========================================================================== */
.cmd{ position:fixed; inset:0; z-index:500; display:flex; justify-content:center; align-items:flex-start; padding:12vh 1rem 1rem; }
.cmd[hidden]{ display:none; }
.cmd-scrim{ position:absolute; inset:0; background:var(--scrim); }
.cmd-box{ position:relative; width:min(620px,100%); max-height:70vh; display:flex; flex-direction:column; overflow:hidden;
          background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); }
.cmd-input{ display:flex; align-items:center; gap:10px; padding:0 12px; height:52px; border-bottom:1px solid var(--line); color:var(--text-3); }
.cmd-input input{ flex:1; min-width:0; min-height:0; height:100%; border:0; padding:0; background:transparent; font-size:1rem; color:var(--text); box-shadow:none !important; }
.cmd-esc{ border:1px solid var(--line-strong); border-radius:5px; background:var(--surface-2); color:var(--text-3); font-family:var(--f-mono);
          font-size:10.5px; height:22px; padding:0 6px; cursor:pointer; }
.cmd-lista{ list-style:none; margin:0; padding:6px; overflow-y:auto; flex:1; }
.cmd-lista [role=option]{ display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; color:var(--text); }
.cmd-lista [role=option][aria-selected="true"]{ background:var(--surface-3); box-shadow:inset 2px 0 0 var(--accent); }
.cmd-t{ font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-s{ margin-left:auto; font-size:.76rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.cmd-sec{ padding:10px 10px 4px; font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); }
.cmd-vazio{ padding:24px 12px; text-align:center; color:var(--text-3); font-size:.88rem; }
.cmd-pe{ display:flex; gap:16px; padding:8px 12px; border-top:1px solid var(--line); font-size:.74rem; color:var(--text-3); }
.cmd-pe kbd{ margin-right:3px; }
body.cmd-aberto{ overflow:hidden; }
@media (max-width:760px){
  /* No telemóvel a paleta é uma folha de ecrã inteiro, com o teclado por baixo. */
  .cmd{ padding:0; align-items:stretch; }
  .cmd-box{ width:100%; max-height:none; height:100%; border-radius:0; border:0; }
  .cmd-input{ height:56px; }
  .cmd-pe{ display:none; }
  .cmd-lista [role=option]{ padding:12px 10px; }
}

/* ==========================================================================
   Acertos do tema escuro
   ========================================================================== */
/* As cores de linha escolhidas na aplicação (Mapa de Orçamento) são sempre claras -- foram
   escolhidas para papel. Por cima delas o texto é sempre escuro, seja qual for o tema. */
.mapa-linha[style*="--linha-cor"], .mapa-linha-texto, tr[style*="--linha-cor"] > td{ color:#16140f; }
.mapa-linha[style*="--linha-cor"] input[type=text]{ background:rgba(255,255,255,.75); color:#16140f; border-color:rgba(0,0,0,.18); }
/* Os gráficos e números desenhados com `style` antigos que pediam o castanho de reserva. */
.painel [style*="background:#fff"], .painel [style*="background: #fff"]{ background:var(--surface) !important; }

/* Os cabeçalhos dos blocos (fat-bloco, totais, resumo do topo): neutros, como as barras de
   um painel. Eram laranja-claro com letra laranja -- num ecrã inteiro de blocos, o acento
   deixava de ser acento. */
.fat-bloco h3, .fat-bloco > h2, .fat-totais h3, .fat-resumo-topo h3{
  background:var(--surface-2); color:var(--text); font-size:.9rem; font-weight:600; border-bottom-color:var(--line);
}
.fat-bloco, .fat-totais, .fat-resumo-topo, .fat-barra-guardar, .fat-relatorio, .mapa-conversa li{ border-color:var(--line); }
.fat-decisao{ border-left-color:var(--accent); }
.ferias-mapa th.ferias-mapa-total, .ferias-mapa td.ferias-mapa-total{ background:var(--surface-2); }

/* Os rótulos dos campos e dos cartões são `span` -- e apanhavam também o que vinha DENTRO
   deles: uma etiqueta de estado esticava-se pela célula toda, em maiúsculas, e a ligação
   «Ver as minhas obras →» de um cartão saía na letra das etiquetas. */
.fat-campos .badge, .stat-card .badge{ display:inline-flex; width:auto; text-transform:none; letter-spacing:0;
  font-family:var(--f-ui); font-size:.72rem; margin:0; }
.stat-card .stat-seta{ font-family:var(--f-ui); font-size:.8rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--accent); }

/* Os separadores rolam de lado em qualquer ecrã: o «Texto das páginas» tem quinze, e num
   computador empurravam a página para a direita. */
.admin-tabs{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.admin-tabs button, .admin-tabs a{ flex-shrink:0; }

/* A Galeria: o formulário dos filtros, solto no bloco, ganha o mesmo respiro do resto. */
.gal-pagina{ padding-top:1rem; }

/* ==========================================================================
   O Resumo e as Férias do admin
   ========================================================================== */
/* ==========================================================================
   Dois ecrãs do admin no desenho «Comando»: o Resumo e as Férias (2026-10)
   --------------------------------------------------------------------------
   Só tokens da paleta (admin.css, no topo): tudo o que aqui está muda de tema sozinho, do
   escuro para o claro. As poucas misturas (`color-mix`) partem também de tokens -- são o
   tracejado do feriado e o tom do fim de semana, que a paleta não tem e que têm de ser mais
   leves do que qualquer cor dela.
   ========================================================================== */

/* ==========================================================================
   O Resumo
   ========================================================================== */
.resumo-cabeca{ align-items:flex-start; }
.resumo-data{
  margin:0 0 .2rem; font-family:var(--f-mono); font-size:.72rem; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.resumo-sub{ margin:.3rem 0 0; color:var(--text-2); font-size:.9rem; }
.resumo-sub b{ color:var(--text); font-family:var(--f-mono); font-weight:500; }

/* Duas colunas no ecrã largo: à esquerda o que pede trabalho (os avisos e a tendência), à
   direita os números, que se consultam. As áreas têm nome para o HTML poder ir pela ordem
   de leitura do telemóvel e o ecrã largo arrumar à sua maneira. */
.resumo{
  display:grid; gap:16px; align-items:start;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "atencao   gestao"
    "atividade website"
    "atalhos   atalhos";
}
/* Pela porta da Empresa não há Website: o gráfico fica com a linha toda. */
.resumo--empresa{
  grid-template-areas:
    "atencao   gestao"
    "atividade atividade"
    "atalhos   atalhos";
}
.resumo-atencao{ grid-area:atencao; }
.resumo-gestao{ grid-area:gestao; }
.resumo-website{ grid-area:website; }
.resumo-atividade{ grid-area:atividade; }
.resumo-atalhos{ grid-area:atalhos; }

.resumo-painel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  min-width:0; overflow:hidden;
}
.resumo-painel-cabeca{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:40px;
  padding:.45rem .75rem .45rem .9rem; border-bottom:1px solid var(--line);
}
.resumo-painel-cabeca h2{
  flex:1; margin:0; display:flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; min-width:0;
}
.resumo-painel-cabeca h2 .i{ color:var(--text-3); }
.resumo-painel-cabeca small{ font-size:.76rem; color:var(--text-3); }
.resumo-dica kbd{ margin:0 1px; }
.resumo-vazio{ margin:0; padding:1.6rem 1rem; text-align:center; color:var(--text-3); font-size:.88rem; }

/* ---- Precisa de atenção: uma lista, não uma frase por linha ----
   Ícone com a cor do estado, o texto, a página onde se trata, e o número numa coluna
   própria, alinhado à direita -- é o número que se lê primeiro. A linha inteira é a ligação:
   no telemóvel o alvo de toque é a linha, não uma palavra. */
.resumo-avisos{ list-style:none; margin:0; padding:0; }
.resumo-avisos li + li{ border-top:1px solid var(--line); }
.resumo-aviso{
  display:grid; grid-template-columns:28px minmax(0, 1fr) auto 14px; align-items:center; gap:10px;
  min-height:52px; padding:.5rem .75rem .5rem .9rem; color:var(--text); text-decoration:none;
}
.resumo-aviso:hover, .resumo-aviso:focus-visible{ background:var(--surface-2); color:var(--text); }
.resumo-aviso-ic{
  width:28px; height:28px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--surface-3); color:var(--text-2);
}
.resumo-aviso--pend .resumo-aviso-ic{ background:var(--st-pend-bg); color:var(--st-pend); }
.resumo-aviso--mau .resumo-aviso-ic{ background:var(--st-bad-bg); color:var(--st-bad); }
.resumo-aviso--novo .resumo-aviso-ic{ background:var(--accent-soft); color:var(--accent); }
.resumo-aviso-txt{ min-width:0; display:grid; }
.resumo-aviso-txt b{ font-weight:500; font-size:.88rem; line-height:1.3; }
.resumo-aviso-txt small{ font-size:.74rem; color:var(--text-3); }
.resumo-aviso-num{
  font-family:var(--f-mono); font-size:1.05rem; font-weight:500; font-variant-numeric:tabular-nums;
  min-width:2ch; text-align:right;
}
.resumo-aviso--pend .resumo-aviso-num{ color:var(--st-pend); }
.resumo-aviso--mau .resumo-aviso-num{ color:var(--st-bad); }
.resumo-aviso-seta{ color:var(--text-3); display:grid; place-items:center; }
.resumo-aviso:hover .resumo-aviso-seta{ color:var(--text); }

/* ---- Os números da Gestão: mosaico de células, sem cartões soltos ---- */
.resumo-numeros{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.resumo-numeros a{
  display:grid; gap:2px; padding:.7rem .9rem; min-width:0; color:var(--text); text-decoration:none;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.resumo-numeros a:nth-child(3n){ border-right:0; }
.resumo-numeros a:nth-last-child(-n+3){ border-bottom:0; }
.resumo-numeros a:hover{ background:var(--surface-2); color:var(--text); }
.resumo-numeros span{
  display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.resumo-numeros span .i{ width:14px; height:14px; color:var(--text-3); }
.resumo-numeros b{
  font-family:var(--f-mono); font-size:1.45rem; font-weight:500; letter-spacing:-.02em; line-height:1.25;
  font-variant-numeric:tabular-nums;
}

/* ---- As contagens do Website: nome e número numa linha ---- */
.resumo-contagens{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.resumo-contagens a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; padding:0 .9rem;
  color:var(--text-2); font-size:.82rem; text-decoration:none; min-width:0;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.resumo-contagens a:nth-child(2n){ border-right:0; }
.resumo-contagens a:last-child, .resumo-contagens a:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.resumo-contagens a:hover{ background:var(--surface-2); color:var(--text); }
.resumo-contagens b{ font-family:var(--f-mono); font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }

/* ---- O gráfico da atividade ----
   Barras em HTML, sem biblioteca nem JavaScript: cada barra recebe a sua fração do topo em
   `--v` e a altura sai daqui. A área das barras tem altura fixa, e as linhas de referência
   (topo, metade, zero) estão desenhadas no mesmo referencial, por isso a escala bate certo. */
.rg-soma{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; padding:.8rem .9rem 0; }
.rg-soma div{ display:grid; }
.rg-soma span{ font-size:.74rem; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.rg-soma b{ font-family:var(--f-mono); font-weight:500; font-size:.98rem; }
.rg-amostra{ display:inline-block; width:9px; height:9px; border-radius:2px; }
.rg-amostra--horas{ background:var(--accent); }
.rg-amostra--ferias{ background:var(--st-ok); }

.rg{
  --rg-alt:170px;                 /* a altura da zona das barras */
  position:relative; padding:1.4rem .9rem .3rem 3rem;
}
.rg-eixo{ position:absolute; left:.9rem; right:.9rem; top:1.4rem; height:var(--rg-alt); pointer-events:none; }
.rg-eixo span{
  position:absolute; left:0; right:0; bottom:calc(var(--y) * 100%);
  border-bottom:1px dashed var(--line); font-family:var(--f-mono); font-size:.66rem; color:var(--text-3);
  line-height:1; padding-bottom:3px; transform:translateY(0);
}
.rg-eixo span[style*="--y:0"]{ border-bottom:1px solid var(--line-strong); }
.rg-meses{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:4px;
}
.rg-mes{ display:grid; grid-template-rows:var(--rg-alt) auto; min-width:0; border-radius:var(--r); }
.rg-mes--atual{ background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.rg-barras{ display:flex; align-items:flex-end; justify-content:center; gap:3px; height:var(--rg-alt); }
.rg-barra{
  position:relative; flex:0 1 16px; min-width:5px;
  height:calc(var(--v) * 100%); border-radius:3px 3px 0 0;
}
.rg-barra--horas{ background:var(--accent); }
.rg-barra--ferias{ background:var(--st-ok); }
/* O número de cada barra, por cima dela. Horas e dias partilham o eixo, por isso é o número
   que diz quanto é -- a altura só compara. */
.rg-barra em{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%); padding-bottom:2px;
  font-style:normal; font-family:var(--f-mono); font-size:.62rem; color:var(--text-2); white-space:nowrap;
}
.rg-rotulo{
  display:block; text-align:center; padding:.35rem 0 .3rem; font-family:var(--f-mono);
  font-size:.7rem; color:var(--text-3); line-height:1.15;
}
.rg-rotulo small{ display:block; font-size:.6rem; }
.rg-mes--atual .rg-rotulo{ color:var(--accent); font-weight:600; }
.rg-nota{ margin:0; padding:.2rem .9rem .8rem; font-size:.74rem; color:var(--text-3); }

/* ---- O mapa do sítio, em grelha ---- */
.resumo-atalhos-grelha{
  list-style:none; margin:0; padding:10px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px;
}
.resumo-atalhos-grelha a{
  display:flex; align-items:flex-start; gap:10px; height:100%; padding:.6rem .75rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  color:var(--text-2); text-decoration:none;
}
.resumo-atalhos-grelha a:hover{ border-color:var(--line-strong); color:var(--text); }
.resumo-atalhos-grelha .i{ margin-top:2px; color:var(--text-3); }
.resumo-atalhos-grelha a:hover .i{ color:var(--accent); }
.resumo-atalhos-grelha span{ display:grid; min-width:0; }
.resumo-atalhos-grelha b{ font-weight:500; font-size:.86rem; color:var(--text); }
.resumo-atalhos-grelha small{ font-size:.74rem; line-height:1.35; color:var(--text-3); }

@media (max-width:1100px){
  .resumo, .resumo--empresa{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"atencao" "gestao" "website" "atividade" "atalhos";
  }
  .resumo--empresa{ grid-template-areas:"atencao" "gestao" "atividade" "atalhos"; }
}

@media (max-width:760px){
  .resumo{ gap:12px; }
  .resumo-dica{ display:none; }
  .resumo-painel-cabeca{ min-height:46px; }
  .resumo-aviso{ min-height:58px; grid-template-columns:30px minmax(0, 1fr) auto 12px; padding-left:.8rem; }
  .resumo-numeros{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .resumo-numeros a{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:64px; }
  .resumo-numeros a:nth-child(3n){ border-right:1px solid var(--line); }
  .resumo-numeros a:nth-child(2n){ border-right:0; }
  .resumo-numeros a:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
  .resumo-numeros a:nth-last-child(-n+2){ border-bottom:0; }
  .resumo-numeros b{ font-size:1.3rem; }
  /* Duas colunas também no telemóvel: numa só, as nove contagens eram meio ecrã a rolar. O
     nome pode partir em duas linhas -- o número fica sempre à direita. */
  .resumo-contagens a{ min-height:44px; padding:.35rem .7rem; font-size:.8rem; line-height:1.25; }
  .rg{ --rg-alt:150px; padding-left:2.2rem; padding-right:.6rem; }
  .rg-eixo{ left:.6rem; right:.6rem; }
  .rg-meses{ gap:2px; }
  .rg-barras{ gap:2px; }
  /* Doze meses em 330 px: os números por cima das barras atropelavam-se. Ficam no title e
     nos totais por cima do gráfico. */
  .rg-barra em{ display:none; }
  .rg-rotulo{ font-size:.62rem; }
  .resumo-atalhos-grelha{ grid-template-columns:minmax(0, 1fr); }
  .resumo-atalhos-grelha a{ min-height:48px; }
}

/* ==========================================================================
   As Férias
   ========================================================================== */
/* O mapa e os pedidos lado a lado; o painel dos pedidos fica preso ao rolar, para se
   continuar a ver o que há por decidir enquanto se percorre um mês comprido. */
.ferias-cal{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; align-items:start; }
.ferias-cal + .fat-bloco{ margin-top:1.1rem; }
.ferias-cal > .fat-bloco + .fat-bloco{ margin-top:0; }
.ferias-cal-pedidos{ position:sticky; top:calc(var(--top-h) + 16px); max-height:calc(100vh - var(--top-h) - 32px); overflow:auto; }

.fat-bloco h3.ferias-cal-barra{ flex-wrap:wrap; gap:.5rem; }
.ferias-cal-mes{ flex:1; min-width:0; }
.ferias-cal-nav{ display:flex; align-items:center; gap:.35rem; font-weight:400; }

/* ---- O mapa largo: os estados lêem-se pela FORMA, não só pela cor ----
   Aprovado é uma barra cheia, à espera é uma barra tracejada e oca, o feriado é tramado e o
   fim de semana é só um tom mais apagado. Quem não distingue o verde do âmbar continua a
   ver a diferença, e numa impressão a preto e branco também.
   A barra é desenhada no ::before, por cima das linhas da grelha: dias seguidos do mesmo
   estado juntam-se numa barra contínua, com os cantos redondos só nas pontas. */
.ferias-cal .ferias-mapa{ border-collapse:separate; border-spacing:0; font-size:.7rem; }
.ferias-cal .ferias-mapa th, .ferias-cal .ferias-mapa td{
  border:0; border-bottom:1px solid var(--line); border-left:1px solid var(--line);
}
.ferias-cal .ferias-mapa thead th{
  height:auto; padding:.3rem 0 .25rem; background:var(--surface-2); color:var(--text-2);
  font-weight:500; line-height:1.1; vertical-align:bottom;
}
.ferias-cal .ferias-mapa thead th small{
  display:block; font-family:var(--f-mono); font-size:.55rem; color:var(--text-3); text-transform:uppercase;
}
.ferias-cal .ferias-mapa thead th b{ display:inline-block; font-family:var(--f-mono); font-weight:500; font-size:.66rem; padding:1px 2px; }
.ferias-cal .ferias-mapa th.ferias-mapa-quem{ border-left:0; border-right:1px solid var(--line-strong); }
.ferias-cal .ferias-mapa thead th.ferias-mapa-quem{ vertical-align:bottom; font-weight:500; }
.ferias-cal .ferias-mapa td{ position:relative; width:19px; height:28px; background:transparent; }
/* Colunas e nome mais justos do que no resto do admin: com o painel dos pedidos ao lado, o
   mês inteiro (31 dias e o total) tem de caber sem rolar num ecrã de 1440. O nome que não
   couber parte em duas linhas. */
.ferias-cal .ferias-mapa thead th{ min-width:19px; }
.ferias-cal .ferias-mapa th.ferias-mapa-quem{ min-width:110px; max-width:150px; white-space:normal; line-height:1.2; }
.ferias-cal .ferias-mapa th.ferias-mapa-total, .ferias-cal .ferias-mapa td.ferias-mapa-total{ width:34px; }
.ferias-cal .ferias-mapa th.ferias-mapa-total, .ferias-cal .ferias-mapa td.ferias-mapa-total{
  font-family:var(--f-mono); font-weight:500; border-left:1px solid var(--line-strong);
}

/* Fim de semana: mais apagado. Feriado: tramado, na coluna inteira (cabeçalho incluído). */
.ferias-cal .ferias-mapa td.ferias-mapa-fds,
.ferias-cal .ferias-mapa thead th.ferias-mapa-fds{ background:color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ferias-cal .ferias-mapa thead th.ferias-mapa-fds{ color:var(--text-3); }
.ferias-cal .ferias-mapa td.ferias-mapa-feriado,
.ferias-cal .ferias-mapa thead th.ferias-mapa-feriado{
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 13%, transparent) 0 2px, transparent 2px 6px);
}
.ferias-cal .ferias-mapa thead th.ferias-mapa-feriado{ color:var(--st-bad); }
/* Hoje: a coluna toda num tom do acento, e o número do dia num rótulo cheio. */
.ferias-cal .ferias-mapa td.ferias-mapa-hoje,
.ferias-cal .ferias-mapa thead th.ferias-mapa-hoje{ background-color:var(--accent-soft); }
.ferias-cal .ferias-mapa thead th.ferias-mapa-hoje b{ background:var(--accent); color:var(--accent-ink); border-radius:3px; }
.ferias-cal .ferias-mapa thead th.ferias-mapa-hoje small{ color:var(--accent); }

/* As barras. O `left:-1px` tapa a linha da grelha à esquerda, para dias seguidos darem uma
   barra só. */
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado,
.ferias-cal .ferias-mapa td.ferias-mapa-pendente,
.ferias-cal .ferias-mapa td.ferias-mapa-meio-manha,
.ferias-cal .ferias-mapa td.ferias-mapa-meio-tarde{ background:transparent; }
.ferias-cal .ferias-mapa td.ferias-mapa-hoje.ferias-mapa-aprovado,
.ferias-cal .ferias-mapa td.ferias-mapa-hoje.ferias-mapa-pendente{ background:var(--accent-soft); }
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado::before,
.ferias-cal .ferias-mapa td.ferias-mapa-pendente::before{
  content:""; position:absolute; top:5px; bottom:5px; left:-1px; right:0; z-index:1;
}
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado::before{ background:var(--st-ok); }
.ferias-cal .ferias-mapa td.ferias-mapa-pendente::before{
  background:var(--st-pend-bg);
  border:1.5px dashed var(--st-pend);
}
/* As pontas: arredondadas no primeiro e no último dia de cada sequência; no meio, a barra
   segue sem tracejado a cortá-la. */
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado::before,
.ferias-cal .ferias-mapa td.ferias-mapa-pendente::before{ border-radius:4px; margin-left:2px; margin-right:2px; }
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado + td.ferias-mapa-aprovado::before,
.ferias-cal .ferias-mapa td.ferias-mapa-pendente + td.ferias-mapa-pendente::before{
  border-top-left-radius:0; border-bottom-left-radius:0; margin-left:0; border-left:0;
}
.ferias-cal .ferias-mapa td.ferias-mapa-aprovado:has(+ td.ferias-mapa-aprovado)::before,
.ferias-cal .ferias-mapa td.ferias-mapa-pendente:has(+ td.ferias-mapa-pendente)::before{
  border-top-right-radius:0; border-bottom-right-radius:0; margin-right:0; border-right:0;
}
/* Meio-dia: meia barra -- de manhã em cima, de tarde em baixo, como sempre foi no Portal. */
.ferias-cal .ferias-mapa td.ferias-mapa-meio-manha::before{ bottom:50%; }
.ferias-cal .ferias-mapa td.ferias-mapa-meio-tarde::before{ top:50%; }

/* ---- A legenda, com as mesmas formas ---- */
.ferias-cal .ferias-mapa-legenda{ gap:.5rem 1.1rem; color:var(--text-2); }
.ferias-cal .ferias-mapa-amostra{
  width:20px; height:11px; border-radius:3px; border:1px solid var(--line-strong); background:var(--surface);
  vertical-align:-1px; margin-right:.4rem;
}
.ferias-cal .ferias-mapa-amostra.ferias-mapa-aprovado{ background:var(--st-ok); border-color:var(--st-ok); }
.ferias-cal .ferias-mapa-amostra.ferias-mapa-pendente{ background:var(--st-pend-bg); border:1.5px dashed var(--st-pend); }
.ferias-cal .ferias-mapa-amostra.ferias-mapa-aprovado.ferias-mapa-meio-manha{
  background:linear-gradient(to bottom, var(--st-ok) 50%, transparent 50%);
}
.ferias-cal .ferias-mapa-amostra.ferias-mapa-fds{ background:color-mix(in srgb, var(--text) 6%, var(--surface)); border-color:var(--line); }
.ferias-cal .ferias-mapa-amostra.ferias-mapa-feriado{
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 22%, transparent) 0 2px, transparent 2px 5px);
}

/* ---- Os pedidos por decidir, em cartões ---- */
.ferias-pedidos{ list-style:none; margin:0; padding:0; }
.ferias-pedido{ display:grid; gap:.45rem; padding:.8rem .9rem; border-bottom:1px solid var(--line); }
.ferias-pedido:last-child{ border-bottom:0; }
.ferias-pedido-cabeca{ display:flex; align-items:center; gap:.5rem; }
.ferias-pedido-cabeca b{ flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ferias-pedido-cabeca .badge{ flex:none; font-family:var(--f-mono); }
.ferias-pedido-dias{ font-size:.8rem; color:var(--text-2); }
.ferias-pedido-nota{
  margin:0; padding:.4rem .6rem; font-size:.8rem; color:var(--text-2);
  background:var(--surface-2); border-left:2px solid var(--line-strong); border-radius:0 var(--r) var(--r) 0;
  overflow-wrap:anywhere;
}
.ferias-pedido-accoes{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ferias-pedido-accoes form{ display:flex !important; }
.ferias-pedido-accoes form:nth-child(-n+2){ flex:1; }
.ferias-pedido-accoes form:nth-child(-n+2) .btn{ flex:1; justify-content:center; }
/* O Aprovar é a ação principal do cartão: cheio, com o acento. Vai pelo valor do campo
   escondido para não ter de mexer no formulário. */
.ferias-pedido-accoes input[value="aprovado"] ~ .btn{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.ferias-pedido-accoes input[value="aprovado"] ~ .btn:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
.ferias-pedidos-vazio{ color:var(--text-3); font-size:.88rem; }

@media (max-width:1100px){
  .ferias-cal{ grid-template-columns:minmax(0, 1fr); }
  .ferias-cal-pedidos{ position:static; max-height:none; overflow:hidden; order:-1; }
}

/* ---- O mapa ao alto (telemóvel): as mesmas formas, uma célula de cada vez ----
   Ao alto os dias seguidos estão em linhas diferentes, e a barra contínua não se faz: cada
   dia é um bloco seu, com as mesmas regras de cheio / tracejado. */
@media (max-width:760px){
  .ferias-cal .ferias-mapa-vertical td{ height:28px; }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-aprovado::before,
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-pendente::before{
    top:4px; bottom:4px; left:5px; right:5px; margin:0; border-radius:4px;
  }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-pendente + td.ferias-mapa-pendente::before{ border-left:1.5px dashed var(--st-pend); border-radius:4px; }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-pendente:has(+ td.ferias-mapa-pendente)::before{ border-right:1.5px dashed var(--st-pend); border-radius:4px; }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-aprovado + td.ferias-mapa-aprovado::before,
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-aprovado:has(+ td.ferias-mapa-aprovado)::before{ border-radius:4px; }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-meio-manha::before{ bottom:50%; }
  .ferias-cal .ferias-mapa-vertical td.ferias-mapa-meio-tarde::before{ top:50%; }
  .ferias-cal .ferias-mapa-vertical th.ferias-mapa-dia{ border-left:0; border-right:1px solid var(--line-strong); }
  .ferias-cal .ferias-mapa-vertical tr.ferias-mapa-linha-fds td{ background:color-mix(in srgb, var(--text) 4%, var(--surface)); }
  .ferias-cal .ferias-mapa-vertical tr.ferias-mapa-linha-feriado th.ferias-mapa-dia{ color:var(--st-bad); }
  .ferias-cal .ferias-mapa-vertical tr.ferias-mapa-linha-hoje td{ background-color:var(--accent-soft); }

  .ferias-cal-nav .btn{ min-height:36px; min-width:36px; justify-content:center; }
  .ferias-pedido-accoes .btn{ min-height:40px; }
}

@media (prefers-reduced-motion: reduce){
  .resumo-aviso, .resumo-numeros a, .resumo-contagens a, .resumo-atalhos-grelha a,
  .ferias-pedido-accoes .btn{ transition:none; }
}

/* ==========================================================================
   Os Colaboradores (lista e ficha) e o Kanban
   ========================================================================== */
/* ==========================================================================
   Colaboradores (lista e ficha) e Kanban — desenho «Comando»
   --------------------------------------------------------------------------
   admin/employees.php, admin/employee-edit.php e includes/kanban-vista.php (este último
   partilhado pelo admin/kanban.php e pelo colaboradores/kanban.php).

   Só tokens (--surface, --line, --text-2, --accent, --st-*...): nenhuma cor escrita à mão, e
   por isso o escuro e o claro saem os dois daqui sem uma linha a mais.

   As classes novas têm prefixo próprio -- `col-` nos colaboradores, `kb-` no Kanban -- para
   não pisarem as partilhadas. As que já existiam (.kanban-*, .admin-tabs, .fat-bloco) são
   reescritas aqui por cima do admin.css: este ficheiro carrega depois dele, e por isso, com o
   mesmo peso, ganha sempre.
   ========================================================================== */

/* Escondido para quem vê, presente para o leitor de ecrã. */
.col-sr, .kb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
                 white-space:nowrap; }
.col-mono{ font-family:var(--f-mono); font-size:12.5px; }

/* ---------- cabeçalho das páginas (o número ao lado do título) ---------- */
.col-cabeca, .kb-cabeca{ margin-bottom:1rem; align-items:flex-end; }
.col-cabeca > div:first-child, .kb-cabeca > div:first-child{ flex:1; min-width:220px; }
.col-num, .kb-num{ font-family:var(--f-mono); font-size:15px; font-weight:400; font-stretch:100%;
                   color:var(--text-3); letter-spacing:0; margin-left:.25rem; }
.col-sub, .kb-sub{ margin:.25rem 0 0; color:var(--text-2); font-size:.88rem; max-width:72ch; }
.kb-sub strong{ color:var(--text); font-weight:500; }

/* ==========================================================================
   A lista dos colaboradores
   ========================================================================== */
.col-barra{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.col-barra-sp{ flex:1; }
.col-barra-conta{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-3); white-space:nowrap; }

/* A procura com a lupa por dentro. O campo em si perde a moldura -- a moldura é a do rótulo,
   para a lupa ficar do lado de dentro dela. */
.col-procura{ display:flex; align-items:center; gap:7px; height:32px; width:260px; max-width:100%;
              padding:0 8px 0 9px; border:1px solid var(--line); border-radius:var(--r);
              background:var(--surface); color:var(--text-3); cursor:text; }
.col-procura:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.col-procura .i{ width:15px; height:15px; }
.col-barra .col-procura input{ flex:1; min-width:0; width:auto; height:100%; min-height:0; padding:0;
                               border:0; background:transparent; box-shadow:none; font-size:.84rem; }

/* Os dois filtros como «pastilhas» do protótipo: o nome do filtro por dentro, a tracejado
   enquanto está em «todos», a cheio quando filtra -- vê-se de relance se a lista está cortada. */
.col-chip{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 2px 0 9px;
           border:1px dashed var(--line-strong); border-radius:var(--r); background:transparent;
           color:var(--text-3); font-size:.8rem; white-space:nowrap; }
.col-chip:hover{ background:var(--surface-2); }
.col-chip.is-set{ border-style:solid; background:var(--surface-2); color:var(--text-2); }
.col-chip select{ width:auto; min-height:0; height:30px; padding:0 4px; border:0; background:transparent;
                  color:var(--text); font-size:.82rem; font-weight:500; box-shadow:none; cursor:pointer; }
.col-chip select:focus{ box-shadow:none; }
.col-chip:focus-within{ border-color:var(--accent-line); }
.col-barra .btn-sm{ height:32px; }
.col-limpar{ background:transparent; border-color:transparent; color:var(--text-2); }
.col-limpar:hover{ color:var(--text); }

.col-lista .col-vazio{ padding:2rem 1.2rem; text-align:center; }
.col-tabela td{ vertical-align:middle; padding-top:.5rem; padding-bottom:.5rem; }
.col-tabela tbody tr:hover td{ background:var(--surface-2); }
.col-quem a{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.col-quem strong{ font-weight:500; }
.col-quem a:hover strong{ color:var(--accent); }
.col-email, .col-data{ font-family:var(--f-mono); font-size:12px; color:var(--text-2); white-space:nowrap; }
.col-nada{ color:var(--text-3); }
.col-tag-empresa{ display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:4px;
                  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase;
                  color:var(--accent); border:1px solid var(--accent-line); white-space:nowrap; }
/* Um colaborador desativado continua na lista (pode ser preciso apagá-lo), mas recua. */
.col-inativo .col-quem a, .col-inativo .col-email{ opacity:.6; }

/* As ações discretas: o «Apagar» é um botão de texto até se pôr o rato na linha. Numa lista
   de vinte pessoas, vinte botões vermelhos a gritar eram mais fortes do que os nomes. */
.col-accoes{ justify-content:flex-end; gap:4px; white-space:nowrap; }
.col-accoes form{ margin:0; }
.col-tabela .col-accoes .btn-danger{ border-color:transparent; color:var(--text-3); }
.col-tabela tr:hover .col-accoes .btn-danger,
.col-tabela .col-accoes .btn-danger:focus-visible{ color:var(--st-bad); }
.col-tabela .col-accoes .btn-danger:hover{ border-color:var(--st-bad); background:var(--st-bad-bg); }
@media (hover:none){ .col-tabela .col-accoes .btn-danger{ color:var(--st-bad); } }

/* ==========================================================================
   A ficha de um colaborador
   ========================================================================== */
.col-ficha-topo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:.2rem 0 1rem; }
.col-monograma, .col-retrato{ width:56px; height:56px; border-radius:12px; flex:none; }
.col-monograma{ font-size:18px; font-stretch:118%; background:var(--accent-soft); color:var(--accent);
                border-color:var(--accent-line); }
.col-retrato{ object-fit:cover; border:1px solid var(--line-strong); background:var(--surface-2); }
.col-ficha-txt{ flex:1; min-width:200px; }
.col-ficha-txt h1{ margin:0; overflow-wrap:anywhere; }
.col-ficha-meta{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-top:5px;
                 color:var(--text-2); font-size:12.5px; }
.col-mail{ font-family:var(--f-mono); font-size:12px; color:var(--text-2); overflow-wrap:anywhere; }
.col-mail:hover{ color:var(--accent); }
.col-ponto{ width:3px; height:3px; border-radius:50%; background:var(--text-3); flex:none; }
.col-ficha-accoes{ display:flex; gap:6px; flex-wrap:wrap; }

/* Os três números, numa tira -- cada um leva ao separador do detalhe. */
.col-numeros{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 1rem;
              background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.col-numeros a{ display:block; padding:10px 14px; color:var(--text); text-decoration:none;
                border-right:1px solid var(--line); transition:background .12s; }
.col-numeros a:last-child{ border-right:0; }
.col-numeros a:hover{ background:var(--surface-2); color:var(--text); }
.col-n-rot{ display:block; font-size:11.5px; color:var(--text-3); }
.col-n-val b{ font-family:var(--f-mono); font-weight:500; font-size:16px; }
.col-n-val span{ font-size:12px; color:var(--text-3); }
.col-por-decidir .col-n-val b{ color:var(--st-pend); }

/* Os separadores: rolam de lado em vez de partirem linha, com o número dentro. */
.col-separadores{ overflow-x:auto; scrollbar-width:none; margin-bottom:1rem; }
.col-separadores::-webkit-scrollbar{ display:none; }
.col-separadores button{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 .8rem;
                         font-size:.84rem; flex-shrink:0; color:var(--text-2); }
.col-separadores button.active{ font-weight:600; }
.col-separadores .count{ height:16px; min-width:18px; font-size:10px; }
.col-separadores .col-count-pend{ background:var(--st-pend-bg); color:var(--st-pend); }

/* Duas colunas de secções (Ficha e Conta). Os blocos empilham-se com `gap`, e por isso a
   margem do `.fat-bloco + .fat-bloco` sai: seriam as duas somadas. */
.col-duas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.col-pilha{ display:grid; gap:16px; align-content:start; min-width:0; }
.col-pilha > .fat-bloco + .fat-bloco, .col-pilha .fat-bloco + .admin-card{ margin-top:0; }
.col-pilha > form > .fat-bloco{ margin-bottom:.6rem; }
.col-pilha > .admin-empty{ padding:1.4rem; }
/* A nota de cada bloco da Conta levava a margem do bloco E a do parágrafo, e ficava mais
   para dentro do que os campos por baixo dela. */
.col-pilha .fat-bloco.fat-preenchido > p.field-hint{ padding:0; margin-top:0; margin-bottom:.9rem; }

/* Cada campo é um par rótulo/valor, em linhas finas -- lê-se de cima a baixo sem saltar de
   coluna em coluna como na grelha de antes. */
.col-dl{ display:grid; grid-template-columns:minmax(120px,38%) minmax(0,1fr); margin:0; }
.col-dl dt, .col-dl dd{ margin:0; min-height:34px; padding:8px 14px; border-bottom:1px solid var(--line); font-size:.86rem; }
.col-dl dt{ color:var(--text-3); }
.col-dl dd{ color:var(--text); overflow-wrap:anywhere; }
.col-dl > :nth-last-child(-n+2){ border-bottom:0; }
.col-dl dd .btn{ vertical-align:middle; }
.col-seccao-vazia{ color:var(--text-3); font-size:.86rem; }

@media (max-width:900px){
  .col-duas{ grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   O Kanban
   ========================================================================== */
.kb-barra{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin-bottom:10px; }
.kb-barra-conta{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-2); }
.kb-barra-sp{ flex:1; }
.kb-legenda{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-3); }
.kb-legenda > span{ display:inline-flex; align-items:center; gap:6px; }
.kb-legenda i{ display:inline-block; width:16px; height:4px; border-radius:999px; }
.kb-leg-curso{ background:var(--accent); }
.kb-leg-cheia{ background:var(--st-ok); }
.kb-leg-dinheiro{ background:var(--text-3); }

.kb-pastilhas{ display:none; }

/* O quadro: as colunas lado a lado, a rolar dentro dele quando não cabem -- nunca a página.
   `position:relative` faz do quadro o offsetParent das colunas, que é o que as pastilhas do
   telemóvel usam para saber até onde rolar. */
.kanban-colunas{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(208px,1fr);
                 gap:12px; align-items:start; overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
                 scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.kanban-coluna{ display:flex; flex-direction:column; min-width:0; width:auto; margin:0; padding:0;
                background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r-lg); }
.kanban-coluna:last-child{ margin:0; }

/* Parte linha quando a coluna é estreita: o total desce para baixo do nome em vez de o cortar
   com reticências ("Em exe…"). */
.kanban-cabeca{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; justify-content:flex-start; min-height:42px; padding:8px 12px; }
.kanban-cabeca h3{ margin:0; font-size:.86rem; font-weight:600; text-transform:none; letter-spacing:0;
                   color:var(--text); min-width:0; overflow-wrap:anywhere; }
.kanban-conta{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px;
               padding:0 6px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text-2);
               font-family:var(--f-mono); font-size:10.5px; font-weight:500; flex:none; }
.kanban-total{ margin:0 0 0 auto; min-height:0; font-family:var(--f-mono); font-size:11.5px; font-weight:500;
               color:var(--text-2); white-space:nowrap; }

/* O símbolo de cada estado, o mesmo desenho do protótipo: tracejado por começar, cheio a meio
   em execução, visto quando concluída. Não depende só da cor -- a forma muda também. */
.kb-ic{ width:14px; height:14px; border-radius:50%; flex:none; position:relative; border:1.5px solid var(--text-3); }
.kb-em_orcamentacao .kb-ic{ border-style:dashed; }
.kb-aguarda_resposta .kb-ic{ border-color:var(--st-pend); }
.kb-adjudicada .kb-ic{ border-color:var(--accent); background:radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px); }
.kb-em_execucao .kb-ic{ border-color:var(--st-run); background:conic-gradient(var(--st-run) 0 50%, transparent 50% 100%); }
.kb-concluida .kb-ic{ border-color:var(--st-ok); background:var(--st-ok); }
.kb-concluida .kb-ic::after{ content:""; position:absolute; left:3.5px; top:1.5px; width:3px; height:6px;
                             border:solid var(--accent-ink); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.kb-cancelada .kb-ic{ border-color:var(--st-bad);
                      background:linear-gradient(135deg, transparent 44%, var(--st-bad) 44% 58%, transparent 58%); }

.kb-lista{ display:grid; gap:6px; align-content:start; padding:0 8px 10px; }

.kanban-cartao{ display:grid; gap:6px; min-height:0; margin:0; padding:10px 10px 9px;
                background:var(--surface); border:1px solid var(--line); border-radius:8px;
                box-shadow:var(--shadow-sm); color:var(--text); text-decoration:none;
                transition:border-color .12s, background .12s; }
.kanban-cartao:hover{ border-color:var(--line-strong); background:var(--surface-2); color:var(--text); box-shadow:var(--shadow-sm); }
.kanban-cartao:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.kanban-cartao.e-servico{ border-left-color:var(--line); }
/* O tipo é uma etiqueta: Obra no acento, Serviço neutro. Substitui o filete colorido à
   esquerda, que dizia o mesmo mas só a quem já soubesse o código. */
.kanban-marca{ justify-self:start; display:inline-flex; align-items:center; height:18px; padding:0 6px;
               border-radius:4px; border:1px solid var(--accent-line); color:var(--accent);
               font-family:var(--f-mono); font-size:10px; letter-spacing:.03em; text-transform:uppercase; line-height:1; }
.e-servico .kanban-marca{ border-color:var(--line-strong); color:var(--text-2); }
.kanban-nome{ font-size:.84rem; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3;
              -webkit-box-orient:vertical; overflow:hidden; }
.kanban-cliente{ font-size:.76rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kanban-barra{ height:4px; margin:2px 0 0; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.kanban-barra > i{ display:block; height:100%; min-width:4px; background:var(--accent); border-radius:999px; }
.kanban-barra.e-cheia > i{ background:var(--st-ok); }
.kanban-barra.e-dinheiro > i{ background:var(--text-3); }
.kb-pe{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.kanban-progresso{ flex:1; min-width:0; padding:0; font-size:.72rem; line-height:1.35; color:var(--text-3);
                   white-space:normal; overflow:visible; }
.kanban-valor{ margin:0; font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--text); white-space:nowrap; }
.kanban-valor.zero{ color:var(--text-3); font-weight:400; }
.kanban-vazio{ padding:14px 8px; border:1px dashed var(--line-strong); border-radius:6px;
               color:var(--text-3); font-size:.78rem; text-align:center; }

/* ==========================================================================
   Telemóvel
   ========================================================================== */
@media (max-width:760px){
  .col-procura{ width:100%; order:-1; height:42px; }
  .col-chip{ height:40px; }
  .col-chip select{ height:38px; }
  .col-barra .btn-sm{ height:40px; }
  .col-barra-sp{ display:none; }
  .col-barra-conta{ margin-left:auto; }

  .col-ficha-topo{ gap:12px; }
  .col-ficha-accoes{ width:100%; }
  .col-numeros{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .col-numeros a{ padding:9px 10px; }
  .col-n-rot{ font-size:10.5px; line-height:1.3; }
  .col-n-val span{ display:block; font-size:11px; }

  /* Uma coluna por ecrã, a parar em cada uma. As pastilhas por cima dizem onde se está. */
  .kb-legenda{ display:none; }
  .kb-pastilhas{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
                 margin:0 calc(-1 * var(--pad, 1rem)) 10px; padding:0 var(--pad, 1rem) 2px; }
  .kb-pastilhas::-webkit-scrollbar{ display:none; }
  .kb-pastilhas a{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
                   border:1px solid var(--line); border-radius:999px; background:var(--surface);
                   color:var(--text-2); font-size:.86rem; text-decoration:none; white-space:nowrap; }
  .kb-pastilhas a.is-atual{ background:var(--surface-3); border-color:var(--line-strong); color:var(--text); font-weight:500; }
  .kb-pastilha-n{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-3); }
  .kanban-colunas{ display:grid; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory;
                   scrollbar-width:none; overscroll-behavior-x:contain; padding-bottom:0; }
  .kanban-colunas::-webkit-scrollbar{ display:none; }
  .kanban-coluna{ scroll-snap-align:start; min-height:220px; }
  .kanban-cabeca{ min-height:46px; }
  .kanban-cabeca h3{ font-size:.95rem; }
  .kanban-cartao{ min-height:0; padding:12px; }
  .kanban-nome{ font-size:.92rem; }
}

@media (max-width:560px){
  /* A lista já passa a cartões (admin.css + tabelas-telemovel.js). O nome é o título do
     cartão, sem a etiqueta «NOME» à frente, e as ações ficam no fundo, encostadas à direita. */
  /* O peso dos seletores é para ganhar aos do admin.css (`table.fat-linhas:not(...) td`). */
  table.fat-linhas.col-tabela tbody td.col-quem{ display:block; padding-top:.55rem; padding-bottom:.55rem; }
  table.fat-linhas.col-tabela tbody td.col-quem::before{ content:none; }
  /* O rótulo herdava a letra da célula -- no email e na data saía em mono. */
  table.fat-linhas.col-tabela tbody td::before{ font-family:var(--f-ui); }
  .col-tabela tbody td.col-quem strong{ font-size:.98rem; }
  .col-tabela tbody td.col-accoes{ justify-content:flex-end; }
  .col-tabela .col-accoes .btn-danger{ color:var(--st-bad); }
  .col-lista{ background:transparent; border:0; border-radius:0; overflow:visible; }
  .col-lista .fat-rodape{ border-top:0; padding:.4rem .1rem 0; }

  /* Os pares rótulo/valor passam a um por cima do outro: a 360px, 38% para o rótulo deixava
     o IBAN partido em quatro linhas. */
  .col-dl{ grid-template-columns:minmax(0,1fr); }
  .col-dl dt{ min-height:0; padding:9px 14px 0; border-bottom:0; font-size:.76rem; }
  .col-dl dd{ min-height:0; padding:2px 14px 9px; }
  .col-dl > :nth-last-child(2){ border-bottom:0; }
}

@media (prefers-reduced-motion: reduce){
  .kanban-colunas, .kb-pastilhas{ scroll-behavior:auto; }
  .kanban-cartao, .col-numeros a, .col-separadores button{ transition:none; }
}

/* ==========================================================================
   O início do Portal de Colaboradores e o Registo Semanal no telemóvel
   ========================================================================== */
/* ==========================================================================
   Portal de Colaboradores — o Início e o Registo Semanal (desenho «Comando», 2026-10)
   --------------------------------------------------------------------------
   Desenhados a partir do telemóvel, que é onde um colaborador de obra abre o portal: o que
   está por tratar primeiro, os atalhos em quadrados que se acertam com o polegar, e o
   registo da semana um dia de cada vez.

   Só tokens da paleta (--surface, --line, --st-*...): o claro e o escuro vêm sozinhos do
   :root do admin.css, sem regras próprias para cada tema.
   ========================================================================== */

/* ============ Início (colaboradores/index.php) ============ */
.pi{ max-width:1120px; }
.pi-ola{ margin-bottom:1.1rem; }
.pi-ola h1{ font-size:1.7rem; margin:0; }
.pi-data{ margin:0 0 .2rem; font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-3); }

/* Num ecrã largo, à esquerda o que pede atenção e o saldo; à direita os atalhos. */
.pi-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:0 2rem; align-items:start; }
.pi-col{ min-width:0; }

.pi-sec{ display:flex; align-items:center; gap:.6rem; margin:1.3rem 0 .55rem; min-height:28px; }
.pi-col > .pi-sec:first-child{ margin-top:0; }
.pi-sec h2{ flex:1; margin:0; font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); }

/* O que está à espera: linhas inteiras clicáveis, com a cor do estado no ícone. */
.pi-alertas{ display:grid; gap:6px; }
.pi-alerta{ display:flex; align-items:center; gap:.75rem; min-height:56px; padding:.6rem .8rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--text); text-decoration:none; transition:border-color .12s ease, background .12s ease; }
.pi-alerta:hover{ border-color:var(--line-strong); background:var(--surface-2); color:var(--text); }
.pi-alerta > .i:first-child{ width:18px; height:18px; color:var(--st-pend); }
.pi-alerta--mau > .i:first-child{ color:var(--st-bad); }
.pi-alerta--acento > .i:first-child{ color:var(--accent); }
.pi-alerta--ok > .i:first-child{ color:var(--st-ok); }
.pi-alerta-txt{ flex:1; min-width:0; }
.pi-alerta-txt b{ display:block; font-weight:500; }
.pi-alerta-txt span{ display:block; font-size:.8rem; color:var(--text-3); }
.pi-seta{ color:var(--text-3); width:14px; height:14px; }

/* O saldo de férias: o número grande e uma barra repartida em aprovado / em pedido / livre. */
.pi-saldo{ display:block; padding:.9rem 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); color:var(--text); text-decoration:none; transition:border-color .12s ease; }
.pi-saldo:hover{ border-color:var(--line-strong); color:var(--text); }
.pi-saldo-n{ display:flex; align-items:baseline; gap:.45rem; margin-bottom:.6rem; }
.pi-saldo-n b{ font-family:var(--f-ui); font-stretch:118%; font-size:1.9rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.pi-saldo-n span{ color:var(--text-3); }
.pi-barra{ display:flex; gap:2px; height:8px; }
.pi-barra i{ display:block; height:100%; border-radius:2px; }
.pi-barra-aprov{ background:var(--st-ok); }
.pi-barra-pedido{ background:var(--st-pend-bg); outline:1.5px dashed var(--st-pend); outline-offset:-1.5px; }
.pi-barra-livre{ flex:1; background:var(--surface-3); }
.pi-barra i[style="width:0%"]{ display:none; }
.pi-legenda{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.6rem; font-size:.76rem; color:var(--text-3); }
.pi-legenda i{ display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:2px; }
.pi-leg-aprov{ background:var(--st-ok); }
.pi-leg-pedido{ outline:1.5px dashed var(--st-pend); outline-offset:-1.5px; }
.pi-leg-livre{ background:var(--surface-3); }

/* Os atalhos: um quadrado por destino, ícone, nome e uma linha a dizer o que lá está. */
.pi-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; }
.pi-tile{ display:grid; align-content:start; gap:.3rem; padding:.8rem .85rem; min-height:96px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--text); text-decoration:none; transition:border-color .12s ease, background .12s ease; }
.pi-tile:hover{ border-color:var(--accent-line); background:var(--surface-2); color:var(--text); }
.pi-tile .i{ width:18px; height:18px; color:var(--text-2); margin-bottom:.15rem; }
.pi-tile:hover .i{ color:var(--accent); }
.pi-tile b{ font-weight:600; font-size:.9rem; }
.pi-tile span{ font-size:.76rem; line-height:1.35; color:var(--text-3); }

@media (max-width:900px){
  .pi-cols{ grid-template-columns:minmax(0,1fr); }
  .pi-col + .pi-col > .pi-sec:first-child{ margin-top:1.3rem; }
}
/* No telemóvel os atalhos são o que o protótipo pediu: três por linha, só ícone e nome. A
   descrição sai -- num quadrado de 100px eram quatro linhas de letra miúda. */
@media (max-width:760px){
  .pi-ola h1{ font-size:1.45rem; }
  .pi-alerta-txt b{ font-size:15px; }
  .pi-alerta-txt span{ font-size:13px; }
  .pi-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pi-tile{ min-height:72px; padding:.7rem .6rem; gap:.4rem; }
  .pi-tile b{ font-size:14px; font-weight:500; line-height:1.2; overflow-wrap:anywhere; }
  .pi-tile span{ display:none; }
}

/* ============ Registo Semanal (colaboradores/registo-semanal.php) ============ */

/* --- A grelha, em ecrã largo: a mesma tabela, com os números em mono e caixas maiores. */
.rsp .rs-wrap{ border-color:var(--line); border-radius:var(--r-lg); }
.rsp .rs-grelha th, .rsp .rs-grelha td{ border-color:var(--line); padding:.4rem .35rem; }
.rsp .rs-grelha thead th{ background:var(--surface-2); color:var(--text-3); font-family:var(--f-mono);
  font-weight:500; font-size:.68rem; letter-spacing:.06em; }
.rsp .rs-grelha thead th small{ display:block; color:var(--text-2); font-size:.74rem; }
.rsp .rs-grelha thead th.rs-hoje, .rsp .rs-grelha thead th.rs-hoje small{ color:var(--accent); }
.rsp .rs-grelha tr[data-chave] td.rs-hoje, .rsp .rs-grelha tfoot td.rs-hoje{ background:var(--accent-soft); }
.rsp .rs-grelha th.rs-fechado{ color:var(--text-3); opacity:.7; }
.rsp .rs-grelha th.rs-tarefa{ background:var(--surface-2); box-shadow:1px 0 0 var(--line); }
.rsp .rs-grelha tbody th.rs-tarefa{ background:var(--surface); color:var(--text); }
.rsp .rs-fim-semana{ background:var(--bg); }
.rsp .rs-grelha td.rs-total, .rsp .rs-grelha th.rs-total, .rsp .rs-grelha tfoot td{
  background:var(--surface-2); font-family:var(--f-mono); font-weight:500; }
.rsp .rs-h{ width:3rem; height:32px; padding:0 .2rem; font-family:var(--f-mono); font-size:.84rem;
  background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r); }
.rsp .rs-h:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* Uma caixa fechada (férias aprovadas, dia já decidido) lê-se diferente de uma vazia: o
   tracejado é o mesmo do protótipo para "não se escreve aqui". */
.rsp .rs-h[readonly]{ background:transparent; color:var(--text-3); border-style:dashed; border-color:var(--line-strong); }
.rsp .rs-automatica td{ background:var(--st-ok-bg); color:var(--st-ok); font-family:var(--f-mono); font-weight:500; }
.rsp .rs-nota, .rsp .rs-anexo{ color:var(--text-3); }
.rsp .rs-nota:hover, .rsp .rs-anexo:hover, .rsp .rs-nota-cheia{ color:var(--accent); }
.rsp .rs-anexo-cheio{ color:var(--st-ok); }
.rsp .rs-recusa{ color:var(--st-bad); }
.rsp .rs-balanco{ font-family:var(--f-mono); color:var(--text-3); }
.rsp .rs-balanco b{ color:var(--text); font-weight:500; }
.rsp .rs-semana strong{ font-family:var(--f-mono); font-weight:500; }

/* --- O modo de telemóvel. Nasce escondido e só aparece com o `.rsm-on`, que o
   registo-telemovel.js põe no formulário depois de se montar -- sem JavaScript fica a grelha. */
.rsm, .rsm-barra{ display:none; }

@media (max-width:760px){
  /* Dentro do bloco, o formulário ganha largura: cada 4px contam numa faixa de sete dias. */
  .rsp .fat-bloco.fat-preenchido > .rs-form{ margin-left:.7rem; margin-right:.7rem; }
  .rs-form.rsm-on{ padding-bottom:84px; }
  .rs-form.rsm-on .rs-wrap{ display:none; }
  .rs-form.rsm-on .rs-rodape .rs-balanco,
  .rs-form.rsm-on .rs-rodape > button[type=submit]{ display:none; }
  .rs-form.rsm-on .rs-rodape{ margin-top:1rem; }
  .rs-form.rsm-on .rs-escolher{ min-width:0; flex:1 1 180px; }

  .rs-form.rsm-on .rsm{ display:grid; gap:10px; }

  /* A faixa dos dias: sete botões, com o dia, o número e o total já lançado. */
  .rsm-dias{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  .rsm-dias button{ display:grid; justify-items:center; align-content:center; gap:1px; min-height:62px; padding:0;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    color:var(--text-2); font-family:var(--f-ui); font-size:11.5px; cursor:pointer; }
  .rsm-dias button b{ font-family:var(--f-mono); font-size:16px; font-weight:500; color:var(--text); }
  .rsm-dias button small{ font-family:var(--f-mono); font-size:10.5px; color:var(--text-3); white-space:nowrap; }
  .rsm-dias button small.rsm-cheio{ color:var(--st-ok); }
  .rsm-dias button small.rsm-excede{ color:var(--st-bad); font-weight:600; }
  .rsm-dias button.rsm-fechado{ background:var(--bg); border-style:dashed; }
  .rsm-dias button.rsm-hoje > span{ color:var(--accent); font-weight:600; }
  .rsm-dias button[aria-selected="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
    background:var(--accent-soft); }

  .rsm-dia-titulo{ margin:2px 0 0; font-size:.82rem; color:var(--text-2); }

  .rsm-lista{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
  .rsm-ferias{ padding:.75rem .9rem; background:var(--st-ok-bg); color:var(--st-ok); border-bottom:1px solid var(--line); }
  .rsm-ferias b{ display:block; font-weight:600; }
  .rsm-ferias span{ font-size:13px; color:var(--text-2); }
  .rsm-vazio{ margin:0; padding:1rem .9rem; color:var(--text-3); font-size:.9rem; }

  /* Uma tarefa: o nome à esquerda, o − valor + à direita, e o comentário / comprovativo
     numa linha por baixo. */
  .rsm-linha{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 10px;
    padding:.7rem .8rem; border-top:1px solid var(--line); }
  .rsm-lista > .rsm-linha:first-child{ border-top:0; }
  .rsm-nome{ min-width:0; display:grid; gap:2px; }
  .rsm-nome b{ font-weight:500; font-size:14.5px; line-height:1.3; overflow-wrap:anywhere; }
  .rsm-nome small{ font-size:12px; color:var(--text-3); }
  .rsm-nome small.rsm-recusa{ color:var(--st-bad); }
  .rsm-linha--com-horas .rsm-nome b{ color:var(--text); }

  .rsm-stp{ display:flex; align-items:center; gap:4px; }
  .rsm-btn{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0;
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-lg);
    color:var(--text); font-family:var(--f-ui); font-size:22px; line-height:1; cursor:pointer;
    touch-action:manipulation; transition:background .1s ease, border-color .1s ease; }
  .rsm-btn:active{ background:var(--surface-3); border-color:var(--accent); }
  .rsm-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .rsm-stp output{ min-width:44px; text-align:center; font-family:var(--f-mono); font-size:16px; color:var(--text-3); }
  .rsm-linha--com-horas .rsm-stp output{ color:var(--text); font-weight:500; }

  .rsm-fixo{ display:inline-flex; align-items:center; gap:6px; height:48px; padding:0 .8rem;
    border:1px dashed var(--line-strong); border-radius:var(--r-lg); color:var(--text-2);
    font-family:var(--f-mono); font-size:14px; }
  .rsm-fixo .i{ width:14px; height:14px; }
  .rsm-linha--fechada .rsm-nome b{ color:var(--text-2); }

  .rsm-extras{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
  .rsm-ext{ display:inline-flex; align-items:center; gap:4px; min-height:36px; max-width:100%; padding:0 .7rem;
    background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--text-3);
    font-family:var(--f-ui); font-size:13px; text-decoration:none; cursor:pointer; }
  .rsm-ext > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rsm-ext--cheio{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
  .rsm-ext:disabled{ opacity:.45; cursor:not-allowed; }

  /* A barra de baixo, por cima da barra de separadores do painel (que mede ~61px). */
  .rs-form.rsm-on .rsm-barra{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; z-index:150;
    bottom:calc(61px + env(safe-area-inset-bottom, 0px)); padding:10px 16px;
    background:var(--bg-raised); border-top:1px solid var(--line); }
  .rsm-barra-tot{ flex:1; min-width:0; display:grid; gap:4px; }
  .rsm-barra-tot > span:first-child{ font-size:13px; color:var(--text-3); }
  .rsm-barra-tot b{ font-family:var(--f-mono); font-size:18px; font-weight:500; color:var(--text); }
  .rsm-medidor{ display:block; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; }
  .rsm-medidor i{ display:block; height:100%; width:0; background:var(--accent); border-radius:2px; transition:width .15s ease; }
  .rsm-barra-tot small{ font-size:12px; color:var(--text-3); }
  .rsm-barra--falta .rsm-barra-tot small{ color:var(--st-pend); }
  .rsm-barra--ok .rsm-medidor i{ background:var(--st-ok); }
  .rsm-barra--ok .rsm-barra-tot small{ color:var(--st-ok); }
  .rsm-barra--mau .rsm-medidor i{ background:var(--st-bad); }
  .rsm-barra--mau .rsm-barra-tot small, .rsm-barra--mau .rsm-barra-tot b{ color:var(--st-bad); }
  .rsm-barra .btn{ height:48px; min-height:48px; padding:0 1.4rem; font-size:15px; flex:none; }
}

@media (prefers-reduced-motion: reduce){
  .pi-alerta, .pi-saldo, .pi-tile, .rsm-btn, .rsm-medidor i{ transition:none; }
}

/* A sombra de "há mais coluna para o lado", só quando HÁ: uma tampa da cor do bloco rola com
   o conteúdo (local) e tapa a sombra, que fica parada na borda (scroll). Quando a tabela cabe,
   a tampa nunca sai de cima dela -- antes via-se uma faixa cinzenta em tabelas que cabiam. */
.tabela-rolavel{
  background:
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to left, rgba(0,0,0,.28), transparent) right center / 14px 100% no-repeat scroll;
}

/* Arquimim: a mesma moldura, com o dourado e a marca do projeto. */
.arq-mark{position:relative;display:inline-block;width:52px;height:52px;flex:0 0 52px;overflow:hidden}
.arq-mark img{position:absolute!important;width:112px!important;height:112px!important;max-width:none!important;left:-30px;top:-30px;filter:none!important;object-fit:contain}
.arq-wordmark{font-family:var(--f-ui);font-size:22px;font-weight:500;letter-spacing:-.8px;color:var(--text)}
.admin-brand{flex-wrap:wrap;gap:8px}.admin-brand>span:last-child:not(.arq-mark){flex-basis:100%;margin:2px 0 0 60px;font-size:10px;letter-spacing:.12em}
.admin-login-marca img{width:150px!important;height:150px!important;object-fit:contain;filter:none!important}
.arq-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:26px 0 32px}
.arq-eyebrow{font-family:var(--f-mono);font-size:10px!important;letter-spacing:.15em;color:var(--accent)!important;margin:0 0 16px!important}
.arq-intro h1{font-size:clamp(27px,3vw,38px);font-weight:500;letter-spacing:-1.1px;margin:0 0 12px}.arq-intro p{color:var(--text-2);font-size:14px}
.arq-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}.arq-stats .stat-card{min-width:0;padding:22px;min-height:155px}.arq-stats .stat-card>b{margin:13px 0;font-weight:400}
.arq-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:24px}.arq-dashboard-grid .fat-bloco{min-width:0}.arq-dashboard-grid h3{display:flex;justify-content:space-between;gap:12px}.arq-dashboard-grid h3 a{font-size:11px;font-weight:400;color:var(--text-2)}
.arq-empty{padding:34px 24px;min-height:230px}.arq-empty>span{font-family:var(--f-mono);font-size:10px;color:var(--text-3)}.arq-empty h2{font-size:22px;font-weight:400;margin:24px 0 10px}.arq-empty p{font-size:13px;color:var(--text-2);max-width:380px;line-height:1.7;margin-bottom:22px}
.arq-quick{padding:28px;border:1px solid var(--accent-line);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--accent-soft)}.arq-quick h2{font-weight:400;font-size:21px;margin:0}.arq-quick .arq-eyebrow{display:block;margin-bottom:12px!important}.arq-actions{display:flex;gap:10px;flex-wrap:wrap}
.arq-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}.arq-wide{grid-column:1/-1}.arq-fields textarea,.arq-fields input:not([type=checkbox]),.arq-fields select{width:100%}.arq-fields input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.arq-subtext{display:block;color:var(--text-2);margin-top:5px}.arq-client-list{list-style:none;padding:0 20px;margin:0}.arq-client-list li{display:flex;gap:12px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.arq-client-list small{display:block;font-size:11px;color:var(--text-2);margin-top:6px}.arq-client-list a{min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px){.arq-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.arq-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:640px){.arq-intro{align-items:flex-start;flex-direction:column;margin-top:24px}.arq-intro h1{font-size:29px}.arq-stats{gap:10px}.arq-stats .stat-card{padding:16px;min-height:140px}.arq-stats .stat-card>b{font-size:28px}.arq-stats .stat-valor{font-size:23px!important}.arq-fields{grid-template-columns:1fr}.arq-quick{flex-direction:column;align-items:flex-start;padding:22px}.arq-wordmark{font-size:18px}.painel-top-marca .arq-mark{display:none}}
@media(min-width:881px){.sb-recolhida .admin-brand .arq-wordmark{display:none}.sb-recolhida .admin-brand .arq-mark{display:inline-block!important;width:28px;height:28px;flex-basis:28px;padding:0}.sb-recolhida .arq-mark img{width:60px!important;height:60px!important;left:-16px;top:-16px}}

/* Editor de textos dos acessos: apenas dentro da administração autenticada. */
.login-editor-intro{color:var(--text-2);max-width:760px;margin:0 0 24px;line-height:1.7}
.login-editor-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:0 0 26px;overflow-x:auto}
.login-editor-tabs a{padding:12px 0;border-bottom:2px solid transparent;color:var(--text-2);font-size:13px;white-space:nowrap}
.login-editor-tabs a[aria-current=page]{border-bottom-color:var(--accent);color:var(--accent)}
.login-editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:22px}
.login-editor-fields .field{margin:0}.login-editor-fields textarea{min-height:85px;resize:vertical}
.login-editor summary{cursor:pointer;color:var(--accent);font-size:14px;font-weight:500;padding:4px 0}
.login-editor .fat-barra-guardar{display:flex;align-items:center;justify-content:space-between;gap:20px}.login-editor .fat-barra-guardar p{color:var(--text-2);font-size:12px;margin:0}
@media(max-width:640px){.login-editor-fields{grid-template-columns:1fr}.login-editor-tabs{gap:18px}.login-editor-tabs a{font-size:12px}.login-editor .fat-barra-guardar{align-items:stretch;flex-direction:column}}
.gab-team{border:1px solid var(--line);border-radius:8px;padding:20px;margin:24px 0}.gab-team legend{font-weight:600;padding:0 8px}.gab-team>p{color:var(--text-2);font-size:13px;margin-bottom:16px}.gab-member{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}.gab-member small{display:block;color:var(--text-2);font-size:12px;margin-top:4px}.gab-member input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;vertical-align:middle}.gab-member .field input{width:100%}.gab-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px}.gab-facts dt{font-size:12px;color:var(--text-2)}.gab-facts dd{margin:5px 0;overflow-wrap:anywhere}.gab-team .field{margin-top:12px}.gab-team select{max-width:100%}@media(max-width:640px){.gab-member,.gab-facts{grid-template-columns:1fr}.gab-team{padding:12px}}

/* Documentação versionada dos projetos. */
.docs-disclosure>summary{padding:18px 20px;cursor:pointer;font-weight:600;color:var(--text)}.docs-form{padding:20px}.docs-form .arq-fields{margin-bottom:18px}.docs-check{display:flex;gap:8px;align-items:center}.docs-check input{width:18px;height:18px;accent-color:var(--accent)}.docs-versions td{vertical-align:top}.docs-versions small,.docs-note{overflow-wrap:anywhere;white-space:normal}.docs-note{max-width:320px;min-width:160px}.docs-state{margin-top:10px}.docs-state summary{font-size:12px;cursor:pointer;color:var(--accent)}.docs-state form{display:grid;gap:8px;margin-top:10px}.docs-state label{font-size:12px}.docs-state select{max-width:180px}.docs-events{list-style:none;margin:0;padding:8px 20px}.docs-events li{padding:14px 0;border-bottom:1px solid var(--line)}.docs-events li:last-child{border:0}.docs-events strong{font-size:13px;font-weight:500;display:block;overflow-wrap:anywhere}.docs-events small{display:block;margin-top:5px;color:var(--text-2);font-size:12px}.docs-archive{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.docs-archive p{font-size:13px;color:var(--text-2);margin-bottom:12px}.docs-upload-status{display:inline-block;margin:10px;color:var(--text-2);font-size:13px}@media(max-width:640px){.docs-form{padding:16px}.docs-note{min-width:0;max-width:none}.docs-versions .arq-subtext{max-width:100%;overflow-wrap:anywhere}.docs-versions td{min-width:0}.docs-state select{width:100%;max-width:100%}}

/* Workflow: etapas em sequência, com a mesma moldura dos projetos. */
.wf-heading{padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.wf-heading h2{display:flex;align-items:baseline;gap:.75rem;overflow-wrap:anywhere;min-width:0}
.wf-kicker{font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.wf-number{font:14px var(--f-mono);color:var(--accent);flex:none}
.wf-progress{width:calc(100% - 2.4rem);height:8px;margin:1rem 0;accent-color:var(--accent);border:0;border-radius:6px;background:var(--surface-3)}
.wf-progress::-moz-progress-bar{background:var(--accent)}
.wf-progress::-webkit-progress-bar{background:var(--surface-3)}
.wf-progress::-webkit-progress-value{background:var(--accent)}
.wf-stages{padding:0;list-style:none}.wf-stages>li{margin-bottom:1rem}
.wf-stages details{margin:.8rem 0}.wf-stages summary{cursor:pointer;color:var(--accent);width:fit-content}
.wf-step-form{margin-top:1rem;max-width:720px}.wf-notes{white-space:pre-wrap;overflow-wrap:anywhere}
.wf-select{margin-top:1rem;max-width:800px}.wf-select select{max-width:100%}
.wf-preview{padding-left:1.4rem}.wf-preview li{padding:.4rem;overflow-wrap:anywhere}
.wf-notice{padding:.8rem;border-left:3px solid var(--accent);background:var(--accent-soft)}

/* Tarefas por etapa, em ambos os temas do gabinete. */
.task-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.task-summary>div{display:grid;gap:4px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.task-summary strong{font-size:26px;font-weight:500}.task-summary span{font-size:12px;color:var(--text-2)}
.task-late{color:var(--st-bad)!important}.wf-notice.task-late{background:var(--surface);border-color:var(--st-bad)}.task-table td{overflow-wrap:anywhere}.task-table strong{display:block;max-width:440px}
.task-stage-link{margin-top:1rem;margin-bottom:.5rem}.task-stage-link a{font-size:13px}
@media(max-width:480px){.task-summary{gap:8px}.task-summary>div{padding:12px 10px}.task-summary strong{font-size:23px}}

/* Checklist: evidência por versão e decisões da gestão. */
.cp-item{margin-top:16px}.cp-item .wf-heading{align-items:flex-start}.cp-item .wf-heading h2{flex:1;min-width:160px}
.cp-item>p{padding:.25rem 0;margin-top:.3rem;margin-bottom:.3rem}.cp-evidence{overflow-wrap:anywhere}.cp-actions{padding-top:.5rem}.cp-actions summary{cursor:pointer;color:var(--accent)}
.cp-actions form{margin:1rem 0;max-width:720px}.cp-actions details{margin-top:1rem}.cp-item .badge{white-space:normal;text-align:left}
/* Projetos publicados: resumo próprio do cliente e decisões por versão. */
.pc-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.pc-card{padding:20px}.pc-card>h2{padding:0;background:none;border:0;margin:.8rem 0}.pc-card>p{padding:0;margin:.8rem 0}.pc-card .field{margin-top:1rem}
.pc-card h2,.pc-filename{overflow-wrap:anywhere}.pc-card .btn{max-width:100%;height:auto;min-height:34px;white-space:normal;padding:.45rem .85rem}
.pc-history{padding:0 20px;list-style:none}.pc-history>li{padding:12px 0 20px;border-bottom:1px solid var(--line)}.pc-history>li:last-child{border:0}.pc-history h3{padding:0;background:none;border:0;overflow-wrap:anywhere}.pc-history p{overflow-wrap:anywhere}

/* Diário interno de obra: originais privados apresentados pela rota autenticada. */
.ob-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:20px;margin-top:20px}
.ob-photos figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ob-photos img{display:block;width:100%;height:210px;object-fit:cover;background:var(--bg)}
.ob-photos figcaption{padding:16px;overflow-wrap:anywhere}
.ob-photos figcaption p{margin:0 0 8px}
.ob-photos figcaption small{display:block;margin-bottom:12px;color:var(--text-2)}

/* Valores financeiros devem caber dentro do cartão, mesmo em ecrãs estreitos. */
.arq-stats.fin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.fin-stats .stat-valor{white-space:normal;overflow-wrap:anywhere}
@media(max-width:1100px){.arq-stats.fin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.arq-stats.fin-stats{grid-template-columns:1fr}.fin-stats .stat-card{min-height:120px}}

.wf-template-tasks{margin:24px 0}.wf-template-task{min-width:0;border:1px solid var(--line);border-radius:10px;padding:18px;margin:18px 0}.wf-template-task legend{padding:0 8px;font-weight:600}.wf-template-task .docs-check{margin-top:12px}
.arq-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;align-items:start}.op-board-card{padding:18px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.op-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}.op-gallery figure{margin:0;overflow:hidden}.op-gallery img{width:100%;height:220px;object-fit:cover}.op-gallery figcaption{padding:16px;overflow-wrap:anywhere}.op-timeline{list-style:none;padding:0}.op-timeline li{border-left:3px solid var(--line);padding:8px 20px 24px;margin-left:12px}.op-timeline pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}.op-print{max-width:900px;margin:auto}@media print{.admin-sidebar,.painel-top,.painel-tabbar,.arq-actions,.btn,form,.admin-page-head>a{display:none!important}.admin-main{margin:0!important;padding:0!important}.admin-shell{display:block!important}.fat-bloco{break-inside:avoid}body{background:white!important;color:black!important}}

/* O quadro acompanha as tarefas do projeto; mantém os cinco estados lado a lado em desktop. */
.arq-task-board{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:16px}.arq-task-board>.fat-bloco{margin:0;min-width:0}.arq-task-board .op-board-card{padding:14px}.arq-task-board select{width:100%;min-width:0}
@media(max-width:1200px){.arq-task-board{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}

.arq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.arq-tabs>a,.arq-tabs>button{display:block;border:1px solid var(--line-strong);border-radius:6px;padding:10px 14px;background:var(--surface);color:var(--text-2);font:inherit;cursor:pointer}.arq-tabs>[aria-current]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
[data-workflow-builder][data-step="1"] .builder-config{display:none}.builder-stage{min-width:0;margin:16px 0}.builder-stage>.arq-actions{margin-bottom:12px}.builder-task{border:1px solid var(--line);padding:16px;margin:12px 0;border-radius:6px}.builder-stage legend{padding:0 8px;color:var(--text-2)}[data-project-order]{padding-left:24px}[data-project-order] li{padding:8px 0}[data-project-order] strong{display:inline-block;min-width:40%}

[data-builder-error][hidden]{display:none}.builder-stage>.field{margin:12px 0}.builder-stage>.field>input{width:100%}.builder-config>summary{padding:12px 0;cursor:pointer}
[data-workflow-builder] [hidden]{display:none!important}

/* Quadros e calendário: interação do Consultant, paleta interna do Arquimim. */
.task-planning{min-width:0}.task-filters,.calendar-filters{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:16px}.task-filters summary,.calendar-filters summary{cursor:pointer;font-weight:600}.task-filters .fat-filtros{margin:16px 0 0}.task-board-tools{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:16px 0}.task-board-tools label{display:grid;gap:6px;flex:0 1 360px}.consultant-board.arq-board{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x proximity;align-items:stretch}.consultant-board .kb-column{flex:1 0 255px;min-width:255px;max-width:340px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:12px;scroll-snap-align:start;transition:background .18s,border-color .18s}.kb-column h3{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 16px}.kb-dot{width:8px;height:8px;background:var(--text-2);border-radius:50%}.kb-column[data-state=em_curso] .kb-dot{background:var(--st-run)}.kb-column[data-state=bloqueada] .kb-dot{background:var(--st-bad)}.kb-column[data-state=concluida] .kb-dot{background:var(--st-ok)}.kb-count{margin-left:auto;border:1px solid var(--line);border-radius:20px;min-width:24px;text-align:center;font:12px var(--f-mono);padding:3px;background:var(--surface)}.kb-cards{min-height:200px}.consultant-board .kb-card{position:relative;min-width:0;margin:0 0 10px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .18s,border-color .18s}.kb-card[data-editable="1"]{cursor:grab}.kb-card:hover{transform:translateY(-2px);border-color:var(--accent-line)}.kb-card>a{display:block;font-size:14px;line-height:1.5;margin:5px 0 12px}.kb-card p{font-size:12px;color:var(--text-2);margin:8px 0}.kb-card p.task-late{color:var(--st-bad)}.kb-id{font:11px var(--f-mono);color:var(--text-2)}.kb-owner{display:flex;align-items:center;gap:8px}.kb-avatar{display:inline-grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--accent-soft);color:var(--accent)}.kb-move{border-top:1px solid var(--line);padding-top:10px;margin-top:12px;font-size:12px}.kb-move summary{cursor:pointer;color:var(--text-2)}.kb-move form{margin-top:10px}.kb-move .field{margin-bottom:10px}.kb-empty{font-size:12px;color:var(--text-2);padding:16px 6px;border:1px dashed var(--line-strong);border-radius:var(--r)}.consultant-board [hidden]{display:none!important}.consultant-board .kb-over{border-color:var(--accent);background:var(--accent-soft)}.kb-dragging{opacity:.4}.kb-saving{opacity:.6;pointer-events:none}.kb-column[data-state=concluida] .kb-card{border-left:3px solid var(--st-ok)}.kb-column[data-state=cancelada] .kb-card>a{text-decoration:line-through;color:var(--text-2)}
.task-dialog{width:min(900px,calc(100vw - 32px));max-width:900px;max-height:calc(100dvh - 32px);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;color:var(--text);background:var(--bg);box-shadow:var(--shadow)}.task-dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}.task-dialog>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-bottom:1px solid var(--line);padding:16px 24px}.task-dialog>header h2{font-size:16px;margin:0}.task-dialog [data-task-dialog-content]{padding:24px}.task-dialog .admin-page-head h1{font-size:22px}.task-dialog[open]{animation:task-dialog-in .2s ease-out}@keyframes task-dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.calendar-workspace{margin-top:20px;min-width:0}.calendar-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}.calendar-toolbar h2{font-size:18px;margin:0;flex:1;text-transform:capitalize}.calendar-toolbar [aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}.calendar-filters .arq-actions{margin-top:12px}.cal-kind{font-size:12px;border-left:3px solid var(--accent);padding-left:8px}.cal-kind-projeto{border-color:var(--st-run)}.cal-kind-tarefa{border-color:var(--accent)}.cal-kind-licenciamento{border-color:var(--st-ok)}.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start}.calendar-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}.cal-grid{width:100%;min-width:660px;table-layout:fixed;border-collapse:collapse}.cal-grid th{padding:12px 6px;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:500}.cal-grid td{height:125px;vertical-align:top;border:1px solid var(--line);padding:6px}.cal-week td{height:360px}.cal-day{display:block;font:12px var(--f-mono);margin:2px 0 10px}.cal-today{background:var(--accent-soft)}.cal-today .cal-day{color:var(--accent);font-weight:700}.cal-outside{background:var(--surface-2);color:var(--text-2)}.cal-event{display:block;width:100%;text-align:left;font:11px/1.5 var(--f-ui);padding:6px;margin:0 0 5px;border-width:0 0 0 3px;border-style:solid;border-radius:3px;color:var(--text);background:var(--surface-3);cursor:pointer;overflow-wrap:anywhere;transition:transform .15s,background .15s}.cal-event:hover{transform:translateY(-1px);background:var(--accent-soft)}.cal-event[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}.calendar-detail{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow-wrap:anywhere}.calendar-detail h3{font-size:16px;line-height:1.5}.calendar-detail p{font-size:13px;color:var(--text-2);line-height:1.6}
@media(max-width:1100px){.calendar-layout{grid-template-columns:minmax(0,1fr)}.calendar-detail{order:-1}.calendar-detail p{margin:8px 0}.calendar-detail .btn{margin-top:8px}}
@media(max-width:600px){.task-board-tools{align-items:stretch;flex-direction:column}.task-board-tools label{flex:auto}.task-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.task-dialog [data-task-dialog-content]{padding:12px}.task-dialog>header{padding:12px}.calendar-toolbar{gap:12px}.calendar-toolbar h2{flex-basis:100%;order:-1}.consultant-board .kb-column{flex-basis:245px;min-width:245px}.task-dialog .arq-fields{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.kb-card,.kb-column,.cal-event{transition:none!important}.kb-card:hover,.cal-event:hover{transform:none}.task-dialog[open]{animation:none}}
.cal-grid caption.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kb-column{animation:kb-enter .24s ease-out backwards}.kb-column:nth-child(2){animation-delay:.04s}.kb-column:nth-child(3){animation-delay:.08s}.kb-column:nth-child(4){animation-delay:.12s}.kb-column:nth-child(5){animation-delay:.16s}@keyframes kb-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.kb-column{animation:none}}
.task-planning>.task-filters{margin:16px 18px}.task-planning>.task-board-tools{margin:16px 18px}.task-planning>.consultant-board{margin:0 16px 16px}.task-planning>[data-board-feedback]{margin:12px 18px;position:sticky;top:var(--top-h);z-index:1;background:var(--surface)}.task-planning>[data-board-feedback]:empty{display:none}

/* Graphical workflows and their read-only project route. */
.wf-graph{margin:20px 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}.wf-graph-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border-bottom:1px solid var(--line)}.wf-graph-toolbar h2{margin:0;font-size:18px}.wf-graph-toolbar p{font-size:13px;color:var(--text-2);max-width:650px}.wf-graph-toolbar [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.wf-designer{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:410px}.wf-palette{padding:16px;background:var(--surface-2);border-right:1px solid var(--line);max-height:510px;overflow:auto}.wf-palette h3{font-size:14px;margin-top:0}.wf-palette-item{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}.wf-palette-item>span{flex:1;min-width:0}.wf-grip,.wf-add{border:1px solid var(--line);background:var(--surface);color:var(--text-2);padding:6px 9px;border-radius:var(--r);font-size:17px;cursor:pointer}.wf-grip{cursor:grab;touch-action:none}.wf-add{color:var(--accent)}.wf-graph-canvas{display:flex;gap:28px;align-items:center;overflow:auto;min-width:0;padding:30px;background-color:var(--bg);background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:18px 18px}.wf-graph-end{flex-shrink:0;padding:8px 12px;border:1px solid var(--line-strong);border-radius:30px;font-size:12px;background:var(--surface)}.wf-graph-nodes,.wf-route-nodes{list-style:none;display:flex;gap:30px;padding:0;margin:0}.wf-graph-node{width:230px;flex-shrink:0;position:relative;padding:16px;background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.wf-graph-node:not(:last-child)::after{content:'→';position:absolute;left:100%;width:30px;top:50%;text-align:center;color:var(--accent);font-size:20px}.wf-node-head{display:flex;align-items:center;justify-content:space-between}.wf-node-number{font:12px var(--f-mono);color:var(--accent)}.wf-node-title{display:block;margin:12px 0;border:0;padding:0;background:none;color:var(--text);text-align:left;font:600 15px/1.5 var(--f-ui);cursor:pointer;overflow-wrap:anywhere}.wf-node-meta{font-size:12px;color:var(--text-2);line-height:1.6}.wf-drop-empty{min-width:240px;padding:40px;border:2px dashed var(--accent-line);border-radius:var(--r-lg);color:var(--text-2);font-size:14px}.wf-drop-active{outline:2px solid var(--accent);outline-offset:-3px}.wf-drop-before{box-shadow:-7px 0 var(--accent)}.wf-drop-after{box-shadow:7px 0 var(--accent)}.wf-graph>[data-graph-count]{padding:0 20px}.wf-route{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:24px 0;background:var(--surface)}.wf-route-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.wf-route-heading h2{font-size:20px;margin:8px 0}.wf-route-heading p{font-size:13px}.wf-route-progress{display:grid;gap:8px;min-width:200px;max-width:100%}.wf-route-progress>strong{font:32px var(--f-mono);color:var(--accent)}.wf-route-progress>span{font-size:12px;color:var(--text-2)}.wf-route-progress progress{width:100%;accent-color:var(--accent)}.wf-route-current{padding:12px;background:var(--accent-soft);border-radius:var(--r);font-size:14px;line-height:1.6}.wf-route-scroll{overflow:auto;padding:20px 4px}.wf-route-node{width:210px;position:relative;flex-shrink:0;padding:18px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}.wf-route-node:not(:last-child)::after{content:'→';position:absolute;left:100%;width:30px;top:30px;text-align:center;color:var(--text-2)}.wf-route-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-3);font:12px var(--f-mono);margin-bottom:14px}.wf-route-node>a{display:block;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.wf-route-status{display:block;font-size:12px;margin:10px 0}.wf-route-node p{font-size:12px;color:var(--text-2);line-height:1.5}.wf-route-node p.task-late{color:var(--st-bad)}.wf-route-node[data-phase-state=em_curso]{border-color:var(--accent);background:var(--accent-soft)}.wf-route-node[data-phase-state=em_curso] .wf-route-dot{background:var(--accent);color:var(--accent-ink)}.wf-route-node[data-phase-state=concluida] .wf-route-dot{background:var(--st-ok-bg);color:var(--st-ok)}.wf-route-node[data-phase-state=dispensada]{border-style:dashed}.wf-stages>li[id]{scroll-margin-top:70px}.wf-stages>li:target{outline:2px solid var(--accent);outline-offset:3px}
[data-project-panel][hidden],[data-project-tabs][hidden]{display:none!important}.project-form-tabs{margin:16px 0 24px}.project-form-tabs [aria-selected=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}[data-project-panel]{min-width:0}.project-save{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.project-save .field-hint{margin:0}.municipality-filters{display:flex;align-items:end;gap:12px;margin:20px 0}.municipality-filters>.field{flex:1;margin:0}.municipality-filters input{width:100%}.municipality-table caption{padding:12px;text-align:left;font-size:13px;color:var(--text-2)}.municipality-column-filters label{display:block;font-size:12px;font-weight:400;margin-bottom:6px}.municipality-column-filters select{min-width:170px;width:100%}.municipality-pagination{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}.municipality-pagination>span{margin-left:auto;font-size:13px}.municipality-table{min-width:560px}
@media(max-width:700px){.wf-designer{grid-template-columns:minmax(0,1fr)}.wf-palette{max-height:210px;border-right:0;border-bottom:1px solid var(--line)}.wf-graph-canvas{min-height:320px;padding:20px}.wf-graph-toolbar,.wf-route-heading{align-items:stretch;flex-direction:column}.wf-graph-node{width:215px}.wf-route{padding:16px}.wf-route-node{width:200px}.project-save,.municipality-filters{align-items:stretch;flex-direction:column}.municipality-pagination>span{margin-left:0}.project-form-tabs{flex-wrap:wrap}}
.dashboard-trends{margin:24px 0}.dashboard-trends .admin-page-head h2{font-size:20px}.dashboard-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;scroll-margin-top:70px}.dashboard-chart{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}.dashboard-chart h3{margin-top:0}.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px}.chart-legend>span{display:flex;align-items:center;gap:6px}.chart-legend i{width:10px;height:10px;display:inline-block;border-radius:2px}.chart-key-a{background:var(--accent)}.chart-key-b{background:var(--st-run)}.dashboard-svg{display:block;width:100%;height:auto;margin:16px 0}.dashboard-svg text{fill:var(--text-2);font:12px var(--f-ui)}.chart-gridline{stroke:var(--line);stroke-width:1}.chart-bar-a{fill:var(--accent)}.chart-bar-b{fill:var(--st-run)}.dashboard-chart summary{cursor:pointer;font-size:13px}.chart-empty{font-size:13px;color:var(--text-2)}@media(max-width:1000px){.dashboard-chart-grid{grid-template-columns:minmax(0,1fr)}}
.dashboard-shortcuts{gap:12px;padding:12px 0 24px;margin:12px 0 0}.architecture-flow{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin:0 0 24px}.architecture-flow>header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px}.architecture-flow h2{margin:6px 0;font-size:22px}.architecture-flow header p:not(.wf-kicker){font-size:13px;color:var(--text-2);margin-bottom:0}.architecture-scroll{overflow:auto}.architecture-drawing{width:100%;min-width:760px;display:block;color:var(--text-2)}.architecture-grid{opacity:.18}.architecture-drawing text{fill:var(--text-2);font:11px var(--f-mono);letter-spacing:1px}.architecture-caption{font-size:9px!important;fill:var(--accent)!important}.architecture-lines path{fill:none;stroke:var(--text);stroke-width:1.3;stroke-linejoin:round}.architecture-lines .architecture-detail{stroke:var(--accent);stroke-width:.7}.architecture-link{stroke:var(--line-strong);stroke-width:1;fill:none;stroke-dasharray:4 4}.architecture-signal{stroke:var(--accent);stroke-width:2;fill:none}.architecture-shadow{fill:var(--text);opacity:.07}.architecture-solid path{stroke:var(--line-strong);stroke-width:1}.architecture-wall-front{fill:var(--surface-3)}.architecture-wall-side{fill:var(--line-strong)}.architecture-roof{fill:var(--accent-soft)}.architecture-roof-side{fill:var(--accent)}.architecture-gable{fill:var(--surface-2)}.architecture-window{fill:var(--st-run-bg)}.architecture-flow [hidden]{display:none!important}
.motion-enabled .architecture-lines path{stroke-dasharray:1;stroke-dashoffset:0;animation:architecture-draw 14s linear infinite}.motion-enabled .architecture-elevation path{animation-delay:1.3s}.motion-enabled .architecture-section path{animation-delay:2.6s}.motion-enabled .architecture-volume .architecture-lines path{animation-delay:3.9s}.motion-enabled .architecture-solid{animation:architecture-solid 14s linear infinite}.motion-enabled .architecture-signal{stroke-dasharray:.12 .88;animation:architecture-flow 14s linear infinite}.motion-paused *{animation-play-state:paused!important}@keyframes architecture-draw{0%,5%{stroke-dashoffset:1;opacity:.25}25%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.25}}@keyframes architecture-solid{0%,35%{opacity:0;transform:translateY(-6px)}50%,85%{opacity:1;transform:none}100%{opacity:0}}@keyframes architecture-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:-1}}@media(prefers-reduced-motion:reduce){.architecture-flow *{animation:none!important}.architecture-solid{opacity:1;transform:none}}@media(max-width:600px){.architecture-flow>header{flex-direction:column;align-items:start;padding:18px}.dashboard-shortcuts{align-items:stretch}.dashboard-shortcuts .btn{flex:1 1 160px}}
.municipality-table-wrap{width:100%;min-width:0;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
/* The directory keeps real columns, including filters, on narrow screens. */
table.admin-table.municipality-table{display:table;min-width:620px;background:var(--surface)}table.admin-table.municipality-table thead{display:table-header-group;position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}table.admin-table.municipality-table tbody{display:table-row-group}table.admin-table.municipality-table tr{display:table-row;padding:0;margin:0;border:0;border-radius:0}table.admin-table.municipality-table tbody td{display:table-cell!important;border-bottom:1px solid var(--line);padding:.55rem .8rem}table.admin-table.municipality-table tbody td::before{display:none!important}

/* Dependency graphs: ordering is visual, only explicit edges gate work. */
.wf-dag{display:grid;position:relative;gap:36px 74px;width:max-content;align-items:stretch;padding:8px;isolation:isolate}.wf-dag>li{width:230px;box-sizing:border-box;z-index:1}.wf-dag>li::after{display:none}.wf-edges{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0;color:var(--accent)}.wf-edges>path{fill:none;stroke:currentColor;stroke-width:1.6}.wf-link-tools{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}.wf-link-tools>.arq-fields{margin-top:12px;align-items:end;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto auto}.wf-link-tools .field{margin:0}.wf-dependencies{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:12px 0;min-width:0}.wf-dependencies legend{font-size:13px;font-weight:600}.wf-dependencies [data-dependency-options]{max-height:180px;overflow:auto}.wf-dependencies .docs-check{font-size:13px;overflow-wrap:anywhere;align-items:flex-start}.wf-readiness{font-size:12px;line-height:1.6;padding:8px 10px;border-radius:var(--r);background:var(--accent-soft);color:var(--text-2);overflow-wrap:anywhere}.wf-graph-canvas{align-items:flex-start;max-height:720px}.wf-route-scroll{max-height:700px}.wf-graph-nodes:not(.wf-dag) .wf-graph-node::after,.wf-route-nodes:not(.wf-dag) .wf-route-node::after{display:none}@media(max-width:700px){.wf-link-tools>.arq-fields{grid-template-columns:minmax(0,1fr)}.wf-dag>li{width:230px}}
/* Project and portfolio Gantt: synchronized labels and time axis. */
.dashboard-gantt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin:24px 0;overflow:hidden}.gantt-dashboard-head{padding:24px 24px 12px}.gantt-dashboard-head h2{font-size:22px;margin:8px 0}.gantt-dashboard-head p{color:var(--text-2);font-size:13px}.gantt-filters{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr 100px auto;gap:12px;padding:12px 24px 24px;align-items:end}.gantt-filters .field{margin:0;min-width:0}.gantt-filters input,.gantt-filters select{width:100%;min-width:0}.gantt-widget{min-width:0;margin:18px 0}.dashboard-gantt>.gantt-widget{margin:0;padding:0 20px}.gantt-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.gantt-toolbar .arq-actions{gap:6px;align-items:center}.gantt-toolbar [aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.gantt-toolbar .docs-check{font-size:12px;margin:0}.gantt-caption{font:12px var(--f-mono);color:var(--text-2);margin:6px 0 14px;line-height:1.7}.gantt-scroll{border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:580px;background:var(--surface);min-height:140px;overscroll-behavior-x:contain}.gantt-chart{width:calc(var(--gantt-side) + var(--gantt-width));position:relative;isolation:isolate}.gantt-head,.gantt-row{display:grid;grid-template-columns:var(--gantt-side) var(--gantt-width)}.gantt-head{height:44px;position:sticky;top:0;z-index:5;background:var(--surface-2);border-bottom:1px solid var(--line-strong)}.gantt-side{position:sticky;left:0;z-index:3;display:grid;grid-template-columns:minmax(100px,1fr) 65px 65px 42px;align-items:center;gap:6px;padding:0 12px;background:var(--surface);border-right:1px solid var(--line-strong);box-sizing:border-box;min-width:0}.gantt-head-side{background:var(--surface-2);font:10px var(--f-mono);text-transform:uppercase;letter-spacing:.03em}.gantt-time-head{position:relative;overflow:hidden}.gantt-tick{position:absolute;top:0;height:44px;border-left:1px solid var(--line);padding:15px 3px 0;box-sizing:border-box;color:var(--text-2);font:10px var(--f-mono);white-space:nowrap;overflow:hidden}.gantt-row{height:46px;border-bottom:1px solid var(--line);box-sizing:border-box}.gantt-name{display:flex;gap:4px;align-items:center;min-width:0}.gantt-title{min-width:0}.gantt-title a{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;color:var(--text)}.gantt-title small{display:block;font-size:10px;color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gantt-toggle{border:0;background:none;color:var(--text-2);padding:4px;min-width:24px;cursor:pointer;font-size:16px}.gantt-indent{width:24px;flex-shrink:0}.gantt-date,.gantt-pct{font:11px var(--f-mono);color:var(--text-2);white-space:nowrap}.gantt-pct{text-align:right}.gantt-phase>.gantt-side,.gantt-project>.gantt-side{background:var(--surface-2);font-weight:600}.gantt-task .gantt-name{padding-left:10px}.gantt-lane{position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--gantt-tick) - 1px),var(--line) var(--gantt-tick));overflow:hidden}.gantt-body{position:relative}.gantt-bar{position:absolute;top:10px;height:23px;border:1px solid var(--accent);border-radius:4px;background:var(--accent-soft);padding:0;cursor:pointer;overflow:hidden;color:var(--text);touch-action:pan-y;min-width:3px;box-sizing:border-box}.gantt-bar:hover{filter:brightness(.94);outline:1px solid var(--accent);outline-offset:1px}.gantt-fill{position:absolute;inset:0 auto 0 0;background:var(--st-ok-bg)}.gantt-bar[data-status=concluida]{border-color:var(--st-ok)}.gantt-bar[data-status=cancelada]{opacity:.45;border-style:dashed}.gantt-bar.gantt-summary{height:12px;top:16px;background:var(--accent);opacity:.72}.gantt-bar.gantt-late{border-color:var(--st-bad);background:var(--st-bad-bg)}.gantt-bar-text{position:relative;z-index:1;font:10px var(--f-mono);white-space:nowrap;pointer-events:none}.gantt-baseline{position:absolute;top:37px;height:4px;border-top:2px dashed var(--text-3);box-sizing:border-box;opacity:.7}.gantt-handle{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:var(--accent);opacity:.45;touch-action:none}.gantt-handle-start{left:0}.gantt-handle-end{right:0}.gantt-dragging{z-index:4;outline:2px solid var(--accent);opacity:.8}.gantt-today-line{position:absolute;top:0;bottom:0;z-index:2;width:1px;background:var(--st-bad);pointer-events:none}.gantt-edges{position:absolute;top:0;pointer-events:none;z-index:1;overflow:hidden}.gantt-edges path{fill:none;stroke:var(--text-3);stroke-width:1.2}.gantt-edges path.gantt-edge-conflict{stroke:var(--st-bad);stroke-dasharray:3 3}.gantt-undated{position:absolute;top:15px;left:12px;font-size:11px;color:var(--text-3)}.gantt-deadline{position:absolute;top:12px;color:var(--st-bad);font-size:15px;transform:translateX(-50%)}.gantt-legend{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 8px}.gantt-legend-done{color:var(--st-ok)}.gantt-legend-late{color:var(--st-bad)}.gantt-data{margin-top:12px}.gantt-data>summary{cursor:pointer;font-size:12px;color:var(--text-2)}.gantt-notice{border-left:3px solid var(--accent);padding:12px 16px;background:var(--accent-soft);border-radius:var(--r);font-size:13px;line-height:1.6;margin:16px 0}.gantt-empty{padding:20px;width:80vw;max-width:600px}.gantt-navigation{margin-bottom:20px}#gantt-editor,#simulacao{scroll-margin-top:65px}.dashboard-gantt>.municipality-pagination{padding:16px 24px}.gantt-data th,.gantt-data td{font-size:12px}.gantt-widget .field-hint{line-height:1.7}@media(max-width:1100px){.gantt-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.gantt-filters{grid-template-columns:minmax(0,1fr);padding:12px 16px}.gantt-dashboard-head{padding:18px 16px 6px}.dashboard-gantt>.gantt-widget{padding:0 12px}.gantt-side{grid-template-columns:minmax(60px,1fr) 44px 44px 28px;padding:0 6px;gap:4px}.gantt-date,.gantt-pct{font-size:9px}.gantt-title a{font-size:11px}.gantt-title small{display:none}.gantt-task .gantt-name{padding-left:0}.gantt-toggle{min-width:16px;padding:2px}.gantt-indent{width:16px}.gantt-toolbar{align-items:stretch}.gantt-scroll{max-height:450px}.gantt-head-side{font-size:8px}.gantt-bar{touch-action:pan-y}.gantt-navigation{gap:8px}}@media(prefers-reduced-motion:reduce){.gantt-widget *{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:700px){.gantt-side{grid-template-columns:minmax(0,1fr)}.gantt-side>.gantt-date,.gantt-side>.gantt-pct{display:none}}