/* =========================================================
   LIGHTHOUSE · Estilo Noir
   Folha de estilos base. Tudo o que é cor, letra e espaço
   vem das variáveis em :root. Não usar cores soltas no código.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Instrument+Sans:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap");

:root {
  /* Fundos */
  --bg: #000000;            /* fundo da app */
  --surface: #0B0B0A;       /* cartões e caixas, quando for mesmo preciso */
  --line: #1F1E1C;          /* divisórias entre linhas de lista */
  --line-strong: #2A2926;   /* contornos de botões e teclas */
  --line-input: #3A3833;    /* sublinhado de campos */
  --campo: #111111;         /* fundo das caixas de texto */

  /* Texto */
  --text: #EDEAE3;          /* texto principal (marfim) */
  --muted: #8C877E;         /* texto secundário, legendas */
  --faint: #4A4741;         /* elementos desligados */
  --done: #6A665F;          /* texto de tarefa terminada */

  /* Destaque (usar com moderação: traços, anéis, um botão por ecrã) */
  --gold: #B59A63;
  --gold-hover: #D4BC8A;

  /* Estados da checklist (funcionais, não decorativos) */
  --st-todo: #D0584A;       /* vermelho: por fazer */
  --st-doing: #E2B24C;      /* amarelo: em processo */
  --st-done: #7DBB88;       /* verde: terminada */

  /* Secções */
  --sec-bar: #8FAEDB;       /* azul */
  --sec-cozinha: #B7A3DE;   /* roxo */

  /* Letras */
  --font-display: "Cormorant Garamond", Georgia, serif;   /* títulos, nomes, números grandes */
  --font-body: "Instrument Sans", system-ui, sans-serif;  /* tudo o resto */

  /* Tamanhos */
  --fs-hero: 44px;          /* título de ecrã (ex.: Checklist) */
  --fs-name: 36px;          /* nome da pessoa no login */
  --fs-quote: 24px;         /* texto de aviso em itálico */
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 11px;         /* rótulos em maiúsculas */
  --tracking-label: 0.3em;  /* espaçamento das letras nos rótulos */

  /* Espaços */
  --pad-x: 24px;            /* margem lateral dos ecrãs */
  --gap-s: 8px;
  --gap-m: 16px;
  --gap-l: 24px;
  --gap-xl: 48px;

  /* Toque */
  --touch: 44px;            /* área mínima de toque */
  --radius: 0;              /* cantos retos por defeito */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }
button { font: inherit; color: inherit; }

/* ---------- Tipografia ---------- */
.t-hero  { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: 1; margin: 0; }
.t-name  { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-name); line-height: 1.1; }
.t-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-quote); line-height: 1.25; }
.t-label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.t-label--gold { color: var(--gold); }
.t-muted { color: var(--muted); font-size: var(--fs-small); }
.t-num   { font-variant-numeric: tabular-nums; }

/* Rótulo entre dois traços dourados: ——— QUEM ESTÁ A ENTRAR ——— */
.t-ruled { display: flex; align-items: center; gap: 14px; }
.t-ruled::before, .t-ruled::after { content: ""; width: 32px; height: 1px; background: var(--gold); }

