/* ==========================================================================
   Central de Ajuda hywork — identidade visual (hw_Guidelines_2025)
   Paleta: laranjas e azuis da marca, branco como base clara e navy como base
   escura. Títulos em LT Wave, texto em Noto Sans. Grafismos: quartos de
   círculo, círculos e o pattern.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

@font-face { font-family: "LT Wave"; src: url("/fonts/LTWave-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "LT Wave"; src: url("/fonts/LTWave-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LT Wave"; src: url("/fonts/LTWave-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "LT Wave"; src: url("/fonts/LTWave-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  /* marca */
  --hy-orange: #e9501b;
  --hy-orange-2: #ea7623;
  --hy-amber: #f09c26;
  --hy-peach: #f3b16f;
  --hy-orange-dark: #d44d1c;
  --hy-blue-dark: #104a74;
  --hy-blue: #1e72a1;
  --hy-blue-mid: #6492b7;
  --hy-blue-light: #8ea1c7;
  --hy-navy: #092938;
  --hy-gray: #8c8c8c;

  /* papéis */
  --brand: var(--hy-orange);
  --brand-600: var(--hy-orange-dark);
  --brand-50: #fdeee6;
  --link: var(--hy-blue);
  --bg: #f4f6f9;
  --surface: #ffffff;
  --text: var(--hy-navy);
  --muted: #5d6b78;
  --border: #dfe5ec;
  --ok: #1d7a3e;
  --ok-bg: #e3f4e8;
  --warn: #9a5b06;
  --warn-bg: #fdf1dc;
  --bad: #b3341a;
  --bad-bg: #fbe4dc;
  --info: var(--hy-blue-dark);
  --info-bg: #e6eff6;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(9, 41, 56, .06), 0 2px 6px rgba(9, 41, 56, .06);
  --display: "LT Wave", Arial, "Segoe UI", sans-serif;
  --font: "Noto Sans", Arial, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); }
