/* ==========================================================================
   RotinaAtiva — Linguagem Visual Partilhada (issue #17)

   Tokens (cor, tipografia, espaçamento) e componentes base (cartão, botão,
   campo de formulário, painel, tabela) consumidos tanto por index.html
   (interface do paciente) como por dashboard.html (interface do
   terapeuta). Substitui os blocos de estilo duplicados que existiam nas
   duas páginas.

   Os valores de cor cumprem WCAG AA por omissão (4.5:1 para texto normal,
   3:1 para texto grande/componentes de interface) — ver docs/agents ou o
   corpo da issue #17 para o cálculo de contraste usado ao escolher estas
   cores.

   Os tokens --font-scale / --spacing-* são ajustados em runtime pelo
   painel de acessibilidade em index.html (ver o <script> no <head> desse
   ficheiro). Os valores aqui definidos em :root são os valores por
   omissão / a fonte da verdade a partir da qual esse painel ajusta.
   dashboard.html não tem (ainda) esse painel, pelo que usa sempre estes
   valores por omissão — os componentes partilhados já respondem a estas
   variáveis para que uma futura ticket possa ligar o mesmo painel aqui
   sem precisar de tocar nos componentes. */

:root {
  /* --- Cor: superfícies e texto --- */
  --color-bg-page: #eef2f5;
  --color-surface: #ffffff;
  --color-text: #1c2b36;
  --color-text-secondary: #4a5a68;
  --color-border: #7c8a97;
  --color-border-light: #d7dde2;

  /* --- Cor: marca / ações primárias ---
     Verde-azulado (teal-emerald) deliberadamente distinto de
     --color-success (verde-oliva, #256b29, inalterado): ~39° de
     diferença de matiz (H162.7° vs H123.4°), para que uma ação primária
     nunca se confunda visualmente com um estado "concluído com sucesso".
     Todas as combinações texto/ícone/fundo que estes valores tocam foram
     verificadas contra o cálculo real de contraste WCAG (ver issue #35
     do mapa de redesign, #30 no tracker) e cumprem AA com folga. */
  --color-primary: #0d6e52;
  --color-primary-hover: #095440;
  --color-primary-tint: #e3f5ef;

  /* --- Cor: sucesso / confirmação --- */
  --color-success: #256b29;
  --color-success-hover: #1a4f1f;
  --color-success-tint: #eafaf1;

  /* --- Cor: perigo / remoção --- */
  --color-danger: #b3261e;
  --color-danger-hover: #8c1e18;

  /* --- Cor: administração --- */
  --color-admin: #6a3d8f;
  --color-admin-hover: #532f70;

  /* --- Cor: aviso (texto informativo, ex. notas de acesso restrito) ---
     Nota: o tom "amber" tradicional (#e67e22) só dá ~2.85:1 sobre branco,
     por isso este é mais escuro para cumprir os 4.5:1 exigidos para texto. */
  --color-warning: #a15c00;

  /* --- Cor: neutro / secundário --- */
  --color-neutral: #5b6672;
  --color-neutral-hover: #454e58;

  /* --- Cor: estados desativados (sem requisito de contraste WCAG) --- */
  --color-disabled-bg: #c7ccd1;

  /* --- Cor: foco de teclado --- */
  --color-focus-ring: #0b3d91;

  /* --- Tipografia ---
     system-ui/-apple-system à frente: deixa macOS/Linux/Windows moderno
     usarem a sua própria sans nativa em vez de cair sempre no fallback
     'Segoe UI' explícito. Sem webfont novo, sem pedido de rede extra. */
  --font-family-base: system-ui, -apple-system, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.5rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* --- Espaçamento: ajustável em runtime (painel de acessibilidade) ---
     Estes cinco tokens são os que index.js / o script inline em
     index.html escrevem via document.documentElement.style — manter os
     nomes exatamente como estão. */
  --font-scale: 1;
  --spacing-gap: 15px;
  --spacing-padding: 20px;
  --spacing-btn-padding: 15px 30px;
  --spacing-line-height: 1.4;

  /* --- Espaçamento: escala estática (não afetada pelo painel) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Forma --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.12);
  --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* --- Alvo de toque mínimo (WCAG 2.5.5 / 2.5.8), aplicado por omissão --- */
  --tap-target-min: 44px;
}

/* ==========================================================================
   Reset base e tipografia
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-page);
  color: var(--color-text);
  line-height: var(--spacing-line-height);
  font-size: calc(var(--font-size-base) * var(--font-scale));
}

h1,
h2,
h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-primary);
}

/* Visível apenas quando a navegação é feita por teclado/leitor de ecrã em
   browsers que suportam :focus-visible; nos restantes, o focus normal do
   browser continua a aplicar-se. */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Utilitário partilhado para esconder elementos (usado em ambas as
   páginas com o mesmo significado). */
.escondido {
  display: none !important;
}

/* ==========================================================================
   Componente: Cartão
   ========================================================================== */

.cartao-tarefa {
  background-color: var(--color-surface);
  border-left: 8px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-padding);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

/* ==========================================================================
   Componente: Painel
   ========================================================================== */

.painel-formulario,
#area-login,
#painel-acessibilidade {
  background-color: var(--color-surface);
  padding: var(--spacing-padding);
}

/* #painel-acessibilidade fica de fora do border-radius/box-shadow
   partilhados: é uma gaveta fixa, rente à borda direita do ecrã, com a
   sua própria sombra (ver index.html) — arredondar os cantos ficaria
   incorreto aqui. */
.painel-formulario,
#area-login {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

/* ==========================================================================
   Componente: Botão
   ========================================================================== */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding: var(--spacing-btn-padding);
  font-family: inherit;
  font-size: calc(var(--font-size-base) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-neutral);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease;
}

button:hover:not(:disabled) {
  background-color: var(--color-neutral-hover);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* ==========================================================================
   Componente: Campo de formulário
   ========================================================================== */

label {
  display: block;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: calc(var(--font-size-base) * var(--font-scale));
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

input:not([type='checkbox']):not([type='radio']):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

input:not([type='checkbox']):not([type='radio']):disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-bg-page);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

input[type='checkbox'],
input[type='radio'] {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Componente: Tabela
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-gap);
  font-size: var(--font-size-sm);
}

th,
td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-3);
  text-align: left;
}

th {
  background-color: var(--color-bg-page);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

tr:nth-child(even) {
  background-color: var(--color-bg-page);
}