/*
 * ─── DESENVOLVER+ · GESTÃO v2 · FOLHA ÚNICA ───────────────────────────
 *
 * Sem framework. Tokens da landing (creme quente, menta como acento, carvão no
 * texto, Inter, cantos redondos), estrutura do proVytal (barra lateral com
 * grupos, barra superior, cartões planos separados por traço fino, mosaicos KPI).
 *
 * Tema claro por omissão. `html.dark` troca a rampa. Cores de sinal (azul,
 * âmbar, coral, lilás, rosa) são para estado e dados, nunca para a marca.
 */

/* ── A letra: a Inter do site (o kit no CDN), senão caía na do sistema ───── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.desenvolvermais.pt/fonts/inter-latino-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://cdn.desenvolvermais.pt/fonts/inter-latino-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.desenvolvermais.pt/fonts/inter-latino-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url(https://cdn.desenvolvermais.pt/fonts/inter-latino-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url(https://cdn.desenvolvermais.pt/fonts/inter-latino-700-italic.woff2) format("woff2"); }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg: #f5f1e4;
  --bg2: #ffffff;
  --bg3: #faf7ef;
  --card: #ffffff;
  --text: #1e1c1c;
  --muted: #6f675d;
  --faint: #9a9284;
  --border: rgba(30, 28, 28, 0.09);
  --border-strong: rgba(30, 28, 28, 0.32);
  /* O pautado do calendário: a hora vê-se, a meia hora adivinha-se. Duas
     forças diferentes, senão ou não se lê nada ou fica tudo às riscas. */
  --linha-hora: rgba(30, 28, 28, 0.16);
  --linha-meia: rgba(30, 28, 28, 0.06);

  --green: #94ccbe;
  --green-hover: #80baac;
  --green-deep: #6ba89a;
  /* O texto «verde» é carvão, como no site: o verde-escuro (#317061) não é da marca — o verde dela (#94ccbe) é o acento, nos fundos e nos sublinhados. */
  --green-text: #1e1c1c;
  --green-soft: rgba(148, 204, 190, 0.22);
  --green-border: rgba(148, 204, 190, 0.6);
  --on-green: #1e1c1c;

  --tone-green: #1e1c1c;      --tone-green-soft: rgba(148, 204, 190, 0.24);   --tone-green-solid: #94ccbe;
  --tone-blue: #3b6673;       --tone-blue-soft: rgba(123, 168, 184, 0.24);    --tone-blue-solid: #7ba8b8;
  --tone-amber: #805f16;      --tone-amber-soft: rgba(232, 200, 124, 0.32);   --tone-amber-solid: #e8c87c;
  --tone-lilac: #735187;      --tone-lilac-soft: rgba(180, 142, 198, 0.26);   --tone-lilac-solid: #b48ec6;
  --tone-coral: #9f4332;      --tone-coral-soft: rgba(232, 124, 106, 0.22);   --tone-coral-solid: #e87c6a;
  --tone-pink: #8d4a5b;       --tone-pink-soft: rgba(212, 136, 154, 0.26);    --tone-pink-solid: #d4889a;
  --tone-neutral: #5f584f;    --tone-neutral-soft: rgba(30, 28, 28, 0.07);    --tone-neutral-solid: #d5d0c2;

  --danger: #c9553f;
  --shadow-lg: 0 12px 32px rgba(30, 28, 28, 0.14);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 72px;
  color-scheme: light;
}

html.dark {
  --bg: #1e1c1c;
  --bg2: #292625;
  --bg3: #35312f;
  --card: #292625;
  --text: #f5f1e4;
  --muted: #b3aa9c;
  --faint: #8f877b;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.3);
  --linha-hora: rgba(255, 255, 255, 0.18);
  --linha-meia: rgba(255, 255, 255, 0.07);
  --green-text: #a9d8cc;
  --green-soft: rgba(148, 204, 190, 0.14);
  --green-border: rgba(148, 204, 190, 0.4);
  --tone-green: #a9d8cc;   --tone-green-soft: rgba(148, 204, 190, 0.16);
  --tone-blue: #8fc0d0;    --tone-blue-soft: rgba(123, 168, 184, 0.18);
  --tone-amber: #e8c87c;   --tone-amber-soft: rgba(232, 200, 124, 0.16);
  --tone-lilac: #c9a9dc;   --tone-lilac-soft: rgba(180, 142, 198, 0.18);
  --tone-coral: #f29a8a;   --tone-coral-soft: rgba(232, 124, 106, 0.18);
  --tone-pink: #e0a2b3;    --tone-pink-soft: rgba(212, 136, 154, 0.18);
  --tone-neutral: #b3aa9c; --tone-neutral-soft: rgba(255, 255, 255, 0.07);
  --danger: #e87c6a;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── Caixas e bolinhas na marca ───────────────────────────────────────────
   Nada do azul do browser: um quadrado de cantos redondos que fica menta com
   o visto a carvão; a bolinha enche-se com um ponto. Com :where() não pesa
   nada, para as que se escondem (interruptores, permissões, segmentos)
   continuarem escondidas. */
:where(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 18px; height: 18px; margin: 0; vertical-align: -4px; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--bg2) no-repeat center / 12px 12px;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):hover { border-color: var(--green-deep); }
:where(input[type="checkbox"]):checked {
  background-color: var(--green); border-color: var(--green-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8l4.6-5.3' fill='none' stroke='%231e1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"]):indeterminate {
  background-color: var(--green); border-color: var(--green-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%231e1c1c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(input[type="radio"]):checked { border-color: var(--green-deep); background-color: var(--green); box-shadow: inset 0 0 0 3.5px var(--bg2); }
:where(input[type="checkbox"], input[type="radio"]):checked:active { transform: scale(.9); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 10px; }
a { color: var(--green-text); text-decoration: none; }
/* As ligações no meio do texto (sem classe): carvão, sublinhadas no verde da marca — como no site. */
a:not([class]) { text-decoration: underline; text-decoration-color: #94ccbe; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:not([class]):hover { text-decoration-color: currentColor; }
a:hover { text-decoration: none; }
b, strong { font-weight: 600; }
small { font-size: 12px; }
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
button { font: inherit; color: inherit; }
button, [role="button"], a[href], select, input[type="checkbox"], label[for] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
::selection { background: var(--green-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 110, 0.3) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 110, 0.25); border-radius: 3px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
[hidden] { display: none !important; }

.icon { width: 20px; height: 20px; overflow: visible; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 14px; height: 14px; }

/* Tons */
.tone-green { color: var(--tone-green); background: var(--tone-green-soft); }
.tone-blue { color: var(--tone-blue); background: var(--tone-blue-soft); }
.tone-amber { color: var(--tone-amber); background: var(--tone-amber-soft); }
.tone-lilac { color: var(--tone-lilac); background: var(--tone-lilac-soft); }
.tone-coral, .tone-danger { color: var(--tone-coral); background: var(--tone-coral-soft); }
.tone-pink { color: var(--tone-pink); background: var(--tone-pink-soft); }
.tone-neutral { color: var(--tone-neutral); background: var(--tone-neutral-soft); }

/* ── Marca ───────────────────────────────────────────────────────────────── */
.mark { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; }
.mark-svg { width: 100%; height: 100%; display: block; }
.mark-sm { width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.wordmark-svg { display: block; height: 17px; width: auto; color: var(--green-deep); }
html.dark .wordmark-svg { color: var(--green); }
.wordmark-text { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.wordmark-text b { color: var(--green-text); }
.brand-text small { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--sidebar-w); background: var(--bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; transition: width 0.2s ease, transform 0.25s ease;
}
html.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.brand { height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border); color: var(--text); }
html.sb-collapsed .brand { padding: 0; justify-content: center; }
html.sb-collapsed .brand-text { display: none; }
/*
 * ── O BOTÃO DE RECOLHER, COM O SELO DO LANÇAMENTO ───────────────────────────
 *
 * Vive na barra de cima, à esquerda do caminho — no mesmo sítio aberta ou
 * recolhida, sem ocupar uma linha da barra lateral nem ficar por cima do
 * conteúdo. Esteve primeiro a cavalo na borda, à altura de «O dia», e depois
 * numa linha inteira no fundo: as duas coisas eram demais para um botão.
 *
 * O botão verde com o anel segmentado do selo D+ à volta, nas cores da casa.
 * Parado, está quieto — é um controlo de todos os dias. Ao passar por cima, o
 * anel roda devagar e a seta inclina para onde vai; ao carregar, o anel dá meia
 * volta e a seta vira com mola. Sem movimento para quem pediu menos movimento.
 */
/* Só o da barra de cima. Uma página aberta antes desta mudança ainda tem o
   botão noutro sítio, e ganhava uma barra branca a toda a largura. */
.sidebar > .sidebar-collapse, .sidebar-foot .sidebar-collapse { display: none; }
.topbar .sidebar-collapse {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; margin-right: 2px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.topbar .sidebar-collapse:focus-visible { outline: 2px solid var(--tone-green); outline-offset: 2px; }
.sc-selo {
  position: relative; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #1e1c1c;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(49, 112, 97, 0.25);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
/* O anel: cinco segmentos com folga, como o do selo do vídeo. */
.sc-selo::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -8deg,
    var(--tone-green-solid) 0 62deg, transparent 62deg 72deg,
    var(--tone-coral-solid) 72deg 134deg, transparent 134deg 144deg,
    var(--tone-amber-solid) 144deg 206deg, transparent 206deg 216deg,
    var(--tone-lilac-solid) 216deg 278deg, transparent 278deg 288deg,
    var(--tone-blue-solid) 288deg 350deg, transparent 350deg 360deg);
  /* Um traço de 2,5px na borda de fora; o resto do disco fica transparente. */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0.9;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
html.sb-collapsed .sc-selo::before { transform: rotate(180deg); }
.sc-selo .icon { position: relative; stroke-width: 2.4; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.sb-collapsed .sc-selo .icon { transform: rotate(180deg); }
.sidebar-collapse:hover .sc-selo { transform: scale(1.1); box-shadow: 0 5px 14px rgba(49, 112, 97, 0.34); }
.sidebar-collapse:hover .sc-selo::before { opacity: 1; animation: selo-roda 6s linear infinite; }
.sidebar-collapse:hover .sc-selo .icon { transform: translateX(-2px); }
html.sb-collapsed .sidebar-collapse:hover .sc-selo .icon { transform: rotate(180deg) translateX(-2px); }
.sidebar-collapse:active .sc-selo { transform: scale(0.94); }
@keyframes selo-roda { to { transform: rotate(360deg); } }
html.sb-collapsed .sidebar-collapse:hover .sc-selo::before { animation-name: selo-roda-recolhido; }
@keyframes selo-roda-recolhido { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  .sc-selo, .sc-selo::before, .sc-selo .icon { transition: none; }
  .sidebar-collapse:hover .sc-selo::before { animation: none; }
  .sidebar-collapse:hover .sc-selo { transform: none; }
}
html.dark .sc-selo { background: var(--green-deep); color: #10201c; }

.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 8px; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-title { padding: 18px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; }
.nav-title:first-child { padding-top: 6px; }
html.sb-collapsed .nav-title { height: 1px; padding: 0; margin: 12px 14px; background: var(--border); font-size: 0; }
.nav-item { position: relative; margin: 2px 0; }
.nav-link {
  display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; border-radius: var(--radius);
  color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link .icon { color: var(--muted); }
.nav-link:hover { background: var(--bg3); }
.nav-link:hover .icon { color: var(--text); }
.nav-item.active > .nav-link { background: var(--bg3); font-weight: 600; }
.nav-item.active > .nav-link .icon { color: var(--green-text); }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/*
 * O número que faz clicar. Uma barra lateral que só tem nomes obriga a abrir
 * cada sítio para saber se há trabalho lá dentro. Estes contadores dizem-no
 * antes: quatro na lista de espera, duas mensagens novas. Só aparecem quando
 * são maiores que zero — um zero pendurado é ruído, e ainda faz o menu mexer.
 */
.nav-conta {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nav-item.active > .nav-link .nav-conta { background: var(--green-soft); color: var(--green-text); }
.nav-conta.is-aviso { background: var(--tone-amber-soft); color: var(--tone-amber); }
html.sb-collapsed .nav-conta {
  position: absolute; top: 6px; right: 6px; min-width: 8px; height: 8px;
  padding: 0; font-size: 0; background: var(--green-text);
}
html.sb-collapsed .nav-conta.is-aviso { background: var(--tone-amber-solid, var(--tone-amber)); }

.nav-caret { color: var(--muted); transition: transform 0.2s ease; }
.nav-item.open > .nav-link .nav-caret { transform: rotate(90deg); }
.nav-children { display: none; padding: 2px 0 4px; }
.nav-item.open > .nav-children { display: block; }
.nav-children .nav-link { height: 40px; padding-left: 26px; font-size: 14px; color: var(--muted); }
.nav-children .nav-link .icon { width: 17px; height: 17px; }
.nav-children .nav-item.active > .nav-link, .nav-children .nav-link:hover { color: var(--text); }
html.sb-collapsed .nav { padding: 12px 10px; }
html.sb-collapsed .nav-link { justify-content: center; padding: 0; gap: 0; }
html.sb-collapsed .nav-label, html.sb-collapsed .nav-caret { display: none; }
html.sb-collapsed .nav-children { display: none !important; }
html.sb-collapsed .nav-item.has-children.active > .nav-link::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--green-text); }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }
.user-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border); overflow: hidden; }
.user-card.plain { background: transparent; border: 0; padding: 10px 12px 12px; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--green-soft); color: var(--green-text); border: 2px solid var(--green-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.avatar-sm { width: 34px; height: 34px; flex-basis: 34px; font-size: 12px; }
.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.user-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: var(--green-text); }
.user-exit { color: var(--muted); display: inline-flex; padding: 6px; border-radius: 8px; }
.user-exit:hover { color: var(--danger); background: var(--tone-coral-soft); }
html.sb-collapsed .user-card { padding: 6px; justify-content: center; border: 0; background: transparent; }
html.sb-collapsed .user-meta, html.sb-collapsed .user-exit { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 30; margin-left: var(--sidebar-w); height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: var(--bg); border-bottom: 1px solid var(--border); transition: margin-left 0.2s ease;
}
html.sb-collapsed .topbar { margin-left: var(--sidebar-w-collapsed); }
/* Três colunas: onde estou à esquerda, o dia ao centro, as ferramentas à
   direita. As laterais crescem por igual para o centro ficar mesmo ao centro. */
.topbar-left { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: 1 1 0; justify-content: flex-end; }
.scope { display: flex; align-items: center; gap: 12px; color: var(--text); }
.scope-tile { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.scope-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.scope-name { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.iconbtn.menu-toggle { display: none; }
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }
.iconbtn.theme-float { position: fixed; top: 20px; right: 20px; z-index: 10; background: var(--bg2); border-color: var(--border); }

.iconbtn {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.iconbtn:hover, .iconbtn.is-open { background: var(--bg3); border-color: var(--border); }
.iconbtn-sm { width: 32px; height: 32px; border-radius: 10px; }
.iconbtn .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.iconbtn .count:empty { display: none; }
.avatar-btn { width: auto; padding: 0 4px; }
.iconbtn.tone-neutral, .iconbtn.tone-danger, .iconbtn.tone-amber, .iconbtn.tone-green, .iconbtn.tone-blue, .iconbtn.tone-lilac { background: transparent; color: var(--muted); }
.iconbtn.tone-danger:hover { color: var(--tone-coral); background: var(--tone-coral-soft); border-color: transparent; }
.iconbtn.tone-amber:hover { color: var(--tone-amber); background: var(--tone-amber-soft); border-color: transparent; }
.iconbtn.tone-green:hover { color: var(--tone-green); background: var(--tone-green-soft); border-color: transparent; }
.iconbtn.tone-blue:hover { color: var(--tone-blue); background: var(--tone-blue-soft); border-color: transparent; }
.iconbtn.tone-lilac:hover { color: var(--tone-lilac); background: var(--tone-lilac-soft); border-color: transparent; }
.iconbtn.tone-neutral:hover { color: var(--text); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; display: none; animation: pop 0.15s ease-out;
}
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown-menu.wide { min-width: 340px; }

.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 14px; }
.dropdown-item:hover { background: var(--bg3); }
/* Uma ação que não é uma ligação (desativar, eliminar) entra como <button> e
   tem de ler-se igual às outras linhas do menu. */
button.dropdown-item { width: 100%; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--tone-coral-soft); }
.dropdown-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.dropdown-foot { padding: 8px 12px 6px; text-align: right; font-size: 13px; }
.noti-list { max-height: 360px; overflow-y: auto; }
.noti { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); }
.noti:hover { background: var(--bg3); }
.noti-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.noti-body { display: flex; flex-direction: column; min-width: 0; }
.noti-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.noti-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.content { margin-left: var(--sidebar-w); padding: 32px 40px 40px; min-height: calc(100vh - var(--topbar-h) - 52px); max-width: calc(var(--sidebar-w) + 1440px); transition: margin-left 0.2s ease; animation: fade 0.3s ease-out; }
.content.wide { max-width: none; }
html.sb-collapsed .content { margin-left: var(--sidebar-w-collapsed); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.footer { margin-left: var(--sidebar-w); padding: 16px 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: right; transition: margin-left 0.2s ease; }
html.sb-collapsed .footer { margin-left: var(--sidebar-w-collapsed); }
.overlay { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.5); display: none; }

/* ── Cabeçalho de página ─────────────────────────────────────────────────── */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.page-subtitle { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 12px; }
.section-title .icon { color: var(--green-text); }

/* ── Cartões ─────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 20px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 0; }
.card-title { font-size: 16px; font-weight: 600; }
.card-subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Dois botões num cartão estreito dobram em vez de empurrar a página para o lado. */
@media (max-width: 600px) { .card-head { flex-wrap: wrap; } }
.card-body { padding: 24px; }
.card-head + .card-body { padding-top: 18px; }
.card-body.flush { padding: 0; }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* Grelhas */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
.grid > * { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 1200px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.main-side { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/*
 * ─── FORMULÁRIOS NO TELEMÓVEL ────────────────────────────────────────────────
 *
 * A grelha continua de duas colunas, mas cada campo ocupa a linha toda. A
 * exceção são os campos curtos — uma data, uma hora, um valor — que marcados
 * com `curto` ficam dois por linha. Numa consulta nova isso poupa cinco
 * arrastões de dedo.
 */
@media (max-width: 760px) {
  .form-grid > * { grid-column: 1 / -1; }
  .form-grid > .field.curto { grid-column: auto; }

  /* Abaixo de 16px o Safari amplia a página ao tocar no campo, e depois fica
     ampliada. É a razão de os formulários darem a sensação de saltar. */
  .input, .select, .textarea { font-size: 16px; height: 46px; }
  .input-sm, .select-sm { height: 40px; font-size: 15px; }
  .textarea { height: auto; }

  /* Alvos de toque: 42px é curto para um dedo. */
  .btn { height: 46px; }
  .btn-sm { height: 38px; }

  .page-title { font-size: 26px; }
  .label { font-size: 13px; margin-bottom: 5px; }
  .help { font-size: 13px; line-height: 1.55; }
  .field { margin-bottom: 16px; }
  .form-grid { gap: 0 12px; }
}

/* Num ecrã estreito os botões do formulário ocupam a largura toda: dois botões
   redondos lado a lado deixavam de caber e o primeiro saía do ecrã. */
@media (max-width: 560px) {
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

/* ── Mosaicos KPI ────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; color: var(--text); transition: border-color 0.15s ease; min-width: 0; overflow: hidden; }
a.stat:hover { border-color: var(--border-strong); }
.stat-head { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; flex-wrap: wrap; }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; }
.stat-value { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.stat-value.small { font-size: 24px; line-height: 1.15; }
.stat-sub { font-size: 13px; color: var(--muted); }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-soft) 0%, var(--card) 60%); border: 1px solid var(--green-border); border-radius: var(--radius-lg); padding: 32px; margin-bottom: 20px; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.35; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.hero > * { position: relative; z-index: 1; }
.hero-kicker { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; margin-bottom: 6px; }
.hero-title { font-size: 44px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 8px; }
.hero-sub { color: var(--muted); font-size: 15px; font-style: italic; margin: 0; }

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; }
.quick a:hover { border-color: var(--border-strong); background: var(--bg3); }
.quick .stat-icon { width: 48px; height: 48px; }

.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item .noti-title { font-size: 14px; }
.list-meta { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.work-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; overflow: hidden; }
.work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.work-head span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.work-head b { font-size: 15px; }
.work-head small { color: var(--muted); font-size: 12px; }
.work-head a { flex: none; font-size: 13px; color: var(--muted); }
.work-head a:hover { color: var(--green-text); }
.work-list { display: flex; flex-direction: column; }
.work-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; color: var(--text); border-top: 1px solid var(--border); }
.work-list .work-item:first-child { border-top: 0; }
.work-item:hover { background: var(--bg3); }
.work-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.work-main b, .work-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-main small { color: var(--muted); font-size: 12px; }
.work-action { color: var(--green-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.work-empty { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--muted); font-size: 13px; }
.work-empty .icon { color: var(--faint); }
@media (max-width: 1180px) { .work-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .work-head { flex-direction: column; }
  .work-item { grid-template-columns: 32px minmax(0, 1fr); }
  .work-action { display: none; }
}

/* ── Pílulas, vazio, toasts ──────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; background: var(--tone-neutral-soft); color: var(--tone-neutral); white-space: nowrap; }
.pill.green { background: var(--tone-green-soft); color: var(--tone-green); }
.pill.blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.pill.amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.pill.lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.pill.coral { background: var(--tone-coral-soft); color: var(--tone-coral); }
.pill.pink { background: var(--tone-pink-soft); color: var(--tone-pink); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.empty > .icon { display: block; margin: 0 auto 10px; width: 28px; height: 28px; color: var(--faint); }
.empty.small { padding: 22px 12px; font-size: 13px; }
.empty.small > .icon { width: 24px; height: 24px; margin-bottom: 8px; }
.empty p { margin: 0; }
.empty-action { margin-top: 14px; }

.toasts { position: fixed; top: 20px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); animation: pop 0.2s ease-out; }
.toast-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-green-soft); color: var(--tone-green); }
.toast.error .toast-icon { background: var(--tone-coral-soft); color: var(--tone-coral); }
.toast-body { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.toast-body strong { color: var(--text); font-size: 14px; }
.toast-acao { flex: 0 0 auto; align-self: center; border: 1px solid var(--border-strong); background: transparent; color: inherit;
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.toast-acao:hover { background: var(--bg3); }
.toast-close { border: 0; background: transparent; color: var(--muted); padding: 6px; border-radius: 8px; display: inline-flex; }
.toast-close:hover { background: var(--bg3); color: var(--text); }
.toast.leaving { opacity: 0; transform: translateX(12px); transition: all 0.25s ease; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn { height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; white-space: nowrap; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--green); color: var(--on-green); border-color: var(--green); }
.btn-primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-ghost { background: var(--bg2); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg3); }
.btn-danger { background: var(--tone-coral-soft); color: var(--tone-coral); }
.btn-danger:hover { border-color: var(--tone-coral); }
/*
 * Os botões são dois: o principal (btn-primary, um por zona) e os outros (btn-ghost).
 * O btn-soft não é um terceiro tipo de botão: marca um ESTADO — «está aqui» (Este mês,
 * Hoje, o eixo escolhido). Usá-lo como botão secundário punha três estilos lado a lado.
 */
.btn-soft { background: var(--green-soft); color: var(--green-text); }
.btn-soft:hover { border-color: var(--green-border); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }

/* ── Formulários ─────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; min-width: 0; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.label .req { color: var(--tone-coral); }
.control { position: relative; }
.input, .select, .textarea { width: 100%; height: 42px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; font: inherit; font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.textarea { height: auto; min-height: 120px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus, .richtext:focus-within { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input[readonly] { color: var(--muted); background: var(--bg2); }
.input:disabled, .select:disabled { opacity: 0.6; }
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--tone-coral); }
.input-sm, .select-sm { height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f675d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.select-sm { padding-right: 30px; background-position: right 8px center; }
input[type="date"].input, input[type="time"].input, input[type="datetime-local"].input {
  /* O Safari no iPhone centra o valor destes campos e só destes: ficavam
     desalinhados de tudo o resto no mesmo formulário. Mexe-se no alinhamento
     e mais nada — tirar-lhes a aparência levava o ícone do calendário atrás. */
  min-width: 0; text-align: left;
}
input[type="date"].input::-webkit-date-and-time-value,
input[type="time"].input::-webkit-date-and-time-value,
input[type="datetime-local"].input::-webkit-date-and-time-value { text-align: left; }
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].input { -moz-appearance: textfield; }
/* ── Escolher um ficheiro ─────────────────────────────────────────────────
   O controlo nativo escreve o seu próprio texto, na língua do BROWSER: era a
   única coisa em inglês na plataforma toda. O `<input>` continua a ser o mesmo
   e continua a ser ele a abrir o seletor — só se lhe tira a pintura.

   E não se esconde com `display:none`: assim ele deixa de receber foco, e a
   mensagem «preencha este campo» do próprio browser não teria onde aparecer. */
.ficheiro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficheiro-real { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ficheiro label { cursor: pointer; margin: 0; }
.ficheiro-real:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.ficheiro-nome { font-size: 13px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.ficheiro-nome.tem { color: var(--text); font-weight: 500; }
.field.has-suffix .input { padding-right: var(--sufixo, 168px); }
.suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.field.has-reveal .input { padding-right: 46px; }
.reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.reveal:hover { background: var(--bg2); color: var(--text); }
.help { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 7px 0 0; }

/* ── Escolher com pesquisa ────────────────────────────────────────────────
   O `select` original continua no documento e continua a ser quem submete: só
   deixa de se ver. `display:none` tirava-o dos formulários em alguns browsers
   antigos, por isso esconde-se sem o remover do fluxo. */
.busca { position: relative; }
.busca-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.busca-campo { cursor: text; }
.busca-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px;
  list-style: none; max-height: 280px; overflow-y: auto; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }
.busca-item { padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.busca-item.marcado, .busca-item:hover { background: var(--bg3); }
.busca-item.escolhido { color: var(--green-text); font-weight: 600; }
.busca-nada { padding: 9px 12px; font-size: 13px; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.form-actions.left { justify-content: flex-start; }
.field-inline { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }

.toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; }
/* Altura mínima, não fixa: com a legenda a quebrar em quatro linhas — e quebra,
   num telemóvel — o texto saía por cima do rótulo e do botão de gravar. */
.toggle-track { align-self: center; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { width: 44px; height: 26px; border-radius: 13px; background: var(--tone-neutral-solid); position: relative; transition: background 0.2s ease; flex: 0 0 44px; }
html.dark .toggle-track { background: #4a4441; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.toggle input:checked + .toggle-track { background: var(--green); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--green); outline-offset: 2px; }
.toggle-text { font-size: 13px; color: var(--muted); line-height: 1.45; padding: 4px 0; }

.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }

.richtext { border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); overflow: hidden; }
.richtext-bar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.richtext-sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
.richtext-area { padding: 12px 14px; outline: 0; font-size: 14px; line-height: 1.6; }
.richtext-area:empty::before { content: attr(data-placeholder); color: var(--faint); }
.richtext-area p { margin: 0 0 8px; }
.richtext-area ul, .richtext-area ol { margin: 0 0 8px; padding-left: 22px; }

.serie { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 16px 18px; background: var(--bg3);
  /* Sem esta margem o rótulo do campo seguinte encostava à moldura tracejada. */
  margin-bottom: 18px; }
.serie .field:first-child { margin-bottom: 0; }
.serie-campos { display: grid; grid-template-columns: 200px 1fr; gap: 0 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.serie-campos .span-2 { grid-column: 1 / -1; margin: 0; }
.serie-campos .help { color: var(--green-text); font-weight: 500; }
@media (max-width: 760px) { .serie-campos { grid-template-columns: 1fr; } }

/* ── Tabela ──────────────────────────────────────────────────────────────── */
.dt { min-width: 0; max-width: 100%; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.table th.right, .table td.right { text-align: right; }
.table th.sortable { cursor: pointer; user-select: none; padding-right: 22px; position: relative; }
.table th.sortable:hover { color: var(--text); }
.sort-caret { position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.3; }
.table th[aria-sort="ascending"] .sort-caret { transform: rotate(-135deg); margin-top: -1px; opacity: 1; }
.table th[aria-sort="descending"] .sort-caret { opacity: 1; }
.table td { padding: 13px 14px; border-top: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.table td.mono, .table td[data-sort-value^="20"] { white-space: nowrap; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--bg3); }
.table tfoot th { border-top: 1px solid var(--border); border-bottom: 0; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.table .dt-filters th { padding: 6px 8px 10px; position: relative; }  /* o select escondido da pesquisa fica dentro da tabela, e não a alarga */
.table td.actions, .table th.actions { width: 1%; white-space: nowrap; text-align: right; }
.table td .pill { vertical-align: middle; }
.table .thumb { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--bg3); display: block; }
.table .clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

.dt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.dt-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt-range { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dt-range .input { width: 130px; }
.dt-info { font-size: 13px; color: var(--muted); }
.dt-foot-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dt-search { position: relative; display: inline-flex; align-items: center; }
.dt-search .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.dt-search .input { width: 260px; padding-left: 36px; }
.dt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px; color: var(--muted); }
.dt-empty .icon { width: 28px; height: 28px; color: var(--faint); }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); }
.dt-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dt-size .select { width: auto; }
.dt-pages { display: flex; gap: 4px; }
.dt-pages button, .dt-page { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.dt-pages button:hover, a.dt-page:hover { background: var(--bg3); color: var(--text); }
.dt-pages button.current, .dt-page.current { background: var(--bg3); color: var(--text); border-color: var(--border); }
.dt-page.is-off { opacity: 0.4; }
.dt-server .seg a { display: contents; }
.dt-server .dt-toolbar { margin: 0; }
.table thead .sortable a { color: inherit; display: inline-flex; align-items: center; gap: 4px; padding-right: 14px; position: relative; }
.table thead .sortable a .sort-caret { right: 0; }
.dt-pages button:disabled { opacity: 0.4; cursor: default; }
.card-body.flush .dt-toolbar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.table th.pick, .table td.pick { width: 1%; padding-right: 0; }
.table input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--green); vertical-align: middle; }
.dt-bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: var(--green-soft); border-bottom: 1px solid var(--green-border); }
.dt-bulk-count { font-size: 13px; color: var(--text); }
.dt-bulk-count b { font-size: 15px; }
.dt-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.select.pay { width: auto; min-width: 132px; height: 32px; padding: 4px 28px 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background-position: right 8px center; }
.select.pay-pendente { background-color: var(--tone-amber-soft); color: var(--tone-amber); border-color: transparent; }
.select.pay-pago { background-color: var(--tone-green-soft); color: var(--tone-green); border-color: transparent; }
.pay-chip { display: inline-flex; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; vertical-align: middle; }
.pay-chip .pill { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pay-chip:hover .pill { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 28, 28, 0.12); }
.pay-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 999px; }
.pay-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg3); }
.pay-summary strong { font-size: 18px; }

/* ── Diálogo ─────────────────────────────────────────────────────────────── */
.dialog { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.dialog.wide { max-width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(30, 28, 28, 0.5); backdrop-filter: blur(2px); }
.dialog-inner { margin: 0; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { font-size: 18px; }
.dialog-body { padding: 20px 24px; }
.dialog-message { font-size: 15px; margin-bottom: 14px; }
.dialog-notes { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.dialog-notes li { margin-bottom: 6px; }
.dialog-notes strong { color: var(--text); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; }
.dialog .field:last-child { margin-bottom: 0; }

/* ── Perfil ──────────────────────────────────────────────────────────────── */
.profile-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); color: var(--green-text); border: 3px solid var(--green-border); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; flex: 0 0 84px; }
.profile-name { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.profile-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.kv dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.kv dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.kv dd.empty-val { color: var(--muted); font-style: italic; }
/* A ligação ao mapa, debaixo da morada: um passo a seguir e não um segundo
   valor, e por isso mais pequena e numa linha só sua. */
.kv-extra { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.kv-extra:hover { color: var(--green-text); }
.kv dd > .kv-extra { display: flex; }
.map { width: 100%; height: 380px; border: 0; border-radius: 14px; background: var(--bg3); display: block; }
.map.tall { height: 560px; }
.map-legend { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ── Cartões de parceria / mensagens ─────────────────────────────────────── */
.msg-card .card-head { padding-top: 18px; }
.msg-card .card-head { min-width: 0; }
.msg-card .card-foot { align-items: center; flex-wrap: wrap; }
.msg-from { display: flex; align-items: center; gap: 12px; min-width: 0; }
.msg-from .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.msg-from > div { min-width: 0; }
.msg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-email { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 0 1 auto; }
.msg-meta .pill { flex: 0 0 auto; }
.msg-date { font-size: 12px; color: var(--muted); font-family: var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-text { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.msg-spacer { flex: 1 1 auto; }
@media (max-width: 520px) {
  .msg-card .card-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .msg-meta { justify-content: flex-start; }
  .msg-card .card-foot .btn { flex: 1 1 150px; }
  .msg-spacer { display: none; }
}
.prose { font-size: 14px; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 22px; }

/* ── Bloco de notas ──────────────────────────────────────────────────────── */
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.notes li:last-child { border-bottom: 0; }
.notes label { flex: 1; cursor: pointer; font-size: 15px; display: flex; align-items: center; gap: 12px; }
.notes input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); flex: 0 0 18px; }
.notes li.done label { color: var(--muted); text-decoration: line-through; }
.notes-add { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 18px; }
.notes-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }

/* ── Calendário ──────────────────────────────────────────────────────────── */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; min-width: 200px; text-align: center; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-dow { padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg3); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; cursor: default; display: flex; flex-direction: column; gap: 4px; }
.cal-day.selectable { cursor: pointer; }
.cal-day.selectable:hover { background: var(--bg3); }
.cal-day.other { color: var(--faint); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--tone-neutral-soft) 8px 9px); }
.cal-day.today { background: var(--green-soft); }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--muted); align-self: flex-end; padding: 2px 6px; }
.cal-day.today .cal-daynum { color: var(--on-green); background: var(--green); border-radius: 999px; }
.cal-day.other .cal-daynum { color: var(--faint); }
.cal-ev { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; text-align: left; }
.cal-ev.clickable { cursor: pointer; }
.cal-ev.clickable:hover { filter: brightness(0.96); }
.cal-ev .cal-ev-time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.8; margin-right: 4px; }
.cal-more { font-size: 11px; color: var(--muted); padding: 2px 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cal-week.one { grid-template-columns: 1fr; }
.cal-col { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-height: 320px; display: flex; flex-direction: column; gap: 6px; }
.cal-col.today { border-color: var(--green-border); }
.cal-col.selectable { cursor: pointer; }
.cal-col-head { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.cal-col-head b { color: var(--text); font-size: 16px; letter-spacing: 0; }
.cal-col .cal-ev { white-space: normal; }
.cal-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-legend .pill { padding: 6px 14px; font-size: 12px; }
.cal-empty { font-size: 12px; color: var(--faint); padding: 8px; }

/* ── Gráficos ────────────────────────────────────────────────────────────── */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-axis text { fill: var(--muted); font-size: 11px; font-family: var(--font-sans); }
.chart-grid line { stroke: var(--border); }
.chart-tip { position: absolute; pointer-events: none; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow-lg); transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; z-index: 5; }
.chart-wrap { position: relative; }
.donut-center { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; fill: var(--text); }
.donut-center-sub { font-size: 11px; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Documento (comprovativo) ────────────────────────────────────────────── */
.doc-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.doc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 44px; max-width: 900px; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--text); margin-bottom: 24px; }
.doc-brand { display: flex; align-items: center; gap: 14px; }
.doc-brand .mark-svg { width: 46px; height: 46px; }
.doc-brand strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
.doc-brand span { font-size: 12px; color: var(--muted); }
.doc-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.7; }
.doc-meta div:first-child { font-weight: 600; color: var(--text); font-size: 14px; }
.doc-party { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; }
.doc-party > div { display: flex; flex-direction: column; gap: 2px; }
.doc-party strong { font-size: 15px; }
.doc-party span { font-size: 13px; color: var(--muted); }
.doc-label { font-size: 10px !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.doc-table { margin-bottom: 24px; }
.doc-table tfoot th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); }
.doc-foot p { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 16px; }
/* Quem emite: uma linha só, sem a risca de cima (a nota legal já a tem). */
.doc-emitente { font-size: 11px; color: var(--faint); border-top: 0 !important; padding-top: 4px !important; margin-top: 2px; }
.doc-sign { margin-top: 40px; text-align: right; font-size: 12px; color: var(--muted); }
.doc-line { width: 260px; border-bottom: 1px solid var(--text); margin: 32px 0 6px auto; }
@media (max-width: 760px) { .doc { padding: 24px 20px; } .doc-party { grid-template-columns: 1fr; gap: 16px; } }

