/* =========================================================================
   VALE DIGITAL — design system
   Direção: institucional paulista + precisão de fintech.
   Sem neon, sem glassmorphism, sem gradiente decorativo. A hierarquia vem
   de escala tipográfica, régua de espaçamento e superfícies em camadas.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Tinta institucional. O navy é a assinatura; o azul é a ação; o verde
     é sempre semântico (entrada de dinheiro, situação normal). */
  --navy-900: #071426;
  --navy-800: #0c2035;
  --navy-700: #12304d;
  --navy-600: #1a4370;
  --blue-600: #1b5bb0;
  --blue-500: #2570d4;
  --blue-100: #dfeaf9;
  --green-700: #0d6b4b;
  --green-500: #12946a;
  --green-100: #daf1e7;
  /* 5.03:1 sobre --amber-100, o fundo da etiqueta onde ele sempre aparece. */
  --amber-600: #8f5a06;
  --amber-100: #fbeed3;
  --red-700: #9b2318;
  --red-100: #fadfdc;

  --paper: #ffffff;
  --surface: #f7f8fa;
  --surface-sunken: #eef1f5;
  --line: #dde2e9;
  --line-strong: #c3ccd8;

  --ink: #0d1b2a;
  --ink-muted: #4a5a6d;
  /* 5.45:1 no branco e 5.13:1 na superfície. O valor anterior (#6f7f92) ficava
     em 3.85 sobre --surface e reprovava em AA para texto pequeno, que é
     justamente onde este tom é usado: metadados, dicas e legendas. */
  --ink-faint: #5b6b7f;
  --ink-inverse: #f4f7fb;

  --bg: var(--surface);
  --bg-elevated: var(--paper);

  /* Escala tipográfica com contraste real entre título e corpo. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  --text-display: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);

  /* Ritmo: não é padding uniforme. Seções respiram, cartões são densos. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3rem, 2rem + 4vw, 5.5rem);

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-raise: 0 1px 2px rgba(7, 20, 38, 0.06), 0 4px 14px rgba(7, 20, 38, 0.05);
  --shadow-lift: 0 2px 4px rgba(7, 20, 38, 0.07), 0 12px 32px rgba(7, 20, 38, 0.09);

  --duration: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.15, 1);

  --shell-max: 1200px;
  --sidebar-w: 248px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0f1a27;
    --surface: #0a121c;
    --surface-sunken: #070d15;
    --line: #1e2c3d;
    --line-strong: #2c3e54;
    --ink: #e8eef6;
    --ink-muted: #a3b3c6;
    --ink-faint: #7c8da3;
    --blue-100: #12283f;
    --green-100: #0d2b21;
    --amber-100: #2e2412;
    --red-100: #2f1613;
    --blue-500: #4f96e8;
    --green-500: #35b98a;
    --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

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

/* A regra da folha do navegador cobre HTML; o mapa esconde <g> de SVG. */
[hidden] { display: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0 0 var(--space-4); }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-800); color: #fff; padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--space-5); }
.stack > * + * { margin-top: var(--space-4); }

/* ---------- Cabeçalho institucional ---------- */

.masthead {
  background: var(--navy-900);
  color: var(--ink-inverse);
  border-bottom: 3px solid var(--blue-600);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 62px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand__mark {
  width: 30px; height: 30px; flex: none; border-radius: 3px;
  background: var(--blue-600);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.005em; }
.brand__sub {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(244, 247, 251, 0.62);
}

.masthead__toggle {
  margin-left: auto; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius); color: inherit; cursor: pointer;
}
.masthead__toggle svg { width: 22px; height: 22px; }
.masthead__toggle:hover { background: rgba(255,255,255,0.12); }

.masthead nav {
  display: none; width: 100%; flex-direction: column; align-items: stretch;
  gap: 0; padding-bottom: var(--space-3);
}
.masthead nav[data-open] { display: flex; }
.masthead nav a { padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.masthead nav .btn { margin-top: var(--space-3); justify-content: center; }

@media (min-width: 760px) {
  .masthead__toggle { display: none; }
  .masthead nav {
    display: flex; width: auto; margin-left: auto; flex-direction: row;
    align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-bottom: 0;
  }
  .masthead nav a { padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
  .masthead nav .btn { margin-top: 0; }
}
.masthead nav a {
  color: rgba(244, 247, 251, 0.82); text-decoration: none;
  font-size: var(--text-sm); padding: var(--space-2) 0;
  border-bottom: 2px solid transparent; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] {
  color: #fff; border-bottom-color: var(--blue-500);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--navy-600); color: #fff; }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--blue-500); color: var(--blue-600); }
.btn--onDark { border-color: rgba(255,255,255,0.3); color: #fff; }
.btn--onDark:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Hero editorial da home ---------- */

.hero {
  background: var(--navy-900);
  color: var(--ink-inverse);
  padding: var(--space-8) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}
/* Malha discreta: textura institucional, não decoração. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 78% 8%, #000 10%, transparent 72%);
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.35fr 1fr; align-items: end; } }

.hero__eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--blue-100); margin-bottom: var(--space-4);
}
.hero h1 {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: 400; letter-spacing: -0.028em; margin-bottom: var(--space-4);
}
.hero__lede { font-size: var(--text-md); color: rgba(244,247,251,0.78); max-width: 46ch; }

/* Vale Agora — placar de estado da cidade */
.statusboard {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.045);
  overflow: hidden;
}
.statusboard__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(244,247,251,0.66);
}
.statusboard__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.statusboard__row:last-child { border-bottom: 0; }
.statusboard__label { font-size: var(--text-sm); color: rgba(244,247,251,0.8); }
.statusboard__value { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; gap: var(--space-2); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--normal { background: var(--green-500); }
.dot--attention { background: #d99a2b; }
.dot--critical { background: #e0574a; }
.dot--unknown { background: var(--ink-faint); }

/* ---------- Seções ---------- */

.section { padding: var(--space-7) 0; }
.section--sunken { background: var(--surface-sunken); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line); padding-bottom: var(--space-3);
}
.section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.section__link { font-size: var(--text-sm); }

.eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-faint); font-weight: 600;
}

/* ---------- Notícias: composição editorial, não grade uniforme ---------- */

.newsgrid { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .newsgrid { grid-template-columns: 1.6fr 1fr; } }

.story--lead { border-bottom: 1px solid var(--line); padding-bottom: var(--space-5); }
.story--lead .story__title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.02em;
}
.story--lead .story__summary { color: var(--ink-muted); margin-top: var(--space-3); font-size: var(--text-md); }

.storylist { list-style: none; margin: 0; padding: 0; }
.storylist li { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.storylist li:last-child { border-bottom: 0; }
.story__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.story__title a { color: inherit; text-decoration: none; }
.story__title a:hover { color: var(--blue-600); text-decoration: underline; }
.story__meta {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: var(--space-2);
}
.story__cat {
  color: var(--blue-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
}

/* ---------- Cartões e métricas ---------- */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-raise);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line);
}
.card__title { font-size: var(--text-base); font-weight: 600; }
.card__body { padding: var(--space-5); }

