/* Fortuna Monitor — estilos do shell.
 *
 * Alvos de PWA-015, seção 8 da spec:
 *   - 360 px sem rolagem horizontal da página
 *   - áreas de toque de no mínimo 44×44 CSS px
 *   - safe areas do aparelho respeitadas
 *   - texto ampliável a 200% sem perda de função
 *   - foco visível
 *   - severidade anunciada sem depender de cor
 *
 * Sem framework e sem fonte remota: a origem serve tudo, e uma fonte de CDN
 * seria uma dependência externa no caminho de uma ferramenta de plantão.
 */

:root {
  --bg: #0b1220;
  --surface: #131c2e;
  --surface-2: #1b263c;
  --text: #e8edf7;
  --text-dim: #9fb0cc;
  --line: #26324b;

  --ok: #3ecf8e;
  --warning: #f2b544;
  --critical: #ff6b6b;
  --neutral: #8b9dc0;

  --focus: #7cc4ff;

  --radius: 10px;
  --gap: 12px;
  --touch: 44px;          /* mínimo de área de toque */
  --nav-height: 60px;
  --header-height: 72px;  /* cobre o cabeçalho fixo: botão de 44 px, respiros e borda */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #eef2f9;
    --text: #16203a;
    --text-dim: #4a5a78;
    --line: #d7dfec;
    --neutral: #5a6b8a;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Foco nunca escondido atrás das barras fixas (WCAG 2.2, 2.4.11). Sem isto, o
   * navegador rolava o controle focado até a borda da tela — exatamente sob a
   * navegação do rodapé ou o cabeçalho (BUG-05, reteste em navegador). */
  scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top));
  scroll-padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A PÁGINA nunca rola na horizontal. Conteúdo largo rola dentro do próprio
   * contêiner — ver .scroll-x. */
  overflow-x: hidden;
}

/* Salto para o conteúdo: primeiro item focável, visível só ao receber foco. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
  z-index: 10;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Foco sempre visível, inclusive em tema claro. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Safe areas: o notch e a barra de gestos não podem cobrir conteúdo. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.app__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 3;
}

.app__brand {
  margin: 0;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.app__main {
  flex: 1;
  padding: 16px 16px calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
}
.app__main:focus { outline: none; }

h1 { font-size: 1.3rem; margin: 0 0 16px; }
h2 { font-size: 1rem; margin: 24px 0 10px; color: var(--text-dim); font-weight: 600; }

/* --------------------------------------------------------------------------
 * Faixa de estado
 * ----------------------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* A marca é textual (●▲■), não só cor: quem não distingue as cores continua
 * recebendo a informação, e o leitor de tela lê o texto ao lado. */
.banner__mark, .mark { font-weight: 700; }

.banner[data-tone="ok"] .banner__mark,       .mark[data-tone="ok"]       { color: var(--ok); }
.banner[data-tone="warning"] .banner__mark,  .mark[data-tone="warning"]  { color: var(--warning); }
.banner[data-tone="critical"] .banner__mark, .mark[data-tone="critical"] { color: var(--critical); }
.banner[data-tone="neutral"] .banner__mark,  .mark[data-tone="neutral"]  { color: var(--neutral); }

.banner[data-tone="critical"] { border-left: 4px solid var(--critical); }
.banner[data-tone="warning"]  { border-left: 4px solid var(--warning); }

.banner__text { flex: 1 1 200px; min-width: 0; }

/* --------------------------------------------------------------------------
 * Cartões
 * ----------------------------------------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  /* A 360 px cabe uma coluna; em telas maiores o grid preenche sozinho, sem
   * media query e sem estourar a largura. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.card__title { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-dim); }
.card__value { margin: 0; font-size: 1.25rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card__meta  { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-dim); }

/* Valor indisponível não é zero e não parece zero. */
.card__value[data-display="unavailable"] { color: var(--text-dim); font-weight: 500; font-size: 1rem; }
.card__value[data-display="stale"]::after,
.card__value[data-display="partial"]::after {
  content: attr(data-suffix);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dim);
}

.card--link { padding: 0; }
.card__anchor {
  display: block;
  padding: 14px;
  /* Toda a área do cartão é alvo de toque, com folga acima do mínimo. */
  min-height: var(--touch);
  color: inherit;
  text-decoration: none;
}
.card__anchor:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
 * Estados
 * ----------------------------------------------------------------------- */

.state {
  padding: 20px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-align: center;
}
.state--error { border-style: solid; border-color: var(--critical); color: var(--text); }
.state p { margin: 0 0 12px; }
.state p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
 * Botões — todos com no mínimo 44×44
 * ----------------------------------------------------------------------- */

