/* style.css - App de Receituario e Medicacao
   Versao: 1.11.0 | Criado em: 2026-08-28 | Autor: Nuno Pereira / Claude IA
   Changelog:
     1.11.0 (2026-08-29) - Acrescentado .form-linha (par de campos lado a
                          lado, usado nos formularios de Registos - Data/
                          Hora numa linha, os campos seguintes noutra) e
                          .input-grande (Data/Hora maiores, mais faceis de
                          tocar/ler no telemovel).
     1.10.0 (2026-08-29) - input[type=date]/[type=time] passam a ter o
                          mesmo estilo dos outros campos (antes ficavam com
                          o estilo por omissao do browser, mal visivel em
                          tema escuro) - usados no novo ecra Registos
                          (Tensao/Glicemia). Icone do calendario/relogio
                          invertido para ficar visivel em fundo escuro.
     1.9.0 (2026-08-29) - Rodape (.app-footer, versao/data automaticas em
                          todas as paginas), pagina de Changelog do Admin
                          (.changelog-texto) e o novo ecra Posologia do
                          paciente (.posologia-medicamento/.posologia-dia/
                          .posologia-itens) - agrupado por dia da semana e
                          refeicao, pensado para preparar a medicacao
                          semanal.
     1.8.0 (2026-08-29) - Zoom com rotacao automatica para os codigos de
                          barras (numero de receita, PIN acesso, PIN opcao):
                          toque na imagem abre-a em ecra inteiro, ja rodada
                          90 graus e ajustada ao ecra do telemovel - deixa de
                          ser preciso rodar o telemovel manualmente para ler
                          o codigo de barras largo. So aplicado aos codigos
                          de barras (.barcode-stack), nao ao QR code de TOTP
                          (esse ja e quadrado, nao precisa).
     1.7.0 (2026-08-29) - Acrescentado .acoes-pills/.acoes-pill: botoes de
                          texto (Editar/Devolver/Aviar na ficha do
                          medicamento) com o mesmo estilo pilula das abas
                          Ativos/Inativos - por pedido do Nuno, mais
                          visiveis do que os icones pequenos que tinha antes
                          (.icon-btn mantido para outros sitios que ainda o
                          usem).
     1.6.0 (2026-08-29) - Acrescentado .check-linha (checkbox + texto, usado
                          no menu de administração: Ativo/Admin no
                          utilizador, lista de pacientes com acesso) - alvo
                          de toque generoso, checkbox maior do que o padrão
                          do browser para ser fácil de marcar no telemóvel.
     1.5.0 (2026-08-29) - Passe de legibilidade/toque para telemóvel (90% da
                          utilização é aí): letra base maior, links a cor de
                          destaque em vez do azul por defeito do browser
                          (ilegível no tema escuro), novo .voltar para os
                          links "<- Página anterior" (maiores, cor de
                          destaque, alvo de toque generoso - antes eram
                          texto pequeno .muted, quase impossível de ler e de
                          tocar). Tabelas com mais espaçamento e letra maior;
                          .col-principal/.col-estreita para dar mais largura
                          ao nome do medicamento/disponível e menos à
                          composição/embalagem.
     1.4.0 (2026-08-28) - Botões de navegação do cabeçalho (paciente,
                          Medicamentos, Receitas, Sair) e as abas Ativos/
                          Inativos passam a ter o mesmo estilo (pílula) mas
                          maiores - alvos de toque mais generosos no
                          telemóvel, por pedido do Nuno.
     1.3.0 (2026-08-28) - Botões grandes (.menu-grande/.btn-grande), pensados
                          para toque no telemóvel, usados no ecrã de escolha
                          de paciente e no novo menu do paciente (Medicamentos
                          / Receitas). Ícones de ação junto ao título da
                          ficha de medicamento (.titulo-com-acoes/.icon-btn)
                          para Aviar/Devolver. Estilo para input[type=number]
                          (usado no formulário de quantidade).
     1.2.0 (2026-08-28) - Tema escuro (consome menos energia em ecra OLED e
                           cansa menos a vista à noite/farmácia). Os códigos
                           de barras mantêm SEMPRE fundo branco e barras
                           pretas (.barcode-img), independentemente do tema,
                           para garantirem leitura ótica. Acrescentado
                           .barcode-stack: os códigos de barras passam a
                           ficar empilhados a toda a largura em vez de lado
                           a lado - lado a lado ficavam pequenos demais para
                           ler no telemóvel. Acrescentado .row-link para
                           linhas de tabela clicáveis (escolher outra
                           receita disponível).
     1.1.0 (2026-08-28) - Acrescentado .barcode-valor (numero por baixo do
                           codigo de barras, na ficha de medicamento).
     1.0.0 (2026-08-28) - Versao inicial. */