main { flex: 1 0 auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--hy-navy); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 2rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
code { font-family: var(--mono); font-size: .9em; background: #eef2f6; padding: .1em .35em; border-radius: 4px; }
pre { background: var(--hy-navy); color: #e6eef4; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
pre code { background: none; color: inherit; padding: 0; }

/* Grafismos ------------------------------------------------------------ */
.q { position: absolute; width: 96px; height: 96px; pointer-events: none; }
.q.tl { border-radius: 0 0 100% 0; } /* quarto de círculo com o canto reto no topo-esquerda */
.q.tr { border-radius: 0 0 0 100%; }
.q.bl { border-radius: 0 100% 0 0; }
.q.br { border-radius: 100% 0 0 0; }
.q.orange { background: var(--hy-orange); } .q.amber { background: var(--hy-amber); } .q.blue { background: var(--hy-blue); } .q.blue-dark { background: var(--hy-blue-dark); } .q.peach { background: var(--hy-peach); } .q.white { background: #fff; }

/* Layout ----------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar .container { display: flex; align-items: center; gap: 14px; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; color: var(--hy-navy); font-family: var(--display); }
.logo:hover { text-decoration: none; }
.logo .logo-img { height: 30px; width: auto; display: block; }
.nav { display: flex; gap: 0; margin-left: auto; align-items: center; flex-wrap: nowrap; min-width: 0; }
.nav a { padding: 8px 9px; border-radius: 10px; color: var(--hy-blue-dark); font-family: var(--display); font-weight: 500; font-size: .875rem; white-space: nowrap; }
.nav a:hover { background: var(--bg); text-decoration: none; color: var(--hy-navy); }
.nav a.active { color: var(--hy-orange); background: var(--brand-50); }
.nav-user { display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px 8px 10px; margin-left: 6px; border-left: 1px solid var(--border); font-size: .85rem; color: var(--text); max-width: 230px; flex: none; }
/* Nome e organização empilhados; a coluna encolhe para o "Sair" não ser empurrado para fora. */
.nav-who { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; }
.nav-user .nav-name, .nav-user .nav-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user .nav-org { font-size: .74rem; color: var(--muted); }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--brand-50); }
.avatar.ini { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: .72rem; font-weight: 600; color: var(--hy-orange); letter-spacing: .02em; }
.nav-user a { color: var(--muted); font-size: .85rem; }
.mode-banner { background: var(--warn-bg); color: var(--warn); font-size: .85rem; text-align: center; padding: 6px 12px; }
main { padding: 28px 0 60px; }
.footer { background: var(--hy-navy); color: #b9c7d2; font-size: .85rem; padding: 26px 0; margin-top: 30px; }
.footer a { color: #fff; }
.footer .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer img { height: 22px; opacity: .95; }
/* O menu cresceu ao ficar condicionado ao login: encolhe por etapas em vez
   de quebrar em duas linhas por cima do logo. */
@media (max-width: 1120px) { .nav a { padding: 8px 7px; font-size: .84rem; } }
@media (max-width: 900px) {
  .topbar .container { height: auto; flex-wrap: wrap; padding-block: 8px; gap: 10px; }
  .nav { width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-user { margin-left: auto; }
}

/* Componentes ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-family: var(--display); font-weight: 500; color: var(--hy-navy); line-height: 1.2; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn.primary { background: var(--hy-orange); border-color: var(--hy-orange); color: #fff; }
.btn.primary:hover { background: var(--hy-orange-dark); border-color: var(--hy-orange-dark); }
.btn.outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn.outline-light:hover { background: rgba(255, 255, 255, .12); }
.btn.sm { padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.input, textarea.input, select.input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); }
.input:focus { outline: 3px solid var(--brand-50); border-color: var(--hy-orange); }
textarea.input { min-height: 140px; resize: vertical; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--hy-navy); }
label.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600; white-space: nowrap; font-family: var(--display); }
.badge.new, .badge.indeterminate { background: var(--info-bg); color: var(--hy-blue-dark); }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.waiting { background: var(--warn-bg); color: var(--warn); }
.badge.escalated { background: #e9ecf6; color: #4a5a9a; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.neutral { background: #eef2f6; color: var(--muted); }
.alert { padding: 12px 14px; border-radius: 10px; border: 1px solid; margin: 12px 0; }
.alert.error { background: var(--bad-bg); border-color: #f3b8a6; color: var(--bad); }
.alert.ok { background: var(--ok-bg); border-color: #a8dcb8; color: var(--ok); }
.alert.info { background: var(--info-bg); border-color: #b6cde0; color: var(--info); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs button { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--muted); font-family: var(--display); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.active { color: var(--hy-orange); border-bottom-color: var(--hy-orange); }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-family: var(--display); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--brand-50); }
.table-wrap { overflow-x: auto; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--hy-orange); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .tile { transition: none; } }

/* Home ------------------------------------------------------------------- */
.hero { position: relative; background: var(--hy-navy); color: #fff; border-radius: 22px; padding: 56px 24px 52px; text-align: center; margin-bottom: 26px; }
/* Quem recorta as formas nos cantos e esta camada, e nao o hero: com
   overflow no hero, o dropdown da busca era cortado na borda de baixo. */
.hero-deco { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 8px; font-weight: 500; }
.hero p { color: #c9d6e0; margin: 0 auto; max-width: 60ch; }
.hero .q { opacity: .95; }
.hero .q.a { top: 0; left: 0; width: 84px; height: 84px; }
.hero .q.b { top: 0; left: 84px; width: 84px; height: 84px; }
.hero .q.c { right: 0; bottom: 0; width: 120px; height: 120px; }
.hero .q.d { right: 120px; bottom: 0; width: 60px; height: 60px; }
.hero .q.e { right: 0; top: 0; width: 70px; height: 70px; }
.hero .circle { position: absolute; border-radius: 50%; pointer-events: none; }
.hero .circle.a { width: 260px; height: 260px; left: -110px; bottom: -150px; background: var(--hy-blue-dark); }
.hero .circle.b { width: 40px; height: 40px; left: 150px; top: 120px; background: var(--hy-amber); }
@media (max-width: 700px) { .hero .q.b, .hero .q.d, .hero .circle.b { display: none; } }
.searchbox { position: relative; max-width: 680px; margin: 22px auto 0; }
.searchbox input { width: 100%; padding: 14px 18px 14px 48px; border-radius: 999px; border: 1.5px solid transparent; font-size: 1rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); background: #fff; color: var(--text); }
.searchbox input:focus { outline: 3px solid rgba(240, 156, 38, .45); border-color: var(--hy-amber); }
.searchbox .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--hy-blue); display: inline-flex; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 34px rgba(9, 41, 56, .16); text-align: left; max-height: 420px; overflow: auto; z-index: 30; color: var(--text); }
.search-results a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: var(--brand-50); text-decoration: none; }
.search-results .crumb { font-size: .75rem; color: var(--muted); }
.search-results .excerpt { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.search-results .none { padding: 14px; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.section-head h2 { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.tile { position: relative; overflow: hidden; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px 20px; color: var(--text); box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
.tile::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 46px; height: 46px; border-radius: 100% 0 0 0; background: var(--hy-peach); opacity: .55; transition: background .12s; }
.tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--hy-orange); }
.tile:hover::after { background: var(--hy-orange); opacity: .9; }
.tile .ic { margin-bottom: 8px; color: var(--hy-orange); display: flex; }
.tile h3 { margin-bottom: 4px; }
.tile p { margin: 0; color: var(--muted); font-size: .9rem; }
.tile .count { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.tile img { height: 40px; width: auto; margin-bottom: 10px; display: block; }

/* Novidades -------------------------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 14px; }
.news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--shadow); }
.news-card:hover { text-decoration: none; border-color: var(--hy-orange); }
.news-card .thumb { aspect-ratio: 16 / 8; background: var(--info-bg) center / cover no-repeat; }
.news-card .body { padding: 16px 18px; }
.news-card .date { font-family: var(--display); font-size: .78rem; color: var(--hy-orange); text-transform: uppercase; letter-spacing: .05em; }
.news-card h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.news-card p { margin: 0; color: var(--muted); font-size: .9rem; }

/* KB --------------------------------------------------------------------- */
.kb-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
/* Quem rola e a arvore, nao a lateral inteira: com overflow na lateral, o
   dropdown da busca ficava preso dentro da area de rolagem. */
.kb-side { position: sticky; top: 80px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; padding-right: 6px; }
.kb-side .searchbox { margin: 0 0 14px; flex: none; }
.kb-side .tree { overflow: auto; min-height: 0; }
.kb-side .searchbox input { padding: 10px 12px 10px 38px; font-size: .92rem; border-radius: 10px; box-shadow: none; border-color: var(--border); }
.kb-side .searchbox .icon { left: 12px; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree ul { list-style: none; margin: 0; padding-left: 14px; border-left: 1px solid var(--border); margin-left: 9px; }
.tree li { margin: 1px 0; }
.tree a, .tree .folder-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: .9rem; cursor: pointer; }
.tree a:hover, .tree .folder-head:hover { background: var(--bg); text-decoration: none; }
.tree a.active { background: var(--brand-50); color: var(--hy-orange-dark); font-weight: 600; }
.tree .folder-head { font-family: var(--display); font-weight: 500; color: var(--hy-blue-dark); }
.tree .folder-head .chev { width: 14px; text-align: center; transition: transform .15s; color: var(--muted); font-size: .7rem; }
.tree li.open > .folder-head .chev { transform: rotate(90deg); }
.tree li:not(.open) > ul { display: none; }
.kb-article { min-width: 0; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--muted); }
.article-meta { color: var(--muted); font-size: .85rem; margin-bottom: 18px; }
.article-body h1:first-child { display: none; }
.article-body h2 { margin-top: 1.6em; padding-top: .3em; }
/* O cabeçalho é fixo (64px). Sem esta folga, clicar no sumário rola a seção
   para trás dele e parece que o link não funcionou. */
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { scroll-margin-top: 88px; }
/* Abaixo de 1120px o cabeçalho quebra em duas linhas e fica mais alto. */
@media (max-width: 1120px) { .article-body h1, .article-body h2, .article-body h3, .article-body h4 { scroll-margin-top: 128px; } }
.article-body h3, .article-body h4 { margin-top: 1.3em; }
.article-body p, .article-body li { line-height: 1.75; }
.article-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .92rem; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 10px; }
.article-body th { background: var(--bg); }
.article-body blockquote { margin: 1em 0; padding: 10px 16px; border-left: 4px solid var(--hy-amber); background: #fff7ea; border-radius: 0 10px 10px 0; }
.kb-figure { margin: 1.2em 0; text-align: center; }
/* width/height vêm do arquivo; com os dois "auto" o navegador respeita a
   proporção e já reserva a altura certa antes de a imagem carregar. */
.kb-figure img { border: 1px solid var(--border); border-radius: 12px; width: auto; height: auto; max-width: 100%; max-height: 560px; }
.kb-figure figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); }
.kb-video video { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; max-height: 560px; border: 1px solid var(--border); border-radius: 12px; background: #000; display: block; margin: 0 auto; }
.kb-toc { position: sticky; top: 80px; font-size: .84rem; }
.kb-toc h4 { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--hy-orange); margin-bottom: 8px; }
.kb-toc a { display: block; color: var(--muted); padding: 3px 0 3px 10px; border-left: 2px solid var(--border); overflow-wrap: anywhere; }
.kb-toc a.d3 { padding-left: 22px; }
.kb-toc a:hover { color: var(--hy-orange); text-decoration: none; border-left-color: var(--hy-orange); }
.kb-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.kb-children a { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); }
.kb-children a:hover { border-color: var(--hy-orange); text-decoration: none; }
.kb-children a .t { font-family: var(--display); font-weight: 500; color: var(--hy-blue-dark); }
.kb-children a .d { font-size: .82rem; color: var(--muted); }
.missing-img { display: inline-block; padding: 6px 10px; background: var(--warn-bg); color: var(--warn); border-radius: 6px; font-size: .8rem; }
@media (max-width: 1000px) { .kb-layout { grid-template-columns: 1fr; } .kb-side, .kb-toc { position: static; max-height: none; } .kb-toc { display: none; } }

/* Tickets ---------------------------------------------------------------- */
.ident { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ident label.field { flex: 1 1 220px; margin: 0; }
.who { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(9, 41, 56, .45); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--surface); z-index: 41; overflow: auto; box-shadow: -12px 0 40px rgba(9, 41, 56, .2); padding: 24px 28px 40px; }
.drawer .close { position: absolute; top: 14px; right: 16px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; margin: 14px 0; }
.kv div span { display: block; font-family: var(--display); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.timeline { margin-top: 18px; }
.comment { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--bg); }
.comment.customer { background: var(--surface); border-color: var(--hy-peach); }
.comment .head { font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.comment .head b { color: var(--text); }
.desc { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.desc img { max-width: 100%; }
.attachments a { display: inline-block; margin: 4px 6px 0 0; font-size: .85rem; }
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.types label { display: block; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.types label:has(input:checked) { border-color: var(--hy-orange); background: var(--brand-50); }
.types input { margin-right: 6px; accent-color: var(--hy-orange); }
.types .d { font-size: .82rem; color: var(--muted); }
.kb-suggest { margin-top: 8px; }
.kb-suggest a { display: block; font-size: .88rem; padding: 4px 0; }

/* Dashboard -------------------------------------------------------------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filters .seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.filters .seg button { border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--muted); font-family: var(--display); font-weight: 500; }
.filters .seg button.active { background: var(--hy-blue-dark); color: #fff; }
.filters select { width: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .l { font-family: var(--display); font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi .v { font-family: var(--display); font-size: 1.8rem; font-weight: 500; line-height: 1.2; margin-top: 4px; color: var(--hy-navy); }
.kpi .s { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.kpi.good .v { color: var(--ok); } .kpi.warn .v { color: var(--warn); } .kpi.bad .v { color: var(--bad); }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.chart-card h3 { font-size: .98rem; margin-bottom: 10px; }
.chart-card .sub { font-size: .8rem; color: var(--muted); margin: -6px 0 10px; }
.chart-wrap { position: relative; height: 260px; }
.chart-wrap.tall { height: 320px; }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
@media (max-width: 900px) { .span-8, .span-6, .span-4 { grid-column: span 12; } }
.meter { height: 8px; background: #e9eef3; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; background: var(--hy-blue); border-radius: 999px; }
.meter.good i { background: var(--ok); } .meter.warn i { background: var(--hy-amber); } .meter.bad i { background: var(--hy-orange-dark); }

/* Ícones -------------------------------------------------------------------
   SVG de traço, herdam a cor do texto e acompanham o tamanho da fonte. */
svg.i { display: inline-block; vertical-align: -.18em; flex: none; }
a svg.i, button svg.i { pointer-events: none; }
.nav-enter { color: var(--hy-orange) !important; font-weight: 600; }