/* Tokens do design system do UmAtletaIA (packages/comum/comum/web/tokens.css): escuro por padrão, claro pelo sistema.
 * Sem fonte externa: a pilha do sistema evita arquivo extra e qualquer chamada a terceiro. */
:root {
  --background: oklch(0.16 0.008 250);
  --foreground: oklch(0.96 0.005 100);
  --card: oklch(0.2 0.01 250);
  --surface: oklch(0.23 0.012 250);
  --muted: oklch(0.24 0.01 250);
  --muted-foreground: oklch(0.7 0.012 250);
  --primary: oklch(0.9 0.2 125);
  --warn: oklch(0.82 0.15 80);
  --destructive: oklch(0.65 0.2 25);
  --border: oklch(1 0 0 / 9%);
  --radius: 0.75rem;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: oklch(0.985 0.004 110);
    --foreground: oklch(0.18 0.012 250);
    --card: oklch(1 0 0);
    --surface: oklch(0.96 0.006 110);
    --muted: oklch(0.95 0.005 110);
    --muted-foreground: oklch(0.46 0.012 250);
    --primary: oklch(0.5 0.15 132);
    --warn: oklch(0.51 0.15 70);
    --destructive: oklch(0.56 0.21 25);
    --border: oklch(0.18 0.012 250 / 10%);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 3rem; }

.topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.topo h1 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--muted-foreground); }
.marca { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; }
.marca span { color: var(--primary); }
.marca:focus-visible, .rodape a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.geral, .item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.geral { border-left: 6px solid var(--cor); margin-bottom: 1rem; }
.geral-texto { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.item { border-left: 6px solid var(--cor); }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.item h2 { margin: 0; font-size: 1.125rem; }
.selo { margin: 0; font-weight: 700; color: var(--cor); text-align: right; }
.hora { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.geral .hora:empty { display: none; }

/* Sete dias, o mais antigo à esquerda. Cor + texto no title/aria-label: a cor sozinha não diz nada. */
.dias { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; }
.dia { height: 2rem; border-radius: 6px; background: var(--cor); position: relative; }
.dia span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.estado-ok { --cor: var(--primary); }
.estado-degradado { --cor: var(--warn); }
.estado-fora { --cor: var(--destructive); }
.estado-sem_dados { --cor: var(--muted-foreground); }
.dia.estado-sem_dados { background: var(--muted); }

.aviso, .rodape { font-size: 0.875rem; color: var(--muted-foreground); }
.rodape { margin-top: 2rem; }
.rodape a { color: var(--foreground); }

@media (max-width: 480px) {
  main { padding-top: 1.25rem; }
  .geral-texto { font-size: 1.25rem; }
  .dia { height: 1.75rem; }
}