/* ---------- Estrutura de ecrã ---------- */
.screen { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.screen__header { padding: 48px var(--pad-x) 18px; display: flex; flex-direction: column; gap: 4px; }
.screen__body { flex: 1; overflow-y: auto; padding: 8px var(--pad-x) 16px; display: flex; flex-direction: column; gap: 22px; }
.header-row { display: flex; justify-content: space-between; align-items: center; }

/* Pessoa com sessão aberta (canto superior direito) */
.user-chip { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.user-chip__avatar {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--faint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px;
}

/* ---------- Botões ---------- */
/* Principal: contorno marfim, texto em maiúsculas espaçadas */
.btn {
  min-height: 48px; padding: 0 20px; border: 1px solid var(--text); border-radius: var(--radius);
  background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.btn:active { background: var(--text); color: var(--bg); }
/* Destaque dourado: no máximo um por ecrã */
.btn--gold { border-color: var(--gold); background: var(--gold); color: #000; }
.btn--gold:active { background: var(--gold-hover); }
/* Botão secundário (ex.: Mudar, Sair, Selecionar vários): contorno dourado fino, para se ver logo que é um botão
   (01/11: num teste, um cliente não encontrava os que eram só texto cinzento). */
.btn--text { min-height: var(--touch); border: 1px solid var(--gold); border-radius: 999px;
  padding: 0 16px; background: transparent; color: color-mix(in srgb, var(--gold) 80%, var(--text)); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; font-weight: 600; }
.btn--text:active { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.btn--block { width: 100%; }

/* ---------- Campos ---------- */
/* Campos e listas pendentes: só sublinhado, sem caixa */
.field { display: flex; flex-direction: column; gap: 2px; }
.field > span { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.input, .select {
  height: var(--touch); border: none; border-bottom: 1px solid var(--line-input); border-radius: 0;
  background: transparent; color: var(--text); font-family: var(--font-body); font-size: 15px; padding: 0;
  outline: none; -webkit-appearance: none; appearance: none;
}
.input:focus, .select:focus { border-bottom-color: var(--gold); }
.input::placeholder { color: var(--faint); }
.select {
  padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 4px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.select option { background: var(--campo); color: var(--text); }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ---------- Aviso do gestor ---------- */
/* Sem caixa: traço dourado em cima, texto em itálico serifado */
.notice { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--gold); }

/* ---------- Listas (tarefas, produtos, notas…) ---------- */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0;
  border: none; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--text); text-align: left; cursor: pointer; width: 100%;
}
.row__time { width: 44px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row__title { flex: 1; font-size: var(--fs-body); }
.row__meta { font-family: var(--font-display); font-style: italic; font-size: 15px; }
.row--done .row__title { text-decoration: line-through; color: var(--done); }

/* Ponto de estado */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot--todo  { background: var(--st-todo); }
.dot--doing { background: var(--st-doing); }
.dot--done  { background: var(--st-done); }

/* Secção (texto em itálico com a cor da secção) */
.sec--bar     { color: var(--sec-bar); }
.sec--cozinha { color: var(--sec-cozinha); }

/* ---------- Contador +/− (contagem, mínimos) ---------- */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper__btn {
  width: var(--touch); height: var(--touch); border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font-size: 20px; cursor: pointer;
}
.stepper__value {
  min-width: 52px; height: var(--touch); border: none; border-bottom: 1px solid var(--line-input);
  background: transparent; color: var(--text); font-family: var(--font-display); font-size: 26px; text-align: center; cursor: pointer;
}
.stepper__value--empty { color: var(--faint); }

/* ---------- Barra de navegação inferior ---------- */
.tabbar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); padding: 10px 0 calc(12px + var(--fundo-seguro));
  background: var(--bg);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 0; min-height: var(--touch); color: var(--muted);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
}
.tab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1; fill: none; }
.tab--active { color: var(--text); }
.badge {
  position: absolute; top: 2px; left: 58%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--gold); color: #000; font-size: 10px; font-weight: 600; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Avatar ---------- */
.avatar {
  width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--line-input);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--text);
}
.avatar--gestor { border-color: var(--gold); }
.avatar--lg { width: 88px; height: 88px; font-size: 34px; }

/* ---------- Ecrã de entrada (escolher pessoa) ---------- */
.entry { align-items: center; padding: 64px 28px 40px; }
.people { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 8px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text); font-size: 14px; letter-spacing: 0.04em; }
.clock { font-family: var(--font-display); font-size: 64px; line-height: 1; }

/* ---------- PIN ---------- */
.pin-dots { display: flex; gap: 18px; }
.pin-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); }
.pin-dot--on { background: var(--text); border-color: var(--text); }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px 30px; justify-content: center; }
.key {
  width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font-display); font-size: 34px; font-weight: 400;
  transition: background .15s, color .15s;
}
.key:active { background: var(--text); color: var(--bg); }
.key--ghost { border-color: transparent; }   /* tecla apagar */
.key--empty { visibility: hidden; }
/* PIN errado: abanar os pontos */
@keyframes pin-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.pin-dots--error { animation: pin-shake .35s; }
.pin-dots--error .pin-dot { border-color: var(--st-todo); }