.btn {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.btn:hover { background: var(--surface); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--icon { padding: 10px; font-size: 1.1rem; line-height: 1; }
.btn--inline { min-height: var(--touch); padding: 8px 14px; }

/* --------------------------------------------------------------------------
 * Navegação inferior
 * ----------------------------------------------------------------------- */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 4;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right));
  display: flex;
  gap: 4px;
  /* Sete destinos não cabem a 360 px. A NAVEGAÇÃO rola na horizontal; a página
   * não. Esconder itens atrás de um menu deixaria destinos invisíveis. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__list::-webkit-scrollbar { display: none; }

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  min-width: max(var(--touch), 68px);
  padding: 8px 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.78rem;
  white-space: nowrap;
  border-top: 2px solid transparent;
}
.nav__link[aria-current="page"] {
  color: var(--text);
  border-top-color: var(--focus);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Aviso de atualização
 * ----------------------------------------------------------------------- */

.update {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: 5;
}

/* --------------------------------------------------------------------------
 * Conteúdo largo rola dentro do contêiner, nunca a página
 * ----------------------------------------------------------------------- */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 480px; border-collapse: collapse; }

img, svg, canvas { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
 * Preferências do sistema
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --line: #6c7f9e; --text-dim: #c7d3e6; }
  .card, .btn { border-width: 2px; }
}

/* Paisagem em tela baixa: a navegação some do rodapé fixo para não comer o
 * conteúdo, e vira parte do fluxo. */
@media (orientation: landscape) and (max-height: 460px) {
  .nav { position: static; }
  html { scroll-padding-bottom: 0; }  /* a navegação deixa de ser fixa */
  .app__main { padding-bottom: 24px; }
  .update { bottom: 12px; }
}

/* ---------------------------------------------------------------------------
 * Filtros, detalhe e evolução
 * ------------------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 16px;
}

.filters__field { display: flex; flex-direction: column; gap: 4px; margin: 0; flex: 1 1 140px; }
.filters__field label { font-size: 0.8rem; color: var(--text-dim); }

.filters__field select,
.filters__field textarea {
  min-height: var(--touch);
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  /* Largura mínima zero: sem isso o campo empurra a página na horizontal a
   * 360 px, que é justamente o que PWA-015 proíbe. */
  min-width: 0;
  width: 100%;
}

.filters__field textarea { min-height: calc(var(--touch) + 12px); resize: vertical; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--text-dim);
}

.detail { margin: 0 0 20px; }
.detail dt { font-size: 0.8rem; color: var(--text-dim); }
.detail dd { margin: 0 0 12px; font-size: 0.95rem; }
.detail__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ack { padding: 16px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; }
.ack h2 { margin-top: 0; }
.ack__note { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-dim); }
.ack__result { margin: 12px 0 0; font-size: 0.9rem; }

.timeline { list-style: none; padding: 0; margin: 0; }

.timeline__item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--line);
}

.timeline__item[data-kind="opened"]   { border-left-color: var(--critical); }
.timeline__item[data-kind="resolved"] { border-left-color: var(--ok); }
.timeline__when { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-dim); }
.timeline__what { flex: 1 1 200px; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
 * Preferências e dispositivos
 * ------------------------------------------------------------------------ */

.hint { margin: 0 0 16px; font-size: 0.85rem; color: var(--text-dim); }

.permission {
  padding: 16px;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.permission h2 { margin-top: 0; }
.permission__state { margin: 0 0 8px; }
.permission__guidance { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-dim); }

.prefs { list-style: none; padding: 0; margin: 0 0 24px; }

.pref { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pref:last-child { border-bottom: none; }

/* A linha inteira é área de toque: o alvo é o rótulo, não só a caixinha. */
.pref__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch);
  cursor: pointer;
}

.pref__toggle { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ok); }
.pref__label { font-size: 0.95rem; overflow-wrap: anywhere; }
.pref__help { margin: 4px 0 0 34px; font-size: 0.8rem; color: var(--text-dim); }

/* O aviso de que o interruptor está ligado mas nada vai chegar. É a informação
 * que impede a tela de mentir, então não pode passar por detalhe discreto. */
.pref__reality {
  margin: 8px 0 0 34px;
  padding: 8px 10px;
  font-size: 0.8rem;
  border-left: 3px solid var(--warning);
  background: var(--surface-2);
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.btn--primary { border-color: var(--ok); }

/* ---------------------------------------------------------------------------
 * Painéis e conta
 * ------------------------------------------------------------------------ */

.gaps { list-style: none; padding: 0; margin: 0 0 24px; }
.gaps li {
  padding: 8px 0 8px 12px;
  font-size: 0.85rem;
  border-left: 3px solid var(--neutral);
  overflow-wrap: anywhere;
}

.btn--danger { border-color: var(--critical); }

.steps { margin: 0 0 16px; padding-left: 1.4em; }
.steps li { margin: 0 0 8px; }

[hidden] { display: none !important; }