:root {
  --fundo-seguro: max(0px, calc(env(safe-area-inset-bottom) - 16px)); /* espaço do risco de baixo do iPhone, menos 16 px (a barra fica à altura das apps do iPhone); 0 se a página não chega lá: 01-base.js, ajustarFundo */
  /* Nomes antigos apontam para as cores do Estilo Noir (estilo-noir.css) */
  --fundo: var(--bg);
  --cartao: var(--surface);
  --texto: var(--text);
  --texto-suave: var(--muted);
  --destaque: var(--gold);
  --bar: var(--sec-bar);
  --cozinha: var(--sec-cozinha);
  --vermelho: var(--st-todo);
  --amarelo: var(--st-doing);
  --verde: var(--st-done);
  --altura-nav: 76px; /* altura da barra de baixo (Estilo Noir) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 17px;
  -webkit-tap-highlight-color: transparent;
}

button, select, input, textarea { font: inherit; color: inherit; min-height: 44px; }
input, select, textarea { color: var(--texto); }
::placeholder { color: var(--texto-suave); }

.topo select { background: var(--cartao); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; }

main {
  padding: 16px;
  padding-bottom: calc(var(--altura-nav) + 24px + var(--fundo-seguro));
  max-width: 900px; margin: 0 auto;
}

[hidden] { display: none !important; }

.teclado button {
  border: 0; border-radius: 12px; cursor: pointer; padding: 0 16px;
}

.erro { border-left: 4px solid var(--vermelho); }
.erro-texto { color: var(--vermelho); min-height: 1.4em; margin: 8px 0; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado button { min-height: 68px; font-size: 1.6rem; background: var(--cartao); }

.filtro { display: flex; gap: 6px; margin-bottom: 10px; background: var(--cartao); border-radius: 12px; padding: 4px; }
.filtro button { flex: 1; border: 0; border-radius: 9px; background: transparent; color: var(--texto-suave); font-size: 0.9rem; padding: 0 4px; cursor: pointer; }
.filtro button.ativo { background: var(--line-strong); color: var(--texto); font-weight: 600; }

.nota-texto { white-space: pre-wrap; margin: 8px 0 12px; }
.nota textarea { width: 100%; background: var(--campo); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; resize: vertical; }

.fundo-modal { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,0.7); display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--surface); border-radius: 18px 18px 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); width: 100%; max-width: 420px; }
.visor { font-size: 2.4rem; font-variant-numeric: tabular-nums; margin-bottom: 12px; }

.produtos { display: flex; flex-direction: column; gap: 8px; padding-bottom: 72px; }
.produto { display: flex; align-items: center; gap: 8px; background: var(--cartao); border-radius: 12px; padding: 8px 10px; border-left: 6px solid var(--line-input); }
.produto.contado { border-left-color: var(--verde); }

.quantidade { min-width: 64px; min-height: 48px; background: var(--campo); border: 1px solid var(--line-strong); border-radius: 10px; font-size: 1.2rem; font-variant-numeric: tabular-nums; cursor: pointer; }

.rodape-fixo { position: fixed; left: 0; right: 0; bottom: calc(var(--altura-nav) + var(--fundo-seguro)); padding: 12px var(--pad-x); background: var(--bg); border-top: 1px solid var(--line); }

.mensagem {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--altura-nav) + 80px + var(--fundo-seguro));
  width: max-content; max-width: calc(100% - 32px); padding: 14px 20px; text-align: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--gold); font-size: var(--fs-small);
}
.mensagem.erro { border-color: var(--st-todo); color: var(--text); }

#aviso-novo { width: 100%; background: var(--campo); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; resize: vertical; }

.videos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.video { background: var(--cartao); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.video.visto { opacity: 0.75; }
.video iframe, .miniatura { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.miniatura { position: relative; padding: 0; background: #000; cursor: pointer; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; }
.video-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.video-info .marcar { margin-top: auto; min-height: 44px; }

.obrigatorio { color: var(--destaque); }
.barra-progresso { height: 10px; background: var(--line-strong); border-radius: 5px; overflow: hidden; margin-top: 8px; }
.barra-progresso span { display: block; height: 100%; background: var(--verde); }
.linha-progresso { margin-top: 10px; }

#publicar { margin-bottom: 4px; }

.lista-config { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.item-config { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; background: var(--cartao); border: 0; border-radius: 12px; text-align: left; cursor: pointer; }
.inativo { opacity: 0.5; }
.item-texto { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 48px; }
.pesquisa { width: 100%; margin: 12px 0; background: var(--cartao); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; }
.formulario { display: flex; flex-direction: column; gap: 12px; max-height: 90vh; overflow-y: auto; text-align: left; }
.haccp-sensor { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 0 10px 22px; }
/* Gráfico e Registar com o sensor: botões pequenos com contorno, para não se confundirem com o texto. */
.haccp-sensor .btn { min-height: 34px; padding: 0 12px; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0;
  text-transform: none; border-color: var(--muted); }
.haccp-sensor-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.grafico-periodos { display: flex; gap: 8px; margin: 4px 0 8px; }
.grafico-periodos .btn { flex: 1; min-height: 44px; }
.grafico-periodos .btn.ativo { border-color: var(--gold); color: var(--gold); }
.grafico-leitura { margin: 4px 0; min-height: 1.4em; }
.grafico-area { width: 100%; touch-action: pan-y; }
.grafico-area svg { display: block; }
.g-grelha { stroke: var(--line); stroke-width: 1; }
.g-eixo { fill: var(--muted); font-size: 11px; }
.g-linha { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-limite { stroke: var(--st-todo); stroke-width: 1; stroke-dasharray: 4 4; }
.g-limite-texto { fill: var(--muted); font-size: 11px; }
.g-cursor { stroke: var(--muted); stroke-width: 1; }
.g-ponto { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.g-toque { fill: transparent; cursor: crosshair; }
.lista-modal { width: 100%; max-height: 90vh; overflow-y: auto; }
.formulario h2 { margin: 0; font-size: 1.2rem; }


.detalhe { background: var(--cartao); border-radius: 0 0 12px 12px; margin-top: -6px; padding: 8px 14px 12px; }
.detalhe table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.detalhe th { text-align: left; color: var(--texto-suave); font-weight: normal; padding: 6px 4px; }
.detalhe td { padding: 8px 4px; border-top: 1px solid var(--line); }
.detalhe tr.abaixo td { color: var(--vermelho); }

.separadores a { position: relative; }

.ver-foto { flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: rgba(0,0,0,0.92); }
.ver-foto img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 8px; }

.abrir-youtube { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--texto); text-decoration: none; margin-top: 4px; }
.formulario input[inputmode=numeric] { -webkit-text-security: disc; letter-spacing: 0.3em; }

.conta-pagina { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 340px; margin: 24px auto 0; }

/* Checklist compacta: nota numa linha e filtros lado a lado */

#nota-acoes:empty { display: none; }

.linha-separador { display: flex; align-items: center; gap: 8px; }
.formulario .linha-separador label { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }

.registo-texto { flex: 1; min-width: 0; }

/* Avisos do gestor, compactos */

.aviso-texto { white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.aviso-detalhe { display: none; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.9rem; }
.aviso-detalhe .erro-texto { margin: 0; min-height: 0; }
/* Caixas de texto: uma linha ao início, crescem com o texto (ver app.js), sem pega para esticar */
textarea { resize: none !important; overflow-y: auto; max-height: 50vh; line-height: 1.4; padding: 11px 12px !important; box-sizing: border-box; }

/* ---------- Horizontal (tablet deitado, telemóvel deitado) ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  main { max-width: 1200px; }

  /* Listas em 2 colunas */
  .produtos > p { grid-column: 1 / -1; }

  /* Ecrãs cujo conteúdo está solto no #ecra: grelha de 2 colunas, com as barras de cima a toda a largura */
  body[data-ecra="compras"] #ecra,
  body[data-ecra="horarios"] #ecra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
  body[data-ecra="compras"] #ecra > p,
  body[data-ecra="horarios"] #ecra > :not(.dia) { grid-column: 1 / -1; }
}

/* Telemóvel deitado: pouca altura, tudo mais baixo */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --altura-nav: 58px; }
  .tabbar { padding-top: 4px; padding-bottom: calc(4px + var(--fundo-seguro)); }
  .tab { gap: 2px; }
  .teclado { gap: 8px; }
  .teclado button { min-height: 48px; font-size: 1.3rem; }
}
/* No login não há barra de baixo: não reservar espaço para ela */

