:root {
  /* 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 #333; border-radius: 10px; padding: 0 10px; }

main {
  padding: 16px;
  padding-bottom: calc(var(--altura-nav) + 24px + env(safe-area-inset-bottom));
  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: #333; color: var(--texto); font-weight: 600; }

.nota-texto { white-space: pre-wrap; margin: 8px 0 12px; }
.nota textarea { width: 100%; background: #111; border: 1px solid #333; 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: #181818; 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 #444; }
.produto.contado { border-left-color: var(--verde); }

.quantidade { min-width: 64px; min-height: 48px; background: #111; border: 1px solid #333; 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) + env(safe-area-inset-bottom)); 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 + env(safe-area-inset-bottom));
  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: #111; border: 1px solid #333; 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: #333; 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 #333; 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; }
.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 #2a2a2a; }
.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 + env(safe-area-inset-bottom)); }
  .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 #444; 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 + env(safe-area-inset-bottom)); }

/* 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: #111; border: 1px solid #333; border-radius: 10px; }

/* Todas as caixas de texto escuras (a das notas estava branca) */
textarea { width: 100%; background: #111; color: var(--texto); border: 1px solid #333; 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; }
.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; }
  .login-pin .mudar-pessoa { flex-basis: 100%; }
}
/* 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; }
}

/* ---------- 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; }
main { padding: 8px var(--pad-x) calc(var(--altura-nav) + 24px + env(safe-area-inset-bottom)); }

.separadores { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; padding-left: 0; padding-right: 0; }
.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 + env(safe-area-inset-bottom)); }
.filtros-faltas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.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; }

/* ---------- 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); }
.adicionar { align-self: flex-start; }
.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: rgba(181, 154, 99, 0.22); }
  50% { border-left-color: rgba(181, 154, 99, 0.25); background-color: rgba(181, 154, 99, 0.04); }
}
.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: rgba(181, 154, 99, 0.15); } }
.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); }
.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); }
.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.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; }
.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; }
.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: rgba(181, 154, 99, 0.13); padding: 16px; }
.aviso-item:not(.arquivado) { background: rgba(181, 154, 99, 0.13); 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: rgba(181, 154, 99, 0.10); 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: rgba(181, 154, 99, 0.2); background-color: rgba(181, 154, 99, 0.03); } }
.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 .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-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; }
}

/* 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); } }
@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 rgba(181, 154, 99, 0.2); border-top-color: var(--gold);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; }
.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 rgba(181, 154, 99, 0.2);
  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; }