.metrics { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.metric {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
  position: relative;
}
.metric--accent { border-left: 3px solid var(--blue-600); }
.metric--positive { border-left: 3px solid var(--green-500); }
.metric__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); font-weight: 600;
}
.metric__value {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.metric__value--serif { font-family: var(--font-display); font-weight: 500; }
.metric__hint { font-size: var(--text-xs); color: var(--ink-faint); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
}
.tag--real { background: var(--green-100); color: var(--green-700); }
.tag--derived { background: var(--blue-100); color: var(--blue-600); }
.tag--mock { background: var(--amber-100); color: var(--amber-600); }
.tag--not_implemented { background: var(--surface-sunken); color: var(--ink-faint); border-color: var(--line); }
.tag--neutral { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Painel autenticado ---------- */

/* Mobile-first: barra inferior e drawer. A sidebar fixa e um upgrade de
   tela larga, nao o padrao — antes, onze itens de navegacao empilhavam acima
   do conteudo em todo aparelho abaixo de 940px. */
.app { display: grid; min-height: 100vh; grid-template-columns: 1fr; }

/* Cabecalho compacto do painel: so existe no celular. */
.appbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--navy-900); color: var(--ink-inverse);
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
}
.appbar__menu, .sidebar__close {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius); color: inherit; cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.appbar__menu:hover, .sidebar__close:hover { background: rgba(255,255,255,0.12); }
.appbar__menu svg, .sidebar__close svg { width: 22px; height: 22px; }
.appbar__identity { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.appbar__identity strong {
  font-size: var(--text-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar__identity span { font-size: var(--text-xs); color: rgba(244,247,251,0.66); }
.appbar__switch {
  margin-left: auto; flex: none; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244,247,251,0.9); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
.appbar__switch:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Barra inferior: alvos de 56px, dentro do alcance do polegar. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 12px rgba(7, 20, 38, 0.08);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: var(--space-2) 2px;
  font: inherit; font-size: 0.6875rem; font-weight: 500;
  color: var(--ink-faint); text-decoration: none;
  background: none; border: 0; border-top: 2px solid transparent; cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.tabbar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tabbar__item:hover { color: var(--blue-600); }
.tabbar__item[aria-current="page"] { color: var(--blue-600); border-top-color: var(--blue-600); }
.tabbar__icon { width: 22px; height: 22px; flex: none; }

/* O conteudo nao pode terminar embaixo da barra. */
.app .main { padding-bottom: calc(var(--space-8) + 56px); }

.drawer-veil {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(7, 20, 38, 0.55);
}
.drawer-veil[hidden] { display: none; }

.sidebar {
  background: var(--navy-900); color: var(--ink-inverse);
  padding: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-5);
  /* No celular a sidebar e um drawer: fora da tela ate ser chamada. */
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: min(310px, 86vw); max-width: 86vw;
  transform: translateX(-100%);
  transition: transform var(--duration) var(--ease);
  overflow-y: auto;
}
.sidebar[data-open] { transform: translateX(0); }
.sidebar__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0 var(--space-5); }
.sidebar__head .sidebar__brand { padding: 0; flex: 1; min-width: 0; }
.sidebar__foot { padding: 0 var(--space-5); margin-top: auto; }
.sidebar__foot .brand__sub { margin-bottom: var(--space-2); }
.sidebar__brand { padding: 0 var(--space-5); }

@media (min-width: 940px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .appbar, .tabbar, .drawer-veil, .sidebar__close { display: none; }
  .app .main { padding-bottom: var(--space-8); }
  .sidebar {
    position: static; width: auto; max-width: none;
    transform: none; transition: none;
  }
}
.sidenav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sidenav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: rgba(244,247,251,0.74); text-decoration: none; font-size: var(--text-sm);
  border-left: 3px solid transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sidenav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidenav a[aria-current="page"] {
  background: rgba(37, 112, 212, 0.16); color: #fff; border-left-color: var(--blue-500);
}
.sidenav .soon {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(244,247,251,0.55); border: 1px solid rgba(255,255,255,0.16);
  padding: 1px 5px; border-radius: 3px;
}
.sidenav__soon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: rgba(244,247,251,0.62); font-size: var(--text-sm);
  border-left: 3px solid transparent; cursor: default;
}