/* Modo de seleção para apagar vários */
body.a-selecionar #ecra [data-id] { cursor: pointer; outline: 2px dashed var(--line-input); outline-offset: -2px; }
body.a-selecionar #ecra [data-id].selecionado { outline: 3px solid var(--vermelho); background: #3a1d1d; }
body.a-selecionar #selecionar { display: none; }
.barra-selecao { z-index: 5; }
.apagar-varios { background: var(--vermelho); color: #fff; }
.apagar-varios:disabled { opacity: 0.4; }
.apagar-varios[data-confirmar] { background: #b91c1c; }
body.a-selecionar #ecra { padding-bottom: calc(var(--altura-nav) + 100px + var(--fundo-seguro)); }

/* No login não há título nem botões: esconder a barra do topo */
body[data-ecra="login"] .topo { display: none; }

/* Separador Avisos: avisos primeiro, depois notas de turno */

/* Ícone dos Avisos a piscar quando há avisos por ler */
@keyframes piscar { 50% { opacity: 0.25; transform: scale(1.15); } }
.separadores a.piscar .icone svg { animation: piscar 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .separadores a.piscar .icone svg { animation: none; }
}

/* Sem zoom na app: nem com dois dedos nem a tocar duas vezes (só deixa deslizar) */
html, body { touch-action: pan-x pan-y; }
/* iPhone faz zoom sozinho ao escrever numa caixa com letra menor que 16px */
input, select, textarea { font-size: max(16px, 1em); }
.formulario textarea { width: 100%; background: var(--campo); border: 1px solid var(--line-strong); border-radius: 10px; }

/* Todas as caixas de texto escuras (a das notas estava branca) */
textarea { width: 100%; background: var(--campo); color: var(--texto); border: 1px solid var(--line-strong); border-radius: 10px; }

/* Notas novas "acesas" na primeira vez que se abrem; histórico com apagadas e versões anteriores */
.notificacoes-conta { width: 100%; margin-top: 16px; text-align: left; }

/* Puxar a página para baixo não recarrega a app */
html, body { overscroll-behavior-y: none; }

/* ---------- Login: Entrada e PIN (Estilo Noir) ---------- */
body[data-ecra="login"] main { padding: 0; max-width: none; }
.avatar { flex-shrink: 0; }
.person { background: none; border: 0; padding: 4px 0; cursor: pointer; }
.login-entrada { padding-top: max(64px, calc(env(safe-area-inset-top) + 32px)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.login-pergunta { margin: 56px 0 0; }
.people { margin-top: 36px; max-width: 480px; }
.login-relogio { margin-top: auto; padding-top: 48px; text-align: center; }
.login-relogio .t-label { margin-top: 10px; }
.login-pin { padding-top: max(36px, calc(env(safe-area-inset-top) + 16px)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.pin-info { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pin-info .avatar { margin-top: 24px; }
.pin-info .t-label { margin-top: 4px; }
.pin-erro { margin: 0; min-height: 1.3em; color: var(--st-todo); font-size: var(--fs-small); }
.login-pin { justify-content: center; } /* tudo junto e ao centro do ecrã, sem buraco entre a pessoa e o teclado */
.login-pin .keypad { margin-top: 28px; row-gap: 14px; }
.key, .clock { font-variant-numeric: lining-nums; } /* algarismos todos da mesma altura: mais fáceis de ler */
.key { min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* número ao centro do círculo (no iPhone o botão trazia espaço por dentro e o número ficava à direita) */
.key--ghost { font-family: var(--font-body); font-size: 22px; color: var(--muted); }
.mudar-pessoa { margin-top: 8px; }
.mudar-pessoa span { color: var(--gold); }

/* Tablet ou telemóvel deitado: dados à esquerda, teclado à direita */
@media (orientation: landscape) and (min-width: 700px) {
  .login-pin { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 96px; padding-top: 32px; }
  .login-pin .pin-info { width: 300px; }
  .login-pin .keypad { margin-top: 0; padding-top: 0; }
  /* Linha própria (100%), mas as margens deixam-no com 320 px, ao centro (sem elas ia de ponta a ponta no computador). */
  .login-pin .mudar-pessoa { flex-basis: 100%; margin-inline: max(0px, calc(50% - 160px)); }
}
/* Telemóvel deitado: pouca altura */
@media (orientation: landscape) and (max-height: 500px) {
  .login-entrada { padding-top: 24px; }
  .login-pergunta { margin-top: 24px; }
  .people { margin-top: 20px; }
  .login-relogio { padding-top: 24px; }
  .login-pin { padding-top: 12px; gap: 0 56px; }
  .login-pin .lh-logo { display: none; }
  .pin-info { gap: 8px; }
  .pin-info .avatar { margin-top: 0; width: 64px; height: 64px; font-size: 26px; }
  .keypad { grid-template-columns: repeat(3, 56px); gap: 8px 24px; }
  .key { width: 56px; height: 56px; font-size: 26px; }
  .login-pin .mudar-pessoa { margin-top: 4px; }
}

/* ---------- Grupos: escolher a casa depois do PIN e trocar no topo (SQL 87) ---------- */
.escolher-casa { align-items: stretch; padding-top: max(64px, calc(env(safe-area-inset-top) + 32px)); max-width: 480px; margin: 0 auto; }
.escolher-casa .t-name { margin: 8px 0 18px; }
.casa-escolha { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 0; border: 0;
  border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.casa-escolha .casa-nome { flex: 1; font-size: 17px; }
.casa-escolha.atual .casa-nome { color: var(--gold); }
.casa-logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line-strong); object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.lista-casas h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; margin: 0 0 6px; }
.lista-casas .btn { margin-top: 16px; }
/* O nome da casa no topo (só para quem trabalha em 2+ casas): por baixo da data, por cima do título */
.topo-casa { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; min-height: var(--touch); padding: 0;
  border: 0; background: none; color: var(--gold); font-family: var(--font-display); font-size: 22px; cursor: pointer; }
.topo-casa .casa-logo { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.topo-casa svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ---------- Grupo: vista do dono (SQL 89) ---------- */
body[data-ecra="grupo"] #ecra { display: flex; flex-direction: column; gap: 16px; }
.total-grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--gold); }
.total-grupo strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; white-space: nowrap; }
.quadros-grupo { display: grid; gap: 14px; }
@media (min-width: 700px) { .quadros-grupo { grid-template-columns: 1fr 1fr; } }
.quadro-casa { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: none;
  color: var(--text); text-align: left; cursor: pointer; font: inherit; width: 100%; }
.quadro-casa:active { border-color: var(--gold); }
.quadro-topo { display: flex; align-items: center; gap: 12px; }
.quadro-topo .casa-logo { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
.quadro-nome { flex: 1; font-family: var(--font-display); font-size: 24px; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.numero small { font-size: 11px; color: var(--muted); }
.quadro-turno { font-size: 13px; color: var(--muted); }
.quadro-turno b { color: var(--text); font-weight: 500; }
.cumprida { display: flex; flex-direction: column; gap: 6px; }
.cumprida-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.cumprida-linha strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text); }
.barra { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 3px; background: var(--st-done); }
.barra i.atencao { background: var(--st-doing); }
.barra i.mau { background: var(--st-todo); }
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.numero span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.numero.mau strong { color: var(--st-todo); }
.numero.atencao strong { color: var(--st-doing); }
.numero.bem strong { color: var(--st-done); }
.gasto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.gasto span { font-size: 12px; color: var(--muted); }
.gasto strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; white-space: nowrap; }
details.uso-app { border-top: 1px solid var(--line); }
details.uso-app summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; }
details.uso-app summary::-webkit-details-marker { display: none; }
details.uso-app summary strong { white-space: nowrap; margin-left: auto; }
details.uso-app summary::after { content: '›'; color: var(--muted); font-size: 20px; transition: transform .15s; }
details.uso-app[open] summary::after { transform: rotate(90deg); }
.uso-app table { width: 100%; border-collapse: collapse; font-size: 14px; }
.uso-app th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.uso-app td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.uso-app .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 14px; white-space: nowrap; }
.uso-app tfoot td { border-bottom: 0; font-weight: 600; }
.uso-app p { font-size: 12px; line-height: 1.5; }

/* Vista do grupo (SQL 100): subidas de preço e encomendas por fornecedor */
.subidas { border-left: 2px solid var(--st-doing); padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 8px; }
.subidas .t-label { color: var(--st-doing); }
.subida { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.subida span { display: block; color: var(--muted); font-size: 12px; }
.subida b { color: var(--st-doing); white-space: nowrap; font-weight: 600; }
.btn-encomendas { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 0 16px; border: 1px solid var(--line-strong); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.btn-encomendas small { color: var(--gold); white-space: nowrap; }
.folha-encomendas { display: flex; flex-direction: column; gap: 14px; }
.folha-encomendas h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; margin: 0; }
.fornecedor-enc { border-bottom: 1px solid var(--line); padding-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.fornecedor-enc h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fornecedor-enc .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.linha-enc { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.linha-enc span { display: block; color: var(--muted); font-size: 12px; }
.linha-enc b { white-space: nowrap; font-weight: 600; }

/* ---------- Painel do dono no computador (SQL 103) ---------- */
/* Cores das casas nos gráficos: paleta validada para daltonismo (uma cor por casa, sempre a mesma). */
:root {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300;
  --serie-7: #9085e9; --serie-8: #e66767; }
:root[data-tema="claro"] { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4;
  --serie-6: #008300; --serie-7: #6250d6; --serie-8: #e34948; }
body.painel-pc .topo, body.painel-pc #separadores { display: none; }
body.painel-pc main { max-width: none; padding: 0; }
.pc { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.pc-lado { border-right: 1px solid var(--line); padding: 24px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0;
  height: 100vh; box-sizing: border-box; }
.pc-marca { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; }
.pc-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; }
.pc-marca b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.pc-marca span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pc-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-left: 2px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; width: 100%; }
.pc-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; flex-shrink: 0; }
.pc-item:hover { color: var(--text); }
.pc-item.ativo { color: var(--text); border-left-color: var(--gold); background: var(--surface); }
.pc-item.depois { opacity: .45; cursor: default; }
.pc-item.depois small { margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pc-lado-fim { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.pc-conteudo { padding: 22px 36px 60px; max-width: 1400px; min-width: 0; }
.pc-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pc-topo h1 { margin: 0 auto 0 0; font-family: var(--font-display); font-weight: 500; font-size: 34px; }
.pc-periodo { display: flex; border: 1px solid var(--line-strong); }
.pc-periodo button { min-height: 38px; padding: 0 14px; border: 0; border-right: 1px solid var(--line-strong); background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.pc-periodo button:last-child { border-right: 0; }
.pc-periodo button.ativo { background: var(--surface); color: var(--text); box-shadow: inset 0 -2px var(--gold); }
.pc-datas { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.pc-datas input, .pc-casas { min-height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.pc-exportar { min-height: 38px; padding: 0 16px; border: 1px solid var(--gold); background: none; color: var(--gold); font: inherit;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.pc-sub { color: var(--muted); font-size: 13px; margin: 10px 0 22px; }
.pc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.pc-kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-produto { margin-bottom: 10px; max-width: 100%; }
.pc-kpi { border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.pc-rot { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-val { font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums; }
.pc-nota { font-size: 12px; color: var(--muted); }
.pc-var-bem { color: var(--st-done); } .pc-var-mau { color: var(--st-todo); } .pc-var-neutro { color: var(--muted); }
.pc-grelha { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.pc-grelha.iguais { grid-template-columns: 1fr 1fr; margin-top: 14px; align-items: start; }
/* Tarefas à mesma hora: pega para arrastar (Mais → Tarefas; SQL 111) */
.item-config.com-pega { position: relative; padding-left: 48px; }
.pega-arrastar { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px; letter-spacing: -3px; cursor: grab; touch-action: none; user-select: none; }
.item-config.a-arrastar { opacity: .7; outline: 1px dashed var(--gold); }
/* Administração A4: início, cobranças, saúde e gráfico dos custos (SQL 113) */
.adm-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.adm-cartao { border: 1px solid var(--line); padding: 16px 18px; min-width: 0; }
#grafico-custos { margin-bottom: 14px; }
/* Ficha do cliente por separadores e filtros da lista de clientes */
.adm-separadores, .adm-filtros { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin: 8px 0 16px; }
.adm-separadores button, .adm-filtros button { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.adm-separadores button.ativo, .adm-filtros button.ativo { color: var(--text); border-bottom-color: var(--gold); }
.adm-filtros { border-bottom: 0; margin: 0 0 8px; }
.adm-clientes th[data-ordem] { cursor: pointer; }
.adm-seta-ordem { color: var(--gold); }
/* Módulos e pacotes (SQL 115) */
.adm-modulos { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0; }
.adm-modulos label { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 14px; }
.adm-modulos input { width: 18px; height: 18px; accent-color: var(--gold); }
/* Código QR do link (o fundo fica sempre branco, para a câmara o ler) */
.adm-qr { width: 160px; background: #fff; padding: 4px; }
.adm-qr svg, .adm-qr-grande svg { display: block; width: 100%; height: auto; }
.adm-folha-qr { text-align: center; }
/* Botões das folhas para imprimir: sempre visíveis sobre o fundo escuro, nos dois temas */
.adm-resumo-botoes { position: sticky; top: 0; z-index: 1; }
.adm-resumo-botoes .btn:not(.btn--gold) { background: #fff; color: #1c1b19; border-color: #fff; }
.adm-qr-grande { width: 60%; max-width: 360px; margin: 32px auto; }
.adm-sub-titulo { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.adm-grande { font-family: var(--font-display); font-size: 30px; color: var(--text); }
.adm-uso { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 4px 0; }
.adm-uso-barra { height: 100%; background: var(--st-done); }
.adm-uso-barra.atencao { background: var(--st-doing); }
.adm-uso-barra.mau { background: var(--st-todo); }
.adm-lista { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.adm-lista li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.adm-grafico { width: 100%; height: auto; max-height: 220px; display: block; }
.adm-grafico text { fill: var(--muted); font-size: 12px; font-family: var(--font-body); }
.adm-grafico .adm-grafico-valor { fill: var(--text); }
.adm-barra { fill: var(--faint); }
.adm-barra-atual { fill: var(--gold); }
/* Administração: lista de administradores e câmbio automático (SQL 112) */
.adm-admin { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); }
.adm-linha-form { display: flex; gap: 8px; margin-top: 12px; }
.adm-linha-form .input { flex: 1; }
.pc-pilha { display: grid; gap: 14px; }
.pc-rel-escolha { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0 16px; }
.pc-rel-escolha label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.pc-rel-escolha input { width: 20px; height: 20px; accent-color: var(--gold); }
.pc-rel-titulo { font-family: var(--font-display); font-weight: 500; font-size: 26px; margin: 28px 0 12px; }
.pc-relatorio th { pointer-events: none; }
.pc-rel-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1299px) { .pc-grelha, .pc-grelha.iguais { grid-template-columns: minmax(0, 1fr); } }
.pc-cartao { border: 1px solid var(--line); padding: 18px 20px; min-width: 0; overflow-x: auto; }
.pc-cartao h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.pc-cartao-nota { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.pc-legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pc-legenda i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pc-grafico { width: 100%; height: auto; display: block; overflow: visible; }
.pc-grafico text { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
.pc-grafico .pc-rotulo { fill: var(--text); }
.pc-eixo { stroke: var(--line); }
.pc-cruz { stroke: var(--line-strong); }
.pc-barra { fill: var(--faint); }
.pc-barra-atual { fill: var(--gold); }
.pc-atencao-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pc-atencao-item:last-child { border-bottom: 0; }
.pc-atencao-item .pc-cartao-nota { margin: 0; }
.pc-estado { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.pc-estado.mau, .pc-pill.mau { background: color-mix(in srgb, var(--st-todo) 16%, transparent); color: var(--st-todo); }
.pc-estado.atencao, .pc-pill.atencao { background: color-mix(in srgb, var(--st-doing) 16%, transparent); color: var(--st-doing); }
.pc-pill.bem { background: color-mix(in srgb, var(--st-done) 16%, transparent); color: var(--st-done); }
.pc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.pc-tabela th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line-strong); cursor: pointer; white-space: nowrap; }
.pc-tabela td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
.pc-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-tabela tr:hover td { background: var(--surface); }
.pc-casa { display: flex; align-items: center; gap: 10px; }
.pc-casa i { width: 10px; height: 10px; border-radius: 50%; }
.pc-pill { display: inline-block; min-width: 46px; text-align: center; padding: 3px 8px; border-radius: 3px; font-weight: 600; font-size: 13px; }
.pc-seta { color: var(--gold); }
.pc-destaque { font-family: var(--font-display); font-size: 30px; }
.pc-destaque.mau { color: var(--st-todo); }
.pc-dica { position: fixed; pointer-events: none; z-index: 60; background: var(--surface); border: 1px solid var(--line-strong); padding: 8px 10px;
  font-size: 12px; color: var(--text); white-space: nowrap; display: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pc-dica b { display: block; margin-bottom: 2px; }

/* ---------- Cabeçalho e barra de baixo (Estilo Noir) ---------- */
.topo { display: flex; flex-direction: column; gap: 4px; padding: calc(env(safe-area-inset-top) + 28px) var(--pad-x) 18px; max-width: 900px; margin: 0 auto; }
.topo .header-row { min-height: var(--touch); }
.topo-botoes { display: flex; gap: 16px; align-items: center; }
.conta { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); }
.user-chip__avatar { flex-shrink: 0; }
#subtitulo { margin-top: 6px; }
/* Título com botões ao lado (ex.: Filtros da Checklist) */
.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.titulo-linha #titulo { min-width: 0; }
#titulo-acoes:empty { display: none; }
#titulo-acoes { margin: 12px 0 -12px; } /* um pouco mais abaixo (longe do Sair), sem mexer no que vem a seguir */
body[data-ecra="tarefas"] #subtitulo { display: none; } /* esta página nunca tem subtítulo: sem a linha vazia por baixo do título */
main { padding: 8px var(--pad-x) calc(var(--altura-nav) + 24px + var(--fundo-seguro)); }

.separadores { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; padding-left: 0; padding-right: 0; }
#separadores:empty { display: none; } /* ao abrir, antes de haver menu: sem a linha (em baixo no telemóvel, à esquerda no computador) */
.separadores .tab { flex: 1; text-decoration: none; justify-content: center; }
.separadores .tab .icone { display: flex; }
.contador { 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; }

/* ---------- Checklist (Estilo Noir) ---------- */
body[data-ecra="checklist"] #ecra { display: flex; flex-direction: column; gap: 22px; }
.notice .nota-texto { margin: 0; white-space: pre-wrap; }
.notice .btn { align-self: flex-start; }
.tarefa-linha { font: inherit; }
.tarefa-linha:disabled { opacity: 0.6; }
.row__title { min-width: 0; }
.icone-foto { width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px; stroke: var(--muted); stroke-width: 1; fill: none; }
.vazio { padding: 16px 0; margin: 0; }
.ver-terminadas { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--touch); }
.ver-terminadas + .t-muted { margin: -14px 0 0; }

@media (orientation: landscape) and (max-height: 500px) {
  .topo { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 8px; }
  .topo .t-hero { font-size: 32px; }
}
/* 5 ou 6 separadores (gestor): letras menos espaçadas para os nomes não se tocarem */
.separadores:has(.tab:nth-child(5)) .tab { letter-spacing: 0.06em; font-size: 9.5px; }

/* ---------- Faltas (Estilo Noir) ---------- */
body[data-ecra="contagem"] #ecra { display: flex; flex-direction: column; gap: 22px; /* espaço para a barra de baixo + o botão "Submeter contagem" (fixo), para a última linha não ficar tapada */
  padding-bottom: calc(var(--altura-nav) + 110px + var(--fundo-seguro)); }
.input[type=search]::-webkit-search-cancel-button { filter: invert(0.6); }
.produto-linha { cursor: default; gap: 12px; }
.produto-texto { flex: 1; min-width: 0; }
.produto-texto .t-muted { margin-top: 2px; }
.stepper__btn, .stepper__value { padding: 0; }
.stepper__btn:active { background: var(--text); color: var(--bg); }
.stepper__value { font-variant-numeric: lining-nums; }
.btn--gold:disabled { opacity: 0.5; }

/* Teclado numérico em folha, por baixo */
.sheet-backdrop { align-items: stretch; justify-content: flex-end; z-index: 50; }
.sheet.folha-numeros { width: 100%; max-width: 480px; margin: 0 auto; align-items: center; }
.folha-numeros .t-label { align-self: stretch; text-align: center; }
.visor-folha { font-family: var(--font-display); font-size: 52px; line-height: 1; min-height: 52px; font-variant-numeric: lining-nums; }
.folha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; }

@media (orientation: landscape) and (min-width: 700px) {
  .lista-faltas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .sheet.folha-numeros { max-width: 640px; display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; padding-top: 12px; }
  .folha-numeros .t-label, .folha-numeros .visor-folha { grid-column: 1; }
  .folha-numeros .keypad { grid-column: 2; grid-row: 1 / span 3; }
  .folha-botoes { grid-column: 1; align-self: end; }
}

/* Botão só com ícone de traço (ações nas linhas): 44px, sem fundo */
.btn-icone { width: var(--touch); height: var(--touch); min-height: var(--touch); padding: 0; flex-shrink: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn-icone:active { color: var(--text); }
.btn-icone:disabled { opacity: 0.3; }
.icone-linha { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1; fill: none; }
/* Links com aspeto de botão e botões com ícone: altura certa e ícone ao lado do texto, ao centro. Sem isto, no estilo
   clássico um <a class="btn"> não ganha altura (o contorno colava ao texto e o ícone saía para cima). */
a.btn, .btn:has(> .icone-linha) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn .icone-linha { flex-shrink: 0; }

/* ---------- Horários (Estilo Noir) ---------- */
body[data-ecra="horarios"] #ecra { display: flex; flex-direction: column; gap: 24px; }
.semana { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.semana-datas { color: var(--text); }
.acoes-semana { display: flex; flex-wrap: wrap; gap: 12px; }
.acoes-semana .btn { flex: 1 1 200px; }
.aviso-publicar { margin: -12px 0 0; }
.segmento { display: flex; gap: 28px; }
.segmento button { background: none; border: 0; padding: 0; min-height: var(--touch); cursor: pointer; border-bottom: 1px solid transparent; }
.segmento button.ativo { color: var(--text); border-bottom-color: var(--text); }
.dia-titulo { padding-bottom: 2px; }
.dia.hoje .dia-titulo { color: var(--text); }
.turno { min-height: 52px; cursor: default; }
.turno-horas { width: 92px; flex-shrink: 0; font-size: var(--fs-small); color: var(--muted); }
.turno.meu .row__title { font-weight: 500; }
.turno .row__meta { color: var(--muted); }
.turno .estado-novo { color: var(--st-doing); }
.turno .estado-remover { color: var(--st-todo); }
.turno.a_remover .row__title { text-decoration: line-through; color: var(--done); }
.sem-turnos { padding: 14px 0; border-bottom: 1px solid var(--line); }
/* Cada dia: o nome e o "+ Turno" na mesma linha, com uma linha a separar os dias */
.dia-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-strong);
  margin-top: 12px; padding-top: 4px; }
.dia-cabecalho .dia-titulo { padding-bottom: 0; }
.adicionar { flex-shrink: 0; }
.dia { display: flex; flex-direction: column; }
.form-turno { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 4px; }
.input[type=time] { color-scheme: dark; }
@media (orientation: landscape) and (min-width: 700px) {
  body[data-ecra="horarios"] #ecra { display: grid; gap: 24px 40px; } /* dias em 2 colunas */
}

/* ---------- Notas (Estilo Noir) ---------- */
body[data-ecra="notas"] #ecra { padding-top: 8px; }
.notas { display: flex; flex-direction: column; gap: 22px; }
.titulo-notas { margin: 8px 0 0; }
#nota-acoes { display: flex; flex-direction: column; gap: 16px; }
.area-linha { width: 100%; min-height: var(--touch); border: 0 !important; border-bottom: 1px solid var(--line-input) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text); padding: 10px 0 !important; outline: none; }
.area-linha:focus { border-bottom-color: var(--gold) !important; }
.area-linha::placeholder { color: var(--faint); }
.nota-item { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.nota-item.afixada { border-left: 1px solid var(--gold); padding-left: 14px; } /* única barra lateral permitida */
/* Nota em destaque: o traço dourado e um fundo muito leve "respiram" devagar para sobressair */
@keyframes destaque-nota {
  0%, 100% { border-left-color: var(--gold); background-color: color-mix(in srgb, var(--gold) 22%, transparent); }
  50% { border-left-color: color-mix(in srgb, var(--gold) 25%, transparent); background-color: color-mix(in srgb, var(--gold) 4%, transparent); }
}
.nota-item.afixada { border-left-width: 3px; animation: destaque-nota 1.6s ease-in-out infinite; }
.nota-item.afixada .nota-cabeca .t-label { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .nota-item.afixada { animation: none; background-color: color-mix(in srgb, var(--gold) 15%, transparent); } }
.nota-cabeca { display: flex; align-items: center; gap: 0; min-height: var(--touch); }
.nota-cabeca .t-label { flex: 1; min-width: 0; line-height: 1.6; }
.nota-cabeca .btn-icone.ligado { color: var(--gold); }
.nota-cabeca .btn-icone.confirmar { width: auto; padding: 0 8px; color: var(--st-todo); font-size: var(--fs-small); }
.nota-apagada { color: var(--st-todo); }
.nota-corpo { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 0; color: var(--text); }
.nota-texto-corpo { white-space: pre-wrap; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.nota-item.aberto .nota-texto-corpo { display: block; }
.nota-item.apagada .nota-texto-corpo { color: var(--done); }
.versao-anterior { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); white-space: pre-wrap; }

/* ---------- Compras (Estilo Noir) ---------- */
body[data-ecra="compras"] #ecra { display: flex; flex-direction: column; gap: 28px; }
.fornecedor { display: flex; flex-direction: column; }
.fornecedor-nome { padding-bottom: 2px; color: var(--text); }
.fornecedor-nome:has(.t-num) { display: flex; justify-content: space-between; gap: 12px; }
.estimativa-compras { padding-bottom: 8px; }
.estimativa-nota { margin: 6px 0 var(--gap-l); font-size: 13px; }
.compra { gap: 14px; font: inherit; }
.compra .caixa { width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--line-input); display: flex; align-items: center; justify-content: center; }
.compra .caixa svg { width: 18px; height: 18px; stroke: var(--st-done); stroke-width: 1.5; fill: none; }
.compra-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.compra-qtd { font-family: var(--font-display); font-size: 22px; font-variant-numeric: lining-nums; }
.row--done .compra-texto .row__title { text-decoration: line-through; color: var(--done); }
.enviar-whatsapp { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.compras-acoes { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.compra-desta-vez { color: var(--gold); } /* comprado noutro fornecedor só desta vez (SQL 172) */
.limpar-compras.confirmar { border-color: var(--st-todo); color: var(--st-todo); }

/* ---------- Avisos do gestor (Estilo Noir) ---------- */
body[data-ecra="avisos"] #ecra { display: flex; flex-direction: column; gap: 36px; }
.avisos-gestor { display: flex; flex-direction: column; gap: 22px; }
.novo-aviso { display: flex; flex-direction: column; gap: 16px; }
.novo-aviso .btn { align-self: flex-start; min-width: 160px; }
.aviso-item { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.aviso-item .aviso-texto { white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 20px; }
.aviso-item.aberto .aviso-texto { display: block; }
.aviso-item .aviso-detalhe { display: none; flex-direction: column; gap: 4px; margin-top: 10px; }
.aviso-item.aberto .aviso-detalhe { display: flex; }
.por-ler { color: var(--st-todo); }
.nota-cabeca .btn--text { padding: 0 8px; }
.btn-icone.confirmar { width: auto; padding: 0 8px; color: var(--st-todo); font-size: var(--fs-small); }
#arquivados .btn--text:first-child { align-self: flex-start; }

/* ---------- Registos (Estilo Noir) ---------- */
body[data-ecra="registos"] #ecra { display: flex; flex-direction: column; gap: 22px; }
.notice.alerta { border-top-color: var(--st-todo); }
.notice.alerta .t-label { color: var(--st-todo); }
.notice .btn { align-self: flex-start; }
.registo-linha { align-items: flex-start; padding: 12px 0; cursor: default; }
.registo-linha .dot { margin-top: 8px; }
.registo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registo-linha .row__meta { padding-top: 2px; }
.ver-foto-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.ver-foto { background: rgba(0,0,0,0.95); }
.ver-foto img { border-radius: 0; }

/* ---------- Mais (Estilo Noir) ---------- */
body[data-ecra="mais"] #ecra { display: flex; flex-direction: column; gap: 32px; }
.menu-grupo { display: flex; flex-direction: column; gap: 4px; }
.menu-linha { text-decoration: none; color: var(--text); }
.menu-icone { display: flex; color: var(--muted); }
.menu-icone svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1; fill: none; }
.menu-linha .icone-linha { color: var(--faint); }
.interruptor-linha { cursor: pointer; padding: 12px 0; }
.interruptor-linha .row__title { display: flex; flex-direction: column; gap: 4px; }
/* Interruptor fino: contorno de 1px e bolinha marfim; fundo dourado quando ligado */
.interruptor { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 44px; height: 24px; min-height: 24px; margin: 0;
  border: 1px solid var(--line-input); border-radius: 12px; background: transparent; position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.interruptor:checked { background: var(--gold); border-color: var(--gold); }
.interruptor:checked::after { transform: translateX(20px); }

@media (orientation: landscape) and (min-width: 700px) {
  body[data-ecra="compras"] #ecra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  .limpar-compras { grid-column: 1 / -1; }
}

/* ---------- Janelas por cima (formulários, organizar separadores) ---------- */
.modal { background: var(--surface); border-top: 1px solid var(--gold); border-radius: 0; padding: 22px var(--pad-x) max(22px, env(safe-area-inset-bottom)); max-width: 520px; }
.formulario { gap: 18px; }
.formulario h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.1; }
.formulario .field small, .interruptor-linha small { margin-top: 4px; letter-spacing: 0; text-transform: none; }
.formulario .erro-texto { margin: 0; min-height: 0; }
.formulario .erro-texto:empty { display: none; }
.btn.apagar { align-self: flex-start; color: var(--st-todo); }
.btn--text.apagar { border-color: var(--st-todo); color: var(--st-todo); }
.btn.apagar[data-confirmar] { color: var(--st-todo); text-decoration: underline; }
.formulario .list { margin: 0 calc(-1 * var(--pad-x)); padding: 0 var(--pad-x); }
.linha-separador { gap: 4px; min-height: 56px; }
.separador-escolha { flex: 1; display: flex; align-items: center; gap: 14px; min-height: var(--touch); cursor: pointer; }

/* Selecionar vários para apagar */
body.a-selecionar #ecra [data-id] { outline: 1px dashed var(--line-strong); outline-offset: -1px; }
body.a-selecionar #ecra [data-id].selecionado { outline: 1px solid var(--st-todo); background: rgba(208, 88, 74, 0.08); }
.btn.apagar-varios { background: transparent; border-color: var(--st-todo); color: var(--st-todo); }
.btn.apagar-varios:disabled { opacity: 0.4; }
.btn.apagar-varios[data-confirmar] { background: var(--st-todo); color: #000; }

/* ---------- Conta ---------- */
.conta-pagina { gap: 10px; max-width: 380px; margin: 8px auto 0; }
.conta-botoes { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.notificacoes-conta { width: 100%; margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.notificacoes-conta .t-muted { margin: 0; }

/* ---------- Vídeos ---------- */
body[data-ecra="videos"] #ecra { display: flex; flex-direction: column; gap: 22px; }
.videos { gap: 28px 24px; }
.video { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.video.visto { opacity: 1; }
.video.visto .row__title { color: var(--muted); }
.miniatura { background: var(--surface); border: 0; }
.miniatura .play { width: 56px; height: 56px; border: 1px solid var(--text); background: rgba(0, 0, 0, 0.5); }
.miniatura .play svg { width: 22px; height: 22px; fill: var(--text); margin-left: 3px; }
.video-info { padding: 14px 0 0; gap: 6px; }
.video-info .marcar { align-self: flex-start; margin-top: 8px; }
.visto-sim { display: inline-flex; align-items: center; gap: 6px; color: var(--st-done); }
.abrir-youtube { justify-content: flex-start; color: var(--muted); }
.progresso-bloco { display: flex; flex-direction: column; gap: 10px; }
.barra-progresso { height: 2px; background: var(--line-strong); border-radius: 0; margin-top: 8px; }
.barra-progresso span { background: var(--st-done); }
.linha-progresso { margin-top: 6px; }

/* ---------- Ecrãs de configuração ---------- */
body[data-ecra="equipa"] #ecra, body[data-ecra="fornecedores"] #ecra, body[data-ecra="produtos"] #ecra, body[data-ecra="tarefas"] #ecra,
body[data-ecra="gerir_videos"] #ecra, body[data-ecra="temas"] #ecra, body[data-ecra="historico"] #ecra { display: flex; flex-direction: column; gap: 16px; }
#selecionar { align-self: flex-start; }
/* "Selecionar vários" e o botão Filtros na mesma linha (Tarefas da checklist) */
.selecionar-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--gap-l); }
.selecionar-filtros .menu-filtros { margin-left: auto; }
.lista-config { gap: 0; margin-top: 0; }
.item-config { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 12px 0; min-height: 62px; justify-content: center; gap: 4px; color: var(--text); font: inherit; }
.item-config strong { font-weight: 400; }
.tarefa-hora { color: var(--muted); font-size: var(--fs-small); margin-right: 8px; }
.seccao-italico { font-family: var(--font-display); font-style: italic; font-size: 15px; }
.config-linha { align-items: flex-start; padding: 12px 0; cursor: default; gap: 12px; }
.config-linha .row__title { display: flex; flex-direction: column; gap: 4px; }
/* Mais → Tarefas: as definições num bloco que abre e fecha (fechado: uma linha com o resumo) */
.bloco-definicoes { margin-bottom: var(--gap-l); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bloco-definicoes > summary { display: flex; align-items: center; gap: 12px; min-height: var(--touch); padding: 12px 14px; cursor: pointer; list-style: none; }
.bloco-definicoes > summary::-webkit-details-marker { display: none; }
.bloco-definicoes > summary .row__title { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bloco-definicoes > summary::after { content: ''; width: 8px; height: 8px; border: solid var(--gold); border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform .2s; flex-shrink: 0; }
.bloco-definicoes[open] > summary::after { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.bloco-definicoes > .list { padding: 0 10px 10px; }
.produto-texto.item-texto { display: flex; flex-direction: column; gap: 2px; color: var(--text); font: inherit; }
.detalhe { background: none; border-radius: 0; margin: 0; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.detalhe th { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.detalhe td { border-top: 1px solid var(--line); font-size: var(--fs-small); }
.detalhe tr.abaixo td { color: var(--st-todo); }

@media (orientation: landscape) and (min-width: 700px) {
  .lista-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
}

/* Foco do teclado (acessibilidade): linha fina dourada em vez do contorno do browser */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* Registos: linha da tarefa (toca para abrir o histórico do dia) */
.registo-tarefa > .registo-linha { cursor: pointer; font: inherit; color: var(--text); }
.registo-tarefa > .registo-linha .registo-texto { display: flex; flex-direction: column; gap: 2px; }
.registo-tarefa.aberto > .registo-linha { border-bottom-color: transparent; }
.registo-historico { padding: 0 0 8px 21px; border-bottom: 1px solid var(--line); }
.registo-passo { min-height: 44px; padding: 6px 0; border-bottom: 0; }
.registo-passo .registo-texto > div:first-child { font-size: 15px; }

/* Produtos agrupados por local de armazenamento (Faltas e Produtos e mínimos) */
.locais { display: flex; flex-direction: column; gap: 26px; }
.local-titulo { display: flex; justify-content: space-between; color: var(--text); padding-bottom: 2px; border-bottom: 1px solid var(--gold); }
.local-conta { color: var(--muted); letter-spacing: 0.1em; }

/* Avisos em destaque: fundo dourado suave (na Checklist do empregado e na lista do gestor) */
body[data-ecra="checklist"] .notice { background: color-mix(in srgb, var(--gold) 13%, transparent); padding: 16px; }
.aviso-item:not(.arquivado) { background: color-mix(in srgb, var(--gold) 13%, transparent); padding: 12px 14px 14px; margin-bottom: 10px; border-bottom: 0; }

/* Aviso na Checklist, compacto: texto em 2 linhas (toca para ver tudo) e um "Li" pequeno à direita */
.aviso-check { display: flex; align-items: center; gap: 4px; padding: 8px 4px 8px 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); border-left: 2px solid var(--gold); }
.aviso-check-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--text); min-height: 0; }
.aviso-check-texto { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.25; white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.aviso-check.aberto .aviso-check-texto { display: block; }
.aviso-li { width: auto; min-width: var(--touch); padding: 0 8px; gap: 4px; flex-direction: column; color: var(--gold); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.aviso-li .icone-linha { width: 24px; height: 24px; stroke-width: 1.5; }
.aviso-check .t-label { letter-spacing: 0.15em; }
.aviso-check + .aviso-check { margin-top: -14px; } /* avisos seguidos ficam juntos */
/* Aviso por ler na Checklist: pisca como o ícone da Checklist (mesmo ritmo), para chamar a atenção */
@keyframes aviso-pulsar { 50% { border-left-color: color-mix(in srgb, var(--gold) 20%, transparent); background-color: color-mix(in srgb, var(--gold) 3%, transparent); } }
.aviso-check { animation: aviso-pulsar 1.2s ease-in-out infinite; }
.aviso-li svg { animation: piscar 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .aviso-check, .aviso-li svg { animation: none; } }

/* Ao mudar de ecrã: o anterior fica esbatido enquanto o novo carrega (só se demorar mais de 0,2 s) */
#ecra { transition: opacity 0.15s; }
#ecra.a-carregar { opacity: 0.35; pointer-events: none; transition-delay: 0.2s; }

/* Troca de aba sem saltos: a linha do resumo fica sempre reservada e o ecrã novo entra suavemente */
#subtitulo { min-height: 1.4em; }
@keyframes entrar-ecra { from { opacity: 0; } }
#ecra.entrar { animation: entrar-ecra 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) { #ecra.entrar { animation: none; } }
/* Telemóvel deitado: cabeçalho numa linha (título à esquerda, pessoa e Sair à direita), sem a data */
@media (orientation: landscape) and (max-height: 500px) {
  .topo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; padding-top: calc(env(safe-area-inset-top) + 6px); padding-bottom: 4px; }
  .topo .t-hero { order: 1; font-size: 26px; }
  .topo-casa { order: 0; font-size: 18px; }
  .topo .header-row { order: 2; margin-left: auto; min-height: 0; }
  #topo-data { display: none; }
  #subtitulo { order: 3; flex-basis: 100%; min-height: 0; margin-top: 0; }
}
/* PIN em telemóveis baixos (ex.: iPhone SE): sem logótipo e teclas um pouco menores, para caber sem deslizar */
@media (orientation: portrait) and (max-height: 740px) {
  .login-pin { padding-top: max(16px, env(safe-area-inset-top)); }
  .login-pin .lh-logo { display: none; }
  .pin-info .avatar { margin-top: 0; }
  .login-pin .keypad { margin-top: 20px; grid-template-columns: repeat(3, 64px); row-gap: 12px; }
  .login-pin .key { width: 64px; height: 64px; font-size: 30px; }
}

/* Checklist: manter o dedo numa tarefa não seleciona texto nem abre o menu do telemóvel */
.tarefa-linha { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Mensagem com "Desfazer" */
.mensagem.com-desfazer { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 16px; text-align: left; }
.mensagem .desfazer { flex-shrink: 0; min-height: var(--touch); padding: 0 10px; color: var(--gold); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* Escolher o estado (toque longo) */
.sheet.escolher-estado { width: 100%; max-width: 480px; margin: 0 auto; }
.estado-opcao { font: inherit; }
.estado-opcao.atual .row__title { color: var(--gold); }

/* Idioma: botão no ecrã de entrada e escolha em Conta */
.idioma-troca { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 16px; color: var(--muted); }
.login-entrada { position: relative; }
.idioma-conta { width: 100%; margin-top: 32px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.notificacoes-conta > .t-ruled { justify-content: center; } /* título "Notificações" ao centro, como o do idioma */

.lembrete-ajuda { margin: 0; text-align: center; }
.lembrete-turno { width: 100%; max-width: 280px; }

/* Avisos e notas traduzidos: aviso pequeno e o original só quando se abre */
.traduzido { display: block; margin-top: 4px; font-family: var(--font-body); font-style: normal; font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.texto-original { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--font-body); font-style: normal;
  font-size: var(--fs-small); color: var(--muted); white-space: pre-wrap; }
.texto-original .t-label { display: block; margin-bottom: 2px; }
.aberto .texto-original { display: block; }

/* Parecer app e não página: tocar ou manter o dedo não seleciona texto nem abre o menu do browser
   (copiar, partilhar…). As caixas onde se escreve continuam a deixar selecionar e colar. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Regras das notas (primeira vez) */
.sheet.regras-notas { width: 100%; max-width: 520px; margin: 0 auto; }
.regras-notas h2 { margin: 0; }
.regras-notas p { margin: 0; line-height: 1.45; }
.aceitar-regras { display: flex; align-items: center; gap: 12px; min-height: var(--touch); cursor: pointer; }
.aceitar-regras input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--gold); flex-shrink: 0; }
#regras-continuar:disabled { opacity: 0.4; }

/* Registos: a cor do estado, ao de leve (fundo e texto do estado) */
.registo-tarefa.estado--todo > .registo-linha, .registo-linha.estado--todo { background: color-mix(in srgb, var(--st-todo) 14%, transparent); }
.registo-tarefa.estado--doing > .registo-linha, .registo-linha.estado--doing { background: color-mix(in srgb, var(--st-doing) 14%, transparent); }
.registo-tarefa.estado--done > .registo-linha, .registo-linha.estado--done { background: color-mix(in srgb, var(--st-done) 14%, transparent); }
.estado--todo .estado-rotulo { color: var(--st-todo); }
.estado--doing .estado-rotulo { color: var(--st-doing); }
.estado--done .estado-rotulo { color: var(--st-done); }
.registo-tarefa > .registo-linha, .registo-linha[class*="estado--"] { padding-left: 10px; padding-right: 10px; }

/* ---------- Segurança alimentar (HACCP) ---------- */
.haccp-vistas { margin: 4px 0 8px; }
.haccp-ajuda { margin: 0 0 4px; }
.haccp-titulo { margin-top: 24px; }
.haccp-equip { cursor: pointer; font: inherit; color: var(--text); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; align-items: flex-start; padding: 12px 0; }
.haccp-equip .dot, .haccp-registo .dot { margin-top: 8px; }
.haccp-equip .row__meta { padding-top: 2px; white-space: nowrap; }
.haccp-registo { align-items: flex-start; padding: 12px 0; }
.haccp-fora { color: var(--st-todo); }
.haccp-ok { color: var(--st-done); } /* temperatura dentro dos limites: verde, para se ver logo que está tudo bem */
.menu-linha .resumo-sensores { display: block; font-size: 13px; margin-top: 2px; }
.haccp-anulado { color: var(--st-todo); font-size: 0.85em; margin-top: 2px; }
.haccp-registo.anulado .haccp-valor, .tabela-inspecao .anulado, .tabela-inspecao tr.anulado td:not(:has(.haccp-anulado)) { text-decoration: line-through; opacity: 0.6; }
.key.key--sinal { grid-column: 1 / -1; width: 100%; height: 48px; border-radius: 999px; font-family: var(--font-body);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.key.key--sinal.ativo { border-color: var(--gold); color: var(--gold); }
.key.key--sinal:active { background: transparent; }

/* Modo inspeção */
.inspecao-acoes { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.inspecao-acoes .field { flex: 1; }
.inspecao h3 { margin: 28px 0 8px; }
.tabela-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-inspecao { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.tabela-inspecao th, .tabela-inspecao td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.tabela-inspecao th { font-weight: 500; white-space: nowrap; }
.tabela-inspecao td { min-width: 70px; }
.tabela-inspecao .coluna-dia { width: 1%; white-space: nowrap; }
.tabela-inspecao .leitura { white-space: nowrap; line-height: 1.35; }
.so-imprimir { display: none; }

@media print {
  @page { margin: 12mm; }
  :root { color-scheme: light; }
  .inspecao { font-size: 9.5pt; }
  .inspecao h2 { font-size: 16pt; margin: 0 0 4px; }
  .inspecao > p { margin: 0 0 6px; font-size: 8.5pt; }
  .inspecao h3 { margin: 12px 0 4px; font-size: 8pt; }
  .tabela-inspecao { font-size: 9pt; }
  .tabela-inspecao th, .tabela-inspecao td { padding: 3px 5px; min-width: 0; }
  .tabela-inspecao th .t-muted { font-size: 8pt; }
  html, body { background: #fff !important; color: #000 !important; }
  .topo, .tabbar, .separadores, .nao-imprimir, .mensagem { display: none !important; }
  .so-imprimir { display: block; color: #000; }
  #ecra { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .inspecao, .inspecao * { color: #000 !important; background: transparent !important; }
  .inspecao .haccp-fora, .inspecao .haccp-fora * , .inspecao .haccp-anulado { color: #b00000 !important; font-weight: 600; }
  .tabela-rolar { overflow: visible; }
  .tabela-inspecao th, .tabela-inspecao td { border-color: #999 !important; }
  .tabela-inspecao tr { break-inside: avoid; }
  /* Painel do dono: só o conteúdo, cada secção do relatório numa página nova. */
  body.painel-pc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.painel-pc .pc-lado, body.painel-pc .pc-periodo, body.painel-pc .pc-datas, body.painel-pc .pc-casas,
  body.painel-pc .pc-exportar, .pc-dica { display: none !important; }
  body.painel-pc .pc { display: block; min-height: 0; }
  body.painel-pc .pc-conteudo { padding: 0; max-width: none; }
  body.painel-pc .pc-topo h1 { font-size: 24pt; }
  .pc-rel-cabecalho { font-size: 9pt; margin: 0 0 4px; }
  .pc-cartao { overflow: visible; }
  .pc-cartao, .pc-kpi, .pc-tabela tr, .pc-atencao-item { break-inside: avoid; }
  .pc-rel-seccao + .pc-rel-seccao { break-before: page; }
  .pc-rel-titulo { margin-top: 0; }
  .pc-kpis, .pc-kpis.quatro { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .pc-grafico { max-height: 230px; }
  .pc-val { font-size: 22px; }
  .pc-cartao, .pc-kpi { padding: 10px 12px; }
  .pc-tabela { font-size: 9pt; }
  .pc-tabela td, .pc-tabela th { padding: 5px 6px; }
  .pc-tabela th { white-space: normal; letter-spacing: .04em; font-size: 7pt; }
}

/* Sub-abas no topo (Vídeos, Históricos): cabem num telemóvel; se não couberem, deslizam para o lado */
.sub-abas { gap: 12px; justify-content: space-between; margin: 4px 0 8px; overflow-x: auto; scrollbar-width: none; }
.sub-abas::-webkit-scrollbar { display: none; }
.sub-abas button { white-space: nowrap; flex-shrink: 0; letter-spacing: 0.12em; }

/* Ecrã do PIN: botão da impressão digital / Face ID */
.key--bio { display: flex; align-items: center; justify-content: center; color: var(--gold); }
.key--bio svg { width: 34px; height: 34px; }

/* Checklist: tarefa por iniciar com a hora já passada — o fundo pisca a vermelho, devagar */
/* (o fundo fica numa camada por trás, um pouco mais larga, para o texto não sair do alinhamento das outras) */
.tarefa-linha.atrasada { position: relative; isolation: isolate; }
.tarefa-linha.atrasada::before { content: ''; position: absolute; inset: 0 -10px; z-index: -1; pointer-events: none;
  animation: tarefa-atrasada 1.8s ease-in-out infinite; }
.tarefa-linha.atrasada .row__time { color: var(--st-todo); }
@keyframes tarefa-atrasada { 50% { background-color: color-mix(in srgb, var(--st-todo) 22%, transparent); } }
/* Estilo com cartões: o fundo fica dentro do cartão (não sai pelos lados nem pelos cantos redondos) */
:root[data-estilo="moderno"] .tarefa-linha.atrasada::before { inset: 0; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
  .tarefa-linha.atrasada::before { animation: none; background-color: color-mix(in srgb, var(--st-todo) 14%, transparent); }
}

/* Indicador de carregamento (só aparece se a espera passar de 0,3 s) */
.indicador-carregar { position: fixed; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 70;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 20%, transparent); border-top-color: var(--gold);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; }
.a-abrir { position: fixed; left: 0; right: 0; top: calc(50% + 32px); text-align: center; }
.indicador-carregar.visivel { opacity: 1; visibility: visible; animation: girar-indicador 0.8s linear infinite; }
@keyframes girar-indicador { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .indicador-carregar.visivel { animation-duration: 2s; } }

/* ---------- Custos e preços ---------- */
.custos-ajuda { margin: 0; }
.item-custo { cursor: pointer; font: inherit; color: var(--text); background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; align-items: flex-start; padding: 12px 0; }
.item-custo .row__meta { padding-top: 2px; white-space: nowrap; text-align: right; }
.item-custo .row__meta small { color: var(--muted); font-size: 0.8em; }
.custo-problema { color: var(--st-todo); }
.sugestao-ia { color: var(--gold); }
.a-ler-fatura { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 8px 0; }
.a-ler-fatura .spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-top-color: var(--gold); animation: girar-indicador 0.8s linear infinite; }
.item-custo.com-problema .row__title { color: var(--st-todo); }
.ficha-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 16px; margin: 4px 0 8px; }
.ficha-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.ficha-resumo strong { font-weight: 500; }
.ficha-resumo small { color: var(--muted); font-weight: 400; }
.voltar-ficha { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding-left: 0; }
.so-problemas { min-height: var(--touch); }

/* Formulário: título de uma parte (ex.: Stock / Preço de compra) */
.form-titulo { margin: 14px 0 0; color: var(--gold); }

/* ---------- Faturas ---------- */
.enviar-fatura .pagina-fatura { align-items: center; }
.enviar-fatura .pagina-fatura .row__title { flex: 1; }
.paginas-fatura { display: flex; flex-wrap: wrap; gap: 8px; }
.avisos-fatura { border-left: 2px solid var(--st-todo); padding-left: 12px; }
.avisos-fatura p { margin: 4px 0; }
.acoes-fatura { margin-top: 8px; }
.ver-fatura img { max-width: 100%; max-height: 85vh; object-fit: contain; touch-action: pinch-zoom; }
.contador-linha { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px;
  background: var(--st-todo); color: #fff; font-size: 12px; text-align: center; line-height: 20px; }

/* Administração com o aspeto proposto no Stitch (25/10): cartões arredondados, números em letra de máquina, menu em grupos */
:root { --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; }
/* O conteúdo ocupa a largura toda da coluna (até 1200 px); sem isto ficava estreito nos ecrãs com grelhas automáticas */
body.com-painel .adm-conteudo { width: 100%; box-sizing: border-box; }
.adm-cartao { border-radius: 12px; background: var(--surface); }
.adm-grande, .adm-numero strong, .adm-caixas strong, .adm-sincronizado strong, .adm-mes-etiqueta, .adm-etiqueta { font-family: var(--mono); }
.adm-inicio-topo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.adm-sincronizado { font-size: 13px; color: var(--muted); }
.adm-sincronizado strong { font-weight: 500; color: var(--gold); border: 1px solid currentColor; border-radius: 6px; padding: 2px 8px; margin-left: 4px; }
.adm-numeros.adm-numeros--inicio { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: none; border: 0; }
.adm-numero { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  text-decoration: none; color: inherit; }
.adm-numero > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-numero-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.adm-numero strong { font-size: 26px; font-weight: 500; color: var(--text); white-space: nowrap; }
.adm-numero strong.uso--ativo { color: var(--st-done); }
.adm-numero strong.uso--pouco { color: var(--st-doing); }
.adm-numero strong.uso--parado { color: var(--st-todo); }
.adm-numero small { font-size: 12px; color: var(--muted); }
.adm-numero--alerta { border-color: color-mix(in srgb, var(--st-todo) 60%, transparent); }
.adm-etiqueta { font-style: normal; font-size: 11px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 6px; color: var(--muted); white-space: nowrap; }
.adm-etiqueta.uso--ativo { color: var(--st-done); }
.adm-etiqueta.uso--pouco { color: var(--st-doing); }
.adm-etiqueta.uso--parado { color: var(--st-todo); }
.adm-neutro { color: var(--muted); }
.adm-mes-etiqueta { float: right; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; }
.adm-sub-titulo--pequeno { margin-top: 12px; font-size: 11px; }
.adm-cartao-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.adm-cartao-rodape a { color: var(--gold); text-decoration: none; }
.adm-estado-grande { display: flex; align-items: center; gap: 12px; }
.adm-visto { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor;
  border-radius: 10px; font-size: 20px; }
.adm-estado-grande strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--text); }
.adm-estado-grande small { font-size: 13px; }
.adm-caixas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-caixas > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.adm-caixas span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.adm-caixas strong { font-size: 18px; font-weight: 500; color: var(--text); }
.adm-acoes-cartao { margin-top: 14px; }
.adm-acoes-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.adm-filtros.adm-filtros--pequenos { margin: 0; }
.adm-filtros--pequenos button { min-height: 36px; font-size: 13px; padding: 0 12px; }
.adm-lista-acoes li { display: flex; align-items: center; gap: 12px; }
.adm-ponto { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.adm-acao-texto { flex: 1; min-width: 0; }
.adm-acao-texto small { display: block; font-size: 12px; color: var(--muted); }
.adm-lista-acoes .adm-quando { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
/* Menu em grupos, "Novo cliente" em destaque e o administrador no fundo (só no computador) */
.adm-menu-grupo, .adm-eu { display: none; }
.adm-contador--neutro { background: var(--line-strong); color: var(--text); }
/* Ícones do menu e do topo */
.adm-icone { width: 18px; height: 18px; flex-shrink: 0; }
.adm-menu a .adm-icone { opacity: .75; }
.adm-menu a.ativo .adm-icone { opacity: 1; color: var(--gold); }
.adm-menu .adm-novo .adm-icone { opacity: 1; }
.adm-menu a .adm-contador { margin-left: auto; }
.adm-botao-icone { display: inline-flex; align-items: center; gap: 6px; }
.adm-botao-icone .adm-icone { width: 16px; height: 16px; }
.adm-marca { display: flex; align-items: center; gap: 10px; }
.adm-marca-logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold);
  border-radius: 9px; color: var(--gold); }
.adm-pesquisa-topo > .adm-icone { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted);
  pointer-events: none; }
.adm-pesquisa-topo .input { padding-left: 34px; }
/* Pesquisa no topo (só no computador) */
.adm-pesquisa-topo { display: none; position: relative; flex: 1; max-width: 420px; }
.adm-pesquisa-topo .input { width: 100%; padding-right: 64px; }
.adm-pesquisa-topo kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; pointer-events: none; }
.adm-resultados { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; padding: 6px; background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.adm-resultados button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.adm-resultados button:hover { background: var(--surface); }
.adm-resultados span { display: block; font-size: 12px; color: var(--muted); }
.adm-resultados .t-muted { margin: 6px 10px; }
@media (min-width: 900px) {
  .adm-pesquisa-topo { display: block; }
  .adm-menu-grupo { display: block; padding: 16px 14px 4px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .adm-menu .adm-novo { margin: 0 0 4px; justify-content: center; border-radius: 10px; border-left: 0; background: var(--gold); color: var(--bg);
    font-weight: 600; }
  .adm-menu .adm-novo.ativo { background: var(--gold); }
  .adm-menu a { border-radius: 8px; }
  .adm-eu { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); font-size: 13px;
    color: var(--text); }
  .adm-eu small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
  .adm-eu-avatar { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold);
    border-radius: 50%; color: var(--gold); font-size: 13px; }
}

/* Páginas da administração com o aspeto do Stitch (25/10): cabeçalho, filtros, tabelas em cartão, consumos, alertas e grupos.
   Só a arrumação vem do Stitch; cores e letras são as da app (os dois temas). */
.adm-cabeca { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; }
.adm-cabeca .adm-titulo { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.adm-cabeca .adm-titulo .adm-etiqueta { font-family: var(--mono); font-size: 12px; }
.adm-cabeca p { margin: 6px 0 0; max-width: 680px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.adm-cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-cabeca-acoes .adm-mes { margin: 0; min-width: 190px; }
.adm-cabeca-acoes a.btn { text-decoration: none; }
.adm-etiqueta--ouro, .adm-ouro { color: var(--gold); }
.adm-etiqueta .adm-ponto { display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: middle; }
.adm-mono { font-family: var(--mono); }
.adm-avatar { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--bg); font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }
.adm-cliente-cel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-cliente-cel .adm-etiqueta { margin-left: 6px; }
.adm-cambio { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.adm-cambio .adm-ponto { width: 6px; height: 6px; }
.adm-info { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--muted); }
.adm-info p { margin: 0; }
.adm-info > .adm-icone { color: var(--gold); margin-top: 1px; }
.adm-info a { color: var(--gold); text-decoration: none; white-space: nowrap; }
/* Filtros num cartão: pesquisa, pílulas com o número de cada estado e caixas de escolha */
.adm-cartao.adm-barra-filtros { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.adm-pesquisa-caixa { position: relative; display: block; flex: 1 1 240px; }
.adm-pesquisa-caixa > .adm-icone { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted);
  pointer-events: none; }
.adm-pesquisa-caixa .input { width: 100%; margin: 0; padding-left: 34px; }
.adm-pesquisa-caixa--pequena { flex: 0 1 280px; }
.adm-pilulas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.adm-pilulas button { min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer; }
.adm-pilulas button small { font-family: var(--mono); font-size: 11px; opacity: .8; }
.adm-pilulas button.ativo { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold); }
.adm-caixas-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-caixas-filtro .select { min-width: 170px; }
/* Tabelas dentro de um cartão, com título e rodapé */
.adm-cartao.adm-cartao--tabela { padding: 0; gap: 0; overflow-x: auto; }
.adm-cartao--tabela .adm-tabela th:first-child, .adm-cartao--tabela .adm-tabela td:first-child { padding-left: 16px; }
.adm-cartao--tabela .adm-tabela th:last-child, .adm-cartao--tabela .adm-tabela td:last-child { padding-right: 16px; }
.adm-cartao--tabela .adm-a-carregar { padding: 16px; }
.adm-tabela-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px;
  border-bottom: 1px solid var(--line); }
.adm-tabela-topo h2 { display: flex; align-items: center; gap: 8px; }
.adm-tabela-rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.adm-tabela-rodape strong { color: var(--text); }
.adm-tabela-rodape .adm-ponto { display: inline-block; margin-right: 4px; }
.adm-tabela { font-variant-numeric: tabular-nums; }
.adm-tabela tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.adm-tabela tfoot td { border-top: 1px solid var(--line-strong); }
.adm-grupo-linha td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.adm-grupo-linha .adm-icone { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--gold); }
.adm-grupo-linha .adm-etiqueta { margin-left: 8px; letter-spacing: .05em; }
.adm-linha-destaque td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.adm-pastilha { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.adm-pastilha--ouro { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
/* Consumos: gráfico à esquerda, números à direita */
.adm-consumos-topo { display: grid; gap: 14px; margin-bottom: 20px; }
.adm-consumos-topo .adm-numeros { margin: 0; }
.adm-grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.adm-grafico-legenda strong { font-family: var(--mono); font-weight: 500; color: var(--text); }
.adm-grafico-legenda .adm-ponto { display: inline-block; margin-right: 6px; }
/* Alertas e saúde */
.adm-secao { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.adm-secao .adm-icone, .adm-cartao-titulo .adm-icone { color: var(--gold); }
.adm-cartao h2.adm-cartao-titulo { display: flex; align-items: center; gap: 8px; }
.adm-alerta { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--st-doing); border-radius: 12px;
  background: var(--surface); }
.adm-alerta--grave { border-left-color: var(--st-todo); }
.adm-alerta-icone { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  color: var(--st-doing); background: color-mix(in srgb, currentColor 12%, transparent); }
.adm-alerta--grave .adm-alerta-icone { color: var(--st-todo); }
.adm-alerta strong { color: var(--text); }
.adm-alerta p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.adm-cartao.adm-tudo-bem { flex-direction: row; align-items: center; color: var(--st-done); }
.adm-grelha.adm-grelha--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 20px; }
.adm-consola { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font-family: var(--mono); font-size: 12px; }
.adm-consola-linha { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; padding: 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--st-done); }
.adm-consola-linha > span:nth-child(2) { color: var(--text); }
.adm-consola-linha small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.adm-consola-linha.mau { color: var(--st-todo); }
/* Grupos: os grupos à esquerda e "Juntar restaurantes" à direita (no computador) */
.adm-grupos-layout { display: grid; gap: 14px; align-items: start; }
.adm-grupos-lista { display: flex; flex-direction: column; gap: 14px; }
.adm-grupos-layout .adm-grupo { margin-top: 0; }
.adm-grupo-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adm-gerir.adm-gerir--coluna { flex-direction: column; align-items: stretch; }
.adm-interruptor > .adm-icone { color: var(--gold); margin-right: 12px; }
.adm-casa { gap: 12px; }
.adm-casa > span:nth-child(2) { flex: 1; min-width: 0; }
@media (min-width: 1100px) {
  .adm-consumos-topo { grid-template-columns: 1.4fr 1fr; }
  .adm-numeros.adm-numeros--coluna { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-content: start; }
  .adm-grupos-layout { grid-template-columns: 1.6fr 1fr; }
  .adm-grupos-lado { position: sticky; top: 16px; }
}

/* Definições, Registo, Novo cliente e Comunicados no mesmo estilo (25/10) */
.adm-duas-colunas, .adm-novo-layout { display: grid; gap: 14px; align-items: start; }
.adm-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.adm-rotulo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adm-caixa-valor { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.adm-valor-grande { font-family: var(--mono); font-size: 30px; color: var(--gold); }
.adm-valor-grande small { font-size: 13px; color: var(--muted); }
.adm-caixa-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.adm-campo-euro { display: flex; align-items: center; gap: 10px; }
.field > .adm-campo-euro { font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text); }
.adm-campo-euro b { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--gold); }
.adm-campo-euro .input { flex: 1; font-family: var(--mono); }
.adm-campo-euro small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.adm-pacotes { display: flex; flex-direction: column; gap: 10px; }
.adm-pacote { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.adm-pacote-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.adm-pacote-topo strong { font-size: 16px; font-weight: 500; color: var(--text); }
.adm-pacote-topo .adm-ponto, .adm-ponto--linha { display: inline-block; }
.adm-ponto--linha { width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; }
.adm-pacote > button { align-self: flex-end; color: var(--gold); }
.adm-pacote-form { padding: 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 10px; }
.adm-modulos-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-modulo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--text); }
.adm-modulo .adm-icone { width: 14px; height: 14px; color: var(--gold); }
.adm-quando-dupla { font-size: 12px; white-space: nowrap; }
.adm-quando-dupla span { display: block; }
.adm-paginas { display: flex; align-items: center; gap: 12px; }
.adm-paginas .btn[disabled] { opacity: .4; }
/* Novo cliente: formulário em passos à esquerda, resumo à direita */
.adm-passo { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.adm-cartao h2.adm-passo-titulo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.adm-passo-n { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gold);
  border-radius: 50%; font-family: var(--mono); font-size: 12px; color: var(--gold); }
.adm-link-previa { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.adm-link-previa.mau { color: var(--st-todo); }
.adm-botao-centro { justify-content: center; }
.adm-qr-pequeno { align-self: flex-start; padding: 6px; border-radius: 8px; background: #fff; }
.adm-qr-pequeno svg { display: block; width: 132px; height: 132px; }
.adm-passos-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.adm-contador-texto { align-self: flex-end; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.adm-uso--pequeno { height: 4px; margin-top: 6px; min-width: 80px; }
.adm-tabela-espaco { margin-top: 14px; }
@media (min-width: 1100px) {
  .adm-duas-colunas { grid-template-columns: 1fr 1.2fr; }
  .adm-novo-layout { grid-template-columns: 1.5fr 1fr; }
  .adm-novo-resumo { position: sticky; top: 16px; }
}
/* A minha conta: o nome no fundo do menu abre a página; no telemóvel aparece no fim do menu, sem o email */
.adm-menu a.adm-eu { text-decoration: none; color: var(--text); border-radius: 8px; }
.adm-menu a.adm-eu:hover, .adm-menu a.adm-eu.ativo { background: var(--surface); }
.adm-eu-avatar { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold);
  border-radius: 50%; color: var(--gold); font-size: 13px; }
.adm-eu-avatar--grande { width: 48px; height: 48px; font-size: 15px; }
@media (max-width: 899px) {
  .adm-menu .adm-eu { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .adm-menu .adm-eu small { display: none; }
  .adm-menu .adm-eu .adm-eu-avatar { width: 28px; height: 28px; font-size: 11px; }
}
/* Entrada da administração: logótipo, cartão ao centro e um brilho dourado discreto por trás */
#admin.admin:has(.adm-entrada) { max-width: none; min-height: 100dvh; justify-content: center;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%); }
.adm-entrada { width: 100%; max-width: 420px; margin: 0 auto; align-items: stretch; gap: 20px; }
.adm-entrada-marca { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.adm-entrada-marca .adm-marca { font-size: 28px; }
.adm-marca-logo.adm-marca-logo--grande { width: 64px; height: 64px; border-radius: 16px;
  box-shadow: 0 0 32px -6px color-mix(in srgb, var(--gold) 45%, transparent); }
.adm-marca-logo--grande .adm-icone { width: 30px; height: 30px; }
.adm-entrada-cartao { padding: 24px; gap: 14px; }
.adm-cartao h1.adm-entrada-titulo, .adm-entrada-titulo { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--text); }
.adm-entrada-cartao .adm-nota { margin: 0; }
.adm-entrada-tema { align-self: center; }
/* Interruptor do tema (app e administração): pista funda com o tema escrito e um botão redondo em relevo que desliza:
   sol à esquerda no tema claro, lua à direita no escuro. */
.tema-troca { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; --t: 44px; width: calc(var(--t) * 3); height: var(--t); min-height: 0; padding: 0; border: 0;
  border-radius: 999px; background: var(--surface); cursor: pointer; font: inherit;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,.55), inset -2px -2px 6px color-mix(in srgb, var(--text) 7%, transparent); }
.tema-troca-texto { flex: 1; padding: 0 calc(var(--t) * .27) 0 calc(var(--t) * 1.14); font-size: max(7.5px, calc(var(--t) * .23)); font-weight: 600; line-height: 1.15; letter-spacing: .14em; text-align: center;
  text-transform: uppercase; color: var(--muted); transition: padding .25s ease; }
.tema-troca-botao { position: absolute; top: calc(var(--t) * .07); left: calc(var(--t) * .07); width: calc(var(--t) * .86); height: calc(var(--t) * .86); display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 50%; color: var(--gold);
  background: linear-gradient(145deg, color-mix(in srgb, var(--text) 12%, var(--bg)), var(--bg));
  box-shadow: 3px 3px 8px rgba(0,0,0,.55), -2px -2px 6px color-mix(in srgb, var(--text) 8%, transparent); transition: left .25s ease; }
.tema-troca-botao svg { width: calc(var(--t) * .45); height: calc(var(--t) * .45); }
.tema-troca[aria-checked="false"] .tema-troca-texto { padding: 0 calc(var(--t) * 1.14) 0 calc(var(--t) * .27); }
.tema-troca[aria-checked="false"] .tema-troca-botao { left: calc(100% - var(--t) * .93); }
.tema-troca:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
:root[data-tema="claro"] .tema-troca { box-shadow: inset 3px 3px 7px rgba(0,0,0,.12), inset -3px -3px 7px rgba(255,255,255,.9); }
:root[data-tema="claro"] .tema-troca-botao { background: linear-gradient(145deg, #fff, var(--bg));
  box-shadow: 3px 3px 8px rgba(0,0,0,.15), -3px -3px 7px rgba(255,255,255,.95); }
/* Topo da administração: o tema (mais pequeno) logo antes do Atualizar; Atualizar e Sair um pouco afastados */
.adm-topo .adm-topo-acoes { align-items: center; }
.adm-topo .tema-troca { --t: 30px; }
.adm-topo .adm-topo-acoes { gap: 16px; }
.adm-entrada-tema { display: flex; justify-content: center; }
.adm-entrada-marca .adm-marca { justify-content: center; text-align: center; }
@media (max-width: 899px) {
  .adm-topo .tema-troca { width: calc(var(--t) * 2); }
  .adm-topo .tema-troca-texto { visibility: hidden; }
  .adm-topo .adm-topo-acoes { gap: 8px; }
}
/* O logótipo e o nome no topo são o botão de atualizar */
.adm-marca-botao { padding: 0; border: 0; background: none; font-weight: inherit; line-height: inherit; color: var(--gold); text-align: left; cursor: pointer; }
.adm-marca-botao:hover .adm-marca-logo { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--gold) 60%, transparent); }
.adm-marca-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.adm-marca-botao.a-atualizar .selo-swav { animation: adm-pulsar .8s ease-in-out infinite alternate; }
@keyframes adm-pulsar { to { opacity: .35; } }
@keyframes adm-rodar { to { transform: rotate(360deg); } }

/* ---------- Estilo Moderno (SQL 118): a mesma app com cartões arredondados e letra sem serifa nos títulos ----------
   A unidade escolhe em Mais → Estabelecimento. Muda só o aspeto: as cores dos estados e das secções ficam iguais. */
:root[data-estilo="moderno"] {
  --bg: #0D0D0F; --surface: #16161A; --campo: #1F1F24;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14); --line-input: rgba(255,255,255,.2);
  --text: #F4F2EE; --muted: #9C988F; --faint: #5C5953; --done: #6A665F;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --fs-hero: 32px; --fs-name: 28px; --fs-quote: 18px; --tracking-label: .12em; --radius: 12px;
}
:root[data-estilo="moderno"][data-tema="claro"] {
  --bg: #F4F2ED; --surface: #FFFFFF; --campo: #FFFFFF;
  --line: rgba(28,27,25,.10); --line-strong: rgba(28,27,25,.16); --line-input: rgba(28,27,25,.24);
  --text: #1C1B19; --muted: #5F5A52; --faint: #B4AEA4; --done: #98928A;
}
:root[data-estilo="moderno"] .t-hero, :root[data-estilo="moderno"] .t-name { font-weight: 700; letter-spacing: -.01em; }
:root[data-estilo="moderno"] .t-quote { font-style: normal; font-weight: 500; }
:root[data-estilo="moderno"] .t-ruled::before, :root[data-estilo="moderno"] .t-ruled::after { display: none; }
:root[data-estilo="moderno"] .btn { border-color: var(--line-strong); border-radius: 12px; font-size: 15px; letter-spacing: .02em; text-transform: none; }
:root[data-estilo="moderno"] .btn--gold { border-color: var(--gold); }
:root[data-estilo="moderno"] .btn--text { font-size: var(--fs-small); }
:root[data-estilo="moderno"] .input, :root[data-estilo="moderno"] .select { padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background-color: var(--campo); }
:root[data-estilo="moderno"] .select { padding-right: 30px; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; }
:root[data-estilo="moderno"] .input:focus, :root[data-estilo="moderno"] .select:focus { border-color: var(--gold); }
:root[data-estilo="moderno"] .area-linha { padding: 10px 12px !important; border: 1px solid var(--line-strong) !important; border-radius: 10px !important;
  background: var(--campo); }
:root[data-estilo="moderno"] .area-linha:focus { border-color: var(--gold) !important; }
:root[data-estilo="moderno"] .notice { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
:root[data-estilo="moderno"] .list { gap: 8px; }
:root[data-estilo="moderno"] .list > .row { padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
:root[data-estilo="moderno"] .lista-config { gap: 8px; }
:root[data-estilo="moderno"] .item-config { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
:root[data-estilo="moderno"] .item-config.com-pega { padding-left: 48px; } /* espaço da pega ⋮⋮ (senão fica por cima do texto) */
:root[data-estilo="moderno"] .dot { width: 9px; height: 9px; }
:root[data-estilo="moderno"] .stepper__btn { border-radius: 12px; }
:root[data-estilo="moderno"] .stepper__value { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--campo); font-size: 22px; font-weight: 600; }
:root[data-estilo="moderno"] .tabbar { background: var(--surface); }
:root[data-estilo="moderno"] .tab { font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
:root[data-estilo="moderno"] .tab svg { stroke-width: 1.6; }
:root[data-estilo="moderno"] .tab--active { color: var(--gold); }
:root[data-estilo="moderno"] .key { border-color: var(--line); border-radius: 18px; background: var(--surface); font-size: 28px; font-weight: 600; }
:root[data-estilo="moderno"] .pin-dot { width: 10px; height: 10px; }
:root[data-estilo="moderno"] .avatar { border-radius: 26px; background: var(--surface); font-weight: 700; }
:root[data-estilo="moderno"] .sheet { border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; }
:root[data-estilo="moderno"] .segmento { gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
:root[data-estilo="moderno"] .segmento button { flex: 1; border-bottom: 0; border-radius: 9px; letter-spacing: .02em; text-transform: none; }
:root[data-estilo="moderno"] .segmento button.ativo { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* Escolha do estilo (Mais → Estabelecimento): uma amostra pequena de cada um */
.estilos-app { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: stretch; }
.estilo-app { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: none; color: var(--text); text-align: left; cursor: pointer; }
.estilo-app.ativo { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.estilo-amostra { align-self: stretch; display: flex; flex-direction: column; gap: 6px; height: 92px; margin-bottom: 6px; padding: 10px; background: var(--bg); }
.estilo-amostra b { font-size: 22px; font-weight: 500; line-height: 1; color: var(--text); }
.estilo-amostra i { height: 12px; }
.estilo-amostra--noir b { font-family: "Cormorant Garamond", serif; }
.estilo-amostra--noir i { border-bottom: 1px solid var(--line-strong); }
.estilo-amostra--moderno { border-radius: 10px; }
.estilo-amostra--moderno b { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; }
.estilo-amostra--moderno i { border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); }

/* Dias de fecho (SQL 122): aviso na checklist e dias fechados mais apagados na inspeção */
.notice.dia-fechado { margin-bottom: 8px; }
.dia-fechado-linha td { opacity: .6; }
.dia.fechado .dia-titulo, .dia.fechado .sem-turnos { opacity: .6; }

/* Alterações de custo (SQL 124) */
.alteracao-custo { border-top: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.alteracao-cabeca { display: flex; flex-direction: column; gap: 2px; }
.alteracao-custo p { margin: 0; }
.alteracao-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media print {
  .relatorio-custos, .relatorio-custos * { color: #000 !important; background: transparent !important; }
  .relatorio-custos .alteracao-custo { break-inside: avoid; border-top-color: #999; }
}

/* Ajuda (perguntas frequentes): cada pergunta com área de toque de 44 px e uma linha a separar */
.ajuda-lista { gap: 0; }
.ajuda-item { border-bottom: 1px solid var(--line); }
.ajuda-item summary { display: flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 10px 0; cursor: pointer; list-style: none; }
.ajuda-item summary::-webkit-details-marker { display: none; }
.ajuda-item summary::before { content: '+'; flex: none; width: 18px; color: var(--gold); font-size: 20px; line-height: 1; }
.ajuda-item[open] summary::before { content: '−'; }
.ajuda-item p { margin: 0 0 14px 28px; color: var(--muted); line-height: 1.5; }
/* Novidades: lista curta, pontos juntos, botão a toda a largura */
.novidades h2 { margin: 0 0 12px; }
.novidades ul { margin: 0 0 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.novidades li::marker { color: var(--gold); }

/* ---------- Questionário às casas (questionario.html, SQL 138) ---------- */
.qst { max-width: 680px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 12px; }
.qst-topo { padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
/* Selo SWAV (o mesmo do ícone da app): moldura arredondada inclinada, letras espaçadas. Questionários e administração. */
.selo-swav { display: inline-block; flex-shrink: 0; padding: 1px .12em 1px .34em; border: 2px solid currentColor; border-radius: .4em;
  font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 16px; letter-spacing: .22em; line-height: 1.15;
  color: var(--gold); transform: rotate(-12deg); }
.selo-swav--grande { font-size: 40px; border-width: 3px; margin: 8px 0; }
.qst-marca { margin: 6px 0 0 4px; font-size: 20px; }
.qst-titulo { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin: 8px 0 0; line-height: 1.15; }
.qst h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 32px 0 4px; color: var(--gold); }
.qst h3 { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin: 24px 0 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.qst-ajuda { color: var(--muted); font-size: var(--fs-small); margin: 0; line-height: 1.45; }
.qst-bloco { border: 0; margin: 0; padding: 12px 0; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.qst-legenda { padding: 0; margin-bottom: 4px; }
.qst-pergunta { margin: 0; line-height: 1.4; }
.qst-pergunta strong { color: var(--gold); margin-right: 4px; }
.qst-opcao { display: flex; align-items: center; gap: 12px; min-height: var(--touch); cursor: pointer; line-height: 1.3; }
.qst-opcao input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--gold); flex-shrink: 0; }
.qst textarea.input { width: 100%; min-height: 64px; }
.qst-rodape { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.qst-estado { margin: 0; min-height: 1.2em; font-size: var(--fs-small); color: var(--muted); text-align: center; }
.qst-fim { padding: 48px 0; text-align: center; }
.qst-fim h1 { font-family: var(--font-display); font-size: 36px; font-weight: 500; margin: 0 0 12px; }
.qst-fim p { color: var(--muted); }
/* Administração → Questionários: botões da linha e folha das respostas (branca, para imprimir) */
.adm-acoes-questionario { white-space: nowrap; }
.adm-acoes-questionario .btn { padding: 0 8px; }
.adm-qst-respostas h2.adm-qst-titulo { font-family: var(--font-display); font-size: 26px; letter-spacing: 0; text-transform: none; color: #8A6F3A; margin-top: 40px; }
.adm-qst-pergunta { padding: 8px 0; border-bottom: 1px solid #eee; break-inside: avoid; }
.adm-qst-pergunta p { margin: 0; font-size: 14px; }
.adm-qst-resposta { margin-top: 4px !important; padding-left: 12px; border-left: 2px solid #B59A63; white-space: pre-wrap; }
.adm-qst-vazia { margin-top: 4px !important; color: #9a958c; font-style: italic; }
/* Calculadora (Capacidade e uso): no telemóvel os títulos das colunas partem em linhas e a tabela cabe no cartão */
.adm-tabela.adm-calculadora-tabela th { white-space: normal; letter-spacing: .05em; }
.adm-calculadora-tabela td:first-child { width: 40%; }
#resultado-calculadora { overflow-x: auto; }

/* Marca do produto na entrada e no PIN (02-entrada.js, marcaProduto): "powered by SWAV" fixo no fundo do ecrã visível, com o
   fundo do tema por trás (no Android o ecrã do PIN é mais alto que a parte visível e ela ficava escondida lá em baixo).
   Os dois ecrãs guardam espaço em baixo para ela; as cores vêm do tema (claro e escuro). */
.assinatura-produto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; background: var(--bg);
  display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); }
.assinatura-produto small { font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.assinatura-produto b { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .3em; color: var(--gold);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); padding-bottom: 1px; }
.login-entrada { padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 48px)); }
/* Quem está a entrar: menos espaço entre as partes, para a grelha (até 2 linhas) caber sem deslizar com a assinatura em baixo */
@media (orientation: portrait) {
  /* em cima fica o botão da língua (36 px) e só depois o logótipo, para não se tocarem */
  .login-entrada { padding-top: max(56px, calc(env(safe-area-inset-top) + 52px)); }
  .login-pergunta { margin-top: 40px; }
  .people { margin-top: 28px; }
  .login-relogio { padding-top: 32px; }
}
@media (orientation: portrait) and (max-height: 819px) {
  .login-entrada .lh-logo.marca { --logo-w: min(200px, 52vw) !important; }
  .login-pergunta { margin-top: 28px; }
}
/* Botão da língua no ecrã de entrada: pastilha com contorno (parecia texto solto), no canto, acima do logótipo */
.login-entrada .idioma-troca { top: max(8px, env(safe-area-inset-top)); right: 12px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 13px; background: var(--bg); }
.login-entrada .idioma-troca::before { content: ''; position: absolute; inset: -4px; } /* área de toque de 44 px */
/* PIN: menos espaço entre as partes, para caber no ecrã sem deslizar mesmo com a assinatura em baixo (Android, 27/10) */
.login-pin { padding-top: max(20px, calc(env(safe-area-inset-top) + 12px)); padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 38px)); }
@media (orientation: portrait) and (min-height: 741px) { /* abaixo disto já vale a regra dos telemóveis baixos */
  .login-pin .pin-info .avatar { margin-top: 12px; }
  .login-pin .keypad { margin-top: 20px; row-gap: 10px; }
}
/* Telemóveis médios (741–819 px de altura): logótipo e teclas um pouco menores, para o PIN caber sem deslizar */
@media (orientation: portrait) and (min-height: 741px) and (max-height: 819px) {
  .login-pin .lh-logo.marca { --logo-w: min(150px, 40vw) !important; }
  .login-pin .pin-info .avatar { width: 72px; height: 72px; font-size: 28px; }
  .login-pin .keypad { grid-template-columns: repeat(3, 60px); }
  .login-pin .key { width: 60px; height: 60px; font-size: 30px; }
}
:root.sem-fundo-seguro { --fundo-seguro: 0px; }
.versao-conta { margin: 24px 0 0; text-align: center; font-size: 11px; }
/* Administração → ficha → Ações: escolher o modelo e copiar (SQL 144) */
.adm-copiar-modelo { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-copiar-modelo .select { min-width: 170px; width: auto; }
/* Checklist sem rede (04-checklist.js): tarefa marcada sem rede, ainda por enviar */
.por-enviar { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
/* Questionário por partes (questionario-pagina.js, 28/10): barra de progresso, opções como cartões, Anterior/Seguinte */
.qst-progresso { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.qst-progresso div { height: 100%; background: var(--gold); transition: width .3s; }
.qst-passo { margin: 0; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.qst-varias { color: var(--muted); font-size: var(--fs-small); }
.qst .qst-opcao { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.qst .qst-opcao:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.qst-bloco { gap: 8px; }
.qst-botoes { display: flex; gap: 12px; }
.qst-botoes .btn { flex: 1; }
/* Endereço de testes (ambiente.js): faixa fixa no topo, para nunca se confundir com a app das casas */
.faixa-testes { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; padding: max(2px, env(safe-area-inset-top)) 8px 2px;
  background: #c0392b; color: #fff; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-align: center; pointer-events: none; opacity: .92; }
/* Administração: etiqueta da versão ao lado do logótipo (admin.js, etiquetaVersao); vermelha nos testes */
.adm-versao { flex-shrink: 0; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 999px;
  font: 500 10px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--gold); white-space: nowrap; }
.adm-versao--testes { border-color: #c0392b; color: #e06655; }
/* Guia de início de uma casa nova (admin.js, folhaGuia): folha A4 com o QR ao lado do link */
.adm-guia h2 { font-size: 15px; margin: 16px 0 4px; }
.adm-guia p { margin: 0 0 6px; line-height: 1.45; }
.adm-guia-topo { display: flex; gap: 18px; align-items: center; margin: 8px 0 6px; }
.adm-guia-qr { width: 130px; flex-shrink: 0; }
.adm-guia-qr svg { width: 100%; height: auto; }
/* Sugestões e problemas (14-ajuda.js): botão de juntar capturas por cima do Enviar */
.caixa-sugestao .anexar-captura { position: relative; margin-top: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; }
/* Administração → Sugestões: miniaturas das capturas de ecrã (tocar abre a imagem inteira) */
.adm-capturas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-capturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
/* Escolher ficheiro escondido dentro de um botão: invisível mas não "display: none" (alguns telemóveis não o abrem assim) */
.ficheiro-escondido { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* Selo SWAV como logótipo da app (29/10: em todo o lado onde vai o logótipo da app, até haver um definitivo) */
.selo-swav--mini { font-size: 10px; border-width: 1px; padding: 0 .1em 0 .3em; margin-right: 6px; vertical-align: middle; transform: rotate(-8deg); }
.adm-resumo-marca.selo-swav { font-size: 15px; color: #8A6F3A; margin: 10px 0 4px 6px; } /* folga: o selo inclinado não fica cortado no topo da folha impressa */
.sem-estabelecimento-marca { text-align: center; margin: 24px 0 12px; }
.comunicado-marca { display: flex; align-items: center; }
/* Farol do Lighthouse com um logótipo para cada tema (02-entrada.js, LOGO_FAROL): o do tema claro já é preto, sem inverter */
.lh-logo .logo-farol-claro { display: none; }
:root[data-tema="claro"] .lh-logo .logo-farol-escuro { display: none; }
:root[data-tema="claro"] .lh-logo .logo-farol-claro { display: block; filter: none; }
/* Guia de início (admin.js, folhaGuia): o logótipo da casa à direita do nome, quando o tem */
.adm-guia-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.adm-guia-logo { display: block; max-width: 200px; max-height: 100px; width: auto; height: auto; object-fit: contain; }
.adm-guia-logo--invertido { filter: invert(1) hue-rotate(180deg); }
.adm-guia-logo--icone { width: 90px; height: 90px; border-radius: 22%; }
/* Troca de aba imediata (03-navegacao.js): o ecrã da memória não se toca até chegarem os dados novos */
#ecra.da-memoria { pointer-events: none; }
/* Toque na aba: o ícone encolhe um instante, para se sentir logo que a app respondeu */
.separadores .tab .icone { transition: transform .12s ease-out; }
.separadores .tab:active .icone { transform: scale(.82); }

/* Caixa "não sou um robô" (Turnstile), só quando o Cloudflare a pede ao criar a sessão (ambiente.js) */
.caixa-anti-robo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0, 0, 0, .6); }
.caixa-anti-robo[hidden] { display: none; }

/* Tarefa para uma pessoa (SQL 161): "· Ana" ao lado do nome; a dourado quando é para quem está a ver */
.tarefa-para { color: var(--muted); font-weight: 400; }
.tarefa-para--minha { color: var(--gold); font-weight: 600; }

/* Campo de etiquetas no formulário (ex.: locais do produto, SQL 163): como os destinatários de um email */
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; padding: 6px 0; }
.etiqueta { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 12px; border: 1px solid var(--gold); border-radius: 999px;
  color: var(--text); font-size: var(--fs-small, 14px); min-height: 36px; }
.etiqueta button { min-width: 36px; min-height: 36px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.etiquetas-juntar { min-height: 36px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 999px; background: none;
  color: var(--muted); padding: 0 12px; font: inherit; font-size: var(--fs-small, 14px); }
.etiquetas-vazio { width: 100%; }
/* Definições → Preços (SQL 165): uma linha por preço, o valor pequeno à direita */
.adm-precos { display: flex; flex-direction: column; margin-bottom: 8px; }
.adm-preco-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.adm-preco-linha .adm-campo-euro { flex: 0 0 120px; gap: 6px; }
.adm-preco-linha .input { min-width: 0; width: 100%; text-align: right; }
.adm-preco-linha .adm-campo-euro b { font-size: 16px; min-width: 1em; }
.adm-calculadora .input, .adm-calculadora .select { min-width: 0; width: 100%; } /* não saem da coluna em ecrãs estreitos */

/* Faltas: pesquisa e botão "Filtros" na mesma linha; os filtros abrem num menu por cima da lista. */
.pesquisa-filtros { display: flex; align-items: flex-end; justify-content: flex-end; gap: 16px; margin-bottom: var(--gap-l); }
.pesquisa-filtros > .field { flex: 1; min-width: 0; }
.menu-filtros { position: relative; }
.menu-filtros summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.menu-filtros summary::-webkit-details-marker { display: none; }
.menu-filtros[open] summary { border-color: var(--gold); color: var(--gold); }
.menu-filtros__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: #000;
  font-size: 12px; letter-spacing: 0; display: inline-grid; place-items: center; }
.menu-filtros__n[hidden] { display: none; }
.menu-filtros__painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(300px, calc(100vw - 2 * var(--pad-x)));
  display: flex; flex-direction: column; gap: 18px; padding: 16px; background: var(--bg); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Recomendar a app (Conta, SQL 175): o código em grande, fácil de ditar. */
.recomendar-codigo { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.08em; color: var(--gold); text-align: center; margin: 8px 0 12px; }

/* Ficha do cliente no aspeto novo (04/11): topo com as iniciais, números, separadores com ícones e ações em cartões */
.adm-avatar-grande .adm-avatar { width: 56px; height: 56px; border-radius: 12px; font-size: 18px; }
.adm-ficha-cabeca { align-items: center; }
.adm-ficha-cabeca .adm-cliente-cel { align-items: flex-start; }
.adm-ficha-cabeca .adm-link-previa a { color: var(--gold); text-decoration: none; }
.adm-numero--texto strong { font-size: 20px; }
.adm-separadores button.adm-botao-icone .adm-icone { width: 16px; height: 16px; opacity: .75; }
.adm-separadores button.ativo .adm-icone { opacity: 1; color: var(--gold); }
.adm-ficha .adm-cartao > .btn, .adm-ficha form > .btn { align-self: flex-start; }
.adm-ficha form { display: flex; flex-direction: column; gap: 10px; }
.adm-ficha .adm-acoes { margin-top: 0; }
.adm-tudo-bem-linha { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--st-done); }
.adm-tabela-topo--meio { border-top: 1px solid var(--line); }
.adm-acoes-linha { text-align: right; white-space: nowrap; }
.adm-acoes-linha .btn { padding: 0 8px; color: var(--gold); }
.adm-equipa-tabela .adm-avatar { width: 32px; height: 32px; font-size: 11px; }
.adm-cartao--perigo { border-color: color-mix(in srgb, var(--st-todo) 50%, transparent); }
.adm-cartao--perigo .adm-cartao-titulo .adm-icone { color: var(--st-todo); }
@media (max-width: 899px) {
  .adm-separadores { flex-wrap: nowrap; overflow-x: auto; }
  .adm-separadores button { flex-shrink: 0; padding: 0 12px; }
  .adm-acoes-linha { white-space: normal; }
}

/* Administração no telemóvel sem deslizar para os lados (04/11): as colunas da grelha podem encolher abaixo do conteúdo
   (as tabelas largas deslizam dentro do seu cartão) e o topo passa a duas linhas, com o Sair só com o ícone. */
body.com-painel #admin > *, .adm-grupos-layout > *, .adm-duas-colunas > *, .adm-novo-layout > *, .adm-consumos-topo > * { min-width: 0; }
@media (max-width: 599px) {
  .adm-topo { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .adm-topo .adm-marca { font-size: 18px; gap: 8px; }
  .adm-topo .adm-versao { order: 3; }
  .adm-topo #sair { font-size: 0; gap: 0; min-width: 44px; justify-content: center; }
}

/* ---------- Food cost por categoria e grupos da carta (SQL 179) ---------- */
.fc-pilula { display: inline-block; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 500;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.fc-pilula--bom { color: var(--st-done); }
.fc-pilula--atencao { color: var(--st-doing); }
.fc-pilula--mau { color: var(--st-todo); }
.fc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); margin-top: 4px; font-size: 13px; }
.fc-grupo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.85em; color: var(--text);
  border: 1px solid var(--line, color-mix(in srgb, var(--text) 25%, transparent)); }
.fc-grupo--estrela { color: var(--gold); border-color: var(--gold); }
.fc-vendas { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.fc-vendas-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fc-vendas-botoes .btn { min-height: var(--touch); padding-left: 6px; padding-right: 6px; }
.fc-vendas p { margin: 0; }

/* Simular preço: barra do food cost (verde até à referência, amarelo +5 pontos, vermelho acima) */
.simulador { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.sim-topo { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.sim-topo > div { display: flex; flex-direction: column; gap: 4px; }
.sim-fc .fc-pilula { font-size: 22px; padding: 2px 12px; white-space: nowrap; }
.sim-topo .t-label { white-space: nowrap; }
.sim-preco { min-width: 0; }
.sim-preco .input { font-size: 22px; text-align: right; width: 100%; min-width: 0; box-sizing: border-box; }
.sim-barra { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.sim-barra::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--zonas); }
.sim-barra::-moz-range-track { height: 10px; border-radius: 999px; background: var(--zonas); }
.sim-barra::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold); }
.sim-barra::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold); }
.sim-barra:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sim-escala { position: relative; height: 18px; font-size: 12px; color: var(--muted); }
.sim-escala span { position: absolute; top: 0; white-space: nowrap; }
.sim-escala span:first-child { left: 0; }
.sim-escala span:nth-child(2) { transform: translateX(-50%); }
.sim-escala span:last-child { right: 0; }
.sim-contas { margin: 2px 0 4px; }

/* Simular preço: quadro da margem, com a cor do food cost */
.sim-margem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); color: var(--st-done); }
.sim-margem--atencao { color: var(--st-doing); }
.sim-margem--mau { color: var(--st-todo); }
.sim-margem > span { font-weight: 500; }
.sim-margem > div { display: flex; flex-direction: column; align-items: flex-end; }
.sim-margem strong { font-size: 26px; font-weight: 600; line-height: 1.1; }
.sim-margem small { font-size: 13px; }

/* Janela aberta por cima (formulários, listas): a página de baixo não se mexe ao deslizar (04/11). */
html:has(.fundo-modal), html:has(.fundo-modal) body { overflow: hidden; }
.fundo-modal, .fundo-modal .formulario, .fundo-modal .lista-modal { overscroll-behavior: contain; }

/* Alergénios (SQL 180): botões no produto, pílulas na ficha e na lista, tabela para a sala */
.marcas-botoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.marca-botao { display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 6px 10px; text-align: left; font: inherit; font-size: 14px;
  color: var(--text); background: none; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
.marca-botao b { font-weight: 600; font-size: 12px; min-width: 26px; text-align: center; padding: 2px 4px; border-radius: 6px; color: var(--muted);
  border: 1px solid var(--line-strong); }
.marca-botao[aria-pressed="true"] { color: var(--st-todo); border-color: var(--st-todo); background: color-mix(in srgb, var(--st-todo) 12%, transparent); }
.marca-botao[aria-pressed="true"] b { color: var(--bg); background: var(--st-todo); border-color: var(--st-todo); }
.alerg { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: 12px;
  color: var(--st-todo); border: 1px solid color-mix(in srgb, var(--st-todo) 60%, transparent); background: color-mix(in srgb, var(--st-todo) 10%, transparent); }
.alerg b { font-weight: 600; font-size: 11px; padding: 0 5px; border-radius: 999px; color: var(--bg); background: var(--st-todo); }
.alerg-codigos { color: var(--st-todo); font-size: 12px; letter-spacing: .03em; }
.ficha-alergenios { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.tabela-alergenios-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tabela-alergenios { display: flex; flex-direction: column; gap: 8px; }
.tabela-alergenios p { margin: 0; }
.tabela-alergenios .alerg-coluna { text-align: center; white-space: normal; min-width: 0; font-size: 11px; }
.tabela-alergenios .alerg-coluna b { display: block; font-size: 13px; }
.tabela-alergenios .alerg-coluna span { display: block; font-weight: 400; color: var(--muted); }
.tabela-alergenios .alerg-celula { text-align: center; min-width: 0; color: var(--st-todo); font-size: 18px; line-height: 1; }
@media print {
  .tabela-alergenios, .tabela-alergenios * { color: #000 !important; background: transparent !important; }
  .tabela-alergenios .tabela-inspecao th, .tabela-alergenios .tabela-inspecao td { border-color: #999 !important; }
  .tabela-alergenios tr { break-inside: avoid; }
}

/* Histórico de compras (Faturas) */
.hist-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hist-datas .field, .hist-datas .input { min-width: 0; }
.hist-resumo { cursor: default; } /* linha de resumo: não abre nada, por isso não parece um botão */
.hist-cartao { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Opções em botões a sério, não em texto cinzento (no estilo Moderno já são botões) */
:root:not([data-estilo="moderno"]) .segmento { gap: 6px; }
:root:not([data-estilo="moderno"]) .sub-abas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } /* todos à vista, da mesma largura */
:root:not([data-estilo="moderno"]) .segmento button { flex: 1 0 auto; padding: 0 10px; color: var(--text); font-size: 13px;
  letter-spacing: .02em; text-transform: none; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: 10px; }
:root:not([data-estilo="moderno"]) .segmento button.ativo { color: #000; font-weight: 600; background: var(--gold); border-color: var(--gold); }
@media (max-width: 480px) { :root:not([data-estilo="moderno"]) .sub-abas button { padding: 0 3px; font-size: 12px; letter-spacing: 0; } }
#hist-lista button.row::after { content: '›'; align-self: center; margin-left: 10px; font-size: 22px; line-height: 1; color: var(--gold); }