:root {
  --bg: #14181a;
  --surface: #1d2326;
  --surface-raised: #242b2e;
  --text: #e8e6e1;
  --text-muted: #9aa3a0;
  --accent: #5fb8a0;
  --accent-soft: #1f3630;
  --warn: #e0a458;
  --warn-soft: #3a2f1c;
  --border: #303838;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); }
a:visited { color: var(--accent); }

/* Link "<- Pagina anterior", usado em todos os ecras - alvo de toque
   generoso e cor de destaque (o azul por defeito do browser era quase
   ilegivel em cima do fundo escuro). */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 0;
  margin-bottom: 0.2rem;
}
.voltar:hover { text-decoration: underline; }

header.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
}

header.topbar .brand { font-weight: 700; font-size: 1.1rem; color: var(--accent); text-decoration: none; }
header.topbar nav { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* Botoes de navegacao (paciente, Medicamentos, Receitas, Sair) - pilulas
   grandes, alvo de toque generoso, mesmo estilo das abas Ativos/Inativos. */
header.topbar nav a {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
header.topbar nav a:hover, header.topbar nav a:active { border-color: var(--accent); color: var(--accent); }
header.topbar nav .muted { font-size: 0.85rem; padding: 0 0.2rem; }

main { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.9rem;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link:hover { border-color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 0.75rem 0.7rem; border-bottom: 1px solid var(--border); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

/* Para dar mais destaque a colunas principais (nome do medicamento,
   disponivel) e menos as secundarias (composicao, embalagem) - usado nas
   tabelas de listagem, por pedido do Nuno. */
.col-principal { width: 42%; }
.col-estreita { width: 16%; }
.nome-medicamento { font-size: 1.08rem; font-weight: 600; }

.row-link { cursor: pointer; }
.row-link:hover, .row-link:active { background: var(--surface-raised); }

.badge { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }
.badge-ok { background: var(--accent-soft); color: var(--accent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tabs a {
  display: flex;
  align-items: center;
  padding: 0.65rem 1.2rem;
  min-height: 44px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tabs a.active { background: var(--accent); color: #0d1210; border-color: var(--accent); }

.form-box { max-width: 360px; margin: 3rem auto; }
label { display: block; font-size: 0.85rem; margin: 0.8rem 0 0.3rem; color: var(--text-muted); }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.1rem;
  background: var(--surface-raised);
  color: var(--text);
}
/* Windows/Android desenham o iconezinho do calendario/relogio a preto por
   omissao - fica invisivel em cima do fundo escuro (.surface-raised) sem
   isto. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/* Par de campos lado a lado (ex.: Data + Hora numa linha, Maxima + Minima
   noutra) - usado nos formularios de Registos (Tensao/Glicemia). Quebra
   para uma coluna em ecras muito estreitos. */
.form-linha { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.form-linha > div { flex: 1; min-width: 130px; }

/* Data/Hora maiores - primeira linha dos formularios de Registos, mais
   faceis de tocar/ler no telemovel. */
.input-grande {
  font-size: 1.35rem !important;
  padding: 0.75rem 0.8rem !important;
}
button {
  margin-top: 1.2rem;
  width: 100%;
  padding: 0.6rem;
  background: var(--accent);
  color: #0d1210;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { opacity: 0.92; }

.erro { color: #f28b7e; font-size: 0.88rem; margin-top: 0.6rem; }

/* Codigos de barras: sempre em pilha vertical (a toda a largura), nunca
   lado a lado - lado a lado ficam demasiado estreitos para ler com a
   camara do telemovel. O fundo do codigo de barras em si (.barcode-img)
   mantem-se sempre branco com barras pretas, mesmo em tema escuro, para
   garantir contraste para leitura otica. */
.barcode-stack { display: flex; flex-direction: column; gap: 1rem; }
.barcode-block { text-align: center; }
.barcode-img { background: #ffffff; border-radius: 8px; padding: 0.6rem 0.4rem; }
.barcode-img img { max-width: 100%; display: block; margin: 0 auto; }
.barcode-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.barcode-valor { font-family: "Courier New", monospace; font-size: 0.95rem; margin-top: 0.35rem; letter-spacing: 0.03em; }

/* Codigos de barras (nao o QR do TOTP) sao tocaveis - abrem em zoom, ja
   rodados, ver .zoom-overlay abaixo. */
.barcode-stack .barcode-img img { cursor: zoom-in; }

/* Ecra de zoom para o codigo de barras: ocupa o ecra todo, a imagem roda
   90 graus e ajusta-se ao ecra do telemovel em pe, para nao ser preciso
   rodar o telemovel manualmente. Toque em qualquer lado do ecra fecha. */
.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
  cursor: zoom-out;
}
.zoom-overlay[hidden] { display: none; }
.zoom-overlay img {
  max-width: 90vh;
  max-height: 90vw;
  transform: rotate(90deg);
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem 0.6rem;
}

.grelha-posologia { font-variant-numeric: tabular-nums; }
.grelha-posologia td, .grelha-posologia th { text-align: center; }
.grelha-posologia td:first-child, .grelha-posologia th:first-child { text-align: left; }

.muted { color: var(--text-muted); font-size: 0.95rem; }

/* Menu de botoes grandes (escolha de paciente, menu do paciente) - alvos
   generosos para toque no telemovel. */
.menu-grande { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.btn-grande {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  min-height: 64px;
}
.btn-grande:hover, .btn-grande:active { border-color: var(--accent); background: var(--surface-raised); }
.btn-grande-icon { font-size: 1.8rem; line-height: 1; }

/* Titulo da ficha de medicamento com os icones de acao (Aviar/Devolver) ao lado. */
.titulo-com-acoes { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.titulo-com-acoes h1 { margin: 0; }
.acoes-icon { display: flex; gap: 0.6rem; }
.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 1.4rem;
  min-width: 56px;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* Linha "checkbox + texto" (menu de administracao: Ativo/Admin, lista de
   pacientes com acesso) - alvo de toque generoso, checkbox maior do que o
   padrao do browser. */
.check-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.1rem;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.check-linha input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Botoes de texto (Editar/Devolver/Aviar na ficha do medicamento) - mesmo
   estilo pilula das abas Ativos/Inativos, mais visiveis do que os icones
   pequenos usados antes. */
.acoes-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.acoes-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.acoes-pill:hover, .acoes-pill:active { border-color: var(--accent); color: var(--accent); }

/* Rodape com versao/data, em todas as paginas (base.html) - valores vêm
   automaticamente de app/version.py, nao precisam de ser tocados aqui. */
.app-footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.5rem 1.2rem 1.5rem;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Pagina de Changelog do Admin - texto pre-formatado (vem tal e qual de
   app/CHANGELOG.md), mas com quebra de linha automatica para nao obrigar a
   scroll horizontal no telemovel. */
.changelog-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

/* Ecra Posologia do paciente - um cartao por medicamento, dias da semana
   (so os que tem toma) com a lista de refeicoes desse dia por baixo. */
.posologia-medicamento { margin-top: 0; }
.posologia-dia { margin: 0.9rem 0; }
.posologia-dia:last-child { margin-bottom: 0; }
.posologia-dia-label { font-weight: 600; color: var(--accent); margin-bottom: 0.3rem; }
.posologia-itens { margin: 0; padding-left: 1.3rem; }
.posologia-itens li { margin-bottom: 0.2rem; }