.main { padding: var(--space-6) 0 var(--space-8); min-width: 0; }
.main .shell { max-width: 1080px; }

.greeting { margin-bottom: var(--space-6); }
.greeting h1 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  letter-spacing: -0.025em;
}
.greeting p { color: var(--ink-muted); margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.panelgrid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .panelgrid--2 { grid-template-columns: 1.45fr 1fr; } }

/* ---------- Listas de atividade e tabelas ---------- */

.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: flex; gap: var(--space-4); align-items: baseline; justify-content: space-between;
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line);
}
.feed li:last-child { border-bottom: 0; }
.feed__text { min-width: 0; }
.feed__title { font-size: var(--text-sm); font-weight: 500; }
.feed__meta { font-size: var(--text-xs); color: var(--ink-faint); }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.amount--credit { color: var(--green-700); }
.amount--debit { color: var(--red-700); }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-faint); font-weight: 600;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-strong);
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table--scroll { display: block; overflow-x: auto; }


/* ---------- Painel: hierarquia no celular ---------- */

/* Saldo em destaque, largura inteira. */
.metric--hero { margin-bottom: var(--space-4); }
.metric--hero .metric__value { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); }
.metric--hero .metric__hint { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.metric__action { margin-left: auto; font-weight: 600; }

/* Atalhos: os destinos que o cidadao busca antes de qualquer contagem. */
.quicklinks { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.quicklinks a {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.quicklinks a:hover { border-color: var(--blue-500); box-shadow: var(--shadow-raise); }
.quicklinks span { font-size: var(--text-sm); font-weight: 600; }
.quicklinks small { font-size: var(--text-xs); color: var(--ink-faint); }

/* Contagens em duas colunas: quatro cartoes de largura inteira empilhados
   viram rolagem sem informacao. */
.metrics--compact { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.metrics--compact .metric { padding: var(--space-3) var(--space-4); }
.metrics--compact .metric__value { font-size: 1.5rem; }
.metric--span2 { grid-column: span 2; }

@media (min-width: 700px) {
  .quicklinks { grid-template-columns: repeat(4, 1fr); }
  .metrics--compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .metric--span2 { grid-column: auto; }
}

/* ---------- Tabelas viram cartões no celular ---------- */

/* Rolagem horizontal funciona, mas esconde coluna. Abaixo de 640px cada linha
   vira um bloco, com o cabecalho repetido via data-label. */
@media (max-width: 639px) {
  .table--cards table, .table--cards thead, .table--cards tbody,
  .table--cards tr, .table--cards th, .table--cards td { display: block; }
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--cards tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); margin-bottom: var(--space-3);
  }
  .table--cards td {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-2) 0; border: 0; text-align: right;
  }
  .table--cards td::before {
    content: attr(data-label);
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-faint); font-weight: 600; text-align: left; flex: none;
  }
  .table--cards td:last-child { padding-bottom: 0; }
}

/* ---------- Gráfico de barras em CSS puro ---------- */

.chart { display: flex; align-items: flex-end; gap: 4px; height: 132px; padding: var(--space-2) 0; }
.chart__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; }
.chart__bar { border-radius: 2px 2px 0 0; min-height: 2px; }
.chart__bar--in { background: var(--green-500); }
.chart__bar--out { background: var(--blue-500); opacity: 0.75; }
.chart__axis { display: flex; gap: 4px; font-size: 0.625rem; color: var(--ink-faint); }
.chart__axis span { flex: 1 1 0; text-align: center; overflow: hidden; }
.legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--ink-muted); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ---------- Vale ID ---------- */

.valeid {
  background: linear-gradient(158deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid; gap: var(--space-5);
  box-shadow: var(--shadow-lift);
  position: relative; overflow: hidden;
}
.valeid::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.09);
}
@media (min-width: 680px) { .valeid { grid-template-columns: 1fr auto; align-items: start; } }
.valeid__label {
  font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244,247,251,0.6);
}
.valeid__name {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 500; margin: var(--space-2) 0 var(--space-5); letter-spacing: -0.02em;
}
.valeid__fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.valeid__field span {
  display: block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,247,251,0.55); margin-bottom: 2px;
}
.valeid__field strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.qr {
  background: #fff; padding: 10px; border-radius: var(--radius);
  display: grid; place-items: center; position: relative; z-index: 1;
}
.qr svg { display: block; }
.qr__caption { font-size: 0.625rem; color: var(--navy-800); text-align: center; margin-top: 6px; letter-spacing: 0.05em; }

/* ---------- Mapa ---------- */

