:root {
  --fundo: #121212;
  --cartao: #1e1e1e;
  --texto: #f2f2f2;
  --texto-suave: #a0a0a0;
  --destaque: #f5a623;
  --bar: #3b82f6;
  --cozinha: #a855f7;
  --vermelho: #ef4444;
  --amarelo: #eab308;
  --verde: #22c55e;
  --altura-nav: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  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 {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--fundo);
  border-bottom: 1px solid #2a2a2a;
}
.topo h1 { margin: 0; font-size: 1.3rem; }
.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;
}

.cartao { background: var(--cartao); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.suave { color: var(--texto-suave); }

.lista-botoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lista-botoes a {
  display: flex; align-items: center; min-height: 56px; padding: 0 16px;
  background: var(--cartao); border-radius: 14px; color: var(--texto); text-decoration: none;
}

.separadores {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex;
  height: calc(var(--altura-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #181818; border-top: 1px solid #2a2a2a;
}
.separadores a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texto-suave); text-decoration: none; font-size: 0.8rem;
}
.separadores a .icone { font-size: 1.4rem; line-height: 1; }
.separadores a.ativo { color: var(--destaque); }

[hidden] { display: none !important; }

.botao, .botao-sec, .grelha-pessoas button, .teclado button {
  border: 0; border-radius: 12px; cursor: pointer; padding: 0 16px;
}
.botao { background: var(--destaque); color: #111; font-weight: 600; min-height: 52px; width: 100%; }
.botao-sec { background: #2a2a2a; }

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

.grelha-pessoas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grelha-pessoas button { background: var(--cartao); min-height: 80px; font-size: 1.1rem; }

.pin-caixa { max-width: 340px; margin: 0 auto; text-align: center; }
.pin-pontos { display: flex; justify-content: center; gap: 18px; margin: 16px 0 0; }
.pin-pontos span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--texto-suave); }
.pin-pontos span.cheio { background: var(--destaque); border-color: var(--destaque); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado button { min-height: 68px; font-size: 1.6rem; background: var(--cartao); }
.teclado .botao-sec { font-size: 1rem; background: transparent; }

.linha-opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.linha-opcao input { width: 28px; height: 28px; min-height: 0; flex-shrink: 0; }

.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; }

.tarefas, .registos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tarefa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  background: var(--cartao); border: 0; border-left: 6px solid; border-radius: 12px; text-align: left; cursor: pointer;
}
.tarefa.bar, .registo.bar { border-left-color: var(--bar); }
.tarefa.cozinha, .registo.cozinha { border-left-color: var(--cozinha); }
.tarefa .marca { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.tarefa.por_fazer .marca { background: var(--vermelho); }
.tarefa.em_processo .marca { background: var(--amarelo); }
.tarefa.terminada .marca { background: var(--verde); }
.tarefa.terminada .nome { text-decoration: line-through; color: var(--texto-suave); }
.tarefa .hora { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.tarefa .nome { flex: 1; }
.tarefa .seccao-nome { font-size: 0.8rem; color: var(--texto-suave); }

.registo { background: var(--cartao); border-left: 6px solid; border-radius: 12px; padding: 10px 14px; }

.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; }
.linha-botoes { display: flex; gap: 10px; margin-top: 10px; }
.linha-botoes > * { flex: 1; }
.link-foto { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--texto); text-decoration: none; }
.tarefa:disabled { opacity: 0.6; }

.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; }

.barra-contagem { display: flex; gap: 8px; margin-bottom: 12px; }
.barra-contagem input { flex: 1; min-width: 0; background: var(--cartao); border: 1px solid #333; border-radius: 10px; padding: 0 12px; }
.barra-contagem select { background: var(--cartao); border: 1px solid #333; border-radius: 10px; padding: 0 8px; }

.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); }
.produto-nome { flex: 1; min-width: 0; }
.redondo { width: 48px; height: 48px; padding: 0; font-size: 1.5rem; border-radius: 50%; }
.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: 8px 16px; background: linear-gradient(transparent, var(--fundo) 30%); }
.rodape-fixo .botao { max-width: 868px; margin: 0 auto; display: block; }

