/* Tokens e gráficos partilhados — desktop, mobile e apresentação */
/* Poppins alojada no site (OFL, fonts/OFL.txt), subconjunto latino dos ficheiros do Google Fonts */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  /* identidade USF-AN (mesmos tokens dos micro-sites IDE e DL) */
  --ink: #222222; --ink-2: #575760; --ink-3: #6B6B76;
  --page: #F7F8F9; --surface: #FFFFFF; --rule: #E5E7EA; --rule-2: #D3D7DE;
  --brand: #CE151A; --brand-dark: #A8121B; --navy: #293C5B; --focus: #1863DC; --blue: #1863DC;
  /* dados: divergente azul ↔ vermelho, validado (dataviz validate_palette) */
  --k1: #C0392F; --k2: #E9927F; --k3: #D9D8D2; --k4: #86B6EF; --k5: #1C5CAB;
  --up: #1C5CAB; --down: #C0392F;
  /* categórica (ordem fixa) */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #d99400; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #8A91A0;
  --heat-0: #F1F5FB; --heat-1: #184f95;
  --f-head: 'Poppins', system-ui, sans-serif;
  --f-body: 'Poppins', system-ui, sans-serif;
}
::selection { background: color-mix(in srgb, var(--navy) 22%, transparent); }

/* ---- SVG ---- */
.ma-chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--f-body); }
.ma-chart .grid { stroke: var(--rule); stroke-width: 1; }
.ma-chart .base { stroke: var(--ink-3); stroke-width: 1; }
.ma-chart .gap { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ma-chart .tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.ma-chart .tick.cur { fill: var(--ink); font-weight: 700; }
.ma-chart .lbl-pos { fill: var(--up); } .ma-chart .lbl-neg { fill: var(--down); }
.ma-chart .val { fill: var(--ink); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ma-chart .hit { fill: transparent; }
.k1 { fill: var(--k1); } .k2 { fill: var(--k2); } .k3 { fill: var(--k3); } .k4 { fill: var(--k4); } .k5 { fill: var(--k5); }
.k12 { fill: var(--k1); } .k45 { fill: var(--k5); }
.ma-chart .col.pdf rect:not(.hit) { opacity: .55; }
.ma-chart .col.cur .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.ma-chart .col:hover .hit, .ma-chart .col:focus .hit { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.ma-chart g:focus { outline: none; }
.ma-chart g:focus-visible .hit { stroke: var(--focus); stroke-width: 2; }
/* dumbbell / ULS */
.ma-chart .db-l { stroke: var(--rule-2); stroke-width: 2; }
.ma-chart .db-a { fill: var(--surface); stroke: var(--ink-3); stroke-width: 2; }
.ma-chart .db-b { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.ma-chart .db.sobe .db-b { fill: var(--up); } .ma-chart .db.desce .db-b { fill: var(--down); }
.ma-chart .db.sobe .db-l { stroke: color-mix(in srgb, var(--up) 45%, transparent); }
.ma-chart .db.desce .db-l { stroke: color-mix(in srgb, var(--down) 45%, transparent); }
.ma-chart .val.d.sobe { fill: var(--up); } .ma-chart .val.d.desce { fill: var(--down); }
.ma-chart .db:hover .hit, .ma-chart .ud:hover .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.ma-chart .db { cursor: pointer; }
.db-lbl { font: 12.5px/1.25 var(--f-body); color: var(--ink); height: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: 3px; }
.ma-chart .hit.zebra { fill: #EDF0F4; }
.ma-chart .db:hover .hit, .ma-chart .db:focus .hit { fill: #DDE3EC; }
.db-lbl.duplo { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0; -webkit-line-clamp: unset; }
.db-lbl.duplo b { font: 600 13px/1.25 var(--f-head); color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.db-lbl.duplo span { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-chart .nac { stroke: var(--ink-2); stroke-width: 1.5; }
.ma-chart .ulsn { fill: var(--ink-2); font-size: 11.5px; }
/* linhas */
.ma-chart .ln path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ma-chart .ln .pt { stroke: var(--surface); stroke-width: 2; }
.ma-chart .ln.hi path { stroke: var(--ink); stroke-width: 2.5; } .ma-chart .ln.hi .pt { fill: var(--ink); }
.ma-chart .ln.lo path { stroke: var(--rule-2); } .ma-chart .ln.lo .pt { fill: var(--rule-2); r: 2.5; }
.ma-chart .endlbl { fill: var(--ink-2); font-size: 11.5px; }
.ma-chart .ln.s1 path { stroke: var(--c1); } .ma-chart .ln.s1 .pt { fill: var(--c1); }
.ma-chart .ln.s2 path { stroke: var(--c2); } .ma-chart .ln.s2 .pt { fill: var(--c2); }
.ma-chart .ln.s3 path { stroke: var(--c3); } .ma-chart .ln.s3 .pt { fill: var(--c3); }
.ma-chart .ln.s4 path { stroke: var(--c4); } .ma-chart .ln.s4 .pt { fill: var(--c4); }
.ma-chart .ln.s5 path { stroke: var(--c5); } .ma-chart .ln.s5 .pt { fill: var(--c5); }
.ma-chart .ln.s6 path { stroke: var(--c6); } .ma-chart .ln.s6 .pt { fill: var(--c6); }
.ma-chart .ln.s7 path { stroke: var(--c7); } .ma-chart .ln.s7 .pt { fill: var(--c7); }
.ma-chart .ln.s8 path { stroke: var(--c8); } .ma-chart .ln.s8 .pt { fill: var(--c8); }

/* ---- legenda ---- */
.ma-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 0 0 10px; }
.ma-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ma-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ma-leg .lg-a { border: 2px solid var(--ink-3); border-radius: 50%; background: var(--surface); }
.ma-leg .lg-b { background: var(--ink); border-radius: 50%; }
.ma-leg .muted { color: var(--ink-3); }
.ma-legenda { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.ma-vazio { color: var(--ink-2); font-size: 14px; padding: 24px 0; }
.c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); } .c4 { background: var(--c4); }
.c5 { background: var(--c5); } .c6 { background: var(--c6); } .c7 { background: var(--c7); } .c8 { background: var(--c8); }

/* ---- mapa de calor ---- */
.ma-heat { display: grid; grid-template-columns: minmax(180px, 2.6fr) repeat(var(--cols), minmax(30px, 1fr)); gap: 2px; font-size: 12px; }
.ma-heat .hh { color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; padding: 2px 0 4px; }
.ma-heat .hh.cur { color: var(--ink); font-weight: 700; }
.ma-heat .hr { all: unset; cursor: pointer; color: var(--ink); line-height: 1.25; padding: 5px 8px 5px 0; font-size: 12.5px; }
.ma-heat .hr:hover { color: var(--focus); text-decoration: underline; }
.ma-heat .hr:focus-visible { outline: 2px solid var(--focus); }
.ma-heat .hc { background: color-mix(in oklab, var(--heat-1) calc(var(--t) * 100%), var(--heat-0)); border-radius: 3px; display: grid; place-items: center; min-height: 28px; font-variant-numeric: tabular-nums; }
.ma-heat .hc span { color: var(--ink); font-size: 11px; }
.ma-heat .hc.esc span { color: var(--surface); }
.ma-heat .hc.vazio { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 5px); }
.ma-heat .flag { color: var(--ink-3); }

/* ---- barras 100% ---- */
.ma-stack { display: grid; gap: 4px; }
.ma-stack .sr { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 12px; }
.ma-stack .sl { color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.ma-stack .sr.cur .sl { color: var(--ink); font-weight: 700; }
.ma-stack .sb { display: flex; gap: 2px; height: 24px; }
.ma-stack .sb span { display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; border-radius: 2px; min-width: 2px; }
.ma-stack .sb span.c2, .ma-stack .sb span.c3, .ma-stack .sb span.c4, .ma-stack .sb span.c5, .ma-stack .sb span.c8 { color: #1E2B42; }   /* branco sobre laranja, verde e cinzento não chega a 4,5:1 */

/* ---- tabela ---- */
.ma-tab { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.ma-tab th, .ma-tab td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
.ma-tab thead th { color: var(--ink-3); font-weight: 500; font-size: 12px; vertical-align: bottom; }
.ma-tab tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.ma-tab tr.cur { background: color-mix(in srgb, var(--focus) 7%, transparent); }
.ma-tab small { color: var(--ink-3); font-weight: 400; }

/* ---- tooltip ---- */
.ma-tip { position: fixed; z-index: 9999; display: none; pointer-events: none; max-width: 320px; background: var(--ink); color: var(--surface);
  font: 12.5px/1.5 var(--f-body); padding: 9px 11px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ma-tip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--k3); }
.ma-tip .sw.k1 { background: var(--k1); } .ma-tip .sw.k2 { background: var(--k2); } .ma-tip .sw.k4 { background: var(--k4); } .ma-tip .sw.k5 { background: var(--k5); }
.ma-tip .tip-nota { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .ma-chart rect.k1, .ma-chart rect.k2 { fill: CanvasText; } }

/* importância não é boa/má: rampa sequencial de um só tom */
.seq { --k1: #dfe9f7; --k2: #b7d3f6; --k3: #86b6ef; --k4: #3987e5; --k5: #184f95; }
.seq .lbl-neg { fill: var(--ink-3); } .seq .lbl-pos { fill: var(--ink-2); }
.ma-chart.faisca { width: 90px; height: 26px; flex: none; }

.ma-chart .quebra line { stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }

.ma-chart .val .n { font-weight: 400; fill: var(--ink-3); }
.ma-legenda .hc-leg { display: inline-block; width: 14px; height: 11px; vertical-align: -1px; border-radius: 2px; border: 1px solid var(--rule-2);
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--rule-2) 3px 4px); }
input::placeholder { color: var(--ink-3); opacity: 1; }   /* 5:1 sobre o fundo */

/* primeiro ecrã enquanto os dados carregam (escrito por build/inicio.py) */
.carrega { padding: 28px 16px 32px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.carrega-k { color: var(--ink-2); font-size: 13.5px; margin: 0 0 6px; }
.carrega-n { font: 700 64px/1 var(--f-head); color: var(--navy); letter-spacing: -.03em; margin: 0; font-variant-numeric: tabular-nums; }
.carrega-t { font-size: 15px; color: var(--ink-2); margin: 8px 0 18px; max-width: 30em; }
.carrega-e { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); margin: 0 0 16px; }
.carrega-v { font-size: 14.5px; margin: 0; }
.carrega-v a { color: var(--blue); display: inline-flex; align-items: center; min-height: 44px; }
.carrega .roda { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--rule-2); border-top-color: var(--navy); animation: roda 1s linear infinite; }
.carrega.erro .carrega-e { color: var(--down); }
.carrega-b { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: 600 14px var(--f-head); cursor: pointer; }
@keyframes roda { to { transform: rotate(360deg); } }


/* halteres com altura automática (explorador): o rótulo inteiro, sem «…» */
.db-lbl.auto { display: block; -webkit-line-clamp: unset; overflow: visible; padding-top: 6px; line-height: 1.3; }
.db-lbl.auto.duplo { display: flex; justify-content: flex-start; padding-top: 7px; }
.db-lbl.auto.duplo b { -webkit-line-clamp: unset; display: block; overflow: visible; }
.db-lbl.auto.duplo span { white-space: normal; overflow: visible; font-size: 12.5px; }
/* mapa de calor em % negativos: escala vermelha */
.ma-heat.neg { --heat-0: #FBF2F1; --heat-1: #A8322A; }