.mapframe {
  position: relative; background: var(--navy-900); border-radius: var(--radius-lg);
  border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4 / 3;
}
.mapframe svg { display: block; width: 100%; height: 100%; }
.mapfilters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip {
  font: inherit; font-size: var(--text-xs); font-weight: 500;
  padding: var(--space-2) var(--space-3); border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink-muted);
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.chip:hover { border-color: var(--blue-500); color: var(--blue-600); }
.chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.maplegend {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs); color: var(--ink-muted);
}
.maplegend li { display: flex; align-items: center; gap: var(--space-2); }
.maplegend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.maplegend__dot--hospital   { background: #e0574a; }
.maplegend__dot--seguranca  { background: #4f96e8; }
.maplegend__dot--publico    { background: #f0c05a; }
.maplegend__dot--empresa    { background: #35b98a; }
.maplegend__dot--imovel     { background: #b58ce0; }
.maplegend__dot--obra       { background: #d99a2b; }
.maplegend__dot--interdicao { background: #e0574a; }
.maplegend__dot--evento     { background: #7ee0c8; }

/* Foco no marcador precisa aparecer sobre fundo escuro. */
.marker:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.marker[tabindex] { cursor: default; }


/* =========================================================================
   Utilitários
   Existem para que as views parem de carregar `style="..."`. Isso não é só
   arrumação: sem atributo de estilo no HTML, a CSP pode recusar
   `style-src 'unsafe-inline'`.
   ========================================================================= */

/* Ritmo vertical */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-2 { margin-left: var(--space-2); }
.m-0 { margin: 0; }

/* Texto */
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.serif { font-family: var(--font-display); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.plain { text-decoration: none; color: inherit; }
.plain:hover { color: var(--blue-600); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Largura de leitura: linha longa demais cansa, curta demais pica o texto. */
.measure { max-width: 64ch; }
.measure-wide { max-width: 70ch; }
.shell--narrow { max-width: 760px; }
.shell--mid { max-width: 820px; }
.shell--wide { max-width: 900px; }

/* Composição */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.inline-form { display: inline; }
.grow { flex: 1; min-width: 0; }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.grid-fit { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.grid-fit--wide { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Escala estática de proporção para gráficos.
   Barra é geometria dinâmica; sem estas classes, cada barra precisaria de um
   `style="height:37%"` e a CSP teria de aceitar estilo inline de volta. */
.gazette-act { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.gazette-act__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-3); }
.gazette-act__body { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.75; }
.gazette-head { border-bottom: 3px solid var(--navy-900); padding-bottom: var(--space-4); margin-bottom: var(--space-2); }
.gazette-head h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.02em; }
.card__title-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.story__summary--tight { color: var(--ink-muted); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.positive { color: var(--green-700); }
.negative { color: var(--red-700); }
.swatch--in { background: var(--green-500); }
.swatch--out { background: var(--blue-500); }
.buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.fw-400 { font-weight: 400; }
.ls-0 { letter-spacing: 0; }
.shell--tight { max-width: 560px; }
.metrics--3 { grid-template-columns: repeat(3, 1fr); }
.textarea-comfy { line-height: 1.6; resize: vertical; }
.article--related { max-width: 68ch; margin: var(--space-7) auto 0; }
.display-sm { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; }
.display-md { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; }

/* Trilho e preenchimento das barras de proporção (Banco do Vale). */
.bar-track {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--surface-sunken); margin-top: 6px;
}
.bar-fill { height: 100%; background: var(--blue-500); }

.bh-0{height:0%}
.bh-1{height:1%}
.bh-2{height:2%}
.bh-3{height:3%}
.bh-4{height:4%}
.bh-5{height:5%}
.bh-6{height:6%}
.bh-7{height:7%}
.bh-8{height:8%}
.bh-9{height:9%}
.bh-10{height:10%}
.bh-11{height:11%}
.bh-12{height:12%}
.bh-13{height:13%}
.bh-14{height:14%}
.bh-15{height:15%}
.bh-16{height:16%}
.bh-17{height:17%}
.bh-18{height:18%}
.bh-19{height:19%}
.bh-20{height:20%}
.bh-21{height:21%}
.bh-22{height:22%}
.bh-23{height:23%}
.bh-24{height:24%}
.bh-25{height:25%}
.bh-26{height:26%}
.bh-27{height:27%}
.bh-28{height:28%}
.bh-29{height:29%}
.bh-30{height:30%}
.bh-31{height:31%}
.bh-32{height:32%}
.bh-33{height:33%}
.bh-34{height:34%}
.bh-35{height:35%}
.bh-36{height:36%}
.bh-37{height:37%}
.bh-38{height:38%}
.bh-39{height:39%}
.bh-40{height:40%}
.bh-41{height:41%}
.bh-42{height:42%}
.bh-43{height:43%}
.bh-44{height:44%}
.bh-45{height:45%}
.bh-46{height:46%}
.bh-47{height:47%}
.bh-48{height:48%}
.bh-49{height:49%}
.bh-50{height:50%}
.bh-51{height:51%}
.bh-52{height:52%}
.bh-53{height:53%}
.bh-54{height:54%}
.bh-55{height:55%}
.bh-56{height:56%}
.bh-57{height:57%}
.bh-58{height:58%}
.bh-59{height:59%}
.bh-60{height:60%}
.bh-61{height:61%}
.bh-62{height:62%}
.bh-63{height:63%}
.bh-64{height:64%}
.bh-65{height:65%}
.bh-66{height:66%}
.bh-67{height:67%}
.bh-68{height:68%}
.bh-69{height:69%}
.bh-70{height:70%}
.bh-71{height:71%}
.bh-72{height:72%}
.bh-73{height:73%}
.bh-74{height:74%}
.bh-75{height:75%}
.bh-76{height:76%}
.bh-77{height:77%}
.bh-78{height:78%}
.bh-79{height:79%}
.bh-80{height:80%}
.bh-81{height:81%}
.bh-82{height:82%}
.bh-83{height:83%}
.bh-84{height:84%}
.bh-85{height:85%}
.bh-86{height:86%}
.bh-87{height:87%}
.bh-88{height:88%}
.bh-89{height:89%}
.bh-90{height:90%}
.bh-91{height:91%}
.bh-92{height:92%}
.bh-93{height:93%}
.bh-94{height:94%}
.bh-95{height:95%}
.bh-96{height:96%}
.bh-97{height:97%}
.bh-98{height:98%}
.bh-99{height:99%}
.bh-100{height:100%}
.bw-0{width:0%}
.bw-1{width:1%}
.bw-2{width:2%}
.bw-3{width:3%}
.bw-4{width:4%}
.bw-5{width:5%}
.bw-6{width:6%}
.bw-7{width:7%}
.bw-8{width:8%}
.bw-9{width:9%}
.bw-10{width:10%}
.bw-11{width:11%}
.bw-12{width:12%}
.bw-13{width:13%}
.bw-14{width:14%}
.bw-15{width:15%}
.bw-16{width:16%}
.bw-17{width:17%}
.bw-18{width:18%}
.bw-19{width:19%}
.bw-20{width:20%}
.bw-21{width:21%}
.bw-22{width:22%}
.bw-23{width:23%}
.bw-24{width:24%}
.bw-25{width:25%}
.bw-26{width:26%}
.bw-27{width:27%}
.bw-28{width:28%}
.bw-29{width:29%}
.bw-30{width:30%}
.bw-31{width:31%}
.bw-32{width:32%}
.bw-33{width:33%}
.bw-34{width:34%}
.bw-35{width:35%}
.bw-36{width:36%}
.bw-37{width:37%}
.bw-38{width:38%}
.bw-39{width:39%}
.bw-40{width:40%}
.bw-41{width:41%}
.bw-42{width:42%}
.bw-43{width:43%}
.bw-44{width:44%}
.bw-45{width:45%}
.bw-46{width:46%}
.bw-47{width:47%}
.bw-48{width:48%}
.bw-49{width:49%}
.bw-50{width:50%}
.bw-51{width:51%}
.bw-52{width:52%}
.bw-53{width:53%}
.bw-54{width:54%}
.bw-55{width:55%}
.bw-56{width:56%}
.bw-57{width:57%}
.bw-58{width:58%}
.bw-59{width:59%}
.bw-60{width:60%}
.bw-61{width:61%}
.bw-62{width:62%}
.bw-63{width:63%}
.bw-64{width:64%}
.bw-65{width:65%}
.bw-66{width:66%}
.bw-67{width:67%}
.bw-68{width:68%}
.bw-69{width:69%}
.bw-70{width:70%}
.bw-71{width:71%}
.bw-72{width:72%}
.bw-73{width:73%}
.bw-74{width:74%}
.bw-75{width:75%}
.bw-76{width:76%}
.bw-77{width:77%}
.bw-78{width:78%}
.bw-79{width:79%}
.bw-80{width:80%}
.bw-81{width:81%}
.bw-82{width:82%}
.bw-83{width:83%}
.bw-84{width:84%}
.bw-85{width:85%}
.bw-86{width:86%}
.bw-87{width:87%}
.bw-88{width:88%}
.bw-89{width:89%}
.bw-90{width:90%}
.bw-91{width:91%}
.bw-92{width:92%}
.bw-93{width:93%}
.bw-94{width:94%}
.bw-95{width:95%}
.bw-96{width:96%}
.bw-97{width:97%}
.bw-98{width:98%}
.bw-99{width:99%}
.bw-100{width:100%}

/* ---------- Formulários ---------- */

.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-base);
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); }

.notice {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  font-size: var(--text-sm); border: 1px solid;
}
.notice--error { background: var(--red-100); border-color: var(--red-700); color: var(--red-700); }
.notice--info { background: var(--blue-100); border-color: var(--blue-600); color: var(--navy-700); }
.notice--warn { background: var(--amber-100); border-color: var(--amber-600); color: var(--amber-600); }

.authpage { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: var(--navy-900); }
.authcard { width: min(420px, 100%); background: var(--bg-elevated); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lift); }

/* ---------- Seleção de personagem ---------- */

.charlist { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.charcard {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5);
  background: var(--bg-elevated); display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.charcard:hover { border-color: var(--blue-500); box-shadow: var(--shadow-raise); }
.charcard__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; }
.charcard__meta { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- Artigo ---------- */

.article { max-width: 68ch; margin: 0 auto; }
.article h1 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
  letter-spacing: -0.025em; margin-bottom: var(--space-4);
}
.article__lede { font-size: var(--text-md); color: var(--ink-muted); margin-bottom: var(--space-5); }
.article__body { font-size: var(--text-md); line-height: 1.72; }
.article__body p { margin-bottom: var(--space-5); }
.article__body h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; margin: var(--space-6) 0 var(--space-3); }

/* ---------- Rodapé ---------- */

.footer {
  background: var(--navy-900); color: rgba(244,247,251,0.66);
  padding: var(--space-7) 0 var(--space-6); margin-top: var(--space-7);
  font-size: var(--text-sm);
}
.footer a { color: rgba(244,247,251,0.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer__grid h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(244,247,251,0.45); margin-bottom: var(--space-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer__legal {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--text-xs);
  color: rgba(244,247,251,0.45);
}

.empty {
  padding: var(--space-6); text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty__title { font-size: var(--text-base); font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.empty__body { font-size: var(--text-sm); color: var(--ink-muted); max-width: 46ch; margin: 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Quem pede mais contraste no sistema recebe bordas visíveis e tinta cheia. */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: var(--ink);
    --ink-faint: #3d4a5a;
    --line: var(--line-strong);
  }
  .card, .metric, .charcard { border-width: 2px; }
  .tag { border-color: currentColor; }
}

/* Modo de cores forçadas (alto contraste do Windows): elementos que dependem
   só de cor de fundo precisam de borda para continuar existindo. */
@media (forced-colors: active) {
  .metric, .card, .tabbar, .statusboard { border: 1px solid CanvasText; }
  .chart__bar, .bar-fill { forced-color-adjust: none; }
  .tabbar__item[aria-current="page"] { border-top-color: Highlight; }
  .dot { forced-color-adjust: none; }
}

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

/* =========================================================================
   Impressão
   O Diário Oficial e o Vale ID são documentos: alguém vai imprimir. O extrato
   também. Sem estas regras a página sai com navegação, rodapé e fundo escuro.
   ========================================================================= */
@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-sunken: #fff; --bg-elevated: #fff;
    --ink: #000; --ink-muted: #333; --ink-faint: #555;
    --line: #bbb; --line-strong: #888;
    --shadow-raise: none; --shadow-lift: none;
  }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* Cromo de navegação não é conteúdo. */
  .masthead, .footer, .appbar, .tabbar, .sidebar, .drawer-veil,
  .skip-link, .mapfilters, .pager, .chip, .btn, form.card, .quicklinks {
    display: none !important;
  }

  .app { display: block; }
  .app .main, .main { padding: 0; }
  .shell { max-width: none; padding: 0; }
  .card, .metric, .valeid {
    border: 1px solid var(--line); box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* O Vale ID impresso é um documento, não um cartão de fundo escuro. */
  .valeid { background: #fff !important; color: #000; }
  .valeid__label, .valeid__field span { color: #444; }
  .qr { border: 1px solid #ccc; }

  /* Diário Oficial: cada ato inteiro na mesma página. */
  .gazette-act { break-inside: avoid; page-break-inside: avoid; }
  .gazette-head { border-bottom: 2px solid #000; }

  /* O leitor de papel não tem como seguir um link — mostre o destino. */
  a[href^="/"]::after { content: " (valedoipiranga" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, .plain::after, nav a::after { content: ""; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* A tabela alternativa dos gráficos passa a ser a versão útil no papel. */
  .chart, .bar-track { display: none; }
  .visually-hidden {
    position: static; width: auto; height: auto;
    overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }
}

/* ------------------------------------------------ frescor das projeções
   O saldo mascarado precisa parecer retido de propósito, não quebrado. A
   etiqueta usa o mesmo par de cores das demais tags; a nota é texto corrente,
   porque explicação escondida em tooltip não é explicação. */

.tag--stale {
  background: var(--amber-100);
  color: var(--amber-600);
}

.tag--unavailable {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.freshness-note {
  margin: calc(var(--space-3) * -1) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--amber-600);
  background: var(--amber-100);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MARCA — primeira etapa da aproximacao ao mockup
   ══════════════════════════════════════════════════════════════════════════
   O que entra aqui: a fonte, o brasao e a paleta da identidade. O que ainda
   NAO entra: hero fotografico, reestruturacao da navegacao e as paginas
   O Vale / Como Jogar / Empresas. Essas dependem das artes e das decisoes de
   conteudo, e estao declaradas como pendentes no handoff.

   A paleta e ADITIVA de proposito: os tokens institucionais continuam valendo
   para as telas de servico (Meu Vale, Banco, Redacao), que sao densas e de
   leitura longa. A identidade veste as superficies de marca. Trocar tudo de
   uma vez quebraria contraste em lugares que ninguem revisaria hoje.        */

@import url('/assets/fontes/oswald.css');

:root {
  /* Nomes e valores conforme a direcao aprovada. Contraste conferido em
     test/accessibility.test.ts — os numeros abaixo sao os medidos la. */
  --vale-graphite: #0e1116;  /* navegacao e superficies de marca */
  --vale-ivory:    #f2efe8;  /* texto sobre grafite — 16,4:1 */
  --vale-green:    #1e6b52;  /* acao principal — marfim sobre ele da 5,3:1 */
  --vale-amber:    #c99a32;  /* sobrelinha, informacao, atencao — 7,4:1 sobre grafite */

  /*
   * ATENCAO ao vermelho tijolo. Ele da 4,2:1 sobre marfim e 3,9:1 sobre
   * grafite — reprova AA para TEXTO PEQUENO nos dois fundos.
   *
   * Fica restrito a: texto grande (>=24px, ou >=18,7px em negrito, onde o
   * limite e 3:1), bordas, icones e faixas de estado. Para debito e erro em
   * corpo de texto continua valendo --red-700 (#9b2318), que da 7,9:1 e ja
   * estava validado. Nao e capricho: e a diferenca entre a cor da identidade
   * e a cor que alguem precisa conseguir ler.
   */
  --vale-brick: #b94d36;

  --font-marca: 'Oswald', 'Oswald Fallback', var(--font-body);
}

/* A metrica da Oswald e condensada; a fallback precisa acompanhar para o
   texto nao pular quando a fonte carrega (font-display: swap). */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Arial');
  size-adjust: 89%;
  ascent-override: 105%;
  descent-override: 25%;
}

/* ---- tipografia da marca ---- */

.marca-titulo {
  font-family: var(--font-marca);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}

.marca-sobrelinha {
  font-family: var(--font-marca);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-sm);
  color: var(--vale-amber);
  margin: 0 0 var(--space-3);
}

/* ---- brasao ---- */

.brasao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brasao__imagem {
  display: block;
  width: auto;
  height: 44px;
  /* Largura e altura explicitas no HTML evitam deslocamento de layout; esta
     regra so limita a altura renderizada. */
  max-width: 100%;
}

/* Duas imagens em vez de um filtro: filtro sobre PNG colorido suja o verde.
   A escolha e por SUPERFICIE, nao por tema — foi o erro da primeira tentativa.
   O cabecalho e escuro nos dois temas, entao la o marfim vale sempre; o de
   tinta serve as superficies claras. */
.brasao__imagem--marfim { display: none; }
.brasao__imagem--tinta { display: block; }

.masthead .brasao__imagem--marfim,
.app-shell .brasao__imagem--marfim { display: block; }
.masthead .brasao__imagem--tinta,
.app-shell .brasao__imagem--tinta { display: none; }

@media (max-width: 599px) {
  .brasao__imagem { height: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPERFICIES DE MARCA — home institucional
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- navegacao publica sobre grafite ---- */

.masthead--marca {
  background: var(--vale-graphite);
  border-bottom: 0;
}

.masthead--marca .masthead__inner { gap: var(--space-6); }

.nav-marca {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
  margin-left: auto;
}

.nav-marca a {
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vale-ivory);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav-marca a:hover,
.nav-marca a:focus-visible { border-bottom-color: var(--vale-amber); }
.nav-marca a[aria-current='page'] { border-bottom-color: var(--vale-amber); }

/* "Em breve" nao e link: e texto com a razao no title. */
.nav-marca span[data-soon] {
  font-family: var(--font-marca);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: default;
}

.btn--contorno {
  font-family: var(--font-marca);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vale-ivory);
  background: transparent;
  border: 2px solid var(--vale-ivory);
  padding: var(--space-3) var(--space-5);
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
}
.btn--contorno:hover { border-color: var(--vale-amber); color: var(--vale-amber); }

.btn--acao {
  font-family: var(--font-marca);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vale-ivory);
  background: var(--vale-green);
  border: 2px solid var(--vale-green);
  padding: var(--space-3) var(--space-5);
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
}
.btn--acao:hover { background: #175641; border-color: #175641; }

/* ---- hero ---- */

.hero-marca {
  position: relative;
  background: var(--vale-graphite);
  min-height: clamp(420px, 52vw, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-marca__fundo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*
 * O texto do hero fica sobre a imagem. Sem esta camada o contraste depende do
 * que estiver na foto — e foto muda. A camada garante o piso escuro do lado do
 * texto, independentemente da arte.
 */
.hero-marca__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(14, 17, 22, 0.94) 0%,
    rgba(14, 17, 22, 0.86) 34%,
    rgba(14, 17, 22, 0.45) 62%,
    rgba(14, 17, 22, 0.25) 100%
  );
}

.hero-marca__conteudo {
  position: relative;
  padding-block: var(--space-8);
  max-width: 46rem;
}

.hero-marca h1 {
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.5rem);
  color: var(--vale-ivory);
  margin-bottom: var(--space-4);
}

.hero-marca__lede {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem);
  color: var(--vale-ivory);
  max-width: 34ch;
  margin: 0 0 var(--space-6);
}

.hero-marca__acoes { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- placeholder de imagem ---- */

/*
 * Enquanto as fotografias nao existem, o lugar delas e marcado — nao
 * preenchido com recorte de mockup nem com banco de imagem sem licenca.
 * O rotulo e visivel de proposito: um placeholder que parece arte final
 * atravessa a revisao sem ninguem notar que falta o asset.
 */
.imagem-pendente {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(242, 239, 232, 0.045) 0 12px,
      rgba(242, 239, 232, 0) 12px 24px
    ),
    var(--vale-graphite);
}

.imagem-pendente::after {
  content: attr(data-legenda);
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--vale-amber);
  background: rgba(14, 17, 22, 0.86);
  border: 1px solid var(--vale-amber);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}

/* ---- secao clara: A cidade continua ---- */

.secao-marfim {
  background: var(--vale-ivory);
  padding-block: var(--space-8);
}

.titulo-secao {
  font-family: var(--font-marca);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.titulo-secao--claro { color: var(--vale-ivory); }

.titulo-secao + .regua {
  width: 3.5rem;
  height: 3px;
  background: var(--vale-amber);
  border: 0;
  margin: 0 0 var(--space-6);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-5);
}

.pilar__icone { color: var(--vale-green); margin-bottom: var(--space-3); display: block; }

.pilar h3 {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.pilar p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-3); }
.pilar__risco { width: 1.75rem; height: 2px; background: var(--vale-green); border: 0; margin: 0; }

/* ---- secao escura: Escolha sua historia ---- */

.secao-grafite {
  background: var(--vale-graphite);
  padding-block: var(--space-8);
}

.trilhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}

.trilha {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  border: 1px solid rgba(242, 239, 232, 0.16);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}

.trilha__arte { position: absolute; inset: 0; z-index: -1; }

.trilha__rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(14, 17, 22, 0.96), rgba(14, 17, 22, 0.5) 70%, transparent);
}

.trilha h3 {
  font-family: var(--font-marca);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  color: var(--vale-ivory);
  margin: 0;
}

.trilha__seta {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--vale-amber);
  color: var(--vale-amber);
  border-radius: 2px;
}

.trilha p {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(242, 239, 232, 0.82);
  background: rgba(14, 17, 22, 0.96);
}

/* ---- painel do Vale Digital na home ---- */

.painel-vale {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 20px 48px -32px rgba(13, 27, 42, 0.55);
  overflow: hidden;
}

.painel-vale__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.painel-vale__marca {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vale-green);
}

.painel-vale__nota {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.dupla-marca {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 940px) {
  .dupla-marca { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); }
}

@media (max-width: 759px) {
  .nav-marca { display: none; }
  .hero-marca { min-height: 30rem; }
}

/* ---- paginas institucionais ---- */

.hero-marca--curto { min-height: clamp(16rem, 24vw, 22rem); }
.secao-grafite--fecho { text-align: center; }
.secao-grafite--fecho .regua { margin-inline: auto; }

.caminho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-5);
  counter-reset: passo;
}

.caminho__passo { position: relative; padding-top: var(--space-2); }

.caminho__numero {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--vale-green);
  color: var(--vale-ivory);
  font-family: var(--font-marca);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.caminho__passo h3 {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.caminho__passo p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

.posicoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
}

.posicao {
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
}

.posicao__arte { display: block; height: 7.5rem; }

.posicao h3 {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
  color: var(--ink);
  margin: var(--space-4) var(--space-4) var(--space-2);
}

.posicao p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0 var(--space-4) var(--space-4);
}

.preparo {
  background: var(--vale-graphite);
  border-radius: 4px;
  padding: var(--space-6);
  color: var(--vale-ivory);
}

.preparo__titulo {
  font-family: var(--font-marca);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--vale-ivory);
}