/* ---------- Logo com luz do farol ---------- */
/* Estrutura HTML:
   <div class="lh-logo" style="--logo-w: 310px">
     <span class="lh-beam" aria-hidden="true"></span>
     <span class="lh-glow" aria-hidden="true"></span>
     <img src="/logo-noir.png" alt="Lighthouse">
   </div>
   --logo-w: 310px na entrada, 250px no login, 120px em cabeçalhos.
   A lanterna fica a 50% da largura e 19,5% da altura do logo (--luz-x, --luz-y; a bola de luz mede --luz-d × a largura).
   O contentor pai deve ter overflow: hidden. */
.lh-logo { position: relative; width: var(--logo-w, 310px); }
.lh-logo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

@keyframes lh-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes lh-pulse  { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

.lh-beam {
  position: absolute; left: var(--luz-x, 50%); top: var(--luz-y, 19.5%); z-index: 0; pointer-events: none;
  width: calc(var(--logo-w, 310px) * 2); height: calc(var(--logo-w, 310px) * 2);
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg 78deg, rgba(240,226,196,.13) 90deg, transparent 102deg 258deg,
    rgba(240,226,196,.13) 270deg, transparent 282deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 68%);
  animation: lh-rotate 14s linear infinite;
}
.lh-glow {
  position: absolute; left: var(--luz-x, 50%); top: var(--luz-y, 19.5%); z-index: 0; pointer-events: none;
  width: calc(var(--logo-w, 310px) * var(--luz-d, .23)); height: calc(var(--logo-w, 310px) * var(--luz-d, .23));
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(240,220,170,.35) 0%, transparent 70%);
  animation: lh-pulse 4s ease-in-out infinite;
}
/* Logo pequeno em cabeçalhos: só o brilho, sem feixes */
.lh-logo--small .lh-beam { display: none; }

/* ---------- Teclado numérico em folha (contagem) ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; flex-direction: column; justify-content: flex-end; z-index: 50; }
.sheet { background: var(--surface); border-top: 1px solid var(--gold); padding: 20px var(--pad-x) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet { animation: sheet-up .25s ease-out; }

/* ---------- Transições suaves ---------- */
.fade-in { animation: fade-in .3s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .lh-beam, .lh-glow, .sheet, .fade-in, .pin-dots--error { animation: none; }
}

/* Nome da app em texto, no lugar do logótipo (provisório até cada estabelecimento ter o seu) */
.lh-logo.marca { font-family: var(--font-display); color: var(--gold); text-align: center; line-height: 1.1;
  font-size: calc(var(--logo-w, 310px) * .12); letter-spacing: .03em; white-space: nowrap; }

/* Ícone do estabelecimento na entrada, no ecrã Estabelecimento e na escolha do fundo */
.marca-icone { display: block; width: calc(var(--logo-w, 310px) * .5); aspect-ratio: 1; margin: 0 auto .35em; border-radius: 22%; }
/* Logótipo da entrada sem moldura (SQL 108): um para cada tema; sem o do tema atual, o do outro com as cores invertidas */
.marca-logo { position: relative; display: block; margin: 0 auto .35em; }
.marca-logo img { position: relative; z-index: 1; display: block; margin: 0 auto; width: auto; height: auto;
  max-width: var(--logo-w, 310px); max-height: calc(var(--logo-w, 310px) * .5); }
.marca-logo .logo-p-claro { display: none; }
:root[data-tema="claro"] .marca-logo .logo-p-escuro { display: none; }
:root[data-tema="claro"] .marca-logo .logo-p-claro { display: block; }
.logo-invertido { filter: invert(1) hue-rotate(180deg); }
/* Farol do Lighthouse (o da app do bar): no tema claro, as letras ficam escuras */
.lh-logo.marca > .lh-logo { margin: 0 auto .35em; }
:root[data-tema="claro"] .logo-farol { filter: invert(1) hue-rotate(180deg); }
/* Luz atrás do logótipo, na cor de destaque do estabelecimento */
.marca-logo.com-luz::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 130%; aspect-ratio: 1.6;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 50%, transparent), transparent 75%);
  animation: lh-pulse 4s ease-in-out infinite; }
