/* 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.
 */

/* Paleta: fundo branco, tipografia e barras em preto, detalhe em azul claro.
 *
 * Três decisões que não são estéticas:
 *
 * 1. **Um só esquema.** O branco é o desenho, não a variante clara dele. Não
 *    existe bloco `prefers-color-scheme: dark` reintroduzindo fundo escuro;
 *    `color-scheme: light` faz o navegador desenhar campos e barras de rolagem
 *    coerentes com isso.
 * 2. **Azul claro é detalhe, não texto.** `--accent` (#4da3ff) tem 2,6:1 sobre
 *    branco: serve para indicador, borda e preenchimento, nunca para texto.
 *    Texto e link em azul usam `--accent-ink` (#0b63c5, 5,6:1), que passa AA.
 * 3. **Severidade não depende de cor.** As cores de estado continuam, mas o
 *    glifo (`●▲■○`) permanece o canal primário — requisito da seção 8.
 */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  /* Preenchimento sutil: hover, listras de tabela, campo desabilitado. */
  --surface-2: #f5f7fa;
  /* Preto do desenho: barras, títulos, botão primário. */
  --ink: #0a0a0a;
  --text: #0a0a0a;
  --text-dim: #5c6370;
  /* Fio de cabelo. Em tela branca, 1 px disto substitui caixa preenchida. */
  --line: #e4e7ec;
  --line-strong: #c9ced6;

  --accent: #4da3ff;
  --accent-ink: #0b63c5;
  --accent-soft: #eaf4ff;

  --ok: #0f8a4f;
  --warning: #9a6200;
  --critical: #c42b2b;
  --neutral: #5c6370;

  --focus: #0b63c5;

  /* Cantos menores que o original: menos "cartão", mais documento. */
  --radius: 8px;
  --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 */
}

*, *::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;
  position: sticky;
  top: 0;
  /* A barra preta é o que separa o aplicativo da página; sem ela, fundo branco
   * com fio de cabelo não dá âncora visual nenhuma no topo. */
  background: var(--ink);
  color: #ffffff;
  z-index: 3;
}

/* Dentro da barra preta, o botão inverte: contorno claro sobre preto. */
.app__header .btn {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}
.app__header .btn:hover { background: rgba(255, 255, 255, 0.12); }

.app__brand {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.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.35rem; margin: 0 0 18px; font-weight: 600; letter-spacing: -0.01em; }
/* Subtítulo como rótulo de seção: pequeno, espaçado, discreto. */
h2 {
  font-size: 0.74rem;
  margin: 28px 0 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
 * 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 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card__value { margin: 0; font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.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); }
/* Cartão que leva a algum lugar ganha o detalhe azul no hover, não no repouso. */
.card--link:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
 * 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-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink); }
.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(--ink);
  border-top-color: var(--accent);
  font-weight: 600;
}
.nav__link:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
 * 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; }
}

/* ---------------------------------------------------------------------------
 * Modo desktop — a partir de 900 px
 *
 * O mesmo HTML. A navegação sai do rodapé e vira coluna à esquerda, o conteúdo
 * ganha largura máxima de leitura e os cartões se espalham em grade. Nada é
 * escondido nem duplicado: só reposicionado, para que o app continue sendo um
 * só em qualquer tela.
 * ------------------------------------------------------------------------ */

@media (min-width: 900px) {
  :root { --nav-width: 220px; }

  .app {
    display: grid;
    /* TODOS os filhos de `.app` precisam de área nomeada. A faixa de estado
     * ficou de fora na primeira versão e o grid a auto-posicionou na célula da
     * navegação — ela cobriu a coluna inteira e engoliu o clique no botão
     * "Entrar". `.update` não entra aqui porque é `position: fixed`. */
    grid-template-columns: var(--nav-width) 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "cabecalho cabecalho"
      "faixa     faixa"
      "navegacao conteudo";
  }

  .app__header { grid-area: cabecalho; }
  .banner { grid-area: faixa; }

  .nav {
    grid-area: navegacao;
    position: sticky;
    top: var(--header-height);
    /* Os deslocamentos do modo fixo do celular precisam ser desfeitos: herdados
     * aqui, a coluna se estica por cima do conteúdo e engole cliques — foi o
     * que cobriu o botão "Entrar" da faixa. Mesma razão para baixar o z-index:
     * no rodapé ela flutua sobre o conteúdo, na lateral ela convive. */
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    align-self: start;
    height: calc(100dvh - var(--header-height));
    border-top: none;
    border-right: 1px solid var(--line);
    padding-bottom: 0;
  }

  .nav__list {
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    overflow-x: visible;
  }

  .nav__link {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    border-top: none;
    /* No rodapé o indicador é uma barra em cima; na coluna, à esquerda. */
    border-left: 3px solid transparent;
    border-radius: var(--radius);
  }

  .nav__link[aria-current="page"] {
    border-top-color: transparent;
    border-left-color: var(--accent);
    background: var(--accent-soft);
  }

  .app__main {
    grid-area: conteudo;
    /* Sem a navegação fixa embaixo, o respiro inferior volta ao normal. */
    padding: 24px 32px 48px;
    max-width: 1200px;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + 8px);
    scroll-padding-bottom: 8px;
  }

  h1 { font-size: 1.6rem; margin-bottom: 24px; }

  /* Cartões maiores: em tela larga cabem mais por linha sem ficarem estreitos. */
  .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

  .update { left: auto; right: 24px; bottom: 24px; max-width: 380px; }

  /* O formulário de entrada não precisa ocupar a largura toda numa tela grande. */
  .form { max-width: 26rem; }
}