.preparo__lede { color: rgba(242, 239, 232, 0.86); margin: 0 0 var(--space-5); max-width: 52ch; }

.preparo__lista { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }

.preparo__lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid rgba(242, 239, 232, 0.16);
  padding-top: var(--space-3);
}

.preparo__lista strong { display: block; color: var(--vale-ivory); }
.preparo__lista span { font-size: var(--text-sm); color: rgba(242, 239, 232, 0.7); }

.etiqueta-estado {
  font-family: var(--font-marca);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vale-amber);
  border: 1px solid var(--vale-amber);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.preparo__nota {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--vale-amber);
  border-left: 3px solid var(--vale-amber);
  padding-left: var(--space-4);
}

.prosa { max-width: 68ch; }
.prosa__abertura { font-size: var(--text-md); color: var(--ink); }
.prosa h2 {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-lg);
  color: var(--ink);
  margin: var(--space-6) 0 var(--space-3);
}
.prosa p, .prosa li { color: var(--ink-muted); }
.prosa strong { color: var(--ink); }

/*
 * O painel de status nasceu sobre o hero escuro e usava marfim translucido no
 * rotulo. Ao mudar para dentro do cartao claro da home, o texto ficou
 * praticamente invisivel.
 *
 * O teste de contraste nao pegou: ele confere PARES DE TOKEN, e aqui o
 * problema foi um componente mudar de superficie. Contraste de token nao prova
 * contraste de composicao.
 *
 * Dentro do cartao, o rotulo passa a usar a tinta institucional.
 */