.fornecedor { margin-bottom: 20px; }
.fornecedor h2 { font-size: 1.1rem; margin: 0 0 8px; }
.compra { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-bottom: 8px; padding: 10px 14px; background: var(--cartao); border: 0; border-radius: 12px; text-align: left; cursor: pointer; }
.compra .caixa { width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--texto-suave); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.compra.comprado .caixa { background: var(--verde); border-color: var(--verde); color: #111; }
.compra.comprado .compra-texto { text-decoration: line-through; opacity: 0.6; }
.whatsapp { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #25d366; text-decoration: none; font-weight: 600; }

.mensagem {
  position: fixed; z-index: 20; 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; border-radius: 12px;
  background: var(--verde); color: #111; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.mensagem.erro { background: var(--vermelho); color: #fff; }

.aviso { border-left: 6px solid var(--destaque); }
#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; }
.video-info .botao.marcar { width: auto; }
.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; }

.semana { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.semana .botao-sec { width: 52px; }
#publicar { margin-bottom: 4px; }
.dia.hoje { outline: 2px solid var(--destaque); }
.dia-titulo { font-weight: 600; margin-bottom: 8px; }
.turno { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid #2a2a2a; }
.turno-horas { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.turno-nome { flex: 1; }
.turno.meu .turno-nome { color: var(--destaque); font-weight: 600; }
.turno.rascunho .turno-nome { font-style: italic; color: var(--amarelo); }
.turno.a_remover { text-decoration: line-through; opacity: 0.5; }
.turno .botao-sec { width: 44px; padding: 0; }
.adicionar { width: 100%; margin-top: 8px; }
.form-turno { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.form-turno select, .form-turno input { background: #111; border: 1px solid #333; border-radius: 10px; padding: 0 10px; width: 100%; }
.form-turno label { display: flex; align-items: center; gap: 10px; }
.form-turno label input { flex: 1; }

.largo { width: 100%; margin-bottom: 10px; }
.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; }
.formulario h2 { margin: 0; font-size: 1.2rem; }
.formulario label:not(.linha-opcao) { display: flex; flex-direction: column; gap: 4px; }
.formulario input:not([type=checkbox]), .formulario select { width: 100%; background: #111; border: 1px solid #333; border-radius: 10px; padding: 0 12px; }

.tarefa-config { border-left: 6px solid; }
.tarefa-config.bar { border-left-color: var(--bar); }
.tarefa-config.cozinha { border-left-color: var(--cozinha); }

.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); }

.alerta { border-left: 6px solid var(--vermelho); }
.separadores a { position: relative; }
.contador { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--vermelho); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.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; }
.ver-foto .botao { max-width: 320px; }

/* Login: círculos com iniciais e ecrã do PIN */
.grelha-pessoas { grid-template-columns: repeat(auto-fill, 104px); justify-content: center; gap: 18px 8px; }
.grelha-pessoas .pessoa { background: none; min-height: 0; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1rem; }
.avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--cor); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; flex-shrink: 0; }
.avatar.grande { width: 96px; height: 96px; font-size: 2.2rem; }
.pessoa-nome { text-align: center; line-height: 1.2; }
.ecra-pin { display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.pin-topo { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.pin-nome { font-size: 1.3rem; font-weight: 600; margin-top: 10px; }
.pin-topo .suave { margin: 6px 0 0; }
.abrir-youtube { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--texto); text-decoration: none; margin-top: 4px; }
@media (min-width: 700px) {
  .grelha-pessoas { grid-template-columns: repeat(auto-fill, 150px); gap: 28px 16px; }
  .grelha-pessoas .avatar { width: 104px; height: 104px; font-size: 2.3rem; }
  .pessoa-nome { font-size: 1.1rem; }
}
.topo-botoes { display: flex; gap: 8px; }
.topo-botoes .botao-sec { padding: 0 12px; }
.formulario input[inputmode=numeric] { -webkit-text-security: disc; letter-spacing: 0.3em; }
.conta { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 4px !important; border-radius: 22px !important; }
.conta .avatar { width: 34px; height: 34px; font-size: 0.85rem; }
.conta-pagina { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 340px; margin: 24px auto 0; }
.conta-pagina .botao { margin-top: 16px; }

/* Checklist compacta: nota numa linha e filtros lado a lado */
.cartao.nota { padding: 8px 8px 8px 12px; margin-bottom: 8px; }
.nota-linha { display: flex; align-items: flex-start; gap: 8px; }
.nota-resumo { flex: 1; min-width: 0; min-height: 44px; padding: 4px 0; background: none; border: 0; text-align: left; cursor: pointer; font-size: 0.95rem;
  white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nota-resumo.aberta { display: block; }
.icone-btn { width: 44px; padding: 0 !important; flex-shrink: 0; }
#nota-acoes:empty { display: none; }
.filtros-linha { display: flex; gap: 8px; }
.filtros-linha select { flex: 1; min-width: 0; background: var(--cartao); border: 1px solid #333; border-radius: 10px; padding: 0 10px; }
.tarefas { margin-top: 10px; }
.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; }
.linha-separador input { width: 24px; height: 24px; min-height: 0; }
.icone-btn:disabled { opacity: 0.3; }
.registo { display: flex; align-items: flex-start; gap: 12px; }
.registo .marca { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.marca.por_fazer { background: var(--vermelho); }
.marca.em_processo { background: var(--amarelo); }
.marca.terminada { background: var(--verde); }
.registo-texto { flex: 1; min-width: 0; }
.mudar-pessoa { background: none !important; color: var(--texto-suave); min-height: 44px; text-decoration: underline; }

/* Avisos do gestor, compactos */
.novo-aviso { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.novo-aviso #aviso-novo { flex: 1; }
.novo-aviso .botao { width: auto; }
.aviso-compacto { padding: 8px 8px 8px 12px; margin-bottom: 8px; }
.aviso-cabeca { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.aviso-cabeca .suave { flex: 1; }
.leituras { font-weight: 600; }
.lidos { color: var(--verde); }
.por-ler { color: var(--vermelho); margin-left: 6px; }
.icone-btn.confirmar { width: auto; padding: 0 10px !important; background: var(--vermelho); color: #fff; font-size: 0.85rem; }
.aviso-corpo { display: block; width: 100%; background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; min-height: 0; }
.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; }
.aviso.aberto .aviso-texto { display: block; }
.aviso.aberto .aviso-detalhe { display: flex; }
/* 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; }
.novo-aviso { align-items: flex-end; }
.novo-aviso .botao { min-height: 46px; }

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

  /* Listas em 2 colunas */
  .tarefas, .registos, .lista-config, .produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .tarefas > p, .registos > p, .produtos > p { grid-column: 1 / -1; }
  .compra { margin-bottom: 0; }

  /* 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="avisos"] #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="avisos"] #ecra > :not(.aviso-compacto),
  body[data-ecra="horarios"] #ecra > :not(.dia) { grid-column: 1 / -1; }
  .fornecedor .compra { margin-bottom: 8px; }

  /* PIN: círculo e nome à esquerda, teclado à direita */
  .ecra-pin { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 56px;
    max-width: 820px; min-height: calc(100dvh - 110px); }
  .ecra-pin .pin-topo { flex: 0 1 280px; }
  .ecra-pin .teclado { flex: 0 1 340px; }
  .ecra-pin .mudar-pessoa { flex-basis: 100%; }
}

/* Telemóvel deitado: pouca altura, tudo mais baixo */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --altura-nav: 52px; }
  .topo { padding-top: 6px; padding-bottom: 6px; }
  .teclado { gap: 8px; }
  .teclado button { min-height: 48px; font-size: 1.3rem; }
  .avatar.grande { width: 64px; height: 64px; font-size: 1.5rem; }
  .ecra-pin { min-height: 0; }
}
/* No login não há barra de baixo: não reservar espaço para ela */
body[data-ecra="login"] main { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.botao-sec.apagar { color: var(--vermelho); }
.botao-sec.apagar[data-confirmar] { background: var(--vermelho); color: #fff; }
.ver-terminadas { margin-top: 14px; color: var(--verde); }
.ver-terminadas + .suave { margin: 8px 0 0; font-size: 0.9rem; }

/* 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, body.a-selecionar #ecra > .botao { 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)); }

/* Logótipo no login */
.logo-login { display: block; width: min(85%, 380px); height: auto; margin: 8px auto 24px; }
.pin-topo .logo-login { width: min(55%, 220px); margin: 0 auto 10px; }
.pin-topo .avatar.grande { width: 80px; height: 80px; font-size: 1.9rem; }
@media (orientation: landscape) and (max-height: 500px) {
  .pin-topo .logo-login { display: none; } /* pouca altura: o logótipo fica só na grelha de nomes */
}
/* Grelha de nomes centrada (também a última linha, quando não está cheia) */
.grelha-pessoas { display: flex; flex-wrap: wrap; justify-content: center; }
.grelha-pessoas .pessoa { width: 104px; }
@media (min-width: 700px) { .grelha-pessoas .pessoa { width: 150px; } }
/* No login não há título nem botões: esconder a barra do topo */
body[data-ecra="login"] .topo { display: none; }
body[data-ecra="login"] main { padding-top: max(16px, env(safe-area-inset-top)); }

/* Separador Avisos: avisos primeiro, depois notas de turno */
.titulo-seccao { font-size: 1.05rem; margin: 18px 0 10px; }
.titulo-seccao:first-child { margin-top: 4px; }
.aviso.lido { border-left-color: #444; opacity: 0.75; }
.nota-item { border-left: 6px solid #444; }
.cartao.aberto .aviso-texto { display: block; }
.cartao.aberto .aviso-detalhe { display: flex; }

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

/* iPhone: sem zoom ao tocar duas vezes (o zoom com dois dedos continua a funcionar) */
html, body { touch-action: manipulation; }
/* 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 */
.nota-item.nova { border-left-color: var(--destaque); background: #2a2416; }
.etiqueta-nova { display: inline-block; padding: 1px 8px; border-radius: 8px; background: var(--destaque); color: #111; font-weight: 700; font-size: 0.75rem; }
.versao-anterior { font-size: 0.85rem; margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2a2a; white-space: pre-wrap; }
.notificacoes-conta { width: 100%; margin-top: 16px; text-align: left; }
.notificacoes-conta .suave { margin: 6px 0 10px; }