/* ── Login ───────────────────────────────────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-side { position: relative; overflow: hidden; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; }
.auth-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.5; mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%); }
.auth-side > * { position: relative; z-index: 1; }
.auth-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--green); opacity: 0.12; filter: blur(80px); right: -140px; bottom: -140px; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.auth-brand .mark { width: 44px; height: 44px; flex-basis: 44px; }
.auth-brand .wordmark-svg { height: 18px; }
.auth-quote { font-size: 44px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; max-width: 520px; }
.auth-quote em { color: var(--green-text); font-style: normal; }
.auth-foot { color: var(--muted); font-size: 13px; }
.auth-foot .pills { margin-top: 14px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 34px; letter-spacing: -0.02em; margin: 26px 0 6px; }
.auth-card .lead { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 22px; flex-wrap: wrap; }
.auth-esqueci { font-size: 13px; color: var(--muted); }
.auth-esqueci:hover { color: var(--text); }
.auth-card .btn-block { height: 46px; font-size: 15px; }
.alert { border-radius: 12px; border: 1px solid; padding: 14px 16px; font-size: 14px; margin-top: 20px; }
.alert.error { background: var(--tone-coral-soft); border-color: var(--tone-coral); }
.alert.success { background: var(--green-soft); border-color: var(--green-border); }
/* «amber» era usado em seis sítios e não tinha regra: saía uma caixa branca de borda preta. */
.alert.amber { background: var(--tone-amber-soft); border-color: color-mix(in srgb, var(--tone-amber) 45%, transparent); }
.alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Pesquisa global ─────────────────────────────────────────────────────── */
.search-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg3); color: var(--muted); font-size: 13px; min-width: 220px; }
.search-btn:hover { border-color: var(--border-strong); color: var(--text); }
.search-btn span { flex: 1; text-align: left; }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); }
.palette { max-width: min(640px, calc(100vw - 32px)); margin-top: 10vh; }
.palette .dialog-inner { padding: 0; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.palette-input .icon { color: var(--muted); }
.palette-input input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: 0; }
.palette-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.palette-hint { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.palette-group { padding: 10px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text); }
.palette-item:hover, .palette-item.active { background: var(--bg3); }
.palette-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--tone-neutral-soft); color: var(--muted); }
.palette-text { display: flex; flex-direction: column; min-width: 0; }
.palette-text span { font-weight: 500; }
.palette-text small { color: var(--muted); }