.painel-vale .statusboard__row {
  border-bottom-color: var(--line);
  padding-inline: var(--space-5);
}
.painel-vale .statusboard__row:last-child { border-bottom: 0; }
.painel-vale .statusboard__label { color: var(--ink-muted); }
.painel-vale .statusboard__value { color: var(--ink); }

/* ---- Prefeitura ---- */

.prefeitura-hero { background: var(--vale-ivory); padding-block: var(--space-7); }

.prefeitura-hero__inner { display: grid; gap: var(--space-6); align-items: center; }

@media (min-width: 940px) {
  .prefeitura-hero__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); }
}

.regua--solta { width: 3.5rem; height: 3px; background: var(--vale-amber); border: 0; margin: 0 0 var(--space-5); }

.prefeitura-hero__titulo { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem); color: var(--ink); }
.em-verde { color: var(--vale-green); }

.prefeitura-hero__lede {
  font-size: var(--text-md);
  color: var(--ink-muted);
  max-width: 34ch;
  margin: var(--space-4) 0 var(--space-5);
}

/*
 * `min-height` no container nao basta: o placeholder e filho com height 100%, e
 * 100% de um pai que so tem min-height resolve para zero. A altura tem que
 * estar no elemento que pinta.
 */
.prefeitura-hero__arte {
  border-radius: 4px;
  overflow: hidden;
}