:root[data-tema="claro"] .marca-logo.com-luz::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 28%, transparent), transparent 75%); }
@media (prefers-reduced-motion: reduce) { .marca-logo.com-luz::before { animation: none; opacity: .7; } }
.marca-nome { display: block; }
.logos-tema { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; }
.logo-tema { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.logo-amostra { position: relative; display: flex; align-items: center; justify-content: center; height: 110px; padding: 12px; border: 1px solid var(--line-strong); }
.logo-auto { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #888; }
.logo-tema--escuro .logo-amostra { background: #0b0b0b; }
.logo-tema--claro .logo-amostra { background: #f4f2ee; }
.logo-amostra img { max-width: 100%; max-height: 100%; }
.estabelecimento { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.estabelecimento .t-label { align-self: stretch; }
.estab-icone { width: 112px; aspect-ratio: 1; border-radius: 22%; }
.estab-link { font-family: var(--font-body); word-break: break-all; color: var(--gold); margin: 0; }
.fundos-icone { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.fundo-icone { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 1px solid var(--line-strong);
  color: var(--text); padding: 12px; min-width: 44px; min-height: 44px; cursor: pointer; }
.fundo-icone img { width: min(84px, 22vw); aspect-ratio: 1; border-radius: 22%; }
.sem-estabelecimento { max-width: 320px; text-align: center; margin: 24px auto 0; }

/* Página do administrador (admin.html) */
.admin { max-width: 560px; margin: 0 auto; padding: 48px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-estab { gap: 10px; cursor: default; }
.admin-estab.desativado { opacity: .6; }

/* PDF das faturas dentro da app (verPdf) */
.ver-pdf { justify-content: stretch; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); }
.pdf-paginas { --zoom: 1; flex: 1; min-height: 0; width: 100%; overflow: auto; padding: 0 12px; }
.pdf-paginas canvas { display: block; width: calc(100% * var(--zoom)); height: auto; margin: 0 auto 12px; background: #fff; }
.ver-pdf .pdf-botoes { width: 100%; max-width: 420px; padding: 0 12px; grid-template-columns: 1fr 1fr 2fr; }
.ver-pdf [data-zoom] { font-size: 22px; }
.tabela-consumos { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.tabela-consumos th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tabela-consumos th, .tabela-consumos td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tabela-consumos tfoot td { border-bottom: 0; }

/* ---------- Tema claro (Conta → Tema; cada pessoa escolhe) ----------
   As mesmas variáveis com cores claras. O escuro continua a ser o normal (bar com pouca luz).
   Dourado, estados e secções mais escuros, para se lerem bem em fundo claro. */
:root { color-scheme: dark; }
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --line: #E3DED5;
  --line-strong: #CEC7BA;
  --line-input: #B3AB9D;
  --campo: #FFFFFF;
  --text: #1C1B19;
  --muted: #6B665D;
  --faint: #B4AEA4;
  --done: #98928A;
  --gold: #8A6F3A;
  --gold-hover: #6E582C;
  --st-todo: #C0392B;
  --st-doing: #B07D08;
  --st-done: #3D8B4E;
  --sec-bar: #3A6DB5;
  --sec-cozinha: #7A58B6;
}
:root[data-tema="claro"] .input[type=time] { color-scheme: light; }
/* No tema claro, o texto sobre a cor de destaque é branco (as cores do tema claro são escuras). */
:root[data-tema="claro"] .btn--gold, :root[data-tema="claro"] .badge, :root[data-tema="claro"] .contador { color: #fff; }
.boas-vindas { margin: .5em 0 0; font-family: var(--font-body); font-size: 14px; letter-spacing: .02em; color: var(--muted);
  white-space: normal; line-height: 1.4; }
.cores-destaque { display: grid; grid-template-columns: repeat(4, 44px); gap: 14px; justify-content: center; }
.cor-destaque { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--amostra);
  box-shadow: inset 0 0 0 3px var(--bg); cursor: pointer; }
.cor-destaque.ativo { border-color: var(--text); }
.estabelecimento .modulos, .estabelecimento .input { align-self: stretch; text-align: left; }
/* Administração: estado de uso de cada estabelecimento e alertas */
.uso { align-self: flex-start; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }
.uso--ativo { color: var(--st-done); }
.uso--pouco { color: var(--st-doing); }
.uso--parado { color: var(--st-todo); }
.alerta-admin { margin: 0; padding: 10px 12px; border-left: 2px solid var(--st-doing); color: var(--text); font-size: 14px; }
.alerta-admin--grave { border-left-color: var(--st-todo); }

/* ---------- Página do administrador: painel (admin.js) ----------
   Telemóvel: barra de topo, menu em cima (desliza para o lado) e clientes em linhas.
   Computador (≥ 900 px): menu à esquerda, conteúdo largo e tabelas com todas as colunas. */
body.com-painel #admin { max-width: none; padding: 0; display: grid; grid-template-rows: auto auto 1fr; min-height: 100dvh; gap: 0; }
.admin-entrada { display: flex; flex-direction: column; gap: 16px; }
.adm-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.adm-marca { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.adm-marca span { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.adm-topo-acoes { display: flex; gap: 4px; }
.adm-menu { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.adm-menu a { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--muted);
  text-decoration: none; font-size: 14px; border-bottom: 2px solid transparent; }
.adm-menu a.ativo { color: var(--text); border-bottom-color: var(--gold); }
.adm-menu .adm-novo { color: var(--gold); }
.adm-contador { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-todo); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.adm-conteudo { padding: 20px 16px 48px; min-width: 0; }
.adm-titulo { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 0 0 16px; color: var(--text); }
.adm-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 20px; }
.adm-numeros > * { background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.adm-numeros strong { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--text); }
.adm-numeros span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-pesquisa { width: 100%; margin-bottom: 8px; }
.adm-tabela { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.adm-tabela th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.adm-tabela td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-tabela .num { text-align: right; white-space: nowrap; }
.adm-tabela tfoot td { border-bottom: 0; color: var(--muted); }
.adm-tabela tr[data-cliente] { cursor: pointer; }
.adm-tabela tbody tr[data-cliente]:hover { background: var(--surface); }
.adm-sub { display: block; font-size: 12px; color: var(--muted); }
.adm-seta { color: var(--muted); font-size: 20px; width: 20px; }
/* Grupos: o nome do grupo por cima dos seus restaurantes, que ficam um pouco para dentro */
.adm-grupo-linha td { padding: 16px 8px 6px; border-bottom: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.adm-grupo-linha a { color: var(--gold); }
.adm-tabela .adm-no-grupo td:first-child { padding-left: 24px; border-left: 1px solid var(--gold); }
.adm-grupo { margin-top: 12px; }
/* Ação perigosa (apagar um cliente): contorno vermelho */
.btn--perigo { border-color: var(--st-todo); color: var(--st-todo); }
.btn--perigo:active { background: var(--st-todo); color: #000; }
/* Telemóvel: cada cliente numa linha de duas filas (nome e estado; última atividade e custo) */
@media (max-width: 899px) {
  .adm-largo { display: none; }
  .adm-clientes thead { display: none; }
  .adm-clientes tr { display: grid; grid-template-columns: 1fr auto 20px; grid-template-areas: "nome estado seta" "quando custo seta";
    gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); align-items: center; }
  .adm-clientes td { padding: 0; border: 0; }
  .adm-clientes tr.adm-no-grupo { padding-left: 16px; border-left: 1px solid var(--gold); }
  .adm-clientes .adm-no-grupo td:first-child { padding-left: 0; border-left: 0; }
  .adm-clientes td:nth-child(1) { grid-area: nome; }
  .adm-clientes .adm-estado-cel { grid-area: estado; justify-self: end; }
  .adm-clientes .adm-quando { grid-area: quando; color: var(--muted); font-size: 13px; }
  .adm-clientes .adm-custo { grid-area: custo; }
  .adm-clientes .adm-seta { grid-area: seta; }
}
.adm-voltar { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.adm-cliente-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-cliente-topo .adm-titulo { margin: 0; }
.adm-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 20px; word-break: break-all; }
.adm-link a { color: var(--gold); }
.adm-relatorio { display: grid; grid-template-columns: 1fr; gap: 12px; }
.adm-cartao { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-cartao h2 { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.adm-cartao dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-size: 14px; }
.adm-cartao dt { color: var(--muted); }
.adm-cartao dd { margin: 0; text-align: right; color: var(--text); }
.adm-nota { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.adm-gerir { display: flex; flex-direction: column; gap: 12px; }
.adm-mes { max-width: 260px; margin-bottom: 12px; }
.adm-estreito { max-width: 480px; }
.adm-alertas { display: flex; flex-direction: column; gap: 8px; }
.adm-alertas .alerta-admin strong { display: block; margin-bottom: 2px; }
@media (min-width: 900px) {
  body.com-painel #admin { grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; }
  .adm-topo { grid-column: 1 / -1; padding: 16px 28px; }
  .adm-menu { flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--line); padding: 20px 12px; gap: 2px; }
  .adm-menu a { border-bottom: 0; border-left: 2px solid transparent; }
  .adm-menu a.ativo { border-left-color: var(--gold); background: var(--surface); }
  .adm-menu .adm-novo { margin-top: 16px; }
  .adm-conteudo { padding: 28px 40px 60px; max-width: 1200px; }
  .adm-numeros { grid-template-columns: repeat(6, 1fr); }
  .adm-relatorio { grid-template-columns: repeat(2, 1fr); }
  .adm-cartao--largo { grid-column: 1 / -1; }
  .adm-gerir { flex-direction: row; align-items: flex-end; }
  .adm-gerir .field { flex: 1; }
}
.adm-numeros .uso--ativo { color: var(--st-done); }
.adm-numeros .uso--pouco { color: var(--st-doing); }
.adm-numeros .uso--parado { color: var(--st-todo); }
.uso--desativado { color: var(--muted); }
.adm-pessoas { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.adm-pessoa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.adm-pessoa.desativado { opacity: .55; }
.adm-subtitulo { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 32px 0 8px; color: var(--text); }
#verificar { margin: 8px 0 12px; }
#notas-admin { width: 100%; }
.adm-limite { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.adm-limite .field { flex: 1; min-width: 200px; }
/* Resumo do mês para o cliente: folha branca, pronta a imprimir ou guardar em PDF */
.adm-resumo { position: fixed; inset: 0; z-index: 20; overflow: auto; background: rgba(0,0,0,.8); padding: 16px; }
.adm-resumo-botoes { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.adm-resumo-folha { max-width: 720px; margin: 0 auto; background: #fff; color: #1c1b19; padding: 48px 56px; font-family: var(--font-body); }
.adm-resumo-folha header { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: 12px; color: #6b665d; font-size: 13px; }
.adm-resumo-marca { font-family: var(--font-display); font-size: 20px; color: #8A6F3A; }
.adm-resumo-folha h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; margin: 28px 0 8px; }
.adm-resumo-folha h2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #6b665d; margin: 28px 0 8px; font-weight: 500; }
.adm-resumo-folha table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-resumo-folha td { padding: 8px 0; border-bottom: 1px solid #eee; }
.adm-resumo-folha td:last-child { text-align: right; }
.adm-resumo-total td { font-weight: 600; border-bottom: 0; border-top: 2px solid #1c1b19; }
.adm-resumo-nota { margin-top: 24px; font-size: 12px; color: #6b665d; }
.adm-resumo-tabela th { text-align: left; font-size: 11px; font-weight: 500; color: #6b665d; padding: 6px 8px 6px 0; border-bottom: 1px solid #ddd; }
.adm-resumo-tabela td { padding: 6px 8px 6px 0; }
.adm-resumo-tabela .num { text-align: right; }
/* Capacidade e uso: tabela larga com scroll dentro do cartão; calculadora com os três campos lado a lado */
.adm-uso-tabela { min-width: 100%; }
.adm-cartao--tabela:has(.adm-uso-tabela) { overflow-x: auto; }
.adm-linha-apagada td { opacity: .55; }
.adm-calculadora { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.adm-calculadora-tabela td:first-child { color: var(--muted); }
.adm-atualizar-cf { min-height: 32px; padding: 0; color: var(--gold); font-size: 12px; }
@media print {
  body.com-painel > *:not(.adm-resumo), .adm-resumo-botoes { display: none !important; }
  .adm-resumo { position: static; background: none; padding: 0; overflow: visible; }
  .adm-resumo-folha { padding: 0; max-width: none; }
  html, body { background: #fff !important; }
}
.comunicado { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 16px; border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent); }
.comunicado .btn { align-self: flex-start; }
.adm-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#form-comunicado { margin-bottom: 24px; }
/* Modo apoio (administrador a ver a app de um cliente, só para ver) */
.faixa-apoio { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 12px; background: var(--st-doing); color: #000; font-size: 13px; }
.faixa-apoio .btn { color: #000; min-height: 32px; text-decoration: underline; }
.faixa-apoio--alterar { background: var(--st-todo); color: #fff; font-weight: 600; } /* a alterar (SQL 171) */
.faixa-apoio--alterar .btn { color: #fff; }
/* Erros da app (administração → Alertas e saúde, SQL 128) */
.adm-erro-pormenor { white-space: pre-wrap; word-break: break-word; font-size: 11px; max-height: 240px; overflow: auto; margin: 6px 0 0; }
/* Apagar um grupo inteiro (administração → Grupos, SQL 129) */
.adm-zona-perigo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.adm-zona-perigo .adm-nota { margin: 0; }
/* Botão "Verificar a separação" dentro do seu cartão */
#verificar { align-self: flex-start; margin: 4px 0 12px; }
/* Grupos: a lista abre a página de cada grupo (como os clientes) */
.adm-tabela tr[data-abrir-grupo] { cursor: pointer; }
.adm-tabela tbody tr[data-abrir-grupo]:hover { background: var(--surface); }
/* Registo da administração: quem fez cada ação, sempre à vista */
.adm-quem { font-size: 13px; }
.adm-quem small { display: block; font-size: 11px; color: var(--muted); }
/* Erros da app: os textos compridos (mensagens e pormenores) partem dentro do quadro, também no telemóvel */
.adm-erros { table-layout: fixed; width: 100%; }
.adm-erros td { overflow-wrap: anywhere; }
.adm-erros .adm-erro-pormenor { max-width: 100%; overflow-wrap: anywhere; }
.adm-so-estreito { display: none; }
.adm-erros th:nth-child(1) { width: 11%; } .adm-erros th:nth-child(2) { width: 6%; } .adm-erros th:nth-child(3) { width: 13%; }
.adm-erros th:nth-child(5) { width: 13%; } .adm-erros th:nth-child(6) { width: 10%; } .adm-erros th:nth-child(7) { width: 15%; }
/* Estado dos erros (SQL 134): separadores por cima e, em cada erro, Resolvido / Ignorar / Copiar para o Claude */
.adm-erros-separadores { margin-bottom: 12px; }
.adm-erro-acoes { display: flex; flex-direction: column; align-items: flex-start; }
.adm-erro-acoes .btn--text { min-height: 32px; text-align: left; color: var(--gold); }
.adm-erros .adm-sub:not(.adm-so-estreito) { display: block; }
/* Telemóvel: cada erro numa ficha — quando, vezes e cliente numa linha; o erro por baixo, a toda a largura */
@media (max-width: 899px) {
  .adm-so-estreito { display: block; }
  .adm-erros, .adm-erros tbody, .adm-erros tr, .adm-erros td { display: block; width: auto; }
  .adm-erros thead { display: none; }
  .adm-erros tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .adm-erros tr:last-child { border-bottom: 0; }
  .adm-erro-acoes { flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
  .adm-erros td { padding: 2px 0; border: 0; text-align: left; }
  .adm-erros td:nth-child(-n+3) { display: inline; color: var(--muted); font-size: 12px; }
  .adm-erros td:nth-child(2)::before { content: ' · '; }
  .adm-erros td:nth-child(2)::after { content: ' vez(es) · '; }
  .adm-erros td:nth-child(3) br { display: none; }
  .adm-erros td:nth-child(3) small::before { content: ' (' } .adm-erros td:nth-child(3) small::after { content: ')' }
  .adm-erros td:nth-child(4) { margin-top: 6px; }
  .adm-erros td.adm-largo { display: none; }
}