/* Telas muito largas: mais uma coluna de cartões, e o conteúdo centralizado. */
@media (min-width: 1400px) {
  .app__main { margin-inline: auto; }
}

/* ---------------------------------------------------------------------------
 * 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; }

/* Correção: status marcado pela pessoa e texto para o Claude. */
.fix { padding: 16px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; }
.fix h2 { margin-top: 0; }
.fix__note { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-dim); }
.fix__result { margin: 12px 0 0; font-size: 0.9rem; }
.fix__fallback {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fix--bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fix--bulk .fix__result,
.fix--bulk .fix__fallback { flex-basis: 100%; }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px 14px; }
.card__select,
.card__triage { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); font-size: 0.85rem; color: var(--text-dim); }
.card__select input { width: 20px; height: 20px; }
.card__triage select {
  min-height: var(--touch);
  padding: 0 8px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

/* Primário é preto cheio: a ação principal da tela não compete com nada. */
.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  font-weight: 600;
}
.btn--primary:hover { background: #232323; border-color: #232323; }
.btn--primary:disabled { background: var(--line-strong); border-color: var(--line-strong); color: #ffffff; }

/* ---------------------------------------------------------------------------
 * 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); color: var(--critical); }
.btn--danger:hover { background: #fdf2f2; border-color: var(--critical); }

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

/* ---------------------------------------------------------------------------
 * Links e formulário
 * ------------------------------------------------------------------------ */

/* Azul legível para texto; o azul claro fica nos detalhes de superfície. */
a { color: var(--accent-ink); }
a:hover { text-decoration-thickness: 2px; }

.back { font-size: 0.9rem; }

/* Entrada da conta de desenvolvedor. Coluna única, largura de leitura. */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 24rem;
  margin: 0 0 20px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.field__input {
  min-height: var(--touch);
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
/* O detalhe azul marca o campo em foco, sem substituir o anel de foco. */
.field__input:focus { border-color: var(--accent); background: var(--accent-soft); }

/* Caminho alternativo na faixa de entrada: link, não botão. */
.banner__alt { font-size: 0.85rem; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * Situação do erro: resolvido, em correção, quebrado
 * ------------------------------------------------------------------------ */

.situacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.78rem;
  line-height: 1;
  flex: none;
}

.situacao[data-tone="ok"]       { color: var(--ok); }
.situacao[data-tone="warning"]  { color: var(--warning); }
.situacao[data-tone="critical"] { color: var(--critical); }

/* Em correção: o glifo gira devagar — alguém está trabalhando nisto. */
.situacao[data-kind="fixing"] .situacao__glifo {
  display: inline-block;
  animation: situacao-girando 1.4s linear infinite;
}

@keyframes situacao-girando {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Movimento é informação aqui, então sem animação ele vira um ponto pulsando
 * de opacidade — mais discreto, e ainda distinguível do check e do X. */
@media (prefers-reduced-motion: reduce) {
  .situacao[data-kind="fixing"] .situacao__glifo {
    animation: situacao-piscando 2s ease-in-out infinite;
  }
  @keyframes situacao-piscando {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
}

/* ---------------------------------------------------------------------------
 * Requisições de feature
 * ------------------------------------------------------------------------ */

.form--request { max-width: 42rem; }

/* Uma coluna só: a lista é de leitura, com texto que pode ser longo. */
.cards--requests { grid-template-columns: 1fr; }

.card--request { padding: 16px; }

.request__body {
  margin: 10px 0 0;
  white-space: pre-wrap;      /* o parágrafo que a pessoa escreveu é conteúdo */
  overflow-wrap: anywhere;
  color: var(--text);
}

.request__anexos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }

.anexo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.anexo__rotulo {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.anexo__player { width: 100%; max-width: 520px; display: block; }
video.anexo__player { max-height: 60vh; background: var(--ink); border-radius: var(--radius); }

.gravacao { display: flex; flex-direction: column; gap: 8px; }
.gravacao__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.gravacao__tempo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--critical);
}

/* Ponto pulsando enquanto grava: o tempo correndo sozinho já diz, mas num
 * celular na mão a marca vermelha é o que se vê de relance. */
.gravacao__tempo::before {
  content: '●';
  margin-right: 6px;
  animation: gravando 1.2s ease-in-out infinite;
}

@keyframes gravando {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .gravacao__tempo::before { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Diagnóstico
 * ------------------------------------------------------------------------ */

.diag__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 4px; }

.diag__resumo { margin: 0; flex: 1 1 260px; font-weight: 600; }
.diag__resumo[data-tone="ok"]       { color: var(--ok); }
.diag__resumo[data-tone="warning"]  { color: var(--warning); }
.diag__resumo[data-tone="critical"] { color: var(--critical); }

.diag { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }

.diag__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.diag__cabecalho { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* O selo é o que se lê de relance: largura fixa para a coluna não dançar. */
.diag__selo {
  flex: none;
  min-width: 86px;
  text-align: center;
  padding: 3px 8px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.diag__selo[data-tone="ok"]       { color: var(--ok); }
.diag__selo[data-tone="warning"]  { color: var(--warning); }
.diag__selo[data-tone="critical"] { color: var(--critical); }
.diag__selo[data-tone="neutral"]  { color: var(--text-dim); }

.diag__titulo { font-weight: 600; }
.diag__camada { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.diag__detalhe { margin: 8px 0 0; }

/* A dica é o que transforma "falhou" em "faça isto". */
.diag__dica {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
  font-size: 0.9rem;
}

.diag__evidencia { margin: 10px 0 0; font-size: 0.85rem; }
.diag__evidencia summary { cursor: pointer; color: var(--accent-ink); }
.diag__evidencia pre {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.8rem;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Acompanhamento de gateways
 *
 * O gráfico é desenhado à mão em SVG — sem biblioteca, como o resto do serviço.
 * Duas decisões visuais que são regra, não gosto:
 *
 *   - **O volume vai ao fundo, em cinza claro.** Ele é contexto da amostra: uma
 *     fatia de 0% com uma chamada não pode competir visualmente com uma de 0%
 *     com cinquenta. Se o volume tivesse o mesmo peso da linha, disputaria a
 *     leitura com a métrica que importa.
 *   - **O buraco da linha fica visível.** A linha é cortada onde não houve
 *     medição, e `stroke-linecap: round` não fecha o vão. Uma linha contínua ali
 *     desenharia estabilidade que ninguém mediu.
 * ------------------------------------------------------------------------ */

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

.gw__resumo { margin: 0; flex: 1 1 240px; font-weight: 600; }
.gw__resumo[data-tone="ok"]       { color: var(--ok); }
.gw__resumo[data-tone="warning"]  { color: var(--warning); }
.gw__resumo[data-tone="critical"] { color: var(--critical); }

.gw__janelas { display: grid; gap: 4px; }
.gw__botoes { display: flex; gap: 6px; }

/* Chip de janela: área de toque cheia, sem virar botão grande. */
.btn--chip {
  min-height: var(--touch);
  padding: 8px 14px;
  font-size: 0.85rem;
}
.btn--chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.gw__aviso {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--warning);
  background: #fffbf2;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ gráfico */

.grafico { margin: 8px 0 0; }

.grafico__svg {
  display: block;
  width: 100%;
  height: 220px;
  overflow: visible;
}

.grafico__grade { stroke: var(--line); stroke-width: 1; }
.grafico__rotulo { fill: var(--text-dim); font-size: 10px; }
/* Mais escuro que a grade de propósito: a barra carrega informação — o tamanho
 * da amostra —, e em `--line` ela sumia contra o branco. Ainda assim fica atrás
 * da linha, que é a métrica principal. */
.grafico__volume { fill: var(--line-strong); opacity: 0.55; }

.grafico__linha {
  stroke-width: 2;
  stroke-linejoin: round;
  /* `butt`, não `round`: a ponta arredondada avançaria sobre o vão e sugeriria
   * continuidade onde não houve medição. */
  stroke-linecap: butt;
}

.grafico__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.grafico__item { display: inline-flex; align-items: center; gap: 6px; }

.grafico__eixo {
  display: flex;
  justify-content: space-between;
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* A frase existe para leitor de tela; em tela ela é a nota de pé do gráfico. */
.grafico__alt { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-dim); }

/* -------------------------------------------------------------- cartões */

.gw__cor {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.card--gateway .card__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card--gateway .card__value[data-tone="ok"]       { color: var(--ok); }
.card--gateway .card__value[data-tone="warning"]  { color: var(--warning); }
.card--gateway .card__value[data-tone="critical"] { color: var(--critical); }

.gw__detalhe { margin: 8px 0 0; font-size: 0.9rem; }

.gw__causas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.gw__causa {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  padding: 4px 8px;
  background: var(--surface-2);
  border-radius: 4px;
}
.gw__causa-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gw__causa-contagem { color: var(--text-dim); flex: none; }

.gw__fallback {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (min-width: 900px) {
  .grafico__svg { height: 260px; }
}