.prefeitura-hero__arte > .imagem-pendente {
  height: clamp(14rem, 26vw, 24rem);
}

.selos { display: flex; gap: var(--space-3); margin: var(--space-5) 0 0; }

.selo {
  font-family: var(--font-marca);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}
.selo--publico { color: var(--green-700); background: var(--green-100); }
.selo--atualizado { color: var(--amber-600); background: var(--amber-100); }

.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-4);
}

.servico {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-decoration: none;
}
.servico:hover { border-color: var(--vale-green); }

.servico__icone { color: var(--vale-green); margin-bottom: var(--space-3); display: block; }

.servico h3 {
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.servico p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

.servico__seta {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-4);
  color: var(--vale-green);
  font-size: var(--text-md);
}

.servico--indisponivel { border-style: dashed; }
.servico--indisponivel .servico__icone { color: var(--ink-faint); }
.servico--indisponivel .etiqueta-estado { position: absolute; right: var(--space-5); bottom: var(--space-4); }

.paineis-publicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
}

.painel-publico {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--space-5);
}

.painel-publico__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-marca);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.painel-publico__meta { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-3); }

.cidade-agora, .atos, .comunicados { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }

.cidade-agora__linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
}
.cidade-agora__linha:first-child { border-top: 0; padding-top: 0; }
.cidade-agora__linha strong { display: block; color: var(--ink); font-weight: 600; }
.cidade-agora__linha span { color: var(--ink-muted); }
.cidade-agora__valor { font-weight: 600; color: var(--ink); white-space: nowrap; }

.atos li, .comunicados li {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
}
.atos li:first-child, .comunicados li:first-child { border-top: 0; padding-top: 0; }
.atos strong, .comunicados strong { display: block; color: var(--ink); }
.atos span, .comunicados span { display: block; color: var(--ink-muted); }
.comunicados time { display: block; margin-top: var(--space-1); color: var(--ink-faint); font-size: var(--text-xs); }

.link-forte { font-weight: 600; color: var(--vale-green); }