/* ── Ilustrações ─────────────────────────────────────────────────────────── */
.empty.has-illustration { padding: 28px 20px; }
.empty-illustration { display: block; width: 160px; height: 140px; margin: 0 auto 12px; object-fit: contain; }
.hero-art { position: absolute; right: 24px; bottom: -14px; width: 220px; height: 200px; object-fit: contain; z-index: 1; pointer-events: none; }
.hero.with-art { padding-right: 260px; min-height: 200px; }
.auth-art { position: absolute; right: 24px; bottom: 150px; width: min(40%, 330px); z-index: 1; pointer-events: none; opacity: 0.95; }
body.publico .auth-art { right: -20px; bottom: 60px; width: min(46%, 380px); }
.dt-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.seg-sm button { padding: 5px 11px; font-size: 12px; }
.dt-sum { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.dt-sum small { font-size: 11px; color: var(--muted); font-weight: 400; }
.sparkline { width: 100%; height: 56px; margin-top: 4px; }
.sparkline svg { width: 100%; height: 100%; display: block; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.delta.up { background: var(--tone-green-soft); color: var(--tone-green); }
.delta.down { background: var(--tone-coral-soft); color: var(--tone-coral); }
.delta.flat { background: var(--tone-neutral-soft); color: var(--tone-neutral); }
.stat-head .delta { margin-left: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.chip.active { border-color: var(--border-strong); color: var(--text); }
.chip .dot { margin: 0; }
.chip.off { opacity: 0.45; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.person { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; gap: 14px; align-items: center; color: var(--text); }
.person .avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; }
.person-body { flex: 1; min-width: 0; }
.person-name { font-weight: 600; font-size: 15px; }
.person-sub { font-size: 12px; color: var(--muted); }
.person-kpis { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.person-kpis span { display: flex; flex-direction: column; }
.person-kpis b { font-size: 15px; color: var(--text); letter-spacing: -0.01em; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 18px 18px; }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--card); }
.timeline time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.year-nav { display: inline-flex; align-items: center; gap: 4px; }
.mini-table td, .mini-table th { padding: 10px 12px; }
.mini-table tbody tr:first-child td { border-top: 0; }

.seg a { display: contents; }
.btn.is-disabled { opacity: 0.5; }
.page-actions .seg { height: 42px; align-items: center; }

/* ── Utilitários ─────────────────────────────────────────────────────────── */
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.flex { display: flex; gap: 8px; align-items: center; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.w-full { width: 100%; }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body { overflow-x: hidden; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  html.sb-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  html.sb-open .overlay { display: block; }
  html.sb-collapsed .brand-text, html.sb-collapsed .nav-label, html.sb-collapsed .nav-caret, html.sb-collapsed .user-meta { display: flex; }
  html.sb-collapsed .nav-link { justify-content: flex-start; padding: 0 14px; gap: 14px; }
  html.sb-collapsed .nav-item.open > .nav-children { display: block !important; }
  html.sb-collapsed .nav-title { height: auto; margin: 0; background: transparent; font-size: 11px; padding: 18px 14px 6px; }
  .topbar, .content, .footer { margin-left: 0 !important; }
  .content { padding: 20px 16px 32px; }
  .footer { padding: 14px 16px; }
  .iconbtn.menu-toggle { display: inline-flex; }
  .search-btn { min-width: 0; width: 42px; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .dt-toolbar, .dt-toolbar-left, .dt-toolbar-right { min-width: 0; max-width: 100%; }
  .dt-range .input { width: 140px; }
  .stats .stat { min-width: 0; }
  .card-body { overflow-x: auto; }
  .stat-value { font-size: 28px; }
  .topbar .sidebar-collapse { display: none; }
  .scope-kicker { display: none; }
  .topbar { padding: 0 12px; }
  .page-title { font-size: 26px; }
  .hero-title { font-size: 34px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .kv { grid-template-columns: 1fr; }
  .cal-day { min-height: 80px; }
  .cal-week { grid-template-columns: 1fr; }
  .dt-search .input { width: 100%; }
  .dt-search { width: 100%; }
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }
@media (max-width: 600px) { .card-body { padding: 16px; } .dt-toolbar, .dt-foot { padding: 12px 16px; } }

a.user-card { color: var(--text); }
a.user-card:hover { border-color: var(--border-strong); }
.print-only { display: none; }
.print-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 16px; font-size: 12px; }

/* ── Impressão ───────────────────────────────────────────────────────────── */
/* ── Avisos em caixa ─────────────────────────────────────────────────────── */
.callout {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px;
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg2); font-size: 14px; line-height: 1.55;
}
.callout .icon { flex: none; margin-top: 2px; color: var(--muted); }
.callout b { display: block; }
.callout-info { border-left: 3px solid var(--tone-blue-solid); }
.callout-ok { border-left: 3px solid var(--green); }
.callout-erro { border-left: 3px solid var(--tone-coral); background: var(--tone-coral-soft); }
.callout-erro .icon { color: var(--tone-coral); }
.choques { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.choques li { line-height: 1.5; }
.callout-ok .icon { color: var(--green); }
.callout .help { margin: 8px 0 0; }

.copy-row { display: flex; gap: 8px; margin-top: 12px; }
.copy-row .input { flex: 1; min-width: 0; font-size: 13px; }

/* ── Papéis e permissões ─────────────────────────────────────────────────── */
.papeis { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .papeis { grid-template-columns: 1fr; } }

.papel-lista { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 90px; }
.papel-item {
  display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.papel-item:hover { border-color: var(--border-strong); }
.papel-item.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--card)); }
.papel-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.papel-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.papel-barra { display: block; height: 4px; margin-top: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.papel-barra i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.papel-novo { display: flex; align-items: center; gap: 10px; border-style: dashed; color: var(--muted); font-weight: 500; }
.papel-novo:hover { color: var(--text); }

.papel-cabecalho { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .papel-cabecalho { grid-template-columns: 1fr; } }
.papel-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.papel-rodape .flex { display: flex; gap: 10px; }

.perm-lista { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.perm-grupo { border: 0; padding: 0; margin: 0; }
.perm-grupo legend {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.perm-grupo legend .muted { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.perm-grupo legend button { margin-left: auto; text-transform: none; letter-spacing: 0; }

.perm {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
}
.perm:hover { background: var(--bg2); border-color: var(--border); }
.perm input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-marca {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border-strong);
  display: grid; place-items: center; color: transparent; transition: all 0.15s ease;
}
.perm input:checked + .perm-marca { background: var(--green); border-color: var(--green); color: #1e1c1c; }
.perm input:focus-visible + .perm-marca { outline: 2px solid var(--green); outline-offset: 2px; }
.perm-texto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.perm-texto .muted { font-size: 13px; }
.perm-texto code { font-size: 11px; color: var(--muted); opacity: 0.7; }

/* ── Registo por convite ─────────────────────────────────────────────────── */
.convite-resumo {
  display: grid; gap: 14px; margin: 20px 0 24px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg2);
}
.convite-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.convite-resumo .muted { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.convite-resumo b { font-size: 15px; }
.convite-resumo b + .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }

/* ── Módulo do paciente ──────────────────────────────────────────────────── */
.com-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.com-tipo {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.com-tipo > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.com-tipo b { font-size: 14px; }
.com-tipo .muted { font-size: 13px; line-height: 1.45; }
.com-tipo-numeros { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 4px; }
.com-tipo-icone {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tone-neutral-soft, var(--bg2)); color: var(--muted);
}
.com-tipo-icone.tone-green { background: var(--tone-green-soft); color: var(--tone-green); }
.com-tipo-icone.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.com-tipo-icone.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.com-tipo-icone.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.block { display: block; }

/* ── Definições do centro ────────────────────────────────────────────────── */
/* Um índice preso à esquerda (número numa etiqueta de cor, ponto do estado), e
   cada secção um cartão com o ícone inclinado na sua cor e a fita da casa. */
.def-grelha { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.def-coluna { min-width: 0; }
.def-indice { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 3px; padding: 14px 10px 14px 12px;
  background: var(--card); border: 1.5px solid var(--tinta); border-radius: 18px; box-shadow: 3px 3px 0 var(--tinta); }
.def-indice-tit { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px 6px; }
.def-ind { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.25;
  transition: background .15s ease; }
.def-ind:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.def-ind i { flex: 0 0 26px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--c); color: #1e1c1c; font-style: normal; font-size: 11.5px; font-weight: 700;
  transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.def-ind:nth-child(odd) i { transform: rotate(4deg); }
.def-ind:hover i { transform: rotate(-10deg) scale(1.06); }
.def-ind span { flex: 1; min-width: 0; }
.def-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.def-ponto.green { background: var(--tone-green); }
.def-ponto.amber { background: var(--tone-amber); }
.def-ponto.blue { background: var(--tone-blue); }

.def-cartao { position: relative; overflow: hidden; scroll-margin-top: 84px; transition: border-color .2s ease, box-shadow .2s ease; }
.def-cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.def-cartao:target, .def-cartao:focus-within { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.def-cab { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 0; }
.def-etiqueta { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: #1e1c1c;
  border: 1.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); transform: rotate(-6deg); }
.def-cartao:nth-of-type(even) .def-etiqueta { transform: rotate(5deg); }
.def-cab-txt { flex: 1; min-width: 0; }
.def-cab-txt h2 { margin: 2px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.def-cab-txt p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 62ch; }
.def-cab-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.def-corpo { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.def-corpo > .form-grid { margin: 0; }

/* Os interruptores: uma linha cada, separadas por um tracejado; o de cima de uma secção numa faixa da cor dela. */
.def-linhas { display: flex; flex-direction: column; }
.def-linha { display: flex; align-items: center; gap: 18px; padding: 13px 2px; cursor: pointer; }
.def-linhas .def-linha + .def-linha { border-top: 1.5px dashed var(--border); }
.def-linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.def-linha-txt b { font-size: 14px; font-weight: 600; }
.def-linha-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.def-principal { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c) 34%, var(--card)); border: 1.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.def-principal .def-linha-txt b { font-size: 15px; }
.def-principal .def-linha-txt span { color: color-mix(in srgb, var(--text) 72%, transparent); }

.def-interruptor { position: relative; flex: none; width: 46px; height: 26px; }
.def-interruptor input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.def-interruptor i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .2s ease, box-shadow .2s ease; }
.def-interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(30, 28, 28, .25); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.def-interruptor input:checked + i { background: var(--green); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.def-interruptor input:checked + i::after { transform: translateX(20px); box-shadow: 0 0 0 1.5px var(--tinta); }
.def-interruptor input:focus-visible + i { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .def-interruptor i, .def-interruptor i::after { transition: none; } }

/* O rodapé dos emails, como sai: a carta com a fita escura das especialidades. */
.def-exemplo { margin-bottom: 22px; }
.def-exemplo-tag { display: inline-block; margin: 0 0 10px 6px; padding: 4px 10px; border-radius: 8px; background: #f3d69a; color: #1e1c1c; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.def-carta {
  display: flex; flex-direction: column; gap: 3px; padding: 20px 22px 0; overflow: hidden;
  background: var(--card); border: 1.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
  border-radius: 18px; font-size: 13px; color: var(--muted); line-height: 1.6;
}
.def-carta b { font-size: 16px; color: var(--text); margin-bottom: 4px; }
.def-fita { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px -22px 0; padding: 12px 22px; background: #1e1c1c; }
.def-fita i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--c); }
.def-guardar > span { margin-right: auto; color: var(--muted); font-size: 13px; }

@media (max-width: 960px) {
  .def-grelha { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* No telemóvel o índice é uma fila de fichas que desliza para o lado, presa ao topo. */
  .def-indice { top: 60px; z-index: 15; flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px; border-radius: 14px; scrollbar-width: none; }
  .def-indice::-webkit-scrollbar { display: none; }
  .def-indice-tit { display: none; }
  .def-cartao { scroll-margin-top: 128px; }
  .def-ind { flex: none; padding: 5px 10px 5px 5px; border: 1px solid var(--border); background: var(--card); white-space: nowrap; font-size: 12.5px; }
}
@media (max-width: 600px) {
  .def-cab { padding: 20px 16px 0; gap: 12px; flex-wrap: wrap; }
  .def-etiqueta { width: 36px; height: 36px; border-radius: 11px; }
  .def-cab-txt { flex-basis: calc(100% - 52px); }
  .def-cab-acoes { justify-content: flex-start; width: 100%; }
  .def-corpo { padding: 16px 16px 20px; }
  .def-principal { padding: 12px; }
  .def-guardar > span { display: none; }
}
.form-actions-end { justify-content: flex-end; }

.com-historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.com-historico li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.com-quando { color: var(--muted); flex: none; }
.com-que { flex: 1; min-width: 0; }

/* ── Perfil do colaborador ───────────────────────────────────────────────── */
.mes-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 20px; }
.mes-nav b { font-size: 15px; min-width: 180px; text-align: center; }
.esp-lista { display: flex; flex-direction: column; gap: 14px; }
.esp-linha > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.esp-barra { display: block; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.esp-barra i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.btn.is-disabled { opacity: 0.4; pointer-events: none; }

.codigo {
  margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg2); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.6; overflow-x: auto; white-space: pre;
}

/* ── Relatório de testes ─────────────────────────────────────────────────── */
.testes .teste-grupo td {
  padding-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); border-bottom: 0;
}
.testes .teste-falhou { background: var(--tone-coral-soft); }
.testes .teste-falhou .muted { color: var(--tone-coral); }

/* ── Registo de sessão ───────────────────────────────────────────────────── */
.registo-texto { font-size: 15px; line-height: 1.7; max-width: 68ch; }
.registo-texto p { margin: 0 0 14px; }
.registo-texto p:last-child { margin-bottom: 0; }
.registo-reservado {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border);
}
.registo-reservado .icon { flex: none; margin-top: 2px; color: var(--muted); }
.registo-reservado > div { display: flex; flex-direction: column; gap: 4px; }
.registo-reservado .muted { font-size: 13px; line-height: 1.55; }
.registo-marca { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

/* ── Cabeçalho: onde estou, e que dia é hoje ─────────────────────────────── */
.trilho { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; }
.trilho-casa {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; color: var(--muted);
}
.trilho-casa:hover { background: var(--bg2); color: var(--text); }
.trilho-sep { display: inline-grid; place-items: center; color: var(--faint); flex: none; }
.trilho-passo {
  padding: 4px 6px; border-radius: 8px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 26ch;
}
a.trilho-passo:hover { background: var(--bg2); color: var(--text); }
.trilho-passo.is-atual { color: var(--text); font-weight: 600; }

/* Num ecrã médio, só o passo atual: o caminho todo não cabe sem cortar nomes. */
@media (max-width: 900px) {
  .trilho-casa, .trilho-sep, .trilho-passo { display: none; }
  .trilho-passo:last-child { display: block; font-size: 15px; max-width: none; }
}

/*
 * No telemóvel, nem isso. O título da página está logo por baixo, em corpo
 * grande: repeti-lo cortado a meio ("Editar cons…") é pior do que não o pôr.
 */
@media (max-width: 640px) {
  .trilho { display: none; }
}

/* ── Fichas do cabeçalho da página ───────────────────────────────────────── */
.page-header-texto { min-width: 0; }
.page-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.page-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); white-space: nowrap;
}
.page-meta-item .icon { color: var(--faint); }
a.page-meta-item { color: var(--text); }
a.page-meta-item:hover { color: var(--green-text); }
a.page-meta-item:hover .icon { color: var(--green-text); }
.page-meta + .page-subtitle { margin-top: 10px; }

/*
 * ── AS VISTAS DE UMA PÁGINA ──────────────────────────────────────────────────
 *
 * Um filtro não é um destino, e por isso saiu da barra lateral e veio para aqui,
 * debaixo do título: «Ativos | Inativos | No mapa» é a mesma página a olhar para
 * o mesmo assunto de outra maneira. Fica larga e rola sozinha no telemóvel, para
 * a página nunca rolar de lado por causa dela.
 */
.vistas {
  display: flex; gap: 4px; align-items: center;
  margin: -8px 0 22px; padding: 4px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 22px;
  /* Quando não cabem numa linha (o Marketing tem nove), passam à seguinte em vez de ficarem escondidas num scroll. */
  width: max-content; max-width: 100%; flex-wrap: wrap;
}
.vistas::-webkit-scrollbar { display: none; }
.vista {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  height: 34px; padding: 0 14px; border-radius: 999px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.vista .icon { color: currentColor; }
.vista:hover { color: var(--text); background: var(--bg3); }
/* O separador ativo era branco dentro de uma caixa quase branca: só a sombra o distinguia. Agora leva o verde da casa. */
.vista.is-ativa {
  background: var(--tone-green-soft); color: var(--green-text); font-weight: 600;
}
.vista.is-ativa .icon { color: var(--green-text); }
.vista-conta {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--bg3);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vista.is-ativa .vista-conta { background: var(--card); color: var(--green-text); }
@media (max-width: 640px) {
  .vistas { width: 100%; }
}

/*
 * ── A LISTA A IR BUSCAR OUTRA FATIA ──────────────────────────────────────────
 *
 * Trocar um filtro deixou de recarregar a página, e por isso deixou de haver a
 * barra do browser a dizer que algo está a acontecer. Fica isto: o conteúdo
 * esmorece e para de receber cliques enquanto a resposta não chega. Sem
 * saltos — nada muda de tamanho — porque o que se está a fazer é trocar uma
 * lista, não abrir outra página.
 */
.dt-a-carregar { opacity: 0.55; pointer-events: none; transition: opacity 0.12s ease; }
@media (prefers-reduced-motion: reduce) { .dt-a-carregar { transition: none; } }

/* A data não parte ao meio: a pastilha cede primeiro. */
.dropdown-head { flex-wrap: wrap; gap: 6px 8px; }
.dropdown-head .pill { flex: none; }

/* ── O dia, no painel ────────────────────────────────────────────────────── */
/* O número do dia dentro do ícone de calendário: sabe-se em que dia se está sem
   ler nada, e o botão fica igual aos vizinhos em vez de ser uma peça à parte. */
.dia-btn { position: relative; }
.dia-num {
  position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-40%);
  font-size: 9px; font-weight: 700; line-height: 1; text-align: center;
  color: var(--muted); pointer-events: none;
}
.dia-btn:hover .dia-num { color: var(--text); }
.count.verde { background: var(--green); color: var(--on-green); }

.dia-linha {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); color: var(--text);
}
.dia-linha:hover { background: var(--bg2); }
.dia-hora {
  flex: none; width: 52px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.dia-hora.sem-hora { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.dia-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dia-nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia-sala {
  display: inline-block; padding: 1px 6px; margin-right: 5px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--tone-neutral-soft); color: var(--tone-neutral);
}
.dia-sala.tone-green { background: var(--tone-green-soft); color: var(--tone-green); }
.dia-sala.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.dia-sala.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.dia-sala.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.dia-marca { flex: none; color: var(--tone-amber); display: grid; place-items: center; }

/* O que já passou continua à vista, mas não compete com o que falta. */
.dia-linha.passou { opacity: 0.5; }
.dia-linha.passou .dia-hora:not(.sem-hora) { text-decoration: line-through; }
.dia-linha.proxima { background: var(--green-soft); }
.dia-linha.proxima .dia-hora { color: var(--green-text); }

/*
 * Num telemóvel, um painel de 340px ancorado à direita de um botão que está
 * quase na margem sai pela esquerda fora. Passa a ser uma folha presa às duas
 * margens, com a largura que o ecrã tiver.
 */
@media (max-width: 560px) {
  .dropdown-menu, .dropdown-menu.wide {
    position: fixed; left: 8px; right: 8px; top: calc(var(--topbar-h) + 8px);
    min-width: 0; width: auto; max-width: none;
  }
  .dropdown-menu .noti-list { max-height: 60vh; }
}

/* ── Salas ───────────────────────────────────────────────────────────────── */
.salas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.sala { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sala-topo { display: flex; align-items: center; gap: 14px; }
.sala-marca { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--tone-neutral-soft); color: var(--tone-neutral); }
.sala-marca.tone-green { background: var(--tone-green-soft); color: var(--tone-green); }
.sala-marca.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.sala-marca.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.sala-marca.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.sala-marca.tone-coral { background: var(--tone-coral-soft); color: var(--tone-coral); }
.sala-cabeca { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sala-nome { font-size: 16px; font-weight: 600; padding: 4px 8px; background: transparent; border-color: transparent; }
.sala-nome:hover { border-color: var(--border); }
.sala-nome:focus { background: var(--bg2); border-color: var(--green-border); }
.sala-cabeca .muted { font-size: 12px; padding-left: 8px; }
.sala-barra { display: block; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.sala-barra i { display: block; height: 100%; border-radius: 999px; background: var(--tone-neutral-solid); }
.sala-barra i.tone-green { background: var(--tone-green-solid); }
.sala-barra i.tone-blue { background: var(--tone-blue-solid); }
.sala-barra i.tone-lilac { background: var(--tone-lilac-solid); }
.sala-barra i.tone-amber { background: var(--tone-amber-solid); }
.sala-barra i.tone-coral { background: var(--tone-coral-solid); }
.sala-campos { display: grid; gap: 12px; }
.sala-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }

/* Um destino não é uma pessoa: seta em vez de iniciais. */
/* A marca herda o tom do que representa: a especialidade de um processo, a cor
   de uma sala. Antes era tudo cinzento e a lista não se lia de relance. */
.palette-ico.tone-green { background: var(--tone-green-soft); color: var(--tone-green); }
.palette-ico.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.palette-ico.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.palette-ico.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.palette-ico.tone-coral { background: var(--tone-coral-soft); color: var(--tone-coral); }
.palette-ico.is-destino { background: var(--bg2); color: var(--muted); }
.palette-item.active .palette-ico.is-destino { color: var(--green-text); }
.palette-rodape { border-top: 1px solid var(--border); margin-top: 6px; font-size: 12px; }

@media print {
  .print-only { display: flex !important; }
  .no-print { display: none !important; }
  .doc { border: 0; padding: 0; max-width: none; }
  .doc-head { border-bottom: 2px solid #000; }
  .doc-line { border-bottom: 1px solid #000; }
  .card { border: 1px solid #ddd !important; margin-bottom: 12px; }
  .card-head { padding: 12px 14px 0; }
  .card-body { padding: 12px 14px; }
  .stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .stat { padding: 10px 12px; gap: 6px; }
  .stat-value { font-size: 20px; }
  .stat-icon { display: none; }
  .table th, .table td { padding: 5px 8px; font-size: 11px; }
  .avatar { display: none; }
  .grid.cols-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dt-toolbar, .dt-foot, .dt-bulk, .table th.pick, .table td.pick { display: none !important; }
  @page { margin: 12mm; size: A4; }
  .sidebar, .topbar, .footer, .toasts, .page-actions, .sidebar-collapse, .overlay, .cal-toolbar .seg, .cal-nav, .theme-float { display: none !important; }
  .content { margin: 0 !important; padding: 0 !important; max-width: none; }
  .card { border: 0; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .cal-day { min-height: 90px; }
}

/* ── Vagas por preencher ──────────────────────────────────────────────────
   Uma vaga é uma coisa a resolver ao telefone, por isso lê-se como um cartão
   de chamada: quando, com quem, e quem se pode chamar. */
.vagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.vaga { border-left: 3px solid var(--tone-amber); }
.vaga-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vaga-quando { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.vaga-candidatos { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.vaga-candidato { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Filtros em pastilha ────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.chip:hover { background: var(--bg3); color: var(--text); }
.chip.on { background: var(--green-soft); border-color: var(--green-border); color: var(--green-text); }

/* ── Avaliar objetivos ────────────────────────────────────────────────────
   Cinco degraus, lado a lado, para se escolher com um toque e sem ler tudo de
   novo em cada sessão. No telemóvel passam a duas colunas em vez de encolherem
   até deixarem de se ler. */
.objetivo-avaliar { padding: 16px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.objetivo-avaliar:last-of-type { border-bottom: 0; }
.objetivo-titulo b { font-size: 15px; }
.niveis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.nivel { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg2); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.nivel input { position: absolute; opacity: 0; width: 0; height: 0; }
.nivel:hover { background: var(--bg3); color: var(--text); }
.nivel.on { color: var(--text); border-width: 2px; }
.nivel-coral.on { background: var(--tone-coral-soft); border-color: var(--tone-coral); }
.nivel-amber.on { background: var(--tone-amber-soft); border-color: var(--tone-amber); }
.nivel-blue.on { background: var(--tone-blue-soft); border-color: var(--tone-blue); }
.nivel-green.on { background: var(--green-soft); border-color: var(--green); }
.nivel input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) { .niveis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Objetivos na ficha ─────────────────────────────────────────────────── */
.objetivo { padding: 16px 0; border-bottom: 1px solid var(--border); }
.objetivo:last-child { border-bottom: 0; }
.objetivo-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.objetivo-barra { display: flex; gap: 3px; margin-top: 10px; }
.objetivo-passo { height: 6px; flex: 1; border-radius: 3px; background: var(--bg3); }
.objetivo-passo.feito { background: var(--green); }
.objetivo-frase { font-size: 14px; color: var(--muted); margin-top: 8px; }

.sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* ── Relatório de evolução ────────────────────────────────────────────────
   O documento herda o desenho do comprovativo; só os objetivos são novos. */
.doc-h { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.doc-objetivos { display: flex; flex-direction: column; gap: 18px; }
.doc-objetivo p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.doc-objetivo-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-apreciacao { min-height: 140px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.doc-apreciacao:focus { outline: 0; border-style: solid; border-color: var(--green); }
@media print { .doc-apreciacao { border: 0; padding: 0; } }

/* ── Linha do tempo ───────────────────────────────────────────────────────
   Um fio contínuo à esquerda, com um ponto por acontecimento. O fio é o que
   faz isto ler-se como uma história e não como mais uma tabela. */
.lt { list-style: none; margin: 0; padding: 4px 0; }
.lt-item { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 12px; padding: 14px 20px 14px 16px; }
.lt-item::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.lt-item:first-child::before { top: 22px; }
.lt-item:last-child::before { bottom: calc(100% - 22px); }
.lt-ponto { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }
.lt-ponto.tone-green { background: var(--green-soft); color: var(--green-text); border-color: var(--green-border); }
.lt-ponto.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); border-color: transparent; }
.lt-ponto.tone-coral { background: var(--tone-coral-soft); color: var(--tone-coral); border-color: transparent; }
.lt-ponto.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); border-color: transparent; }
.lt-ponto.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); border-color: transparent; }
.lt-corpo { min-width: 0; }
.lt-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lt-topo time { font-size: 12px; white-space: nowrap; }
.lt-ir { color: var(--faint); align-self: center; }
.lt-ir:hover { color: var(--text); }
@media (max-width: 560px) { .lt-item { grid-template-columns: 28px 1fr; padding-right: 14px; } .lt-item::before { left: 27px; } .lt-ir { display: none; } }

/* ── Documentos da ficha ────────────────────────────────────────────────── */
.docs { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
.doc-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.doc-item:last-child { border-bottom: 0; }
.doc-icone { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg3); color: var(--muted); }
.doc-info { min-width: 0; }
.doc-info a { text-decoration: none; }
.doc-info a:hover b { text-decoration: underline; }

/* ── Portal da família ────────────────────────────────────────────────────
   Lê-se num telemóvel, de pé, à porta da escola. Blocos largos, alvos grandes,
   nada de tabelas. */
.portal-bloco { margin-top: 28px; }
.portal-bloco h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.portal-consultas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-consulta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.portal-consulta form { margin: 0; }
.portal-cons { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.portal-cons p { margin: 0 0 12px; }
.portal-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.portal-botoes .btn { flex: 1 1 160px; }

/* ── O consentimento informado: o ato, e não mais um bloco ────────────────
   Havia seis blocos iguais, e um deles era um ato jurídico. O ato ganha uma
   folha própria, com moldura e numeração; as preferências descem para uma
   lista leve. O peso visual passa a dizer o que a lei já dizia. */
.cons-ato { margin-top: 28px; padding: 22px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cons-ato-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cons-ato-topo h2 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.cons-ato-lead { margin: 0 0 20px; color: var(--muted); }
.cons-ato-vazio { background: var(--bg3); }
.cons-ato-vazio h2 { font-size: 17px; margin: 0 0 6px; }
.cons-ato-feito .cons-ato-topo { margin-bottom: 16px; }

.cons-passo { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); }
.cons-passo > div > b { display: block; font-size: 15px; margin-bottom: 3px; }
.cons-passo p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.cons-passo-fim p { margin-bottom: 0; }
.cons-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.cons-nota { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Os campos são os `.input`/`.select` da casa, e não parecidos com eles: um
   campo que se parece com os outros mas tem outra altura e outro anel de foco
   é a maneira mais barata de uma página nova soar a enxertada. */
.cons-quem, .cons-codigo { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.cons-quem .input, .cons-quem .select { flex: 1 1 180px; min-width: 0; width: auto; }
.cons-codigo-caixa { flex: 0 1 150px; width: auto; letter-spacing: 6px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 18px; }
.cons-outra { margin: 10px 0 0; }
/* O consentimento informado: quem assina numa linha, e as escolhas do documento em quadros por baixo. */
.cons-quem-linha { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.cons-quem-declara { flex-direction: column; gap: 14px; }
.cons-quem-declara > .btn { align-self: flex-start; }
.cons-declara { margin: 0; padding: 12px 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cons-declara legend { padding: 0 6px; margin-left: -6px; font-size: 14px; font-weight: 600; }
.cons-declara legend .muted { font-weight: 400; font-size: 12.5px; }
.cons-escolha { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.cons-escolha input { margin: 3px 0 0; flex: none; accent-color: #317061; width: 16px; height: 16px; }
.cons-declara .input { width: 100%; flex: none; }
.cons-prova-tit { font-size: 14px; margin: 16px 0 8px; }
.cons-prova-tit:first-of-type { margin-top: 0; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link:hover { color: var(--text); }

/* A prova: pares nome/valor, e não um parágrafo. Isto é para ser confrontado
   linha a linha com outra coisa, não para ser lido de seguida. */
.cons-prova, .prova { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cons-prova > div, .prova > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: baseline; }
.cons-prova dt, .prova dt { font-size: 13px; color: var(--muted); }
.cons-prova dd, .prova dd { margin: 0; font-size: 14px; }
.cons-ato-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.cons-retirar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.cons-retirar .cons-nota { margin: 0; }

.prova-hash { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.prova-hash dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.prova-hash code { font-size: 13px; word-break: break-all; line-height: 1.6; }
.prova-hash p { margin: 8px 0 0; font-size: 12px; }
.prova-acoes { display: flex; gap: 8px; margin-top: 24px; }
@media print {
  .prova-acoes, .porta-rodape-links, .tema-botao { display: none !important; }
  .portal-bloco { break-inside: avoid; }
}

/* ── As preferências: leves, e todas iguais entre si ──────────────────────── */
/* Quem responde por uma criança com menos de 13: pergunta-se uma vez, e no
   lugar onde as preferências iam estar — para não haver dúvida de que é o que
   falta fazer antes delas. */
.cons-quem-bloco { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); }
.cons-quem-bloco b { font-size: 15px; }
.cons-quem-bloco p { margin: 4px 0 14px; font-size: 14px; color: var(--muted); }

.cons-lista { display: flex; flex-direction: column; gap: 10px; }
.cons-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.cons-item-texto { flex: 1 1 260px; min-width: 0; }
.cons-item-texto b { font-size: 15px; }
.cons-item-texto p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cons-estado { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cons-quando { margin: 0; font-size: 12px; color: var(--muted); }
.cons-botoes { display: flex; gap: 8px; margin: 0; flex: 0 0 auto; }

/* ── O rodapé das portas ──────────────────────────────────────────────────
   Separado por um traço e não só por espaço: é onde vivem a proteção de dados
   e o regulamento, e um bloco legal que se confunde com o fim do texto acima é
   um bloco legal que ninguém vê. */
.porta-rodape { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); }
.porta-rodape p { margin: 0; font-size: 12px; color: var(--muted); }
.porta-rodape-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.porta-rodape-links a { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.porta-rodape-links a:hover { color: var(--text); }

/* ── Os documentos do centro, do lado de quem os publica ──────────────────── */
.doc-vigor { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); margin-bottom: 18px; }
.doc-vigor b { display: inline-block; margin-left: 6px; }
.doc-sub { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.doc-onde { margin: 0 0 20px; padding-left: 18px; color: var(--muted); font-size: 13px; }
.doc-onde li + li { margin-top: 4px; }
.doc-publicar { padding-top: 18px; border-top: 1px dashed var(--border); }
.doc-passado { margin-top: 16px; font-size: 13px; }
.doc-passado summary { cursor: pointer; color: var(--muted); }
.doc-passado ul { margin: 10px 0 0; padding-left: 18px; }

.portal-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin: 12px 0; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); }
.portal-link code { font-size: 12px; word-break: break-all; flex: 1 1 220px; background: none; border: 0; padding: 0; }

/* ── Meios de pagamento ───────────────────────────────────────────────────
   Uma barra por meio, à mesma escala, para se ver de relance por onde entra o
   dinheiro. Sem gráfico: quatro barras leem-se melhor do que um círculo. */
.meios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.meio-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meio-topo b { font-size: 15px; }
.meio-barra { height: 8px; border-radius: 4px; background: var(--bg3); margin: 8px 0 6px; overflow: hidden; }
.meio-barra span { display: block; height: 100%; border-radius: 4px; background: var(--green); }

/* O filtro com pesquisa dentro do cabeçalho da tabela: acompanha a altura dos
   restantes filtros e a lista abre por cima da tabela, não dentro dela.
   O cabeçalho é maiúsculas com espaçamento; a lista de opções não — são nomes
   de pessoas, e «COLEGA 1» não é o nome de ninguém. */
.busca .busca-campo.input-sm { height: 36px; font-size: 13px; }
th .busca-lista { min-width: 240px; text-transform: none; letter-spacing: normal; font-weight: 400; }
th .busca-lista .busca-item { color: var(--text); }
th .busca .busca-campo { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Um campo de escolha de lista curta não é para escrever: parece um select,
   com o cursor de ponteiro e a seta à direita. */
.busca-campo-lista { cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f675d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

/* ── Calendário em português ──────────────────────────────────────────────
   O do browser não se traduz nem se desenha. Este segue a plataforma: mesma
   letra, mesmo verde, semana a começar na segunda. */
.data { position: relative; }
.data-campo { padding-right: 40px; }
.data-abrir { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: var(--muted); border-radius: 8px; cursor: pointer; padding: 0; }
.data-abrir:hover { background: var(--bg3); color: var(--text); }
.data-painel { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 280px; padding: 12px;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14); text-transform: none; letter-spacing: normal; font-weight: 400; }
.data-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
/* Sem capitalize: apanhava o «de» e dava «Setembro De 2026». A maiúscula do
   mês é posta no JavaScript, sobre a palavra certa. */
.data-topo b { font-size: 14px; }
.data-grelha { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.data-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.data-dia { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; }
.data-dia:hover { background: var(--bg3); }
.data-dia.hoje { box-shadow: inset 0 0 0 1px var(--border-strong); }
.data-dia.escolhido { background: var(--green); color: var(--on-green); font-weight: 700; }
.data-pe { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
/* Nas tabelas, o painel não pode ficar preso na célula. */
th .data-painel, .dt-toolbar .data-painel { right: auto; }
@media (max-width: 420px) { .data-painel { width: min(280px, calc(100vw - 40px)); } }

/* A lista de horas é longa de propósito: rola, e abre já no valor escolhido. */
.hora-lista { max-height: 240px; }
.hora .busca-item { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13px; }

/* ── Cartão do mapa ───────────────────────────────────────────────────────
   A janela do Google traz caixa branca, seta e X próprios, e o conteúdo ficava
   encostado ao fundo de um espaço vazio. Aqui manda-se o cartão inteiro e
   desliga-se o resto. */
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 14px !important; box-shadow: 0 12px 28px rgba(0,0,0,.18) !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; max-height: none !important; }
.gm-style .gm-style-iw-tc::after { background: var(--card) !important; }
.gm-style .gm-style-iw-c button.gm-ui-hover-effect { top: 4px !important; right: 4px !important; opacity: .6; }
.mapa-cartao { background: var(--card); padding: 14px 16px; min-width: 200px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); }
.map-legend { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.mapa-nome { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; padding-right: 22px; }
.mapa-nome:hover { text-decoration: underline; }
.mapa-linha { font-size: 12px; color: var(--muted); }
.mapa-morada { font-size: 13px; color: var(--text); }
.mapa-ir { font-size: 12px; color: var(--green-text); margin-top: 6px; }

/* ── Espaço depois de um aviso ────────────────────────────────────────────
   Um aviso encostado ao cartão seguinte parece parte dele. */
.alert + .card, .alert + .section-title, .alert + .stats, .alert + .table-wrap { margin-top: 18px; }
.alert + .alert { margin-top: 12px; }

/* ── Financeiro: o topo ───────────────────────────────────────────────────
   Duas respostas antes de qualquer tabela. O primeiro cartão muda de cor
   conforme haja ou não dinheiro por pagar: é a única coisa da página que exige
   ação, e tem de se ver da porta. */
.fin-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; margin-bottom: 20px; }
.fin-cartao { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.fin-cartao.aberto { border-left: 3px solid var(--tone-amber); }
.fin-cartao.fechado { border-left: 3px solid var(--green); }
.fin-rotulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fin-numero { font-size: clamp(28px, 4vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fin-nota { font-size: 13px; color: var(--muted); }
.fin-nota b { color: var(--tone-amber); }

/* A série dos doze meses: barras, e não uma linha — doze valores mensais são
   doze coisas discretas, não um contínuo. */
.barras { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 4px; height: 76px; margin-top: 14px; }
.barra { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.barra > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--green-soft); min-height: 2px; }
.barra.agora > span { background: var(--green); }
.barra > i { font-size: 10px; font-style: normal; color: var(--faint); }
.barra.agora > i { color: var(--text); font-weight: 700; }

@media (max-width: 760px) { .fin-topo { grid-template-columns: 1fr; } }

/* A pré-visualização do email numa moldura, para o CSS da plataforma não
   interferir com o que a pessoa vai ver no cliente de email. */
.email-moldura { background: var(--bg); border-radius: 12px; padding: 8px; }
.email-moldura iframe { width: 100%; height: 720px; border: 0; border-radius: 8px; background: #f5f1e4; display: block; }

/* ── Ler o Cartão de Cidadão ──────────────────────────────────────────────
   O painel fica acima do formulário e é discreto de propósito: quem não tem o
   cartão à frente tem de conseguir ignorá-lo sem esforço. */
.cc-cartao { margin-bottom: 16px; }
.cc-cartao .card-body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cc-linha { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linha, rgba(0,0,0,.08)); cursor: pointer; }
.cc-linha:last-of-type { border-bottom: 0; }
.cc-linha input[type="checkbox"] { margin-top: 3px; flex: none; }
.cc-linha span { line-height: 1.4; }
[data-cc-proposta]:empty { display: none; }
[data-cc-proposta] { width: 100%; }

/* ── A grelha das salas ───────────────────────────────────────────────────
   Uma coluna por sala, um pixel por minuto. A escala é literal de propósito:
   um bloco de 50 minutos tem 50 pixels, logo o tamanho no ecrã É a duração, e
   um buraco de meia hora vê-se sem contar linhas. */
/*
 * ── AS COLUNAS ENCOSTAM, NÃO SE AFASTAM ─────────────────────────────────────
 *
 * Havia dois pixels de intervalo entre colunas. O cabeçalho é colado ao topo e
 * tem uma linha por baixo — e essa linha PARTIA-SE nesses dois pixels, uma vez
 * por coluna. Lia-se como uma régua tracejada torta em vez de um cabeçalho, e a
 * linha vertical da régua das horas começava só por baixo dele, a parecer um
 * risco solto.
 *
 * Sem intervalo, e a separação passa a ser um contorno: uma linha inteira do
 * topo ao fim, que é o que um calendário tem.
 */
/*
 * `scroll-padding-top` por causa do cabeçalho: ele é `sticky` e tapa os
 * primeiros 50px da parte visível. Sem isto, tudo o que traz um bloco à vista
 * — o teclado ao dar foco, o `scrollIntoView` do browser — encosta-o ao topo e
 * deixa-o DEBAIXO do cabeçalho: vê-se metade e não se pode pegar nele.
 */
.grelha { display: flex; gap: 0; overflow: auto; max-height: 72vh; scroll-padding-top: 58px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.grelha-coluna { flex: 1 1 0; min-width: 140px; }
.grelha-coluna + .grelha-coluna { border-left: 1px solid var(--border); }
.grelha-horas { flex: 0 0 62px; min-width: 62px; position: sticky; left: 0; z-index: 3; background: var(--bg); border-right: 1px solid var(--border); }

/*
 * ── O CABEÇALHO TEM ALTURA FIXA ─────────────────────────────────────────────
 *
 * «Ana Filipa Heleno Pereira Lopes» partia em duas linhas e empurrava só a sua
 * coluna para baixo: as pistas ficavam desalinhadas e as horas da régua deixavam
 * de bater certo com os blocos ao lado. Num calendário isso não é feio, é
 * errado — a altura É a hora.
 *
 * O nome corta-se com reticências e vai por inteiro no `title`. Na vista da
 * equipa já vem encurtado de propósito (ver `nome_curto`).
 */
.grelha-horas .grelha-cabeca { border-bottom-color: var(--border); }
.grelha-cabeca { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--border); padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; gap: 0; height: 50px; box-sizing: border-box; }
/*
 * ── A ENTRELINHA TEM DE CABER A LETRA ───────────────────────────────────────
 *
 * `overflow: hidden` — que é o que faz o «…» aparecer num nome comprido — corta
 * pela CAIXA DA LINHA, e não pela letra. Com a entrelinha herdada (1,08 para
 * 13px) a caixa é mais baixa do que o desenho da letra, e os ascendentes ficam
 * decapitados: «Segunda 7» aparecia com o topo do S e do d cortados a direito.
 *
 * Não se via em lado nenhum que não tivesse `overflow: hidden`, o que fazia
 * parecer um problema do cabeçalho colado ao topo — e não era; era isto, e o
 * mesmo acontecia dentro dos blocos.
 */
.grelha-cabeca b { font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hoje, na semana: a coluna que se procura primeiro ao abrir o ecrã. */
.grelha-coluna[data-hoje] .grelha-cabeca { background: var(--green-soft); }
.grelha-coluna[data-hoje] .grelha-cabeca b { color: var(--green-text); }
.grelha-cabeca span { font-size: 11px; line-height: 1.35; white-space: nowrap; }

/*
 * ── O PAUTADO VEM DAQUI, E DE MAIS LADO NENHUM ──────────────────────────────
 *
 * As linhas eram a beira de cima de cada espaço clicável. Consequência: onde
 * houvesse uma consulta, ou onde ninguém pudesse marcar, o pautado FALTAVA — e
 * uma grelha com o pautado aos bocados não se lê como grelha.
 *
 * Vêm do fundo da pista: a linha cheia de hora a hora, a esbatida à meia hora.
 * `--desvio-hora` diz onde cai a primeira hora certa — o centro abre às 8h30,
 * logo é a trinta minutos do topo.
 */
.grelha-pista {
  position: relative;
  background-image:
    repeating-linear-gradient(to bottom, var(--linha-hora) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, var(--linha-meia) 0 1px, transparent 1px 30px);
  background-position: 0 var(--desvio-hora, 0), 0 0;
  background-repeat: repeat-y;
}

/*
 * A hora escrita ACIMA da linha e encostada a ela, e não centrada nela: é onde
 * a hora começa, e é aí que os olhos a procuram ao seguir um bloco para cima.
 */
.grelha-hora {
  position: absolute; right: 8px; transform: translateY(-100%);
  font-size: 11px; line-height: 1.1; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-bottom: 2px;
}
.grelha-horas .grelha-pista { background-image: none; }

/*
 * O espaço livre é um botão. Discreto parado, evidente ao passar por cima:
 * convidar sem gritar é o que faz uma grelha cheia continuar legível.
 *
 * Já não desenha linha nenhuma — o pautado é da pista. Enquanto era ele a
 * desenhá-lo, o pautado faltava onde houvesse uma consulta.
 */
.grelha-vazio { position: absolute; left: 2px; right: 2px; border: 0; background: transparent; cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 5px; }
.grelha-vazio span { opacity: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.grelha-vazio:hover { background: var(--tone-green-soft); }
.grelha-vazio:hover span, .grelha-vazio:focus-visible span { opacity: 1; }
.grelha-vazio:focus-visible { outline: 2px solid var(--tone-green); outline-offset: -2px; }

/* Arrastar para baixo num espaço livre desenha a duração antes de marcar. */
.grelha-desenho { position: absolute; left: 2px; right: 2px; z-index: 3; pointer-events: none;
  border: 2px dashed var(--tone-green); border-radius: 6px; background: var(--tone-green-soft);
  color: var(--tone-green); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

.grelha-bloco { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 7px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; border-left: 3px solid currentColor; }
.grelha-bloco b { font-size: 12px; line-height: 1.35; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grelha-bloco span { font-size: 11px; line-height: 1.35; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grelha-bloco.fora { border-left-style: dotted; }

.grelha-dias { display: inline-flex; gap: 6px; align-items: center; }
/*
 * ── UM CONTROLO, NÃO DOIS BOTÕES ────────────────────────────────────────────
 *
 * Estava com um `btn-ghost` ao lado de um `btn-soft`, e o `btn-ghost` da casa é
 * branco COM contorno: numa página cor de creme, o botão que não está escolhido
 * saltava mais à vista do que o que estava. Lia-se ao contrário.
 *
 * Cá dentro os botões perdem o fundo e o contorno — quem os desenha é a
 * cápsula. Fica um só objeto com uma metade acesa, que é o que um interruptor
 * de duas posições é.
 */
/* ── O MÊS ─────────────────────────────────────────────────────────────────
 *
 * A forma do mês à esquerda, o dia escolhido à direita. A célula tem altura
 * fixa e mostra três consultas: uma célula que cresce com o dia mais cheio
 * desalinha as semanas todas — e um mês desalinhado deixa de dar a forma, que é
 * a única coisa que esta vista faz melhor do que as outras.
 */
.mes-tudo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.mes { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.mes-nomes, .mes-grelha { display: grid; grid-template-columns: repeat(7, 1fr); }
.mes-dia-nome { padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }

/* Altura FIXA, e não mínima: com mínima, o dia mais cheio empurra a semana
   toda e o mês deixa de se ler como uma grelha. O que não cabe conta-se no
   «+N» e vê-se na coluna do lado. */
.mes-cel { position: relative; height: 104px; box-sizing: border-box; padding: 6px 7px; text-align: left; font: inherit;
  background: transparent; border: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; }
.mes-grelha > :nth-child(7n + 1) { border-left: 0; }
.mes-grelha > :nth-child(-n + 7) { border-top: 0; }
.mes-cel:hover { background: var(--bg3); }
.mes-cel.fora { opacity: .45; }
.mes-cel.fechado { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--bg3) 6px 12px); }
.mes-cel.escolhido { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--tone-green); }
.mes-num { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mes-cel.hoje .mes-num { background: var(--tone-green); color: #fff; border-radius: 999px;
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.mes-dentro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mes-consulta { font-size: 11px; line-height: 1.45; padding: 1px 5px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-consulta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mes-mais { font-size: 10.5px; color: var(--muted); padding-left: 5px; }

/* A coluna do lado: o dia por inteiro, com as mesmas ações do resto. */
.mes-lado { position: sticky; top: 76px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); padding: 14px; }
.mes-lado h3 { margin: 0 0 10px; font-size: 14px; }
.mes-lado h3::first-letter { text-transform: uppercase; }
.mes-lista { display: flex; flex-direction: column; }
.mes-linha { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit;
  padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.mes-linha:hover { background: var(--bg3); }
.mes-hora { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.mes-quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mes-quem b { font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-quem span { font-size: 11px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-linha .pill { flex: none; font-size: 9.5px; }

.mes-consulta.tom-green  { background: var(--tone-green-soft);  color: var(--text); }
.mes-consulta.tom-blue   { background: var(--tone-blue-soft);   color: var(--text); }
.mes-consulta.tom-amber  { background: var(--tone-amber-soft);  color: var(--text); }
.mes-consulta.tom-lilac  { background: var(--tone-lilac-soft);  color: var(--text); }
.mes-consulta.tom-coral  { background: var(--tone-coral-soft);  color: var(--text); }
.mes-consulta.tom-pink   { background: var(--tone-pink-soft);   color: var(--text); }
.mes-consulta.tom-neutral { background: var(--border); color: var(--text); }
.mes-linha.tom-green  { box-shadow: inset 3px 0 0 var(--tone-green); }
.mes-linha.tom-blue   { box-shadow: inset 3px 0 0 var(--tone-blue); }
.mes-linha.tom-amber  { box-shadow: inset 3px 0 0 var(--tone-amber); }
.mes-linha.tom-lilac  { box-shadow: inset 3px 0 0 var(--tone-lilac); }
.mes-linha.tom-coral  { box-shadow: inset 3px 0 0 var(--tone-coral); }
.mes-linha.tom-pink   { box-shadow: inset 3px 0 0 var(--tone-pink); }

@media (max-width: 1000px) {
  .mes-tudo { grid-template-columns: 1fr; }
  .mes-lado { position: static; }
  .mes-cel { height: 78px; }
}

/* ── A BARRA DO CALENDÁRIO ────────────────────────────────────────────────
 *
 * Duas perguntas e só duas: QUANDO, à esquerda, e DE QUEM, à direita. É a mesma
 * ordem no dia e na semana — antes cada vista arrumava os mesmos controlos à
 * sua maneira, e mudar de vista obrigava a procurá-los outra vez.
 */
.cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cal-quando { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cal-quando h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.cal-quando h2::first-letter { text-transform: uppercase; }
.cal-setas { display: inline-flex; gap: 2px; }
.cal-controlos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-quem { width: auto; min-width: 168px; }
.cal-data { width: auto; }

@media (max-width: 720px) {
  .cal-barra { align-items: stretch; }
  .cal-quando h2 { font-size: 16px; }
  .cal-controlos { width: 100%; }
  .cal-quem { flex: 1; }
}

/* A barra das ferramentas do calendário: o que arrastar faz, copiar um dia, as
   teclas. Fica separada da navegação do dia, que é de outra natureza. */
.grelha-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.grelha-modo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; }
.grelha-modo .btn { background: transparent; border-color: transparent; color: var(--muted); height: 30px; padding: 0 10px; }
.grelha-modo .btn:hover { background: transparent; color: var(--text); }
.grelha-modo .btn.escolhido { background: var(--green-soft); color: var(--green-text); }
.grelha-modo .help { margin: 0; font-size: 11px; }

.grelha-mao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grelha-mao-botoes { display: inline-flex; gap: 6px; margin-left: auto; }

/* A lista dos atalhos: a tecla à esquerda, o que ela faz à direita. */
.atalhos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.atalhos dt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.atalhos dd { margin: 0; font-size: 13px; }
/* Uma lista de linhas curtas dentro de um diálogo: a pré-visualização do que
   vai ser marcado, e as horas que chocam. */
.lista-simples { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.lista-simples li { padding: 3px 0; border-bottom: 1px dashed var(--border); }
.lista-simples li:last-child { border-bottom: 0; }

/* Os horários sugeridos: a hora à esquerda com a razão por baixo, o botão de
   marcar à direita. A razão não é enfeite — é o que se diz ao telefone. */
.sugestoes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sugestoes li { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); }
.sugestoes li > div { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* A câmara dentro da página, com uma moldura a dizer onde pôr o cartão. */
.cc-camara { position: relative; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cc-camara video { width: 100%; max-width: 520px; border-radius: 10px; background: #000; display: block; }
.cc-mira { position: absolute; inset: 0 auto auto 0; width: min(100%, 520px);
  aspect-ratio: 1.585; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 9999px rgba(0,0,0,.18);
  border-radius: 10px; }

/* O microfone e a condição em que ele existe, lado a lado: o aviso não é letra
   pequena por baixo, é o que está ao lado do botão que o dispara. */
.ditado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ditado .help { margin: 0; flex: 1; min-width: 200px; font-size: 11px; }
.ditado .btn.a-ouvir { background: var(--tone-coral-soft); color: var(--tone-coral); }
.ditado .btn.a-ouvir svg { animation: ditado-pulsa 1.1s ease-in-out infinite; }
@keyframes ditado-pulsa { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .ditado .btn.a-ouvir svg { animation: none } }

/* O que este número abrange, ao lado do rótulo: sem isto, um total global fica
   por baixo de um seletor de mês e parece ser desse mês. */
.fin-ambito { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; }

/* O âmbito, escrito. Discreto — não é um erro, é o que se está a ver — mas
   sempre presente, porque um total que não é o total não se adivinha. */
.ambito { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 8px 12px;
  border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg2);
  font-size: 12.5px; color: var(--muted); }
.ambito .icon { flex: none; margin-top: 1px; }
.ambito b { color: var(--text); font-weight: 600; }

/* As perguntas: fechadas, para se ver a lista toda de uma vez e escolher. */
.faq { border-bottom: 1px solid var(--border); }
.faq:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 12px 2px; font-size: 14px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 18px; color: var(--muted); font-weight: 400; }
.faq[open] summary::before { content: "−"; }
.faq p { margin: 0 0 14px 18px; font-size: 13.5px; color: var(--muted); max-width: 62ch; }

/* As novidades: a data à esquerda, o que mudou à direita. */
.novidades { display: flex; flex-direction: column; gap: 22px; }
.novidade { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
.novidade-quando { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.novidade-corpo h2 { margin: 0 0 6px; font-size: 15px; }
.novidade-corpo .lista-simples { font-size: 13.5px; color: var(--muted); max-width: 70ch; }
@media (max-width: 620px) { .novidade { grid-template-columns: 1fr; gap: 4px; } }

/* ── A VISITA GUIADA ───────────────────────────────────────────────────────
 *
 * O fundo escurece tudo e o alvo fica por cima, iluminado. O balão vai ao lado
 * do alvo e não no meio do ecrã: uma caixa no meio explica uma coisa que está
 * noutro sítio, e obriga a olhar para dois sítios ao mesmo tempo.
 */
.visita-fundo { position: fixed; inset: 0; z-index: 190; background: rgba(20, 18, 18, .55); }
.visita-alvo { position: relative; z-index: 191; border-radius: 10px;
  box-shadow: 0 0 0 3px var(--tone-green), 0 0 0 9px rgba(255, 255, 255, .25); }
.visita-balao { position: fixed; z-index: 192; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px 18px; }
.visita-conta { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.visita-balao h2 { margin: 4px 0 6px; font-size: 16px; }
.visita-balao p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.visita-botoes { display: flex; align-items: center; gap: 6px; }

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

/* As duas ligações do calendário: o endereço à vista e o que ele leva por baixo.
   O aviso da segunda não é letra pequena — é a razão de haver duas. */
.ics-linha { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.ics-linha b { font-size: 13px; }
.ics-linha input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.ics-linha .help { margin: 0; }
.ics-linha .help.error { color: var(--tone-coral); }

.sugestoes b { font-size: 14px; }
.sugestoes span { font-size: 12px; color: var(--muted); }

.atalhos kbd { font: inherit; font-size: 11px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; background: var(--bg2); }

.grelha-eixos { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; }
.grelha-eixos .btn { background: transparent; border-color: transparent; color: var(--muted); height: 34px; padding: 0 14px; }
.grelha-eixos .btn:hover { background: transparent; color: var(--text); }
.grelha-eixos .btn-soft { background: var(--green-soft); color: var(--green-text); }

/* O que há hoje e não é uma consulta: reuniões, férias, anos de um paciente.
   Fica por cima da grelha porque é o que se lê primeiro, e não ocupa sala. */
.grelha-avisos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* As consultas sem hora. Parecem blocos soltos de propósito: é o que são —
   pedaços do dia que ainda não têm sítio, à espera de um. */
.grelha-soltas { display: flex; flex-wrap: wrap; gap: 8px; }
/* `grab` e não `pointer`: o gesto que interessa aqui é arrastar para a hora
   onde a consulta vai ser. Um cursor de clique escondia-o de toda a gente. */
.grelha-solta { display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: grab;
  border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; background: var(--bg); font: inherit; color: var(--text); }
.grelha-solta:hover { border-style: solid; border-color: var(--tone-green); background: var(--tone-green-soft); }
.grelha-solta:focus-visible { outline: 2px solid var(--tone-green); outline-offset: 1px; }
.grelha-solta b { font-size: 12px; font-weight: 600; }
.grelha-solta span { font-size: 11px; color: var(--muted); }
.grelha-solta:active { cursor: grabbing; }
.grelha-solta.a-arrastar { opacity: .4; }
/* O punho, à esquerda do nome: é o que diz «isto pega-se». */
.grelha-solta b::before { content: "⠿"; color: var(--muted); margin-right: 6px; font-size: 11px; letter-spacing: -1px; }

/* A etiqueta que segue o rato ao arrastar um cartão da fila para a grelha:
   diz o nome e a hora onde vai cair, que é a única coisa que interessa saber
   nesse momento. */
.grelha-sombra { position: fixed; z-index: 90; pointer-events: none; font-size: 12px; font-weight: 600;
  background: var(--text); color: var(--bg); padding: 5px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* Onde o dia vai. Só aparece em hoje, e move-se de minuto a minuto. */
.grelha-agora-linha { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--tone-coral); z-index: 4; pointer-events: none; }
.grelha-horas .grelha-agora-linha { display: none; }

/* Dez pessoas em dez colunas não cabem sem ficarem ilegíveis: abaixo desta
   largura a coluna não encolhe mais, e a grelha rola na horizontal. */
.grelha-coluna:not(.grelha-horas) { min-width: 148px; }

@media (max-width: 720px) {
  .grelha-coluna:not(.grelha-horas) { min-width: 128px; }
  .grelha { max-height: 68vh; }
}

.grelha-bloco.tom-green  { background: var(--tone-green-soft);  color: var(--tone-green); }
.grelha-bloco.tom-blue   { background: var(--tone-blue-soft);   color: var(--tone-blue); }
.grelha-bloco.tom-amber  { background: var(--tone-amber-soft);  color: var(--tone-amber); }
.grelha-bloco.tom-lilac  { background: var(--tone-lilac-soft);  color: var(--tone-lilac); }
.grelha-bloco.tom-coral  { background: var(--tone-coral-soft);  color: var(--tone-coral); }
.grelha-bloco.tom-pink   { background: var(--tone-pink-soft);   color: var(--tone-pink); }
.grelha-bloco.tom-neutral { background: var(--border); color: var(--text); }
.grelha-bloco b, .grelha-bloco span { color: var(--text); }

/* ── O painel de uma consulta, e o arrastar ────────────────────────────── */
.grelha-bloco { cursor: grab; text-align: left; border: 0; font: inherit; }
.grelha-bloco:hover { filter: brightness(1.04); }
.grelha-bloco:focus-visible { outline: 2px solid var(--tone-green); outline-offset: 1px; }
.grelha-bloco.a-arrastar { cursor: grabbing; opacity: .85; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
/* Com ⌥ carregado, arrastar duplica em vez de mover — e vê-se qual dos dois é. */
.grelha-bloco.a-copiar { outline: 2px dashed var(--tone-green); outline-offset: 1px; }

/* Aconteceu e ainda não foi pago. Descobri-lo no fecho do mês é descobri-lo
   tarde: a pessoa já foi embora e alguém vai ter de telefonar. */
.grelha-bloco.por-pagar::before { content: "€"; position: absolute; bottom: 2px; right: 5px;
  font-size: 10px; font-weight: 700; color: var(--tone-coral); }
/* O estado lê-se sem abrir: o que já aconteceu esbate-se, a falta grita. */
.grelha-bloco.estado-realizada { opacity: .72; }
.grelha-bloco.estado-faltou { outline: 2px dashed var(--tone-coral); outline-offset: -2px; }
.grelha-selo { position: absolute; top: 2px; right: 4px; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }

.bloco-painel { display: flex; flex-direction: column; gap: 14px; }
.bloco-painel section { display: flex; flex-direction: column; gap: 6px; }
.bloco-painel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.bloco-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.bloco-mover { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bloco-mover .input, .bloco-mover .select { width: auto; }
.bloco-painel textarea.input { width: 100%; resize: vertical; min-height: 84px; font: inherit; }
.bloco-painel .help { margin: 0; }

/* Um bloco de 30 minutos tem 28px: duas linhas não cabem, e o texto saía por
   fora. Abaixo dos 45 minutos passa a uma linha só, com a hora antes do nome —
   que é o que se procura quando se olha para um dia cheio. */
.grelha-bloco.curto { flex-direction: row; align-items: baseline; gap: 5px; padding: 2px 6px; }
.grelha-bloco.curto b { font-size: 11.5px; }
.grelha-bloco.curto span { font-size: 10.5px; flex: none; order: -1; }
.grelha-bloco.curto .grelha-selo { display: none; }

/* Dentro de um diálogo, a lista de escolha não pode tapar o diálogo.
   O campo do paciente recebe o foco ao abrir — escrever o nome é o caminho
   rápido, e é isso que se quer — mas com a lista inteira aberta por cima, os
   campos de baixo desapareciam e o botão de marcar também. */
.dialog .busca-lista { max-height: 174px; }
.dialog .dialog-body { max-height: 60vh; overflow-y: auto; }

/* Saída de comandos: monoespaçada, pequena, e a rolar em vez de esticar a
   página. O que sai de um `git` é largo e ninguém o quer a empurrar o resto. */
.pre-sm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  margin: 6px 0 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* ── Arrastar ─────────────────────────────────────────────────────────────
   Os últimos 8px de um bloco são a pega de esticar. É estreito de propósito:
   o gesto normal é mover, e uma pega larga rouba-lhe o sítio. */
.grelha-bloco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.grelha-bloco.a-arrastar, .grelha-bloco.a-esticar { z-index: 6; box-shadow: 0 8px 22px rgba(0,0,0,.22); opacity: .95; }
/* Enquanto se arrasta, o bloco deixa de responder ao rato.
   Sem isto ele fica DEBAIXO do cursor e é ele próprio que o `elementFromPoint`
   encontra — logo a coluna por baixo nunca é vista, e largar noutra sala não
   mudava de sala. */
.grelha-bloco.a-arrastar { pointer-events: none; }
/* Enquanto se arrasta, a hora antiga do bloco cala-se: a etiqueta diz para onde
   ele VAI, e ter as duas ao mesmo tempo é o bloco a contradizer-se. */
.grelha-bloco.a-arrastar > span, .grelha-bloco.a-esticar > span { opacity: .25; }
.grelha-bloco.a-esticar { cursor: ns-resize; }

/* A hora escrita no bloco enquanto se arrasta: é a única coisa que interessa
   nesse momento, e evita ter de olhar para a régua ao lado. */
.grelha-agora { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 11px; font-weight: 600;
  background: var(--text); color: var(--bg); border-radius: 4px; padding: 0 5px; letter-spacing: .02em; }

/* A coluna por baixo do rato acende, para não haver dúvida sobre onde cai. */
.grelha-coluna.alvo .grelha-pista { background: var(--tone-green-soft); }
.grelha-coluna.alvo .grelha-cabeca b { color: var(--tone-green); }

/* Um formulário de edição num modal precisa de mais largura do que um diálogo
   de confirmação: são dez campos em duas colunas, e apertá-los numa só torna a
   edição rápida mais lenta do que a página que ela substitui. */
.dialog-largo { max-width: 720px; width: calc(100vw - 32px); }
.dialog-largo .dialog-body { max-height: 72vh; overflow-y: auto; }
.dialog-largo .card { border: 0; box-shadow: none; margin: 0; }
.dialog-largo .card-head { padding-top: 0; }

/* ── Passagem de design (08/10/2026) ──────────────────────────────────────────
 * Correções que valem para muitas páginas de uma vez. Ficam juntas, no fim,
 * para se lerem como um conjunto e se poderem desfazer sem caçar regras.
 */

/* O cartão de boas-vindas guardava 260px à direita para a ilustração também no
   telemóvel: o título partia-se numa coluna de uma palavra por linha. */
@media (max-width: 760px) {
  .hero.with-art { padding: 24px 20px 140px; min-height: 0; }
  .hero-art { width: 150px; height: 130px; right: 12px; bottom: -8px; }
  .hero-title { font-size: 28px; }
}

/* Os números dos cartões ficavam a alturas diferentes conforme o rótulo
   cabia ou não ao lado do ícone; e o euro caía sozinho para a linha de baixo. */
.stat-head { flex-wrap: nowrap; line-height: 1.25; }
.stat-head .delta { flex: none; align-self: flex-start; }
.stat-value { overflow-wrap: normal; white-space: nowrap; font-size: clamp(24px, 6.5vw, 36px); }
.stat-value.small { font-size: 24px; }

/* Datas e números não se partem a meio («20-10-» numa linha, «2026» na outra). */
.table td.mono, .table .mono, .mono.nowrap, time { white-space: nowrap; }

/* A lista curta com pesquisa usa um campo só de leitura, e apanhava o estilo
   dos campos bloqueados: branco e cinzento, no meio de campos creme. */
.input.busca-campo[readonly] { background: var(--bg3); color: var(--text); }

/* Calendário das consultas: o «hoje» era branco sobre menta clara no escuro, e
   os dias fechados riscavam com força. Fica como na Agenda. */
.mes-cel.hoje .mes-num { background: var(--green); color: var(--on-green); }
.mes-cel.fechado { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--tone-neutral-soft) 8px 9px); }

/* As ligações dos cabeçalhos das fichas pareciam texto. */
.work-head a { color: var(--green-text); font-weight: 500; }
@media (max-width: 560px) {
  .work-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Cartões de mensagem: o rodapé alinhado em baixo em todos os cartões da linha. */
.msg-card { display: flex; flex-direction: column; }
.msg-card .card-foot { margin-top: auto; }

/* Secções que abrem e fecham: espaço por baixo do título e uma seta que diz
   que abre. */
details.card > summary.card-head { padding-bottom: 20px; list-style: none; cursor: pointer; position: relative; padding-right: 52px; }
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card > summary.card-head::after {
  content: ""; position: absolute; right: 26px; top: 26px; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
details.card[open] > summary.card-head::after { transform: rotate(-135deg); top: 30px; }

/* As vistas de uma página (Resumo, Consultas, Documentos…) no telemóvel: em
   vez de esconder metade fora do ecrã, passam para duas linhas. */
@media (max-width: 640px) {
  .vistas { flex-wrap: wrap; overflow: visible; border-radius: 18px; width: 100%; }
}

/* Tabelas no telemóvel: a linha dos filtros por coluna era uma faixa vazia, e
   o «por página» partia-se. */
@media (max-width: 640px) {
  .table .dt-filters { display: none; }
  .dt-size { display: none; }
}

/* O cabeçalho do telemóvel ficava vazio à esquerda: mostra-se onde se está. */
@media (max-width: 640px) {
  .trilho { display: flex; min-width: 0; }
  .trilho .trilho-casa, .trilho .trilho-sep, .trilho .trilho-passo:not(.is-atual) { display: none; }
  .trilho .trilho-passo.is-atual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* No telemóvel, a pastilha da variação vai para o canto do cartão: ao lado do
   rótulo empurrava-o para uma palavra por linha e saía pela borda. */
@media (max-width: 560px) {
  .stat:has(.stat-head .delta) { position: relative; padding-top: 44px; }
  .stat-head .delta { position: absolute; top: 12px; right: 12px; }
}

/* Calendário das consultas no telemóvel: os nomes ficavam em «08:…», cortados.
   Passam a pontos da cor da especialidade; o painel do dia, por baixo, diz quem. */
@media (max-width: 640px) {
  .mes-consulta { font-size: 0; width: 7px; height: 7px; padding: 0; border-radius: 50%; display: inline-block; margin: 1px; }
  .mes-consulta.tom-green  { background: var(--tone-green); }
  .mes-consulta.tom-blue   { background: var(--tone-blue); }
  .mes-consulta.tom-amber  { background: var(--tone-amber); }
  .mes-consulta.tom-lilac  { background: var(--tone-lilac); }
  .mes-consulta.tom-coral  { background: var(--tone-coral); }
  .mes-consulta.tom-pink   { background: var(--tone-pink); }
  .mes-consulta.tom-neutral { background: var(--muted); }
  .mes-cel { height: 64px; }
}

/* Tabelas largas no telemóvel: a primeira coluna (quem) fica à vista ao
   deslizar para o lado. */
@media (max-width: 640px) {
  .table-wrap .table th:first-child, .table-wrap .table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--card);
    box-shadow: 1px 0 0 var(--border);
  }
}

/* A legenda da Agenda parecia uma fila de filtros: passa a ponto e texto. */
.cal-legend .pill { background: transparent !important; padding: 0 0 0 16px; position: relative; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.cal-legend .pill::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: currentColor; }
.cal-legend .pill.coral::before { background: var(--tone-coral); }
.cal-legend .pill.blue::before { background: var(--tone-blue); }
.cal-legend .pill.green::before { background: var(--tone-green); }
.cal-legend .pill.lilac::before { background: var(--tone-lilac); }

/* ── Fichas por completar (lista de processos) ─────────────────────────── */
.falta-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;font-size:13px}
.falta-faixa .pill{text-decoration:none;cursor:pointer}
.falta-faixa .pill:hover{filter:brightness(.97)}
.falta-faixa .pill b{font-variant-numeric:tabular-nums}

/* ── Ficha no telemóvel: os contactos antes da história ───────────────────
   Numa coluna só, «Dados do processo» ficava depois de dezenas de sessões —
   e no telemóvel é o telefone que se vai lá buscar. */
@media (max-width: 1200px) {
  .grid.main-side.dados-primeiro > :last-child { order: -1; }
}

/* A navegação do mês cabe num telemóvel: o nome do mês deixa de exigir 180px. */
@media (max-width: 520px) {
  .mes-nav { gap: 8px; }
  .mes-nav b { min-width: 0; flex: 1; font-size: 14px; }
}

/* ── A Agenda fala a mesma língua do calendário das consultas ─────────────
   Eram dois calendários de mês com regras diferentes: o número do dia à
   direita num e à esquerda no outro, o «hoje» pintado na célula inteira num e
   num círculo no outro, o fim de semana riscado só num. Fica tudo como no das
   consultas, que é o que se usa todos os dias. */
.cal-dow { text-align: left; padding: 8px 10px; font-weight: 600; letter-spacing: .04em; background: transparent; }
.cal-daynum { align-self: flex-start; font-size: 12px; padding: 0; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cal-day.today { background: transparent; }
.cal-day.today .cal-daynum { background: var(--tone-green); color: #fff; }
.cal-day.other { background: transparent; opacity: .45; }
#calendario:not([data-domingos-abertos]) .cal-grid > .cal-day:nth-child(7n):not(.other) {
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--bg3) 6px 12px); }
.cal-grid > .cal-day.selectable:hover { background: var(--bg3); }

/* Mais do que um botão no fim de uma linha da linha do tempo: lado a lado, na
   terceira coluna, e não a cair para a linha de baixo por cima do ponto. */
.lt-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .lt-item .lt-acoes { grid-column: 2 / -1; justify-content: flex-start; } }

/* ── Páginas da família e entrada no telemóvel ───────────────────────────
   O painel da marca esconde-se abaixo de 900px; a faixa de cima substitui-o.
   Nas páginas da família o conteúdo começa em cima (não flutua a meio do
   ecrã), os títulos das secções são títulos e não etiquetas cinzentas, e a
   pílula com o nome do centro sai — a marca já está na faixa. */
.auth-topo { display: none; }
@media (max-width: 900px) {
  .auth-topo { display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden;
    padding: 18px 20px; min-height: 92px; background: var(--green-soft); border-bottom: 1px solid var(--green-border); }
  .auth-topo .auth-brand .mark { width: 38px; height: 38px; flex-basis: 38px; }
  .auth-topo .auth-brand .wordmark-svg { height: 16px; }
  .auth-topo-arte { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); height: 76px; width: auto; pointer-events: none; }
  .auth-main { align-items: flex-start; padding-top: 8px; }
}
body.publico .auth-card { max-width: 480px; }
body.publico .auth-card > .pill:first-child { display: none; }
body.publico .auth-card > h1 { margin-top: 20px; }
body.publico .portal-bloco { margin-top: 0; padding: 22px 0; border-top: 1px solid var(--border); }
body.publico .auth-card > .lead + .portal-bloco { border-top: 0; padding-top: 4px; }
body.publico .portal-bloco h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--text); margin: 0 0 6px; }
body.publico .portal-bloco > p { margin: 0 0 12px; }
@media (max-width: 900px) { body:not(.publico) .auth-topo-arte { right: 66px; } }

/* ── As ações de uma linha nunca ficam escondidas ─────────────────────────
   Com muitas colunas a tabela rola por dentro do cartão, e no Mac a barra de
   rolagem não se vê: os botões do fim ficavam cortados sem ninguém saber que
   havia mais. A coluna das ações fica agarrada à direita, com uma sombra a
   dizer que há tabela por baixo. */
.table-wrap .table th.actions, .table-wrap .table td.actions { position: sticky; right: 0; z-index: 1; background: var(--card); }
.table-wrap .table td.actions { box-shadow: -10px 0 10px -10px rgba(30, 28, 28, .18); }
.table-wrap .table tr:hover td.actions { background: inherit; }
.table .dt-filters input, .table .dt-filters select { min-width: 72px; }
/* Na coluna principal do Início cabem três quadrados por linha, e o quarto
   ficava sozinho por baixo. Dois e dois. */
@media (min-width: 1201px) { .grid.main-side .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Telemóvel: o título da página precisa do espaço da barra de cima. */
.so-telemovel { display: none; }
@media (max-width: 600px) {
  .topbar-right > .theme-toggle { display: none; }
  .dropdown-menu .so-telemovel { display: flex; }
  .lt-topo { flex-wrap: wrap; row-gap: 2px; }
  .lt-topo time { flex-basis: 100%; }
}

/* Classes que o HTML usava e o CSS nunca definiu. */
.dialog-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.dialog-sub:empty { display: none; }
.dl { margin: 0; display: grid; gap: 0; }
.dl-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.dl-row:first-child { border-top: 0; }
.dl-row dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dl-row dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .dl-row { grid-template-columns: 1fr; gap: 2px; } }
/* A próxima consulta, na página da família: é a razão de a abrirem. */
.portal-proxima { background: var(--green-soft); border: 1px solid var(--green-border); border-radius: 16px; padding: 18px 18px 16px; }
body.publico .portal-proxima { border-top: 1px solid var(--green-border); margin: 4px 0 18px; padding: 18px; }
.portal-quando { font-size: 19px; line-height: 1.35; margin: 4px 0 6px; }
.portal-acao { margin: 0; }
/* Ligações no meio do texto de ajuda: sublinhadas, não só de outra cor. */
.help a, .callout a, .card-subtitle a { text-decoration: underline; text-underline-offset: 2px; }
/* Tabelas largas (as consultas têm 13 colunas): um pouco menos de ar por
   célula e cabeçalhos menos espaçados, para caberem num ecrã de portátil sem
   esconder colunas debaixo das ações. */
.table th { padding-left: 11px; padding-right: 11px; letter-spacing: 0.05em; }
.table th.sortable { padding-right: 19px; }
.table td { padding-left: 11px; padding-right: 11px; }

/* ── Impressão dos documentos ───────────────────────────────────────────── */
@media print {
  /* O título e o subtítulo do ecrã («escolha o mês e imprima…») não vão para
     o papel quando o documento tem o seu próprio cabeçalho. */
  body:has(.doc) .page-header, body:has(.print-head) .page-header,
  body:has(.doc) .vistas, body:has(.print-head) .vistas { display: none !important; }
  /* Duas tabelas lado a lado em meia folha cortavam as colunas da direita. */
  .grid.cols-2:has(.table) { grid-template-columns: 1fr; }
  .table-wrap { overflow: visible; }
  .table-wrap .table th.actions, .table-wrap .table td.actions { position: static; box-shadow: none; }
}

/* A prova de uma assinatura, no telemóvel: rótulo por cima do valor, e não
   duas colunas espremidas. */
@media (max-width: 520px) {
  .cons-prova > div, .prova > div { display: block !important; }
  .cons-prova dt, .prova dt { margin-bottom: 1px; }
}

/* Cartão da próxima consulta: margens iguais à volta, os dois botões com a
   mesma largura (os filhos da fila são os formulários, não os botões), e a
   nota de ajuda com ar por cima. */
body.publico .portal-proxima { padding: 20px; }
body.publico .portal-proxima > h2 { margin: 0 0 4px; }
.portal-proxima .portal-quando { margin: 0 0 6px; }
.portal-proxima > .muted { margin: 0; }
.portal-botoes > .portal-acao { flex: 1 1 140px; display: flex; }
.portal-botoes > .portal-acao .btn { flex: 1; width: 100%; }
.portal-proxima .portal-botoes { margin-top: 16px; }
.portal-proxima > .help { margin: 12px 0 0; }

/* Computador: o painel da marca fica à altura do ecrã enquanto o conteúdo
   desliza. Esticado ao comprimento da página, a frase ficava perdida a meio
   e a ilustração só aparecia lá em baixo. */
@media (min-width: 901px) {
  .auth-side { position: sticky; top: 0; height: 100vh; align-self: start; }
}
.pedir-aut { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pedir-aut > div { flex: 1 1 320px; min-width: 0; }

/* ── Como saem os emails ────────────────────────────────────────────────── */
.email-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 26px; }
.email-cartao { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.email-cartao > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.email-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.email-titulo h3 { margin: 0; font-size: 16px; }
.email-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.email-porque { font-size: 13px; }
.email-regras { margin: 0; display: grid; gap: 8px; }
.email-regras > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.email-regras dt { color: var(--muted); }
.email-regras dd { margin: 0; overflow-wrap: anywhere; }
.email-cartao .help { margin: 0; }
.email-passos { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.email-passos b { display: block; }
.email-passos span { color: var(--muted); font-size: 14px; }
.stat-value.small { overflow-wrap: anywhere; }
@media (max-width: 520px) { .email-grelha { grid-template-columns: 1fr; } .email-regras > div { grid-template-columns: 1fr; gap: 0; } }
.emails-topo .stat-value.small { font-size: 17px; line-height: 1.3; white-space: normal; word-break: break-all; }

/* ── Como ficam os emails ───────────────────────────────────────────────── */
.ev { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.ev-lista { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; max-height: calc(100vh - 110px); overflow-y: auto; }
.ev-grupo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 10px 6px; }
.ev-grupo:first-child { margin-top: 4px; }
.ev-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background .15s; }
.ev-item:hover { background: var(--bg3); }
.ev-item.on { background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-border); }
.ev-item-texto { display: flex; flex-direction: column; min-width: 0; }
.ev-item-texto b { font-size: 14px; font-weight: 600; }
.ev-item-texto small { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-item.on .ev-item-texto b { color: var(--green-text); }
.ev-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tone-neutral-soft); color: var(--tone-neutral); }
.ev-ico.tone-green { background: var(--tone-green-soft); color: var(--tone-green); }
.ev-ico.tone-blue { background: var(--tone-blue-soft); color: var(--tone-blue); }
.ev-ico.tone-amber { background: var(--tone-amber-soft); color: var(--tone-amber); }
.ev-ico.tone-lilac { background: var(--tone-lilac-soft); color: var(--tone-lilac); }
.ev-ico-lg { width: 52px; height: 52px; border-radius: 16px; }
.ev-ico-lg .icon { width: 24px; height: 24px; }
.ev-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; display: inline-block; }
.ev-ponto.is-sai { background: var(--green-deep); box-shadow: 0 0 0 3px var(--green-soft); }
.ev-legenda { display: flex; align-items: center; gap: 6px; margin: 14px 10px 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.ev-legenda .ev-ponto + * { margin-left: 0; }
.ev-legenda .ev-ponto:not(:first-child) { margin-left: 10px; }

.ev-centro { min-width: 0; display: grid; gap: 16px; }
.ev-escolher { display: none; width: 100%; }
.ev-ficha { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.ev-ficha-texto { min-width: 0; flex: 1; display: grid; gap: 10px; }
.ev-ficha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-ficha-topo h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin: 0 6px 0 0; }
.ev-factos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin: 0; }
.ev-factos dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ev-factos dd { margin: 0; font-size: 14px; line-height: 1.45; }
.ev-parado { margin: 0; }

.ev-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ev-barra .seg button { display: inline-flex; align-items: center; gap: 6px; }
.ev-barra-dir { display: flex; gap: 6px; }

.ev-palco { border-radius: var(--radius-lg); padding: 32px 24px; display: flex; justify-content: center;
  background: radial-gradient(circle at 20% 0%, var(--tone-green-soft), transparent 55%), radial-gradient(circle at 100% 100%, var(--tone-lilac-soft), transparent 50%), var(--bg3);
  border: 1px solid var(--border); }
.ev-caixa { width: 100%; max-width: 720px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 28, 28, .06), 0 18px 48px rgba(30, 28, 28, .14); transition: max-width .35s cubic-bezier(.32, .72, 0, 1), border-radius .35s; }
.ev-janela { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.ev-janela i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); opacity: .6; }
.ev-janela i:nth-child(1) { background: #e87c6a; opacity: .8; } .ev-janela i:nth-child(2) { background: #e8c87c; opacity: .8; } .ev-janela i:nth-child(3) { background: #94ccbe; opacity: .9; }
.ev-janela span { margin-left: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ev-cabecalho { padding: 18px 22px 16px; border-bottom: 1px solid var(--border); display: grid; gap: 12px; }
.ev-assunto { font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.ev-de { display: flex; gap: 12px; align-items: center; font-size: 13.5px; }
.ev-de-texto { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ev-remetente { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--green-text); background: var(--green-soft); box-shadow: inset 0 0 0 1.5px var(--green-border); }
.ev-hora { font-size: 12.5px; flex: none; align-self: flex-start; }
.ev-anexo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); }
.ev-anexo .icon { color: var(--tone-coral); }
.ev-anexo span { display: flex; flex-direction: column; font-size: 13px; }
.ev-anexo small { color: var(--muted); font-size: 11.5px; }
.ev-email { display: block; width: 100%; height: 900px; border: 0; background: #f5f1e4; }

/* Em modo telemóvel: a largura de um telemóvel, com moldura e cantos redondos. */
.ev-caixa.is-telemovel { max-width: 390px; border-radius: 40px; border: 10px solid #1e1c1c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(30, 28, 28, .28); }
.ev-caixa.is-telemovel .ev-janela { justify-content: center; padding: 8px 14px 6px; background: var(--card); border-bottom: 0; }
.ev-caixa.is-telemovel .ev-janela i { display: none; }
.ev-caixa.is-telemovel .ev-janela span { margin: 0; width: 90px; height: 22px; border-radius: 999px; background: #1e1c1c; font-size: 0; }
.ev-caixa.is-telemovel .ev-cabecalho { padding: 10px 16px 14px; }
.ev-caixa.is-telemovel .ev-assunto { font-size: 17px; }
.ev-caixa.is-telemovel .ev-de-texto .muted:first-of-type { display: none; }
.ev-centro > .help { text-align: center; }
@media (max-width: 1100px) { .ev { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; } .ev-factos { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 900px) {
  .ev { grid-template-columns: 1fr; }
  .ev-lista { display: none; }
  .ev-escolher { display: grid; gap: 4px; }
  .ev-ficha { padding: 14px; gap: 12px; }
  .ev-ico-lg { width: 42px; height: 42px; border-radius: 12px; }
  .ev-ficha-topo h2 { font-size: 18px; }
  .ev-palco { padding: 0; background: none; border: 0; }
  .ev-cabecalho { padding: 14px 14px 12px; }
  .ev-assunto { font-size: 17px; }
  .ev-so-largo { display: none; }
  .ev-barra .seg { display: none; }
  .ev-barra { justify-content: flex-end; }
  .ev-caixa.is-telemovel { max-width: none; border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
  .ev-caixa.is-telemovel .ev-janela { display: none; }
}
/* Avisos da família no sino */
.noti.novo .noti-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--tone-coral); vertical-align: middle; }
.iconbtn .count.aviso { background: var(--tone-coral); color: #fff; }
/* Por confirmar, no Início */
.work-item.confirmar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.work-item.confirmar .work-main { min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.confirmar-botoes { display: inline-flex; gap: 6px; }
@media (max-width: 520px) { .work-item.confirmar { grid-template-columns: auto minmax(0, 1fr); } .confirmar-botoes { grid-column: 2; } }
.work-card.largo { grid-column: 1 / -1; }
/* Mensagens: o nome tem a linha toda; o selo e a data vão por baixo. Num
   cartão de três por linha não cabiam os três, e o selo ficava por cima do nome. */
.msg-card .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
.msg-meta { justify-content: flex-start; flex-wrap: wrap; }

/* ── Marcar no telemóvel ──────────────────────────────────────────────────
   Num telemóvel marca-se a tocar num espaço livre: o modo de arrastar e os
   atalhos de teclado não servem para nada e empurravam a grelha um ecrã para
   baixo. A data por extenso já está no título, por isso o campo de data sai
   também. As colunas encolhem até caberem três salas lado a lado. */
@media (max-width: 640px) {
  .grelha-modo, [data-atalhos] { display: none !important; }
  .grelha-barra { gap: 8px; }
  .grelha-barra .btn { flex: 1 1 0; justify-content: center; }
  .grelha-coluna { min-width: 92px; }
  .grelha-cabeca { padding-left: 8px; padding-right: 6px; }
  .grelha-vazio span { opacity: .55; }
}
@media (max-width: 640px) {
  .cal-data, .data:has(.cal-data) { display: none !important; }
  .cal-barra { gap: 10px; }
  .grelha-horas { flex-basis: 44px; min-width: 44px; }
  .grelha-coluna:not(.grelha-horas) { min-width: 0; flex: 1 1 0; }
  .grelha-hora { right: 5px; font-size: 10.5px; }
}

/* ── O meu dia (Início) ─────────────────────────────────────────────────── */
.meu-dia { margin-bottom: 20px; }
.meu-dia-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.meu-dia-topo h2 { margin: 0 0 2px; font-size: 18px; }
.meu-dia-topo p { margin: 0; font-size: 13.5px; }
.dia-itens { display: grid; gap: 6px; margin-top: 14px; }
.dia-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.dia-item:hover { background: var(--bg3); }
.dia-item-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.dia-item-quem { min-width: 0; display: flex; flex-direction: column; }
.dia-item-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-item-quem small { color: var(--muted); font-size: 12.5px; }
.dia-item.passou, .dia-item.realizada, .dia-item.faltou { opacity: .72; }
.dia-item.proxima, .dia-item.agora { border-color: var(--green-border); background: var(--green-soft); }
.cal-titulo-curto { display: none; }
@media (max-width: 640px) { .cal-quando h2:not(.cal-titulo-curto):has(+ .cal-titulo-curto) { display: none; } .cal-titulo-curto { display: block; } }
.work-rodape { padding: 10px 14px 12px; border-top: 1px solid var(--border); }

/* Listas no telemóvel: sem a caixa de seleção nem o número (que só servem com
   rato e para referência), e a coluna das ações deixa de estar agarrada — num
   ecrã estreito tapava a coluna do nome. */
@media (max-width: 640px) {
  .table th.pick, .table td.pick, .table .col-num { display: none; }
  .table-wrap .table th.actions, .table-wrap .table td.actions { position: static; box-shadow: none; }
  .grelha-vazio[data-marcar-dia] span { display: none; }
}

/* Linhas que abrem com um clique (data-abrir) */
tr[data-abrir] { cursor: pointer; }
tr[data-abrir]:hover > td { background: var(--bg3); }

/* ── Consultas · Hoje ────────────────────────────────────────────────────── */
.hoje-numeros { margin-bottom: 18px; }
.hoje-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin: 4px 0 14px; }
.hoje-dia { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.hoje-frase { margin: 4px 0 0; }
.hoje-frase b { color: var(--text); }
.hoje-barra-dir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hoje-lista { display: grid; gap: 8px; }
.hoje-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); position: relative; }
.hoje-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.hoje-item.agora::before, .hoje-item.proxima::before { background: var(--green-deep); }
.hoje-item.passou::before { background: var(--tone-amber); }
.hoje-item.agora, .hoje-item.proxima { border-color: var(--green-border); }
.hoje-item.realizada, .hoje-item.faltou { opacity: .7; }
.hoje-hora b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.hoje-hora small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hoje-quem { min-width: 0; display: grid; gap: 6px; }
.hoje-nome { font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-nome:hover { text-decoration: underline; }
.hoje-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.hoje-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.hoje-meta .avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.hoje-acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.hoje-acoes .confirmar-botoes { display: flex; gap: 6px; margin-right: 4px; }
@media (max-width: 760px) {
  .hoje-item { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 14px; }
  .hoje-estado { grid-column: 3; grid-row: 1; }
  .hoje-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .hoje-acoes .confirmar-botoes { flex: 1; }
  .hoje-acoes .confirmar-botoes .btn { flex: 1; }
}

/* Ausências na grelha: a coluna fica riscada e sem vagas */
.grelha-coluna.ausente .grelha-pista { background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--linha-meia) 9px 10px); }
.grelha-ausente { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--tone-amber); }

/* Ausências na Agenda */
.ausencias { display: grid; gap: 10px; }
.ausencia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); }
.ausencia-texto .pill { margin-left: 6px; vertical-align: 1px; }
.ausencia-texto .muted { font-size: 13px; margin-top: 2px; }
.ausencia-afetadas { margin-top: 8px; font-size: 13px; }
.ausencia-afetadas summary { cursor: pointer; color: var(--tone-amber); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ausencia-afetadas ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ausencia-ok { margin-top: 6px; font-size: 12.5px; color: var(--green-text); display: inline-flex; align-items: center; gap: 5px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ausencia { grid-template-columns: auto minmax(0, 1fr); } .ausencia form { grid-column: 2; } }
.hoje-nome-linha { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hoje-nome-linha .pill { display: inline-flex; align-items: center; gap: 4px; }
.alert.coral { background: var(--tone-coral-soft); border: 1px solid color-mix(in srgb, var(--tone-coral) 35%, transparent); color: var(--text); }
.aviso-faltas { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.aviso-faltas > .icon { color: var(--tone-coral); flex: none; }
.aviso-faltas > span { flex: 1; }
@media (max-width: 600px) { .aviso-faltas { flex-wrap: wrap; } }
.grelha-ausente { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Faturação ─────────────────────────────────────────────────────────── */
.fat-doc { position: relative; }
.fat-doc .doc-brand span { display: block; }
.fat-doc .doc-party { grid-template-columns: repeat(2, 1fr); }
.fat-doc .fat-tipo { text-transform: uppercase; letter-spacing: 0.06em; }
.fat-doc .doc-meta strong { color: var(--text); font-size: 15px; }
.fat-falta { color: var(--tone-coral) !important; }
/* Um documento de teste di-lo em cima, em grande, e na impressão também. */
.fat-faixa { margin: -40px -44px 28px; padding: 10px 44px; background: var(--tone-amber-soft); color: var(--tone-amber);
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em; border-radius: var(--radius-lg) var(--radius-lg) 0 0; text-align: center; }
.fat-somas { margin: -8px 0 24px auto; max-width: 320px; font-size: 13px; }
.fat-somas > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--muted); }
.fat-somas .fat-somas-total { border-top: 2px solid var(--text); margin-top: 4px; padding-top: 8px; color: var(--text); font-weight: 700; font-size: 16px; }
.fat-linhas td:first-child { width: 55%; }
.fat-anular { margin-top: 20px; max-width: 900px; padding: 0; }
.fat-anular > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--tone-coral); list-style: none; }
.fat-anular > summary::-webkit-details-marker { display: none; }
.fat-anular > form { padding: 0 18px 18px; }
.fat-escolha { width: 36px; }
.fat-consultas .fat-preco { width: 110px; text-align: right; margin-left: auto; }
.fat-faixa-anulado { background: var(--tone-coral-soft); color: var(--tone-coral); }
.fat-faixa + .fat-faixa { margin-top: -28px; border-radius: 0; }
.fat-anular-nota { margin-top: 16px; max-width: 900px; }
.fat-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fat-tipo-opcao { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.fat-tipo-opcao:has(input:checked) { border-color: var(--tone-green, var(--text)); background: var(--tone-green-soft, var(--bg2)); }
.fat-tipo-opcao input { margin-top: 3px; }
.fat-tipo-opcao strong { display: block; }
.fat-tipo-opcao small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.fat-extra { margin-top: 18px; }
.fat-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 6px; border-top: 1px solid var(--border); margin-top: 16px; font-size: 15px; }
.fat-total strong { font-size: 22px; letter-spacing: -0.02em; }
.alert + .mes-nav { margin-top: 18px; }
.fat-marca { font-size: 12px; white-space: nowrap; }
.fat-serie-validar { display: inline-flex; gap: 6px; margin: 0 6px 0 0; }
.fat-serie-validar .input { width: 150px; }
@media (max-width: 760px) {
  .fat-faixa { margin: -24px -20px 20px; padding: 10px 20px; }
  .fat-doc .doc-head { flex-direction: column; }
  .fat-doc .doc-meta { text-align: left; }
  .fat-doc .doc-party { grid-template-columns: 1fr; }
  .fat-somas { max-width: none; }
  .fat-consultas .fat-preco { width: 88px; }
  .fat-tipos { grid-template-columns: 1fr; }
  .fat-faixa + .fat-faixa { margin-top: -20px; }
}
@media print {
  .fat-faixa { margin: 0 0 18px; border: 2px solid #000; color: #000; background: none; border-radius: 0; }
}
/* No telemóvel a data já vai na descrição de cada consulta: a coluna só roubava largura. */
@media (max-width: 600px) { .fat-consultas th:nth-child(2), .fat-consultas td:nth-child(2) { display: none; } }
.fat-via { margin: -4px 0 12px; }

/* ── Por aprovar ───────────────────────────────────────────────────────── */
.fap-consultas { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.fap-consultas li { padding: 1px 0; }
.fap-mov { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fap-alerta { color: var(--tone-coral); font-weight: 600; }
.fap-tabela td { vertical-align: top; }
.fap-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--border); }
.fap-extrato { align-items: end; }
@media (max-width: 760px) {
  .fap-tabela thead { display: none; }
  .fap-tabela tr { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .fap-tabela td { display: block; padding: 0; border: 0; }
  .fap-tabela td:nth-child(1) { grid-row: span 4; }
  .fap-tabela td:nth-child(2) { grid-column: 2 / 4; }
  .fap-tabela td:nth-child(3), .fap-tabela td:nth-child(5), .fap-tabela td:nth-child(6) { grid-column: 2 / 4; }
  .fap-tabela td:nth-child(4) { grid-column: 2 / 4; text-align: left; }
}
.fap-email { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.fap-email .input { max-width: 260px; }
.fat-enviar { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fat-enviar .input { width: 220px; }
@media (max-width: 600px) { .fat-enviar, .fat-enviar .input { width: 100%; } .fap-email { flex-wrap: wrap; } .fap-email .input { max-width: none; } }

/* ── A ligação à AT, em passos ─────────────────────────────────────────── */
.at-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.at-passo { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.at-n { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted); }
.at-passo.feito .at-n { background: var(--tone-green); border-color: var(--tone-green); color: #fff; }
.at-passo .help { margin: 2px 0 8px; }
.at-passo-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.at-passo-form .field { margin: 0; min-width: 260px; }
.at-passo-form .form-actions { margin: 0; }
.at-passo-form .input { max-width: 260px; }

/* ── Acertos da faturação, depois de a ver página a página ─────────────── */
/* Os botões de um formulário ocupam a linha toda da grelha, à direita — como
   os que a casa já embrulha em .span-2. Soltos, caíam numa coluna e ficavam a
   meio da página. */
.form-grid > .form-actions { grid-column: 1 / -1; }
/* Um aviso por cima de um formulário ou da barra de um documento tem a mesma
   folga que por cima de um cartão. */
.alert + form, .alert + .doc-controls, .fat-via + .doc-controls { margin-top: 18px; }
/* A barra de cima de um documento acaba onde o documento acaba. */
.doc-controls { max-width: 900px; }
/* Os botões de escolha no verde da casa, e não no azul do sistema. */
.fat-tipo-opcao input, .fat-escolha input, .fap-tabela input[type=checkbox] { accent-color: var(--tone-green); }
/* A escolha do processo: o nome ocupa a linha, a seta fica no fim. */
/* No telemóvel, a tabela de um documento larga a quantidade e a taxa (são sempre
   1 e 0 %, e o resumo do IVA diz a taxa): a descrição precisa da largura. */
@media (max-width: 600px) {
  .fat-linhas th:nth-child(2), .fat-linhas td:nth-child(2),
  .fat-linhas th:nth-child(4), .fat-linhas td:nth-child(4) { display: none; }
  .fat-linhas td:first-child { width: auto; }
  .fat-linhas th, .fat-linhas td { padding-left: 6px; padding-right: 6px; }
}
/* Uma lista simples de documentos ou de processos: o texto a toda a largura, o
   que se faz ou o estado à direita. (A .lt da casa é uma linha do tempo, com
   coluna de ícone e traço vertical — não serve para isto.) */
.fat-lista { list-style: none; margin: 0; padding: 0; }
.fat-lista > li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.fat-lista > li:first-child { border-top: 0; }
.fat-lista > li[hidden] { display: none; }
.fat-lista-texto { flex: 1; min-width: 0; }
.fat-lista-pilulas { display: inline-flex; gap: 6px; flex: none; white-space: nowrap; }
@media (max-width: 600px) { .fat-lista > li { padding: 12px 14px; flex-wrap: wrap; } }
/* A página de um documento tem a largura do documento. */
.fat-pagina { max-width: 900px; }
.fat-pagina .doc, .fat-pagina .doc-controls, .fat-pagina .fat-anular { max-width: none; }
/* O que já aconteceu ao documento: discreto, por baixo dos avisos, com folga. */
.fat-info { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.fat-info p { margin: 0; }
.fat-info b { color: var(--text); font-weight: 600; }
.fat-pagina > .doc-controls { margin-top: 18px; }
.fat-pagina > .alert:first-child { margin-top: 0; }
.fat-perigo { color: var(--tone-coral); }
.fat-perigo:hover { background: var(--tone-coral-soft); }
.fat-anular-nota { margin: 12px 0 0; }

/* A barra do mês é a do calendário; aqui só lhe falta o espaço por baixo e a seta desligada. */
.barra-mes { margin-bottom: 20px; }
/* O mesmo espaço entre as abas, o aviso e a barra do mês: os 22px que as abas já deixam por baixo. */
.vistas + .barra-mes { margin-top: 4px; }
.vistas + .alert { margin-top: 0; }
.alert + .barra-mes { margin-top: 22px; }
.iconbtn.is-disabled { opacity: 0.35; pointer-events: none; }

/* Colunas secundárias que, num telemóvel, só obrigavam a tabela a rolar de lado. */
@media (max-width: 600px) { .table .so-largo { display: none; } }

/* Lido pelo leitor de ecrã, não desenhado: o rótulo de um campo cujo botão já diz o que é. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* O pagamento em dois passos: a primeira pergunta é o segmentado da casa, com rádios por baixo (teclado e leitor de ecrã). */
fieldset.pay-passo { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.pay-passo legend { padding: 0; margin-bottom: 6px; }
.pay-passo .seg label { position: relative; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pay-passo .seg input { position: absolute; opacity: 0; pointer-events: none; }
.pay-passo .seg label:has(input:checked) { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.pay-passo .seg label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* A resposta da AT, no documento: legível, e sem empurrar o diálogo para o lado. */
.at-tentativas li { margin-bottom: 12px; }
.at-resposta summary { cursor: pointer; margin-top: 6px; color: var(--text); }
.at-resposta pre { margin: 8px 0 0; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }

/*
 * O ritmo à volta dos avisos: 18px entre o aviso e o que vem a seguir, seja o
 * que for — também dentro dos cartões. E um aviso que abre uma coluna não a
 * empurra para baixo da do lado.
 */
.alert + .hero, .alert + .grid, .alert + .table-wrap, .alert + .list, .alert + .dt, .alert + .card-body,
.card-body > .alert + *, .dialog-body > .alert + * { margin-top: 18px; }
.grid > div > .alert:first-child, .card-body > .alert:first-child { margin-top: 0; }

/* As listas em cartões (Recebidas, Parcerias): a contagem à esquerda, a procura à direita — como nas tabelas. */
.lista-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.lista-conta { font-size: 13px; }

/* ── Tabelas no telemóvel ────────────────────────────────────────────────────
   As colunas secundárias levam .so-largo (em cima). Onde a tabela é feita por
   outro sítio, ou tem a linha dos filtros, diz-se aqui que colunas saem. */
@media (max-width: 600px) {
  /* Processos (ativos e inativos): ficam o nome, a última consulta e as ações. */
  .tabela-processos .table th.col-num + th + th, .tabela-processos .table td.col-num + td + td,
  .tabela-processos .table th.col-num + th + th + th, .tabela-processos .table td.col-num + td + td + td,
  .tabela-processos .table th.right, .tabela-processos .table td.right { display: none; }
  .tabela-processos .table td.nowrap { white-space: normal; }
  .tabela-processos .dt-filters th.pick + th, .tabela-processos .dt-filters th:first-child:not(.pick) { display: none; }
  /* A linha dos filtros não tem as classes das colunas: as que saíram, saem também lá. */
  #colaboradores .dt-filters th:nth-child(2), #colaboradores .dt-filters th:nth-child(3),
  #colaboradores .dt-filters th:nth-child(4), #colaboradores .dt-filters th:nth-child(5),
  #colaboradores .dt-filters th:nth-child(7) { display: none; }
  #utilizadores .dt-filters th:nth-child(2), #utilizadores .dt-filters th:nth-child(4),
  #utilizadores .dt-filters th:nth-child(5) { display: none; }
  /* O texto de um testemunho corta-se mais cedo: abre-se inteiro no Editar. */
  #testemunhos .table .clip { display: block; max-width: 150px; }
  #testemunhos .table td.nowrap { white-space: normal; }
  /* O retrato ao lado do nome é enfeite: no telemóvel o lugar é das ações. */
  #colaboradores .table td .avatar, #utilizadores .table td .avatar, .tabela-atividade .table td .avatar { display: none; }
  #utilizadores .table td.actions .muted { white-space: normal; }
  /* Uma pílula comprida (o estado do pagamento, a data do envio) pode partir em duas linhas. */
  .tabela-ultimas td .pill, #newsletters .table td .pill, .tabela-atividade .table td .pill { white-space: normal; border-radius: 10px; }
  /* Processos: o nome já abre a ficha, por isso o «Ver perfil» fica para o ecrã largo; e menos ar entre colunas. */
  .tabela-processos .table td.actions a[title="Ver perfil"] { display: none; }
  .tabela-processos .table th, .tabela-processos .table td, .fin-tabela th, .fin-tabela td, .tabela-ultimas th, .tabela-ultimas td,
  .tabela-atividade .table th, .tabela-atividade .table td { padding-left: 8px; padding-right: 8px; }
  /* Financeiro: o total e o «Paga-se no fim do mês» partem em linhas em vez de alargarem a tabela. */
  .fin-tabela tfoot th, .fin-tabela td.actions { white-space: normal; }
  .fin-tabela td.actions { min-width: 96px; }
  /* Ligações da ficha: os botões passam para baixo do texto, em vez de ficarem cortados. */
  .tabela-ligacoes, .tabela-ligacoes tbody { display: block; }
  .tabela-ligacoes thead tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tabela-ligacoes thead th:last-child { display: none; }
  .tabela-ligacoes tr.ligacao-linha { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--border); padding: 4px 0; }
  .tabela-ligacoes tr.ligacao-linha td { border-top: 0; padding-top: 6px; padding-bottom: 6px; }
  .tabela-ligacoes td.ligacao-botoes { text-align: left !important; }
  .tabela-ligacoes td.ligacao-botoes form { flex-wrap: wrap; }
}
/* O relatório impresso já diz o mês no cabeçalho: as setas não vão para o papel. */
@media print { body:has(.print-head) .barra-mes { display: none !important; } }
/* O cabeçalho do relatório impresso é só do papel: a regra do .print-head, mais abaixo, desfazia o .print-only no ecrã. */
@media screen { .print-only.print-head { display: none; } }

/* ── Avisos da casa, controlos dos documentos e Financeiro ───────────────── */
/* Os «callouts» passaram a avisos da casa: o texto de apoio e a linha de copiar ficam com o mesmo ar. */
.alert .help { margin: 8px 0 0; }
.alert .copy-row { margin-top: 12px; }
/* O relatório leva a barra do mês dentro da barra dos controlos: a largura é a da página. */
.doc-controls.doc-controls-mes { max-width: none; }
.doc-controls-mes > .barra-mes { margin-bottom: 0; }
/* Um estado vazio solto antes do título seguinte respira como um cartão (20px). */
.empty + .section-title { margin-top: 20px; }
/* Agenda: a legenda fica ao ritmo de 20px do cartão do calendário. */
.cal-legend { margin-bottom: 20px; }
/* Financeiro: o critério do «Como entrou» e o «Ver todas» da dívida. */
.fin-criterio { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.card-foot:has(.fin-ver-todas) { align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* O contrário de so-largo: só no telemóvel (a data que, lá, sai da sua coluna e vem para outra). */
.so-estreito { display: none; white-space: nowrap; }
@media (max-width: 600px) { .so-estreito { display: inline; } }
/* As pílulas do estado, umas por baixo das outras quando não cabem lado a lado. */
@media (max-width: 600px) { .table td .pill + .pill { margin-left: 0; } .table td:has(> .pill + .pill) { white-space: normal; } }

/* A denominação social por baixo do nome do centro, no documento: legível, sem competir com ele. */
.doc-denominacao { font-weight: 600; color: var(--text); }

/* Pagamento trancado por estar numa fatura: a pílula e um cadeado discreto, sem ar de botão. */
.pay-trancado { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: help; }

/* ── O assistente: um painel à direita, como uma conversa ───────────────────
   Com as peças do vídeo de lançamento: o verde do vídeo, a cara do botão do
   site, o selo a rodar, o sublinhado em onda, etiquetas inclinadas em cores, e
   um «feito» que festeja. Tudo para quieto com prefers-reduced-motion. */
.ass-painel { --ass-fundo: #f4efe2; --ass-cabeca: #8cc4bb; --ass-tinta: #1e1c1c; --ass-eu: #94ccbe; --ass-eu-texto: #1e1c1c;
  --ass-onda: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.4'/></svg>");
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 60;
  display: flex; flex-direction: column; background: var(--ass-fundo); border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(30, 28, 28, .14);
  animation: ass-entra .42s cubic-bezier(.2, .9, .3, 1.15) both; }
html.dark .ass-painel { --ass-fundo: var(--bg); --ass-cabeca: #2c4b45; --ass-tinta: var(--text); --ass-eu: #a9d8cc; --ass-eu-texto: #10201c; }
.ass-painel[hidden] { display: none; }
@keyframes ass-entra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Em ecrãs largos a página encolhe para o lado, em vez de ficar tapada. */
@media (min-width: 1600px) { body.com-assistente .content, body.com-assistente .topbar, body.com-assistente .footer { margin-right: 400px; } }

/* O cabeçalho: verde do vídeo, o selo, a cara a espreitar, uma nuvem a passar e uma onda por baixo. */
.ass-cabeca { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 18px 14px 30px 18px; min-height: 128px;
  background: var(--ass-cabeca); color: var(--ass-tinta); overflow: hidden; flex-shrink: 0; }
.ass-cabeca::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -1px; height: 12px; background: var(--ass-fundo);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'><path d='M0,6c15,0,15,6,30,6s15-6,30-6V12H0Z'/></svg>") repeat-x bottom / 60px 12px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'><path d='M0,6c15,0,15,6,30,6s15-6,30-6V12H0Z'/></svg>") repeat-x bottom / 60px 12px; }
.ass-cabeca > div { flex: 1; min-width: 0; position: relative; z-index: 1; padding-left: 64px; padding-right: 92px; }
.ass-cabeca > [data-assistente-fechar] { position: absolute; top: 14px; right: 12px; }
.ass-cabeca > [data-assistente-limpar] { position: absolute; top: 14px; right: 50px; }
.ass-cabeca h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.045em; line-height: 1; margin: 6px 0 0; color: var(--ass-tinta); }
.ass-onda { display: inline-block; position: relative; padding-bottom: 10px; }
.ass-onda::after { content: ""; position: absolute; left: 1px; right: 0; bottom: 0; height: 7px; background: #fefdf9;
  -webkit-mask: var(--ass-onda) repeat-x left center / 20px 6.4px; mask: var(--ass-onda) repeat-x left center / 20px 6.4px;
  animation: ass-onda 2.6s linear infinite; }
html.dark .ass-onda::after { background: var(--tone-amber-solid); }
@keyframes ass-onda { to { -webkit-mask-position: 20px center; mask-position: 20px center; } }
.ass-cabeca p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.35; color: color-mix(in srgb, var(--ass-tinta) 74%, transparent); }
.ass-cabeca .iconbtn { z-index: 2; background: rgba(255, 255, 255, .55); color: #1e1c1c; border-radius: 50%; }
.ass-cabeca .iconbtn:hover { background: #fff; }
html.dark .ass-nuvem { opacity: .22; }
html.dark .ass-cabeca .iconbtn { background: rgba(255, 255, 255, .12); color: var(--text); }
.ass-selo { position: absolute; left: 14px; top: 16px; width: 56px; height: 56px; border-radius: 50%; background: #e8c87c; color: #1e1c1c;
  display: grid; place-items: center; z-index: 1; box-shadow: 0 6px 14px -6px rgba(30, 28, 28, .45); transform: rotate(-8deg); }
.ass-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: selo-roda 16s linear infinite; }
.ass-selo text { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; fill: #1e1c1c; }
.ass-selo b { font-size: 15px; font-weight: 700; letter-spacing: -0.04em; }
.ass-cara { position: absolute; right: 12px; bottom: -6px; width: 84px; height: auto; z-index: 0; transform-origin: 50% 100%;
  animation: ass-espreita .7s .15s cubic-bezier(.34, 1.56, .64, 1) both, ass-balanca 5s 1s ease-in-out infinite; }
@keyframes ass-espreita { from { transform: translateY(70px) rotate(8deg); } to { transform: none; } }
@keyframes ass-balanca { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
.ass-nuvem { position: absolute; bottom: 10px; left: -60px; width: 64px; opacity: .85; z-index: 0; animation: ass-nuvem 26s linear infinite; }
@keyframes ass-nuvem { to { transform: translateX(480px); } }

/* A conversa. */
.ass-lista { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ass-msg { max-width: 92%; min-width: 0; overflow-wrap: anywhere; padding: 11px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45;
  animation: ass-msg .38s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ass-msg { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.ass-msg p { margin: 0; }
.ass-msg p + p, .ass-msg p + .ass-escolhas, .ass-msg p + dl, .ass-msg p + ul, .ass-msg ul + p { margin-top: 8px; }
.ass-eu { align-self: flex-end; background: var(--ass-eu); color: var(--ass-eu-texto); border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.ass-ele { align-self: flex-start; background: var(--card); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 6px;
  box-shadow: 0 8px 20px -14px rgba(30, 28, 28, .35); transform-origin: 0 100%; }
.ass-ele a { color: var(--green-text); font-weight: 600; }
.ass-erro { background: color-mix(in srgb, #e87c6a 16%, var(--card)); border-color: color-mix(in srgb, #e87c6a 55%, transparent); }
.ass-aviso { border-style: dashed; border-color: #e8c87c; }

/* «A ver…»: três pontos nas cores da marca, aos saltos. */
.ass-espera { padding: 14px 16px; }
.ass-pontos { display: inline-flex; gap: 5px; align-items: center; height: 10px; }
.ass-pontos i { width: 8px; height: 8px; border-radius: 50%; background: #e87c6a; animation: ass-salta 1s ease-in-out infinite; }
.ass-pontos i:nth-child(2) { background: #e8c87c; animation-delay: .15s; }
.ass-pontos i:nth-child(3) { background: #b48ec6; animation-delay: .3s; }
@keyframes ass-salta { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* Os botões de começo: etiquetas coloridas e inclinadas, que se endireitam ao passar. */
.ass-inicio { background: none; border: 0; box-shadow: none; padding: 4px 0 6px; max-width: 100%; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas { gap: 9px 7px; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn { --c: #c0e0db; border: 0; background: var(--c); color: #1e1c1c; font-weight: 600; border-radius: 9px;
  min-height: 34px; padding: 6px 11px; box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transform: rotate(var(--r, -2deg));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; animation: ass-etiqueta .45s cubic-bezier(.34, 1.56, .64, 1) both; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn::after { content: "›"; margin-left: 6px; font-size: 16px; line-height: 1; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:hover:not(:disabled) { transform: rotate(0) translateY(-2px) scale(1.04); box-shadow: 0 6px 12px -4px rgba(30, 28, 28, .3); }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:disabled { opacity: .55; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+1) { --c: #eeb593; --r: -2.5deg; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+2) { --c: #c0e0db; --r: 1.5deg; animation-delay: .04s; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+3) { --c: #f3d69a; --r: -1deg; animation-delay: .08s; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+4) { --c: #d6b5d7; --r: 2.5deg; animation-delay: .12s; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+5) { --c: #b9d2dc; --r: -2deg; animation-delay: .16s; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+6) { --c: #ebc3cd; --r: 1deg; animation-delay: .2s; }
:is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn:nth-child(7n+7) { --c: #f0c3a4; --r: -1.5deg; animation-delay: .24s; }
@keyframes ass-etiqueta { from { opacity: 0; transform: translateY(8px) rotate(0) scale(.9); } }

/* As outras escolhas (uma pergunta, um horário): pílulas brancas com a bolinha da seta. */
.ass-escolhas, .ass-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ass-msg .ass-escolhas:first-child { margin-top: 0; }
/* Um botão com um horário e a razão dele é uma frase: quebra a linha em vez de alargar o painel. */
.ass-escolhas .btn { white-space: normal; height: auto; min-height: 32px; text-align: left; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; max-width: 100%; }
.ass-ele:not(.ass-inicio):not(.ass-com-comecos) .ass-escolhas .btn { border-radius: 999px; transition: background .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.ass-ele:not(.ass-inicio):not(.ass-com-comecos) .ass-escolhas .btn:hover:not(:disabled) { background: color-mix(in srgb, #94ccbe 28%, var(--card)); transform: translateY(-1px); }

/* Uma proposta: um cartão com a etiqueta «Por confirmar» inclinada por cima, e o título sublinhado em onda. */
.ass-proposta { width: 92%; position: relative; margin-top: 14px; padding-top: 18px; border: 1.5px solid color-mix(in srgb, var(--text) 16%, transparent); }
.ass-proposta::before { content: "Por confirmar"; position: absolute; top: -12px; left: 14px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  background: #e8c87c; color: #1e1c1c; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transition: background .2s ease; }
.ass-proposta.ass-confirmada::before { content: "Confirmado"; background: #94ccbe; transform: rotate(2deg); }
.ass-proposta.ass-anulada::before { content: "Sem efeito"; background: var(--border); color: var(--muted); }
.ass-proposta.ass-antiga::before { content: "Já não se confirma"; background: var(--border); color: var(--muted); }
.ass-proposta.ass-anulada, .ass-proposta.ass-antiga { opacity: .7; }
.ass-proposta > p:first-child strong { display: inline-block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; padding-bottom: 7px; position: relative; }
.ass-proposta > p:first-child strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #94ccbe;
  -webkit-mask: var(--ass-onda) repeat-x left center / 16px 5px; mask: var(--ass-onda) repeat-x left center / 16px 5px; }
.ass-kv { margin: 0; }
.ass-botoes { justify-content: flex-end; margin-top: 12px; }
.ass-botoes [data-sim] { border-radius: 999px; padding-right: 6px; gap: 8px; }
.ass-botoes [data-sim]::after { content: "›"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fefdf9; color: #1e1c1c; font-size: 17px; line-height: 1; padding-bottom: 2px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.ass-botoes [data-sim]:hover:not(:disabled)::after { transform: translateX(3px); }
.ass-botoes [data-nao] { border-radius: 999px; }

/* Feito: verde, um visto que salta e uns papelinhos (assets/js/assistente.js). */
.ass-feito { position: relative; padding-left: 44px; background: color-mix(in srgb, #94ccbe 26%, var(--card)); border-color: color-mix(in srgb, #94ccbe 70%, transparent); }
.ass-feito::before { content: ""; position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #94ccbe no-repeat center / 13px
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1c1c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  animation: ass-visto .5s .1s cubic-bezier(.34, 1.8, .64, 1) both; }
@keyframes ass-visto { from { transform: scale(0) rotate(-40deg); } }
.ass-confete { position: absolute; left: 23px; top: 21px; width: 0; height: 0; pointer-events: none; }
.ass-confete i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--c); animation: ass-confete .9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes ass-confete { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(220deg); opacity: 0; } }

.ass-com-comecos .ass-escolhas { margin-top: 10px; }
.ass-ajuda { margin: 6px 0 0; padding-left: 18px; }
.ass-ajuda li { margin: 3px 0; }
/* As listas: linhas com separador, que se leem de relance (e não parágrafos com marcas). */
.ass-lista-itens { list-style: none; margin: 8px -14px 2px; padding: 0; border-top: 1px solid var(--border); }
.ass-lista-itens li { padding: 8px 14px; border-bottom: 1px solid var(--border); line-height: 1.35; }
.ass-lista-itens li:last-child { border-bottom: 0; }
.ass-lista-itens li.muted { font-size: 12.5px; }
.ass-lista-itens a { text-decoration: none; }
.ass-lista-itens a:hover { text-decoration: underline; }
.ass-linha { display: flex; align-items: center; gap: 10px; }
.ass-linha > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ass-linha small { font-size: 12px; color: var(--muted); }
.ass-linha > b { flex-shrink: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* O número de cima («Por receber»), grande, como nos azulejos. */
.ass-total { display: flex; flex-direction: column; gap: 1px; }
.ass-total span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ass-total b { font-size: 24px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.15; }
.ass-total small { font-size: 12px; color: var(--muted); }

/* Onde se escreve: uma pílula, com o microfone e o avião de papel. */
.ass-form { display: flex; gap: 6px; align-items: center; margin: 0 12px 14px; padding: 5px 5px 5px 6px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--border); box-shadow: 0 10px 24px -16px rgba(30, 28, 28, .45); transition: border-color .15s ease, box-shadow .15s ease; }
.ass-form:focus-within { border-color: #94ccbe; box-shadow: 0 0 0 4px color-mix(in srgb, #94ccbe 30%, transparent), 0 10px 24px -16px rgba(30, 28, 28, .45); }
.ass-form .input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding-left: 12px; }
.ass-form .input:focus { box-shadow: none; outline: none; }
.ass-form .iconbtn { border-radius: 50%; flex-shrink: 0; }
.ass-enviar { background: #94ccbe; color: #1e1c1c; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .15s ease; }
.ass-enviar:hover { background: #80baac; transform: rotate(-14deg) scale(1.06); }
html.dark .ass-enviar { background: #94ccbe; color: #10201c; }
[data-assistente-mic].a-ouvir { background: var(--tone-coral-soft); color: var(--tone-coral); animation: ditado-pulsa 1.2s ease-in-out infinite; }

/* O botão que abre, na barra de cima: o anel nas cores da marca, como o selo da barra lateral. */
.ass-abrir { position: relative; }
.ass-abrir::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: conic-gradient(var(--tone-green-solid) 0 72deg, var(--tone-coral-solid) 0 144deg, var(--tone-amber-solid) 0 216deg, var(--tone-lilac-solid) 0 288deg, var(--tone-blue-solid) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.ass-abrir:hover::before, body.com-assistente .ass-abrir::before { opacity: 1; animation: selo-roda 5s linear infinite; }

@media (max-width: 600px) {
  .ass-painel { width: 100vw; border-left: 0; }
  .ass-msg, .ass-proposta { max-width: 100%; }
  .ass-proposta { width: auto; }
  .ass-cabeca { min-height: 118px; }
  .ass-cara { width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .ass-painel, .ass-msg, .ass-cara, .ass-nuvem, .ass-selo svg, .ass-onda::after, .ass-pontos i, :is(.ass-inicio, .ass-com-comecos) .ass-escolhas .btn,
  .ass-feito::before, .ass-abrir::before, [data-assistente-mic].a-ouvir { animation: none !important; }
  .ass-confete { display: none; }
  .ass-nuvem { left: 20px; }
}

/* A dica de um ícone (assets/js/app.js): pequena, escura, legível nos dois temas. */
.dica { position: fixed; z-index: 1000; pointer-events: none; padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 600;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.18));
  /* Uma dica comprida («Assistente — peça por escrito ou por voz (Ctrl+J)») passava para fora da caixa: agora quebra a linha, e a caixa mede o texto. */
  width: max-content; max-width: min(320px, calc(100vw - 16px)); white-space: normal; text-wrap: balance; line-height: 1.35; }
.dica[hidden] { display: none; }

/* O texto de um rótulo só para ecrãs largos (o par de .so-estreito). */
@media (max-width: 600px) { .so-largo-txt { display: none; } }
/* Estado da plataforma: a mensagem de erro com largura mínima, e a tabela rola dentro da sua caixa. */
.estado-erro { min-width: 220px; }
.estado-erro div { word-break: break-word; }
/* Os botões do fundo de um diálogo descem de linha quando não cabem (no telemóvel, o «Eliminar» encostava à borda). */
.dialog-foot { flex-wrap: wrap; }
/* Barra das tabelas no telemóvel: a pesquisa ocupa a linha toda, sem o recuo de 54px. */
@media (max-width: 600px) { .dt-toolbar-right { margin-left: 0; width: 100%; } .dt-toolbar-right .dt-search, .dt-toolbar-right .dt-search .input { flex: 1; width: 100%; } }

/* Os contactos da família, na ficha. */
.contactos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contacto + .contacto { border-top: 1px solid var(--border); padding-top: 12px; }
.contacto-cab { display: flex; align-items: center; gap: 6px; }
.contacto-cab .iconbtn { margin-left: auto; }
.contacto-meios { font-size: 13px; margin-top: 2px; word-break: break-word; }
.contacto-marcas { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.fat-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }

/* O fecho de caixa (Financeiro). */
.caixa-kv { margin-bottom: 14px; }
.caixa-kv dd .pill { margin-left: 6px; }
.caixa-form { margin-top: 6px; }
.caixa-hist { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; }

/* Fora do horário de quem é a coluna (lib/horarios.php): riscado suave, por baixo dos blocos. */
.grelha-fora { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 12%, transparent) 6px 8px); }
.horario-tabela th[scope=row] { font-weight: 600; white-space: nowrap; }
.horario-par { display: inline-flex; align-items: center; gap: 6px; }
.horario-par .input { width: 104px; }
@media (max-width: 600px) { .horario-par .input { width: 88px; } }

/* ── Publicações (publicacoes.php, publicacao-editar.php, assets/js/publicacoes.js) ── */
.pub-topo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
.pub-topo > .card { margin: 0; }
.pub-ideias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-ideia { --c: #e8c87c; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--c) 22%, var(--card)); }
.pub-ideia > div { flex: 1; min-width: 0; }
.pub-ideia:nth-child(4n+2) { --c: #b48ec6; }
.pub-ideia:nth-child(4n+3) { --c: #94ccbe; }
.pub-ideia:nth-child(4n+4) { --c: #e87c6a; }
.pub-ideia-dia { flex-shrink: 0; width: 50px; padding: 6px 0 5px; border-radius: 10px; background: var(--c); color: #1e1c1c; text-align: center; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.pub-ideia:nth-child(even) .pub-ideia-dia { transform: rotate(3deg); }
.pub-ideia-dia b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.pub-ideia .btn { background: var(--card); border-radius: 999px; }
.pub-ideia .muted { font-size: 13px; margin-top: 2px; }
.pub-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-tipo { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: inherit; text-decoration: none; background: var(--card); }
.pub-tipo:hover { border-color: var(--green-border); background: var(--green-soft); }
.pub-tipo .muted { font-size: 12.5px; line-height: 1.4; }
.pub-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.pub-grelha > .card { margin: 0; }
.pub-previa { position: sticky; top: calc(var(--topbar-h) + 12px); }
.pub-campo { margin-bottom: 18px; }
.pub-campo > .label { display: block; margin-bottom: 8px; }
.pub-dica { font-size: 12.5px; margin: -2px 0 10px; }
.pub-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; }
.pub-opcao small { color: var(--muted); font-size: 11.5px; }
.pub-opcao[aria-pressed="true"], .pub-ilus[aria-pressed="true"] { border-color: var(--green-deep); box-shadow: 0 0 0 2px var(--green-border); }
.pub-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-cor { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--cor); cursor: pointer; padding: 0; }
.pub-cor[data-nenhuma] { background: linear-gradient(135deg, transparent 46%, var(--danger) 47%, var(--danger) 53%, transparent 54%), var(--card); }
.pub-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--green-deep); }
.pub-ilustracoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
/* A frase de «ainda não há» ocupa a linha toda (e não a primeira coluna da grelha). */
.pub-ilustracoes > p { grid-column: 1 / -1; margin: 0; }
.pub-ilus { aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); font: inherit; font-size: 12px; }
.pub-ilus img { max-width: 100%; max-height: 100%; }
.pub-slide-campos { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.pub-slide-campos .label { margin-top: 4px; }
.pub-slide-cab { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.pub-previas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pub-previas[data-ver="ligacao"] { grid-template-columns: 1fr; }
.pub-slide { margin: 0; }
.pub-slide canvas { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 1px 4px rgba(30, 28, 28, 0.12); background: var(--bg3); }
.pub-slide figcaption { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; }
.pub-legenda-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; font-size: 13px; }
.pub-a-mais { color: var(--danger); }
.pub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-tag { border: 1px solid var(--border); background: var(--card); color: var(--green-text); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.pub-tag:hover { background: var(--green-soft); }
.pub-assinar { display: flex; gap: 8px; align-items: center; }
.pub-assinar .input { flex: 1; min-width: 0; }
.pub-regras { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) {
  .pub-topo, .pub-grelha { grid-template-columns: 1fr; }
  .pub-previa { position: static; order: -1; }
  .pub-tipos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pub-ideia { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; } .pub-ideia .btn { grid-column: 2; justify-self: start; }
  .pub-previas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pub-guardar > * { flex: 1 1 100%; }
}
.pub-legenda-pe + .pub-campo { margin-top: 0; }
[data-legenda] { min-height: 200px; resize: vertical; }
.pub-slide-campos textarea { min-height: 76px; }
.pub-slide-campos textarea[data-k="texto"] { min-height: 150px; }

/* ── Divulgação: o estúdio (divulgacao.php, divulgacao-calendario.php, lib/divulgacao.php) ── */
.div-numeros { margin-bottom: 18px; }
.div-dias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.div-dia ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.div-dia-data { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.div-item { display: block; font-size: 13px; line-height: 1.35; padding: 4px 8px; border-radius: 6px; border-left: 3px solid var(--tone-neutral-solid); background: var(--tone-neutral-soft); color: var(--text); overflow-wrap: anywhere; }
.div-item a { color: inherit; text-decoration: none; }
.div-item a:hover { text-decoration: underline; }
.div-item.tom-green { border-left-color: var(--tone-green-solid); background: var(--tone-green-soft); }
.div-item.tom-blue { border-left-color: var(--tone-blue-solid); background: var(--tone-blue-soft); }
.div-item.tom-lilac { border-left-color: var(--tone-lilac-solid); background: var(--tone-lilac-soft); }
.div-item.tom-amber { border-left-color: var(--tone-amber-solid); background: var(--tone-amber-soft); }
.div-item.tom-coral { border-left-color: var(--tone-coral-solid); background: var(--tone-coral-soft); }
.div-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.div-legenda .div-item { display: inline-block; }
.div-mes-nav { display: flex; gap: 6px; }
.div-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.div-mes-cab { padding: 8px; font-size: 12px; font-weight: 600; color: var(--muted); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.div-mes-dia { min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.div-mes-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.div-mes-dia .div-item { font-size: 12px; padding: 3px 6px; }
.div-mes-dia.fora { background: var(--bg3); }
.div-mes-dia.fora .div-mes-num, .div-mes-dia.fora .div-item { opacity: 0.55; }
.div-mes-dia.hoje .div-mes-num span { background: var(--green); color: var(--on-green); border-radius: 999px; padding: 0 7px; }
.div-mes-num { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; min-height: 24px; }
.div-mais { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 6px; color: var(--muted); opacity: 0; }
.div-mes-dia:hover .div-mais, .div-mais:focus-visible { opacity: 1; }
.div-mais:hover { background: var(--green-soft); color: var(--green-text); }
.div-so-estreito { display: none; }
@media (max-width: 760px) {
  .div-mes { display: none; }
  .div-so-estreito { display: flex; }
  .div-mes-nav .btn:nth-child(2) { display: none; }
}
.div-explica { font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.div-origens { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.div-origens li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 40px; gap: 12px; align-items: center; font-size: 14px; }
.div-origens b { text-align: right; }
.div-barra { height: 10px; background: var(--tone-neutral-soft); border-radius: 999px; overflow: hidden; }
.div-barra span { display: block; height: 100%; background: var(--green); border-radius: 999px; }

/* Afinar (o editor de publicações): segmentos e cores, numa grelha de duas colunas. */
.pub-afinar { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 4px; margin: 0 0 18px; }
.pub-afinar legend { padding: 0 6px; }
.pub-afinar-linha { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 13.5px; }
.pub-segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-seg { border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.pub-seg[aria-pressed="true"] { border-color: var(--green-deep); background: var(--green-soft); color: var(--green-text); font-weight: 600; }
@media (max-width: 600px) { .pub-afinar-linha { grid-template-columns: 1fr; gap: 6px; } }

.pub-fotos .pub-ilus { padding: 0; overflow: hidden; }
.pub-fotos .pub-ilus img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }
.pub-foto-vez { margin-bottom: 8px; }
.pub-carregar { margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; }
.pub-carregar summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.pub-carregar[open] { display: flex; flex-direction: column; gap: 8px; }
.pub-carregar p { font-size: 12.5px; margin: 4px 0 0; }
.pub-autorizo { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }

/* No feed: a grelha do perfil do Instagram (3 colunas, cortes 4:5). */
.pub-feed { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.pub-feed-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.pub-feed-grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 360px; }
.pub-feed-celula { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg3); }
.pub-feed-celula canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-feed-esta { outline: 3px solid var(--green-deep); outline-offset: -3px; }

/* Ver como: o post dentro do Instagram e do Facebook (aproximado). */
.pub-ver-como { margin-bottom: 14px; }
.pub-mock { display: flex; justify-content: center; }
.mock-ig, .mock-fb { width: 100%; max-width: 400px; background: #fff; color: #1c1e21; border: 1px solid #dbdbdb; border-radius: 10px; overflow: hidden; font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
.mock-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mock-cab div { display: flex; flex-direction: column; flex: 1; }
.mock-cab small { color: #65676b; font-size: 12px; }
.mock-pontos { color: #262626; letter-spacing: 1px; }
.mock-avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #94ccbe; color: #6ba89a; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.mock-img { position: relative; background: #000; }
.mock-img img { width: 100%; display: block; }
.mock-conta { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.mock-pontos-car { display: flex; justify-content: center; gap: 4px; padding-top: 8px; }
.mock-pontos-car i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.mock-pontos-car i.on { background: #0095f6; }
.mock-acoes { display: flex; justify-content: space-between; padding: 8px 12px 4px; color: #262626; }
.mock-acoes span { display: flex; gap: 14px; }
.mock-legenda { padding: 0 12px 14px; }
.mock-mais { color: #8e8e8e; }
.mock-texto { padding: 0 12px 10px; }
.mock-barra { display: flex; justify-content: space-around; border-top: 1px solid #dadde1; padding: 8px 0; color: #65676b; font-weight: 600; font-size: 13px; }
.pub-copiar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pub-objetos .label { display: block; margin: 12px 0 6px; }
.pub-obj-vez { margin-bottom: 8px; }
.pub-pecas { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); max-height: 200px; }
.pub-pecas-curta { max-height: none; }
.pub-pecas .pub-ilus { background: var(--tone-green-soft); }
.pub-objetos .toggle { margin-top: 12px; }

/* Newsletter (divulgacao-newsletter.php, newsletter-envio.php) */
.nws-juntar { display: flex; gap: 8px; flex-wrap: wrap; }
.nws-juntar .input { flex: 1 1 180px; min-width: 0; }
.nws-nota { font-size: 13px; margin: 10px 0 14px; }
.nws-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nws-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nws-lista li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nws-lista .muted { font-size: 12.5px; }
.nws-form { display: flex; flex-direction: column; gap: 12px; }
.nws-botao { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.nws-previa { width: 100%; height: 900px; border: 0; border-radius: 12px; background: #f5f1e4; }
@media (max-width: 600px) { .nws-botao { grid-template-columns: 1fr; } .nws-previa { height: 700px; } }

.pub-redes { display: flex; gap: 14px; align-items: center; min-height: 42px; }
.pub-rede { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.pub-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pub-acoes form { margin: 0; }
.pub-legenda-ver { white-space: normal; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pub-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.pub-filtros .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--card); }
.pub-filtros .seg { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; }
.pub-filtros .seg.is-ativa { background: var(--green-soft); color: var(--green-text); font-weight: 600; }
.pub-proxima { display: flex; gap: 8px; align-items: center; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--tone-green-soft); font-size: 14px; }
.pub-rede-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--tone-neutral-soft); color: var(--muted); }
.pub-cal .div-mes-nav { align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.pub-tipos-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 1000px) { .pub-tipos-4 { grid-template-columns: 1fr 1fr; } .pub-filtros { justify-content: flex-start; } }
@media (max-width: 600px) { .pub-tipos-4 { grid-template-columns: 1fr; } }

.div-dias-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
/* Concorrência (divulgacao-concorrencia.php) */
.conc-lista { display: flex; flex-direction: column; gap: 12px; }
.conc { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.conc-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.conc-servicos { display: flex; flex-wrap: wrap; gap: 6px; }
.conc-precos { font-size: 14px; line-height: 1.5; }
.conc-precos .label { display: block; margin-bottom: 2px; }
.conc-notas { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.conc-lig, .conc-data { font-size: 13px; }
.conc-procura .input { min-width: 220px; }
@media (max-width: 600px) { .conc-procura .input { min-width: 0; width: 100%; } }
/* Ideias (divulgacao-ideias.php) */
.ideias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ideia { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); }
.ideia b { font-size: 15.5px; line-height: 1.3; }
.ideia p { margin: 0; font-size: 13.5px; line-height: 1.45; flex: 1; }
.ideias-minhas li form { margin: 0; }
.nws-quem { font-size: 12px; margin-top: 2px; }

/* ── Marketing: uma cor da marca por secção ─────────────────────────────────
   O separador ativo e o sublinhado em onda do título levam a cor da secção
   (lib/divulgacao.php, div_vistas); os ícones dos outros, a sua, mais escura. */
.vista[data-tom] { --tom: #94ccbe; }
.vista[data-tom="coral"] { --tom: #e87c6a; }
.vista[data-tom="mostarda"] { --tom: #e8c87c; }
.vista[data-tom="azul"] { --tom: #7ba8b8; }
.vista[data-tom="lilas"] { --tom: #b48ec6; }
.vista[data-tom="rosa"] { --tom: #d4889a; }
.vista[data-tom="laranja"] { --tom: #e8946a; }
.vista[data-tom="verde-escuro"] { --tom: #6ba89a; }
.vista[data-tom] .icon { color: color-mix(in srgb, var(--tom) 72%, #1e1c1c); }
html.dark .vista[data-tom] .icon { color: var(--tom); }
.vista.is-ativa[data-tom] { background: color-mix(in srgb, var(--tom) 30%, var(--card)); color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tom) 75%, transparent); }
.vista.is-ativa[data-tom] .icon { color: color-mix(in srgb, var(--tom) 55%, #1e1c1c); }
html.dark .vista.is-ativa[data-tom] { background: color-mix(in srgb, var(--tom) 22%, var(--card)); }
html.dark .vista.is-ativa[data-tom] .icon { color: var(--tom); }
body:has(.vista.is-ativa[data-tom="verde"]) { --mk-tom: #94ccbe; }
body:has(.vista.is-ativa[data-tom="coral"]) { --mk-tom: #e87c6a; }
body:has(.vista.is-ativa[data-tom="mostarda"]) { --mk-tom: #e8c87c; }
body:has(.vista.is-ativa[data-tom="azul"]) { --mk-tom: #7ba8b8; }
body:has(.vista.is-ativa[data-tom="lilas"]) { --mk-tom: #b48ec6; }
body:has(.vista.is-ativa[data-tom="rosa"]) { --mk-tom: #d4889a; }
body:has(.vista.is-ativa[data-tom="laranja"]) { --mk-tom: #e8946a; }
body:has(.vista.is-ativa[data-tom="verde-escuro"]) { --mk-tom: #6ba89a; }
/* Em todas as páginas: o título com a onda do site (na cor da vista ativa; sem vistas, o verde da marca). */
.page-title { display: inline-block; position: relative; padding-bottom: 12px; font-weight: 500; letter-spacing: -0.045em; }
.page-title::after { content: ""; position: absolute; left: 2px; right: 0; bottom: 0; height: 9px; background: var(--mk-tom, #94ccbe);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 26px 8.2px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 26px 8.2px; }
/* Nas páginas do Marketing as abas vêm logo depois do título: um pouco de ar entre os dois. */
body:has(.vista.is-ativa[data-tom]) .vistas { margin-top: 0; }

/* As publicações como no perfil: a capa, o estado em etiqueta, e por baixo o resto. */
.pub-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.pub-cartao { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--card); border: 1px solid var(--border); overflow: hidden;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; }
.pub-cartao:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(30, 28, 28, .45); }
.pub-cartao-img { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(110deg, var(--bg) 30%, var(--bg3, #ece6d6) 50%, var(--bg) 70%) 0 0 / 300% 100%; animation: pub-brilho 1.4s linear infinite; }
.pub-cartao-img.desenhada { animation: none; background: var(--bg); }
@keyframes pub-brilho { to { background-position: -300% 0; } }
.pub-cartao-img canvas { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.pub-cartao-img.desenhada canvas { opacity: 1; }
.pub-estado { align-self: flex-start; margin: -24px 0 6px -2px; position: relative; z-index: 1; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #1e1c1c;
  background: #e8e2d2; box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transform: rotate(-3deg); }
.pub-estado-rascunho { background: #f3d69a; }
.pub-estado-pronta { background: #b9d2dc; transform: rotate(2deg); }
.pub-estado-publicada { background: #94ccbe; transform: rotate(-1.5deg); }
.pub-cartao-txt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 13px; min-width: 0; }
.pub-cartao-link { font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-cartao-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pub-cartao-txt .muted { font-size: 12.5px; }
.pub-cartao-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.pub-cartao-pe > span:first-child { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.pub-cartao-redes { display: inline-flex; gap: 4px; flex-shrink: 0; }
.pub-cartao-editar { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(255, 255, 255, .92); color: #1e1c1c; border-radius: 50%; box-shadow: 0 2px 8px rgba(30, 28, 28, .18);
  opacity: 0; transform: scale(.85); transition: opacity .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.pub-cartao:hover .pub-cartao-editar, .pub-cartao-editar:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .pub-cartao-editar { opacity: 1; transform: none; } }
@media (max-width: 600px) { .pub-cartoes { grid-template-columns: 1fr 1fr; gap: 10px; } .pub-cartao-txt { padding: 10px 11px 11px; } .pub-cartao-pe { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* Começar uma publicação: cartões de cor, com uma personagem a espreitar e a seta do botão do site. */
.pub-tipo { --c: #c0e0db; position: relative; overflow: hidden; min-height: 156px; padding: 16px 92px 52px 16px; border: 0; background: var(--c); color: #1e1c1c;
  border-radius: 16px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; }
.pub-tipo:hover { background: var(--c); transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 14px 26px -18px rgba(30, 28, 28, .55); }
.pub-tipo b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.pub-tipo span { font-size: 12.5px; line-height: 1.4; color: rgba(30, 28, 28, .75); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pub-tipo img { position: absolute; right: -6px; bottom: -8px; width: 104px; height: 104px; object-fit: contain; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pub-tipo:hover img { transform: translateY(-4px) rotate(3deg); }
.pub-tipo-seta { position: absolute; left: 16px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; background: #fefdf9; display: grid; place-items: center;
  font-style: normal; font-size: 18px; line-height: 1; padding-bottom: 2px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.pub-tipo:hover .pub-tipo-seta { transform: translateX(4px); }
.pub-tipo-reflexao { --c: #d6b5d7; }
.pub-tipo-data { --c: #f3d69a; }
.pub-tipo-centro { --c: #c0e0db; }
.pub-tipo-vagas { --c: #eeb593; }
.pub-tipo-cartaz { --c: #b9d2dc; }
html.dark .pub-tipo { filter: saturate(.9) brightness(.92); }
@media (prefers-reduced-motion: reduce) { .pub-cartao, .pub-tipo, .pub-tipo img, .pub-cartao-img { transition: none; animation: none; } }

/* O cartaz: os botões de PDF ao lado de «Descarregar», e os campos do QR e dos contactos. */
.pub-pdf { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pub-pdf[hidden] { display: none; }
[data-pub-ver] > .pub-pdf { margin-bottom: 12px; }
.pub-cartaz-campos .field { margin-top: 10px; }
.pub-cartaz-campos .help { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

@media print { .page-title { padding-bottom: 0; } .page-title::after { display: none; } }

/* ── As redes (divulgacao-redes.php e o cartão «Nas redes» de cada publicação) ── */
.red-estado { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--bg3, #f3eee2); }
.red-estado > .icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--muted); }
.red-estado p { margin: 4px 0 0; }
.red-estado.red-ligada { background: color-mix(in srgb, #94ccbe 26%, var(--card)); }
.red-estado.red-ligada > .icon { color: var(--green-text); }
.red-falta, .red-aviso { color: var(--tone-amber); }
.red-aviso { font-size: 13px; }
.red-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.red-ligar { margin-top: 14px; gap: 10px; }
.red-f { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #1877f2; font-weight: 800; font-family: Arial, sans-serif; font-size: 15px; line-height: 1; }
.red-escolher { margin-top: 16px; }
.red-escolher ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.red-pagina { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: inherit; cursor: pointer; }
.red-pagina > .muted { flex: 1; font-size: 13px; }
.red-pagina:hover { border-color: var(--green-border); background: var(--green-soft); }
.red-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; line-height: 1.5; }
.red-passos .btn { margin-left: 4px; vertical-align: middle; }
.red-url { word-break: break-all; font-size: 12.5px; padding: 2px 6px; border-radius: 6px; background: var(--bg3, #f3eee2); }
.red-nota { margin-top: 16px; font-size: 13px; }
.red-erro { font-size: 12.5px; color: var(--tone-coral); margin-top: 3px; }
.red-escolha { margin-bottom: 12px; }
.red-nao { opacity: .55; }
.red-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.red-dica { font-size: 12.5px; }
.red-historia { list-style: none; margin: 14px -2px 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.red-historia li { display: flex; align-items: center; gap: 10px; }
.red-historia li > div { flex: 1; min-width: 0; }
.red-numeros { font-size: 12.5px; margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.red-atualizar { border: 0; background: none; color: var(--muted); padding: 2px; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; }
.red-atualizar:hover { color: var(--text); background: var(--bg3, #f3eee2); }
/* O estado de cada rede nos IG / FB da lista: publicada (verde), agendada (azul), a sair (amarelo), não saiu (coral). */
.pub-rede-ic.red-ic-publicado { background: #94ccbe; color: #1e1c1c; }
.pub-rede-ic.red-ic-agendado { background: #b9d2dc; color: #1e1c1c; }
.pub-rede-ic.red-ic-a_enviar { background: #f3d69a; color: #1e1c1c; }
.pub-rede-ic.red-ic-falhou { background: #eeb593; color: #1e1c1c; box-shadow: inset 0 0 0 1.5px #e87c6a; }
.rel-melhor { padding: 12px 20px 16px; margin: 0; }
.red-endereco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.red-endereco > span { width: 100%; font-size: 12.5px; color: var(--muted); }
/* Na grelha do editor e da página de uma publicação, nenhuma coluna pode ser mais larga do que o ecrã (os canvas têm 1080px de origem). */
.pub-grelha > *, .pub-previa .card-body, [data-pub-ver] { min-width: 0; }
.pub-previas canvas, .pub-feed canvas { max-width: 100%; }
.red-escolha { flex-wrap: wrap; gap: 8px 16px; }
.red-escolha .pub-rede { min-width: 0; overflow-wrap: anywhere; }
/* O «Desfazer» dentro do «feito»: discreto, sublinhado, à direita. */
.ass-desfazer { margin-left: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--green-text); text-decoration: underline; cursor: pointer; }
.ass-desfazer:disabled { display: none; }
.pub-video { margin-bottom: 10px; } .pub-video[hidden] { display: none; }

/* ── O palco do vídeo (publicacao-editar.php): o ecrã a tocar, a linha do tempo das cenas, e a cena escolhida ── */
.palco { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.palco-ecra { position: relative; border-radius: 18px; overflow: hidden; background: #1e1c1c; box-shadow: 0 18px 40px -24px rgba(30, 28, 28, .6); line-height: 0; }
.palco-ecra canvas { display: block; max-width: 100%; height: auto; }
.palco-tocar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(254, 253, 249, .92); color: #1e1c1c; box-shadow: 0 6px 16px rgba(30, 28, 28, .3); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.palco-tocar:hover { transform: translateX(-50%) scale(1.08); }
.palco-espera { position: absolute; inset: 0; display: grid; place-items: center; color: #fefdf9; font-size: 13px; line-height: 1.3; background: rgba(30, 28, 28, .55); }
.palco-espera[hidden] { display: none; }
.palco-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.palco-tempo { font-size: 14px; font-variant-numeric: tabular-nums; }
.palco-linha { position: relative; display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: var(--bg3, #f3eee2); cursor: pointer; min-height: 96px; }
.palco-bloco { flex: 1 1 0; min-width: 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px; border-radius: 10px; border: 2px solid transparent;
  background: var(--card); color: var(--text); font-size: 11.5px; text-align: left; cursor: pointer; overflow: hidden; }
.palco-bloco canvas { width: 34px; height: auto; border-radius: 4px; }
.palco-bloco i { display: block; font-style: normal; color: var(--muted); }
.palco-bloco.escolhida { border-color: #e8c87c; }
.palco-bloco.a-tocar { background: color-mix(in srgb, #94ccbe 22%, var(--card)); }
.palco-agulha { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: #e87c6a; border-radius: 2px; pointer-events: none; transition: left .05s linear; z-index: 1; }
.palco-cena { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); }
.palco-cena-cab { display: flex; align-items: baseline; gap: 8px; }
.palco-campo { display: flex; flex-direction: column; gap: 6px; }
.palco-campo .pub-segmentos { flex-wrap: wrap; }
.palco-dur { display: flex; align-items: center; gap: 10px; }
.palco-dur input { flex: 1; accent-color: #e87c6a; }
.palco-dur output { min-width: 44px; font-variant-numeric: tabular-nums; }
.palco-nota { margin: 0; font-size: 13px; }
@media (max-width: 760px) { .palco { grid-template-columns: 1fr; justify-items: center; } .palco-lado { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .palco-tocar { transition: none; } }

/* ── O editor com talento: os passos numerados, os modelos em miniatura, as formas dos formatos ── */
.pub-passo { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px; }
.pub-passo i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--c); color: #1e1c1c; font-style: normal; font-weight: 700; font-size: 14px;
  transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.pub-campo:nth-of-type(even) .pub-passo i, .pub-objetos .pub-passo i { transform: rotate(4deg); }
.pub-afinar > legend { padding: 0 6px; }
.pub-modelos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.pub-modelo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; height: auto; border-radius: 14px; text-align: center; white-space: normal;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .15s ease; }
.pub-modelo:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(30, 28, 28, .45); }
.pub-modelo[aria-pressed="true"] { border-color: #e8c87c; box-shadow: 0 0 0 2px #e8c87c; transform: translateY(-2px) rotate(-1deg); }
.pub-modelo-mini { display: block; aspect-ratio: 4 / 5; border-radius: 9px; overflow: hidden; background: linear-gradient(110deg, var(--bg) 30%, var(--bg3, #ece6d6) 50%, var(--bg) 70%) 0 0 / 300% 100%; animation: pub-brilho 1.4s linear infinite; }
.pub-modelo-mini.desenhada { animation: none; background: var(--bg); }
.pub-modelo-mini canvas { width: 100%; height: 100%; display: block; }
.pub-modelo b { font-size: 12px; font-weight: 600; line-height: 1.2; }
.pub-formato { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.pub-forma { display: inline-block; height: 26px; max-width: 46px; border: 2px solid currentColor; border-radius: 4px; opacity: .55; flex-shrink: 0; }
.pub-formato[aria-pressed="true"] .pub-forma { opacity: 1; background: color-mix(in srgb, #94ccbe 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .pub-modelo, .pub-modelo-mini { transition: none; animation: none; } }
.pub-opcoes .pub-formato { flex-direction: row; align-items: center; height: auto; padding: 10px 14px; }
.pub-formato > span { display: flex; flex-direction: column; gap: 1px; font-weight: 500; }
.pub-formato small { display: block; margin: 0; font-size: 11.5px; color: var(--muted); }

/* ── A barra de guardar do editor: presa ao fundo, com as redes em fichas e o estado em pílulas ── */
.pub-barra { position: sticky; bottom: 12px; z-index: 20; margin-top: 18px; padding: 14px 16px 14px 20px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 14px 40px -18px rgba(30, 28, 28, .35), 0 2px 0 rgba(30, 28, 28, .04); }
.pub-barra::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
.pub-guardar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.pub-guardar-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pub-guardar-grupo > .label { margin: 0; font-size: 12px; color: var(--muted); }
.pub-quando { display: grid; grid-template-columns: 150px 100px; gap: 6px; }
.pub-quando .input { min-width: 0; height: 40px; padding: 8px 12px; }
.pub-guardar .pub-redes { gap: 6px; min-height: 40px; flex-wrap: wrap; }
.pub-chip, .pub-est { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 5px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--bg2); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.pub-chip:hover, .pub-est:hover { transform: translateY(-1px); }
.pub-chip input, .pub-est input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pub-chip i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; background: var(--tone-neutral-soft); color: var(--muted); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .18s, color .18s; }
.pub-chip-instagram input:checked + i { background: linear-gradient(135deg, #f3d69a, #eeb593 45%, #d6b5d7); color: #1e1c1c; }
.pub-chip-facebook input:checked + i { background: #b9d2dc; color: #1e1c1c; }
.pub-chip:has(input:checked) { border-color: #1e1c1c; background: var(--bg3); box-shadow: 2px 2px 0 #1e1c1c; }
.pub-chip input:checked + i { transform: rotate(-8deg) scale(1.06); }
.pub-chip:has(input:not(:checked)) span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pub-chip:has(input:focus-visible), .pub-est:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.pub-estados { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.pub-est { padding: 0 12px 0 9px; font-size: 13.5px; }
.pub-est span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: 0; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(30, 28, 28, .25); transition: transform .2s; }
.pub-est:has(input:checked) { background: var(--c); border-color: #1e1c1c; box-shadow: 2px 2px 0 #1e1c1c; transform: rotate(-1.5deg); }
.pub-est:has(input:checked) span::before { background: #1e1c1c; box-shadow: none; transform: scale(.8); }
.pub-guardar-btn { margin-left: auto; height: 46px; padding: 0 6px 0 18px; border-radius: 999px; gap: 10px; font-size: 15px; font-weight: 500;
  border: 1.5px solid #1e1c1c; box-shadow: 3px 3px 0 #1e1c1c; transition: transform .15s, box-shadow .15s, background .15s; }
.pub-guardar-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1e1c1c; }
.pub-guardar-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1e1c1c; }
.pub-seta { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #1e1c1c; color: #fff; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.pub-guardar-btn:hover .pub-seta { transform: translateX(3px) rotate(-12deg); }
@media (max-width: 760px) {
  .pub-barra { position: relative; bottom: auto; padding: 14px 12px 12px; border-radius: 18px; }
  .pub-guardar { gap: 14px; }
  .pub-guardar-grupo { width: 100%; }
  .pub-quando { grid-template-columns: minmax(0, 1fr) 112px; }
  .pub-guardar-btn { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* ── O editor em passos: a régua em cima, um passo de cada vez, e o «Seguinte» em baixo ── */
.pub-regua { display: flex; gap: 6px; margin: -4px 0 20px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-strong); overflow-x: auto; scrollbar-width: none; }
.pub-regua::-webkit-scrollbar { display: none; }
.pub-etapa-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; border: 1.5px solid transparent;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.pub-etapa-btn i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-weight: 700; font-size: 12.5px;
  background: color-mix(in srgb, var(--c) 45%, transparent); color: #1e1c1c; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .18s; }
.pub-etapa-btn:hover { color: var(--text); }
.pub-etapa-btn:hover i { transform: rotate(-6deg); }
.pub-etapa-btn.feita i { background: var(--c); }
.pub-etapa-btn.feita i::after { content: ""; }
.pub-etapa-btn[aria-current="step"] { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: #1e1c1c; color: var(--text); box-shadow: 2px 2px 0 #1e1c1c; }
.pub-etapa-btn[aria-current="step"] i { background: var(--c); transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .18); }
html.dark .pub-etapa-btn[aria-current="step"] { border-color: var(--text); box-shadow: 2px 2px 0 var(--text); }
.pub-em-passos .pub-etapa:not(.atual) { display: none; }
.pub-em-passos .pub-etapa.atual { animation: pub-etapa-entra .32s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes pub-etapa-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.pub-etapa-pe { display: none; }
.pub-em-passos .pub-etapa-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.pub-etapa-pe .muted { font-size: 12.5px; }
.pub-seguinte { gap: 8px; }
.pub-tudo { border: 1.5px solid var(--border-strong); background: var(--bg2); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.pub-tudo:hover { border-color: #1e1c1c; }
.pub-controlos:not(:has(.pub-em-passos)) .pub-etapa + .pub-etapa { margin-top: 6px; padding-top: 18px; border-top: 1px dashed var(--border); }
@media (prefers-reduced-motion: reduce) { .pub-em-passos .pub-etapa.atual { animation: none; } }

/* Os passos: o número e o nome com espaço entre eles (o .label punha-os em bloco e o gap não contava). */
.pub-campo > .pub-passo, legend > .pub-passo { display: inline-flex; gap: 12px; margin-bottom: 12px; }
.pub-afinar > legend { margin-bottom: 4px; }
.pub-formatos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 8px; }
.pub-opcoes .pub-formato { min-width: 0; padding: 10px 12px; }
.pub-formato > span { min-width: 0; overflow-wrap: anywhere; }
.pub-cores { gap: 10px; }

/* A personagem ao píxel: a cruz das setas e o desvio por escrito. */
.pub-posicao { margin: -2px 0 18px; }
.pub-posicao > .label { display: block; margin-bottom: 8px; }
.pub-posicao-corpo { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 16px; background: var(--bg3); border: 1px solid var(--border); }
.pub-cruz { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 3px; flex: 0 0 auto; }
.pub-cruz button { display: grid; place-items: center; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--card); color: var(--text); cursor: pointer; transition: transform .12s, background .12s; }
.pub-cruz button:hover { background: color-mix(in srgb, #c0e0db 55%, var(--card)); border-color: #1e1c1c; }
.pub-cruz button:active { transform: scale(.9); }
.pub-cruz-c { grid-area: 1 / 2; } .pub-cruz-e { grid-area: 2 / 1; } .pub-cruz-m { grid-area: 2 / 2; border-radius: 50% !important; background: #c0e0db !important; } .pub-cruz-d { grid-area: 2 / 3; } .pub-cruz-b { grid-area: 3 / 2; }
.pub-posicao-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; line-height: 1.4; }
.pub-posicao-txt b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pub-previas canvas.pub-agarra { cursor: grab; }
.pub-previas canvas.pub-a-arrastar { cursor: grabbing; outline: 2px dashed #c0e0db; outline-offset: 3px; touch-action: none; }
.pub-nuvens-anim { margin-top: 12px; }
/* A régua cabe sempre: os passos fechados só com o número (o nome na dica), o aberto com o nome; um traço liga-os. */
.pub-regua { position: relative; overflow: visible; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4px; }
.pub-regua::before { content: ""; position: absolute; left: 14px; right: 14px; top: 17px; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px); z-index: 0; }
.pub-etapa-btn { position: relative; z-index: 1; padding: 0 4px; background: var(--card); }
.pub-etapa-btn span { display: none; }
.pub-etapa-btn[aria-current="step"] { padding: 0 12px 0 4px; }
.pub-etapa-btn[aria-current="step"] span { display: inline; white-space: nowrap; }
.pub-etapa-btn i { width: 28px; height: 28px; }
.pub-etapa-pe .muted { white-space: nowrap; }
.pub-formato { display: grid !important; grid-template-columns: 46px minmax(0, 1fr); }
.pub-forma { justify-self: center; }

/*
 * ─── A LINGUAGEM DO EDITOR, NA PLATAFORMA TODA ──────────────────────────────
 *
 * O que fez o editor das publicações gostar-se de usar, levado às peças que
 * todas as páginas partilham: o contorno a carvão com uma sombra sólida
 * deslocada (o botão principal, o separador e o segmento escolhidos), as
 * etiquetas de cor inclinadas (os ícones dos números, os títulos de secção,
 * os cartões de um formulário numerados como passos), o traço tracejado, e a
 * barra de guardar presa ao fundo quando o formulário é comprido.
 * «--tinta» é o carvão no claro e o creme no escuro (a sombra tem de se ver).
 */
:root { --tinta: #1e1c1c; }
html.dark { --tinta: #e9e3d6; }

/* Os botões: o principal com contorno e sombra sólida; afunda ao carregar. O ícone dele num círculo a carvão, como a seta do «Guardar». */
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-primary { border: 1.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.btn-primary:hover:not(:disabled) { border-color: var(--tinta); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tinta); }
.btn-primary:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinta); }
.btn-primary > .icon:first-child { box-sizing: content-box; width: 14px; height: 14px; padding: 4px; margin-left: -9px; border-radius: 50%; background: var(--tinta); color: var(--green); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.btn-primary.btn-sm > .icon:first-child { width: 12px; height: 12px; padding: 4px; margin-left: -7px; }
.btn-primary:hover:not(:disabled) > .icon:first-child { transform: rotate(-12deg) scale(1.06); }
.btn-ghost:hover:not(:disabled) { border-color: var(--tinta); }
.btn-ghost:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn-primary > .icon:first-child { transition: none; } }

/* Os separadores de uma página: o escolhido com contorno, sombra e o ícone inclinado. */
.vista { border: 1.5px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.vista .icon { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.vista:hover .icon { transform: rotate(-8deg); }
.vista.is-ativa, .vista.is-ativa[data-tom] { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.vista.is-ativa .icon { transform: rotate(-8deg); }
.vistas { row-gap: 6px; padding: 5px 7px 7px 5px; }

/* Os segmentos («Tudo | Este mês | …») e as fichas de filtro: o escolhido como uma pílula do editor. */
.seg { padding: 4px 6px 6px 4px; gap: 2px; }
.seg button { border: 1.5px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.seg button:hover:not(.active) { color: var(--text); }
.seg button.active { background: color-mix(in srgb, var(--green) 38%, var(--card)); color: var(--text); border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.chip { transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.chip:hover { border-color: var(--tinta); }
.chip.on, .chip.active { background: color-mix(in srgb, var(--green) 38%, var(--card)); color: var(--text); border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }

/* Os números: o ícone de cada mosaico é uma etiqueta de cor inclinada (umas para um lado, outras para o outro); o que é ligação levanta-se. */
.stat-icon { transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.stats > :nth-child(even) .stat-icon { transform: rotate(4deg); }
a.stat { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.stat:hover { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); transform: translate(-1px, -1px); }
a.stat:hover .stat-icon { transform: rotate(-10deg) scale(1.05); }

/* Os títulos de secção: o ícone numa etiqueta mostarda inclinada. */
.section-title > .icon:first-child { box-sizing: content-box; width: 13px; height: 13px; padding: 5px; border-radius: 7px; background: #f3d69a; color: #1e1c1c; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }

/* Um formulário com vários cartões lê-se como passos: cada título leva o número, numa etiqueta de cor. */
form:has(> .card ~ .card) { counter-reset: passo-form; }
form:has(> .card ~ .card) > .card { counter-increment: passo-form; }
form:has(> .card ~ .card) > .card > .card-head .card-title { display: flex; align-items: center; gap: 12px; }
form:has(> .card ~ .card) > .card > .card-head .card-title::before {
  content: counter(passo-form); flex: 0 0 28px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--passo-c, #eeb593); color: #1e1c1c; font-size: 14px; font-weight: 700; transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
form:has(> .card ~ .card) > .card:nth-of-type(5n+2) { --passo-c: #f3d69a; }
form:has(> .card ~ .card) > .card:nth-of-type(5n+3) { --passo-c: #d6b5d7; }
form:has(> .card ~ .card) > .card:nth-of-type(5n+4) { --passo-c: #c0e0db; }
form:has(> .card ~ .card) > .card:nth-of-type(5n) { --passo-c: #b9d2dc; }
form:has(> .card ~ .card) > .card:nth-of-type(even) > .card-head .card-title::before { transform: rotate(4deg); }

/* Os campos: ao escrever, o contorno a carvão e uma sombra menta. */
.input:focus, .select:focus, .textarea:focus, .richtext:focus-within { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--green); }

/* Os interruptores: ligado, com contorno; a bolinha com o rebordo a carvão. */
.toggle input:checked + .toggle-track { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.toggle input:checked + .toggle-track .toggle-thumb { box-shadow: 0 0 0 1.5px var(--tinta); }

/* As linhas escolhidas numa tabela ficam a menta. */
.table tbody tr:has(> td input[type="checkbox"]:checked) > td { background: color-mix(in srgb, var(--green) 16%, transparent); }

/* Vazio: o ícone numa etiqueta tracejada e inclinada, em vez de solto. */
.empty > .icon { box-sizing: content-box; padding: 11px; border-radius: 16px; border: 1.5px dashed var(--border-strong); background: var(--bg3); transform: rotate(-6deg); }
.empty.small > .icon { padding: 9px; border-radius: 13px; }

/* A dica: o mesmo carvão, com a sombra sólida. */
.dica { background: var(--tinta); color: var(--bg); box-shadow: 2px 2px 0 color-mix(in srgb, var(--green) 85%, transparent); border-radius: 8px; }

/* A barra de guardar de um formulário comprido fica presa ao fundo (a classe põe-na o app.js), com a fita de cores do editor. */
.form-actions.acoes-presas { position: sticky; bottom: 12px; z-index: 20; margin-top: 18px; padding: 14px 16px; border-radius: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 14px 40px -18px rgba(30, 28, 28, .35), 0 2px 0 rgba(30, 28, 28, .04); }
.form-actions.acoes-presas::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
.card-body > .form-actions.acoes-presas:last-child, form > .form-actions.acoes-presas:last-child { margin-bottom: 0; }

/* O menu: o ícone do sítio onde se está numa etiqueta menta inclinada. */
.nav-link .icon { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .15s ease; }
.nav-link:hover .icon { transform: rotate(-8deg); }
.nav-item.active > .nav-link .icon { box-sizing: content-box; padding: 4px; margin: -4px; border-radius: 8px; background: var(--green); color: #1e1c1c; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
html.sb-collapsed .nav-item.active > .nav-link .icon { margin: 0; }

/* As ações rápidas do Início: levantam-se com a sombra sólida, como as fichas do editor. */
.quick a { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.quick a:hover { border-color: var(--tinta); background: var(--card); box-shadow: 3px 3px 0 var(--tinta); transform: translate(-1px, -1px); }
.quick a:hover .stat-icon { transform: rotate(-10deg) scale(1.06); }
.quick > :nth-child(even) .stat-icon { transform: rotate(4deg); }
@media (max-width: 760px) { .form-actions.acoes-presas { position: relative; bottom: auto; padding: 14px 12px 12px; } }
.btn-primary > .icon:first-child { background: #1e1c1c; color: #94ccbe; }

/* O palco com a linguagem do editor: as cenas como cartões, o número numa etiqueta inclinada, a escolhida com contorno e sombra; a agulha com uma cabeça. */
.palco-linha { padding: 8px 10px 10px 8px; gap: 6px; border: 1px dashed var(--border-strong); background: var(--bg3); }
.palco-bloco { gap: 6px; padding: 8px; border: 1.5px solid var(--border); background: var(--card); border-radius: 12px; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.palco-bloco:hover { border-color: var(--tinta); }
.palco-bloco canvas { width: 40px; border-radius: 6px; box-shadow: 0 2px 0 rgba(30, 28, 28, .12); }
.palco-bloco.escolhida { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.palco-bloco.a-tocar { background: color-mix(in srgb, #94ccbe 28%, var(--card)); }
.palco-bloco-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; }
.palco-bloco-txt b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #f3d69a; color: #1e1c1c; font-size: 12px; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.palco-bloco:nth-of-type(3n+2) .palco-bloco-txt b { background: #d6b5d7; transform: rotate(5deg); }
.palco-bloco:nth-of-type(3n) .palco-bloco-txt b { background: #c0e0db; }
.palco-bloco-txt em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.palco-bloco-txt i { flex-basis: 100%; display: inline-block; width: max-content; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; background: var(--bg3); border: 1px dashed var(--border-strong); color: var(--muted); }
.palco-agulha { width: 3px; margin-left: -1.5px; top: -6px; bottom: -6px; }
.palco-agulha::before { content: ""; position: absolute; top: -4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #e87c6a; border: 2px solid var(--card); box-shadow: 0 1px 0 rgba(30, 28, 28, .2); }
.palco-cena { border: 1.5px solid var(--border); background: var(--card); }
.palco-cena-cab b { display: inline-flex; padding: 3px 10px; border-radius: 8px; background: #f3d69a; color: #1e1c1c; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); font-size: 13px; }
.palco-tocar { border: 1.5px solid #1e1c1c; box-shadow: 2px 2px 0 #1e1c1c; }
.pub-seg[aria-pressed="true"] { border-color: var(--tinta) !important; box-shadow: 2px 2px 0 var(--tinta); }

/* Trazer uma foto: os três caminhos em pílulas, a pesquisa com a grelha das fotos livres. */
.pub-trazer { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1.5px dashed var(--border-strong); background: var(--bg3); display: flex; flex-direction: column; gap: 12px; }
.pub-trazer-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pub-trazer-cab .pub-passo { margin: 0; }
.pub-trazer-cab .pub-seg { display: inline-flex; align-items: center; gap: 6px; }
.pub-trazer-painel { display: flex; flex-direction: column; gap: 10px; }
.pub-trazer-painel[hidden] { display: none; }
.pub-procura { display: flex; gap: 8px; }
.pub-procura .input { flex: 1; min-width: 0; background: var(--card); }
.pub-procura-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pub-procura-res > p { grid-column: 1 / -1; margin: 0; }
.pub-procura-foto { position: relative; aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); background: var(--card); cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.pub-procura-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-procura-foto span { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; background: rgba(254, 253, 249, .92); color: #1e1c1c; }
.pub-procura-foto:hover { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); transform: translate(-1px, -1px) rotate(-1deg); }
.pub-procura-foto.a-trazer { opacity: .55; cursor: progress; }
.pub-procura-foto.a-trazer::after { content: "A trazer…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(254, 253, 249, .6); color: #1e1c1c; }
.pub-procura-foto.trazida { border-color: var(--green-deep); box-shadow: 0 0 0 2px var(--green); }
.pub-procura-espera { animation: pub-brilho-txt 1.2s ease-in-out infinite alternate; }
@keyframes pub-brilho-txt { from { opacity: .5; } to { opacity: 1; } }
.pub-trazer .pub-carregar { border: 0; padding: 0; }

/* ── Página a página, a mesma linguagem ──────────────────────────────────── */

/* A história de um acompanhamento: cada passo numa etiqueta de cor inclinada, ligados por um traço tracejado; a data numa pílula. */
.lt-item::before { left: 33px; width: 0; background: none; border-left: 2px dashed color-mix(in srgb, var(--text) 18%, transparent); }
.lt-item { border-radius: 14px; transition: background .15s ease; }
.lt-item:hover { background: var(--bg3); }
.lt-ponto { border-radius: 10px; border: 1.5px solid transparent; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.lt-item:nth-child(even) .lt-ponto { transform: rotate(5deg); }
.lt-item:hover .lt-ponto { transform: rotate(-12deg) scale(1.08); }
.lt-ponto.tone-green { background: #c0e0db; color: #1e1c1c; border-color: transparent; }
.lt-ponto.tone-amber { background: #f3d69a; color: #1e1c1c; }
.lt-ponto.tone-coral { background: #eeb593; color: #1e1c1c; }
.lt-ponto.tone-blue { background: #b9d2dc; color: #1e1c1c; }
.lt-ponto.tone-lilac { background: #d6b5d7; color: #1e1c1c; }
.lt-topo time { padding: 2px 8px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lt-item:hover .lt-topo time { background: var(--card); }
.lt-item:hover .lt-ir { color: var(--text); transform: translateX(2px); }
.lt-ir { transition: transform .15s ease, color .15s ease; }

/* A agenda: hoje com uma etiqueta inclinada, as consultas como fichas que se levantam, a linha da hora com uma cabeça. */
.grelha-coluna[data-hoje] .grelha-cabeca { position: sticky; background: color-mix(in srgb, var(--green) 30%, var(--bg)); }
.grelha-coluna[data-hoje] .grelha-cabeca b { color: var(--text); }
.grelha-coluna[data-hoje] .grelha-cabeca::after { content: "Hoje"; position: absolute; top: 6px; right: 8px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  background: #f3d69a; color: #1e1c1c; transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.grelha-bloco { transition: transform .15s ease, box-shadow .15s ease; }
.grelha-bloco:hover { z-index: 5; transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--tinta); outline: 1.5px solid var(--tinta); outline-offset: -1px; }
.grelha-agora-linha::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tone-coral); box-shadow: 0 0 0 2px var(--bg); }
.grelha-modo .btn.escolhido { background: color-mix(in srgb, var(--green) 38%, var(--card)); color: var(--text); border: 1.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.cal-ev.clickable { transition: transform .15s ease, box-shadow .15s ease; }
.cal-ev.clickable:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--tinta); }

/* Os diálogos: contorno a carvão, sombra sólida, a fita de cores em cima, e entram com um pequeno salto. */
.dialog-inner { position: relative; border: 1.5px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); }
.dialog-inner::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
.dialog-head { border-bottom: 1px dashed var(--border-strong); }
.dialog[open] .dialog-inner { animation: dialogo-entra .28s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(10px) rotate(-1deg) scale(.98); } to { opacity: 1; transform: none; } }

/* Os avisos (gravado, erro): a mesma ficha com sombra sólida e o ícone numa etiqueta inclinada. */
.toast { border: 1.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.toast-icon { background: #c0e0db; color: #1e1c1c; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.toast.error .toast-icon { background: #eeb593; color: #1e1c1c; }
.toast.warning .toast-icon, .toast.aviso .toast-icon { background: #f3d69a; color: #1e1c1c; }
.toast { animation: aviso-entra .32s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes aviso-entra { from { opacity: 0; transform: translateX(16px) rotate(1.5deg); } to { opacity: 1; transform: none; } }

/* O login: o selo a rodar, a fita das especialidades a correr, e a etiqueta «Acesso restrito» inclinada. */
/* O selo entra carimbado; o anel das especialidades roda devagar; ao passar por cima salta e o D+ abana. */
.auth-selo { position: absolute; right: 56px; top: 22%; width: 150px; height: 150px; z-index: 2; transform: rotate(-8deg);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); animation: selo-carimba .7s .25s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.auth-selo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-selo .selo-roda { transform-box: fill-box; transform-origin: center; animation: selo-gira 28s linear infinite; }
.auth-selo .selo-centro { transform-box: fill-box; transform-origin: center; }
.auth-selo:hover { transform: rotate(6deg) scale(1.1); }
.auth-selo:hover .selo-centro { animation: selo-abana .6s ease-in-out; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-carimba { from { opacity: 0; transform: rotate(-40deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes selo-abana { 25% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg); } }
.auth-fita { margin: 14px -48px 0; padding: 10px 0; overflow: hidden; background: #1e1c1c; transform: rotate(-2deg); box-shadow: 0 6px 0 rgba(30, 28, 28, .08); }
.auth-fita-trilho { display: flex; width: max-content; animation: fita-corre 26s linear infinite; }
.auth-fita-volta { display: flex; gap: 10px; padding-right: 10px; }
.auth-fita-esp { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; background: var(--c); color: #1e1c1c; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.auth-fita-esp:nth-child(even) { transform: rotate(2deg); }
@keyframes fita-corre { to { transform: translateX(-50%); } }
.auth-card > .pill:first-child { background: #f3d69a; color: #1e1c1c; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
@media (prefers-reduced-motion: reduce) { .auth-selo, .auth-selo .selo-roda, .auth-selo:hover .selo-centro, .auth-fita-trilho, .toast, .dialog[open] .dialog-inner { animation: none; } .auth-selo { transition: none; } }

/* O Início: o cartão de boas-vindas com a fita de cores, o número com a onda do site, a data numa etiqueta inclinada, e a personagem a flutuar. */
.hero { border: 1.5px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); }
.hero::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 5px; z-index: 2; border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
.hero-kicker .stat-icon { background: #f3d69a; color: #1e1c1c; }
.hero-num { text-decoration: underline wavy var(--green-deep); text-decoration-thickness: 3px; text-underline-offset: 9px; text-decoration-skip-ink: none; }
.hero-sub { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 9px; font-style: normal; font-size: 14px; color: #1e1c1c; background: #ebc3cd; transform: rotate(-1.5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.hero-art { animation: hero-flutua 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hero-flutua { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }

/* A equipa: cada pessoa uma ficha que se levanta, com o avatar numa etiqueta de cor inclinada. */
a.person, .person { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.person:hover, .people > a:hover .person { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); transform: translate(-1px, -1px); }
.person .avatar { border-radius: 16px; border: 0; color: #1e1c1c; background: #c0e0db; transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.people > :nth-child(4n+2) .avatar, .people > .person:nth-child(4n+2) .avatar { background: #f3d69a; transform: rotate(4deg); }
.people > :nth-child(4n+3) .avatar, .people > .person:nth-child(4n+3) .avatar { background: #d6b5d7; }
.people > :nth-child(4n) .avatar, .people > .person:nth-child(4n) .avatar { background: #eeb593; transform: rotate(3deg); }
.person-kpis b { font-variant-numeric: tabular-nums; }

/* O mês: hoje numa etiqueta inclinada, o dia escolhido com contorno, as consultas que se levantam. */
.mes-cel.hoje .mes-num { background: #f3d69a; color: #1e1c1c; border-radius: 7px; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.mes-cel.escolhido { background: color-mix(in srgb, var(--green) 22%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.mes-lado { border: 1.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); background: var(--card); }
.mes-linha { transition: background .15s ease, transform .15s ease; }
.mes-linha:hover { transform: translateX(2px); }

/* Os passos de um formulário comprido (marcar consulta): o número numa etiqueta inclinada e um traço até ao fim da linha. */
.form-passo { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.form-passo:first-child { margin-top: 0; }
.form-passo::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }
.form-passo-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.form-passo-tag i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--c); color: #1e1c1c; font-style: normal; font-weight: 700; font-size: 14px;
  transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
.form-passo:nth-of-type(even) .form-passo-tag i { transform: rotate(4deg); }

/* As listas com barra (os seguros mais frequentes): o nome por cima de uma barra de cor, do tamanho da parte de cada um. */
.barras-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.barras-lista li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; overflow: hidden; font-size: 14px; background: var(--bg3); }
.barras-lista li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: color-mix(in srgb, var(--c) 70%, transparent); border-right: 2px solid var(--c); animation: barra-cresce .7s cubic-bezier(.2, .9, .3, 1) both; }
.barras-lista li > * { position: relative; }
.barras-lista b { font-size: 15px; }
@keyframes barra-cresce { from { width: 0; } }

/* A legenda dos gráficos: cada série numa pílula. */
.chart-legend { gap: 6px; }
.chart-legend span { padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; }

/* Os vazios com uma personagem: a personagem flutua, o texto numa caixa tracejada por baixo. */
.empty.has-illustration .empty-illustration { animation: hero-flutua 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .barras-lista li::before, .empty.has-illustration .empty-illustration { animation: none; } }

/* Como sai uma story: em imagem ou no vídeo do Palco. */
.red-como { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.red-como .label { margin: 0; }
.red-como-op { position: relative; cursor: pointer; }
.red-como-op input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.red-como-op:has(input:checked) { background: color-mix(in srgb, var(--green) 38%, var(--card)); border-color: var(--tinta) !important; box-shadow: 2px 2px 0 var(--tinta); color: var(--text); }
.red-como-op:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.red-como-op:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.red-como .red-dica { margin: 0; font-size: 12.5px; }
.div-anos { flex-wrap: wrap; margin-bottom: 14px; }
.div-anos .pub-seg { text-decoration: none; font-variant-numeric: tabular-nums; }

/* O histórico do assistente: o botão no cabeçalho, e a lista das conversas no lugar da conversa. */
.ass-cabeca > [data-assistente-historico-abrir] { position: absolute; top: 14px; right: 88px; }
.ass-cabeca > [data-assistente-historico-abrir][aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1.5px #1e1c1c; }
.ass-cabeca > div { padding-right: 128px; }
.ass-historico { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; overflow: hidden; }
.ass-historico[hidden] { display: none; }
.ass-hist-cab { display: flex; flex-direction: column; gap: 2px; }
.ass-hist-cab b { font-size: 15px; }
.ass-hist-cab .muted { font-size: 12px; }
.ass-hist-lista { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ass-hist-item { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 0; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ass-hist-item:hover { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); transform: translate(-1px, -1px); }
.ass-hist-item.atual { border-color: var(--green-deep); background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.ass-hist-abrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ass-hist-abrir b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ass-hist-abrir .muted { font-size: 11.5px; }
.ass-hist-vazio { padding: 18px 8px; font-size: 13px; text-align: center; }
.ass-hist-pe { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.ass-hist-tudo:hover:not(:disabled) { border-color: var(--tone-coral); color: var(--tone-coral); }
.ass-lista[hidden], .ass-form[hidden] { display: none !important; }
.pub-cartao-img.deitada { background: var(--bg3); display: flex; align-items: center; }
.pub-cartao-img.deitada canvas { object-fit: contain; height: auto; }
.pub-procura-temas { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-procura-temas .pub-tag[aria-pressed="true"] { background: color-mix(in srgb, var(--green) 38%, var(--card)); border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); color: var(--text); }
.pub-procura-nota { margin: 0; font-size: 12.5px; }

/* ── As páginas da família (as portas, o portal) e o login: a mesma imagem ──
   Quem abre uma ligação do centro vê o que vê no email que a trouxe e no site:
   o título com a onda, as secções com uma etiqueta de cor, as fichas com
   contorno a carvão e sombra sólida, e a fita de cores. As regras estão em
   desenvolvermais.pt/marca. */
.auth-quote em { position: relative; display: inline-block; padding-bottom: 6px; }
.auth-quote em::after { content: ""; position: absolute; left: 2px; right: 6px; bottom: -4px; height: 11px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 32px 10px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 32px 10px; }
/* O título da página com a onda do site, como os títulos da gestão. */
.auth-card > h1 { display: inline-block; position: relative; padding-bottom: 14px; font-weight: 600; letter-spacing: -0.04em; }
.auth-card > h1::after { content: ""; position: absolute; left: 2px; right: 0; bottom: 0; height: 9px; max-width: 220px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 26px 8.2px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9.5'><path d='M0,2.9c7.5,0,7.5,3.9,15,3.9s7.5-3.9,15-3.9' fill='none' stroke='black' stroke-width='3.6'/></svg>") repeat-x left center / 26px 8.2px; }
.auth-card > h1 + .lead { margin-top: 10px; }
/* Cada secção com uma etiqueta de cor inclinada à frente do título, a rodar nas cores da casa. */
body.publico .portal-bloco { border-top: 1.5px dashed var(--border-strong); }
body.publico .portal-bloco > h2 { display: flex; align-items: center; gap: 10px; }
body.publico .portal-bloco > h2::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 4px; background: var(--c, #eeb593);
  transform: rotate(-8deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .16); }
body.publico .portal-bloco:nth-of-type(4n+2) > h2::before { --c: #f3d69a; transform: rotate(6deg); }
body.publico .portal-bloco:nth-of-type(4n+3) > h2::before { --c: #d6b5d7; }
body.publico .portal-bloco:nth-of-type(4n) > h2::before { --c: #b9d2dc; transform: rotate(5deg); }
/* A próxima consulta: a ficha da casa, com o título numa etiqueta mostarda por cima. */
body.publico .auth-card > .portal-bloco.portal-proxima { position: relative; margin: 22px 0 22px; padding: 34px 20px 20px; background: #fef0dc; color: #1e1c1c;
  border: 1.5px solid var(--tinta); border-radius: 18px; box-shadow: 4px 4px 0 var(--tinta); }
body.publico .portal-proxima > h2 { position: absolute; top: -14px; left: 16px; margin: 0; padding: 4px 11px; border-radius: 8px; background: #f3d69a; color: #1e1c1c;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; transform: rotate(-2.5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .16); }
body.publico .portal-proxima > h2::before { display: none; }
body.publico .portal-proxima .muted, body.publico .portal-proxima .help { color: #5f584f; }
html.dark body.publico .portal-proxima { background: color-mix(in srgb, #f3d69a 14%, var(--card)); color: var(--text); }
html.dark body.publico .portal-proxima .muted, html.dark body.publico .portal-proxima .help { color: var(--muted); }
/* As fichas das consultas, das mensagens e dos atos: levantam-se ao passar, como na gestão. */
body.publico :is(.portal-consulta, .portal-cons, .cons-ato) { border: 1.5px solid var(--border); border-radius: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
body.publico :is(.portal-consulta, .portal-cons):hover { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); transform: translate(-1px, -1px); }
body.publico .cons-ato { position: relative; border-color: var(--tinta); box-shadow: 4px 4px 0 var(--tinta); }
body.publico .cons-ato::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 5px; border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
body.publico .cons-ato-vazio { border-color: var(--border-strong); border-style: dashed; box-shadow: none; }
body.publico .cons-ato-vazio::before { display: none; }
/* Os passos do consentimento: o número numa etiqueta de cor, como os passos dos formulários da gestão. */
body.publico .cons-num { border: 0; border-radius: 9px; background: #eeb593; color: #1e1c1c; transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); }
body.publico .cons-passo:nth-of-type(4n+2) .cons-num { background: #f3d69a; transform: rotate(4deg); }
body.publico .cons-passo:nth-of-type(4n+3) .cons-num { background: #d6b5d7; }
body.publico .cons-passo:nth-of-type(4n) .cons-num { background: #c0e0db; transform: rotate(4deg); }
body.publico .cons-passo { border-top-style: dashed; }
/* O rodapé, com a fita de cores por cima. */
body.publico .porta-rodape { position: relative; border-top: 0; }
body.publico .porta-rodape::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); }
/* No telemóvel a faixa de cima faz de painel da marca: o verde do vídeo, a onda por baixo e o selo. */
@media (max-width: 900px) {
  .auth-topo { background: #c0e0db; border-bottom: 0; padding-bottom: 26px; overflow: visible; }
  .auth-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: var(--bg);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'><path d='M0,6c15,0,15,6,30,6s15-6,30-6V12H0Z'/></svg>") repeat-x bottom / 60px 12px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'><path d='M0,6c15,0,15,6,30,6s15-6,30-6V12H0Z'/></svg>") repeat-x bottom / 60px 12px; }
  .auth-topo .auth-brand { color: #1e1c1c; }
  html.dark .auth-topo { background: #2c4b45; }
  html.dark .auth-topo .auth-brand { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { body.publico :is(.portal-consulta, .portal-cons) { transition: none; } }

/* Os documentos para imprimir (justificação, relatório, comprovativo, fatura em página): a fita de cores no topo da folha, o selo no canto e o título com a onda, como os PDF. */
.doc { position: relative; }
.doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, #94ccbe 0 25%, #f3d69a 25% 50%, #eeb593 50% 75%, #d6b5d7 75%); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-head { border-bottom: 2px solid var(--text); }
.doc-head h1, .doc-head h2 { letter-spacing: -0.03em; }
@media print {
  .doc { padding-top: 22px !important; }
  .doc::before { border-radius: 0; }
  /* A justificação abre-se na página da família: no papel vai só o documento, à largura da folha. */
  .auth-topo, body:has(.doc) .auth-side { display: none !important; }
  body:has(.doc) .auth { display: block; min-height: 0; }
  body:has(.doc) .auth-main { padding: 0; display: block; }
  body:has(.doc) .auth-card { max-width: none; }
}

/* ── WhatsApp (whatsapp.php e a ficha): as mensagens como bolhas, as conversas como lista ── */
.wa-modelos, .wa-conversas, .wa-fio { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wa-modelo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1.5px dashed var(--border-strong); }
.wa-modelo:first-child { border-top: 0; padding-top: 0; }
.wa-bolha { white-space: pre-line; position: relative; margin: 8px 0 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #e7f6dd; color: #1e1c1c; font-size: 13.5px; line-height: 1.45; max-width: 520px;
  box-shadow: 0 1px 0 rgba(30, 28, 28, .12); }
html.dark .wa-bolha { background: #1f3a2e; color: var(--text); }
.wa-botoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wa-botoes span { flex: 1 1 auto; text-align: center; padding: 6px 10px; border-radius: 9px; background: var(--card); color: #2f7a6a; font-weight: 600; font-size: 13px; box-shadow: 0 1px 0 rgba(30, 28, 28, .1); }
.wa-botoes span .icon { margin-right: 5px; vertical-align: -2px; }
.wa-teste { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.wa-teste .field { flex: 1 1 200px; margin: 0; }
.wa-modelo-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.wa-modelo-estado small { font-size: 11.5px; }
/* Ligar o número do centro: o botão, o estado ao lado, e o que se fez (um visto por passo). */
.wa-ligar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.wa-ligar .help { flex: 1 1 100%; margin: 0; }
.wa-passos-feitos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-passos-feitos li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.wa-passos-feitos li.ok .icon { color: var(--tone-green); flex: none; margin-top: 2px; }
.wa-passos-feitos li.falhou .icon { color: var(--tone-coral, #c0573e); flex: none; margin-top: 2px; }
.wa-conversa a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.wa-conversa a:hover { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); transform: translate(-1px, -1px); }
.wa-conversa a > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-conversa a > span:nth-child(2) .muted { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conversa.por-ler a { border-color: #94ccbe; background: color-mix(in srgb, #94ccbe 14%, var(--card)); }
.wa-conversa-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--muted); }
.wa-conversa-meta i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25a244; color: #fff; font-weight: 700; display: grid; place-items: center; }
/* O fio da conversa, na ficha. */
.wa-fio { gap: 6px; max-height: 420px; overflow-y: auto; padding: 4px 2px; }
.wa-fio li { display: flex; flex-direction: column; max-width: 86%; }
.wa-fio li.entrada { align-self: flex-start; }
.wa-fio li.saida { align-self: flex-end; align-items: flex-end; }
.wa-fio .wa-bolha { margin: 0; white-space: pre-line; }
.wa-fio li.entrada .wa-bolha { background: var(--card); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; }
.wa-fio li.saida .wa-bolha { border-radius: 14px 4px 14px 14px; }
.wa-fio small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.btn-wa .icon { color: #25a244; }

/* O WhatsApp na barra de cima: o ícone no verde do WhatsApp, e o número das conversas por ler. */
.wa-topo .icon { color: #25a244; }
.wa-topo .count { background: #25a244; color: #fff; }
html.dark .wa-topo .icon { color: #4fd06f; }

/* ── Publicações: a página a editar, o desenho próprio de cada página, os elementos livres ── */
.pub-paginas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--border-strong); background: var(--bg3); }
.pub-paginas-seg { flex-wrap: wrap; }
.pub-paginas .pub-dica { margin: 2px 0 0; }
.pub-pag-propria { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #e87c6a; vertical-align: middle; }
.pub-link { border: 0; padding: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pub-slide-escolhida canvas { outline: 3px solid var(--tinta); outline-offset: 3px; }
.pub-slide-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pub-slide-acoes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pub-slide-tipo .pub-seg { font-size: 12.5px; padding: 4px 9px; }
.pub-mais-paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pub-el-lista { margin-top: 12px; }
.pub-el-fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pub-el-ficha { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; max-width: 200px; }
.pub-el-ficha img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--bg3); }
.pub-el-ficha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-el-ficha[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.pub-el-afinar input[type="range"] { flex: 1; accent-color: #317061; }
.pub-seg-tirar:hover { color: var(--tone-coral); }

/* ── O estúdio: a página grande para mexer em cada parte do desenho ─────────── */
html.estudio-aberto { overflow: hidden; }
.estudio { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); }
.estudio[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.estudio::backdrop { background: rgba(30, 28, 28, 0.5); }
.estudio-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 20px; border-bottom: 1.5px solid var(--border); background: var(--card); }
.estudio-tit { display: flex; flex-direction: column; min-width: 0; }
.estudio-tit h2 { font-size: 18px; letter-spacing: -0.02em; }
.estudio-tit .muted { font-size: 12.5px; }
.estudio-pags { flex: 1; justify-content: center; }
.estudio-acoes { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.estudio-acoes .iconbtn[disabled] { opacity: .35; cursor: default; background: transparent; border-color: transparent; }
.estudio-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.estudio-palco { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden;
  background-color: var(--bg3); background-image: radial-gradient(var(--border-strong) 1px, transparent 1.2px); background-size: 22px 22px; }
.estudio-folha { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.estudio-folha canvas { display: block; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 2px 0 rgba(30, 28, 28, .12), 0 18px 40px rgba(30, 28, 28, .16); background: var(--card); }
.estudio-folha.estudio-agarra { cursor: pointer; }
.estudio-folha.estudio-a-mexer, .estudio-folha.estudio-a-mexer * { cursor: grabbing !important; }
.estudio-espera { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(250, 247, 239, .7); border-radius: 6px; }
.estudio-pairar { position: absolute; pointer-events: none; outline: 1.5px dashed var(--tinta); outline-offset: 2px; border-radius: 4px; opacity: .55; }
.estudio-sel { position: absolute; pointer-events: none; outline: 2px solid #e87c6a; outline-offset: 2px; border-radius: 3px; }
.estudio-sel.escondida { outline-style: dashed; background: repeating-linear-gradient(-45deg, rgba(232, 124, 106, .08) 0 8px, transparent 8px 16px); }
.estudio-sel-nome { position: absolute; left: -4px; bottom: calc(100% + 8px); padding: 2px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #e87c6a; color: #1e1c1c; box-shadow: 0 2px 0 rgba(30, 28, 28, .16); transform: rotate(-2deg); }
.estudio-pega { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 4px; background: #fff; border: 2px solid #1e1c1c; box-shadow: 1px 1px 0 #1e1c1c; pointer-events: auto; touch-action: none; }
.estudio-pega[data-pega="nw"] { left: -2px; top: -2px; cursor: nwse-resize; }
.estudio-pega[data-pega="ne"] { left: calc(100% + 2px); top: -2px; cursor: nesw-resize; }
.estudio-pega[data-pega="sw"] { left: -2px; top: calc(100% + 2px); cursor: nesw-resize; }
.estudio-pega[data-pega="se"] { left: calc(100% + 2px); top: calc(100% + 2px); cursor: nwse-resize; }
.estudio-pega-rodar { left: 50%; top: -34px; border-radius: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #94ccbe; cursor: grab; }
.estudio-pega-rodar::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; margin-left: -1px; background: #e87c6a; }
.estudio-sel.escondida .estudio-pega { display: none; }
.estudio-guia { position: absolute; pointer-events: none; background: #e87c6a; box-shadow: 0 0 0 .5px rgba(232, 124, 106, .5); z-index: 1; }
.estudio-guia-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.estudio-guia-h { top: 50%; left: 0; right: 0; height: 1px; }
.estudio-lado { display: flex; flex-direction: column; gap: 18px; padding: 18px; overflow: auto; border-left: 1.5px solid var(--border); background: var(--card); }
.estudio-ambito { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-strong); }
.estudio-peca { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--bg3); }
.estudio-peca:has(.estudio-peca-cab) { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.estudio-peca-cab { display: flex; align-items: center; gap: 8px; }
.estudio-peca-cab b { display: inline-flex; padding: 3px 10px; border-radius: 8px; background: #f3d69a; color: #1e1c1c; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(30, 28, 28, .14); font-size: 13px; }
.estudio-tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--muted); }
.estudio-peca .input { background: var(--card); }
.estudio-nota, .estudio-nada { margin: 0; font-size: 12.5px; }
.estudio-regua { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 8px; }
.estudio-regua .label { margin: 0; }
.estudio-regua input[type="range"] { width: 100%; accent-color: #317061; }
.estudio-regua output { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.estudio-botoes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.estudio-botoes .btn { background: var(--card); }
.estudio-camadas { display: flex; flex-direction: column; gap: 8px; }
.estudio-camadas-cab { display: flex; align-items: baseline; justify-content: space-between; }
.estudio-camadas-cab .label { margin: 0; }
.estudio-camadas-cab .muted { font-size: 12px; }
.estudio-camadas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.estudio-camada { display: flex; align-items: center; gap: 4px; }
.estudio-camada-nome { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.estudio-camada-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estudio-camada-nome em { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--tone-coral-soft); color: var(--tone-coral); white-space: nowrap; }
.estudio-camada-nome:hover { background: var(--bg3); }
.estudio-camada-nome[aria-pressed="true"] { border-color: var(--tinta); background: var(--card); box-shadow: 2px 2px 0 var(--tinta); font-weight: 600; }
.estudio-camada.oculta .estudio-camada-nome span { color: var(--faint); text-decoration: line-through; }
.estudio-vazio { font-size: 13px; padding: 4px 2px; }
.pub-el-amostra { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--border-strong); flex: none; }
/* Acrescentar: o texto, as formas, a biblioteca */
.estudio-novo { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-strong); }
.estudio-novo > .label { margin: 0; }
.estudio-novo-bts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.estudio-novo-bts .btn { justify-content: center; background: var(--card); }
.estudio-novo-bts .btn[aria-expanded="true"] { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.estudio-formas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.estudio-forma { display: grid; place-items: center; height: 56px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg3); cursor: pointer; }
.estudio-forma:hover { border-color: var(--tinta); }
.estudio-forma i { display: block; background: #e8c87c; border: 1.5px solid #1e1c1c; }
.estudio-forma-retangulo { width: 30px; height: 20px; }
.estudio-forma-redondo { width: 30px; height: 22px; border-radius: 7px; }
.estudio-forma-circulo { width: 26px; height: 26px; border-radius: 50%; }
.estudio-forma-linha { width: 32px; height: 5px; border-radius: 4px; }
.estudio-imagens { display: flex; flex-direction: column; gap: 8px; }
.estudio-img-grupos { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; }
.estudio-img-grupos .pub-seg { justify-content: center; padding-left: 4px; padding-right: 4px; font-size: 12.5px; white-space: nowrap; }
.estudio-img { max-height: 210px; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
.estudio-carregar { align-self: flex-start; cursor: pointer; background: var(--card); }
/* As cores da marca: o botão com a cor de agora, e a paleta por baixo (duas filas de sete) */
.estudio-cor-linha { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px 8px; }
.estudio-cor-linha .label { margin: 0; }
.estudio-cor-atual { display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 10px 0 6px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.estudio-cor-atual:hover { border-color: var(--border-strong); }
.estudio-cor-atual[aria-expanded="true"] { border-color: var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.estudio-cor-atual span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.estudio-cor-atual .icon { flex: none; opacity: .6; transition: transform .15s; }
.estudio-cor-atual[aria-expanded="true"] .icon { transform: rotate(180deg); }
.estudio-cor-atual .estudio-cor { width: 22px; height: 22px; pointer-events: none; }
.estudio-paleta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; justify-items: center; padding: 10px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--border); }
.estudio-paleta[hidden] { display: none; }
.estudio-cor { display: block; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(30, 28, 28, .22); background: var(--c, #fff); cursor: pointer; transition: transform .12s; }
.estudio-paleta .estudio-cor:hover { transform: scale(1.12); }
.estudio-cor[aria-pressed="true"] { outline: 2px solid var(--tinta); outline-offset: 2px; }
.estudio-cor-nada { background: linear-gradient(135deg, transparent 44%, #e87c6a 44% 56%, transparent 56%), var(--card); }
.estudio-seg { flex-wrap: nowrap; }
.estudio-seg .pub-seg { flex: 1; justify-content: center; padding-left: 6px; padding-right: 6px; }
.estudio-dupla { display: flex; flex-direction: column; gap: 6px; }
.estudio-alinhar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.estudio-alinhar .label { margin: 0; white-space: nowrap; }
.estudio-alinhar-bts { display: flex; gap: 2px; }
.estudio-alinhar-bts .iconbtn { background: var(--card); }
.estudio-alinhar-bts .iconbtn:nth-child(3) { margin-right: 6px; }
/* As ferramentas de um elemento: ícones, e o «Tirar» encostado à direita */
.estudio-ferramentas { align-items: center; gap: 4px; }
.estudio-ferramentas .iconbtn { background: var(--card); border: 1.5px solid var(--border); }
.estudio-ferramentas .iconbtn:hover:not([disabled]) { border-color: var(--tinta); }
.estudio-ferramentas .iconbtn[disabled] { opacity: .35; cursor: default; }
.estudio-tirar { margin-left: auto; color: var(--tone-coral); }
.estudio-peca[hidden] { display: none; }
/* Esconder e Repor, lado a lado */
.estudio-botoes-peca { display: grid; grid-template-columns: 1fr 1fr; }
.estudio-botoes-peca .btn { justify-content: center; }
.estudio-dica { margin: auto 0 0; font-size: 12px; line-height: 1.5; }
html.dark .estudio-espera { background: rgba(30, 28, 28, .6); }
@media (max-width: 900px) {
  /* O desenho fica preso em cima; o painel corre por baixo dele. */
  .estudio-corpo { display: block; overflow: auto; }
  .estudio-palco { position: sticky; top: 0; z-index: 2; height: 54dvh; border-bottom: 1.5px solid var(--border); }
  .estudio-lado { border-left: 0; overflow: visible; }
  .estudio-topo { padding: 8px 12px; gap: 8px; }
  /* Uma fila só: Descartar à esquerda, desfazer e refazer ao meio, Concluir à direita (o título já se sabe). */
  .estudio-tit { display: none; }
  .estudio-acoes { width: 100%; margin-left: 0; }
  .estudio-acoes [data-est-descartar] { order: -1; margin-right: auto; }
  .estudio-acoes .iconbtn { width: 36px; height: 36px; }
  /* Ao escolher uma parte, o painel dela para logo por baixo do desenho preso. */
  .estudio-peca { scroll-margin-top: calc(54dvh + 12px); }
  .estudio-pags { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .estudio-pags .pub-seg { flex: none; }
  .estudio-dica { display: none; }
}
/* O «Mexer» por cima de cada imagem do «Como fica»: aparece ao passar (num ecrã de toque, está sempre). */
.pub-slide { position: relative; }
.pub-mexer { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; border: 1.5px solid #1e1c1c; background: #fff; color: #1e1c1c;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 2px 2px 0 #1e1c1c; opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s; }
.pub-slide:hover .pub-mexer, .pub-mexer:focus-visible { opacity: 1; transform: none; }
.pub-mexer:hover { background: #94ccbe; }
@media (hover: none) { .pub-mexer { opacity: 1; transform: none; } }