/* Base d'estils (guia de disseny «Municipal Data», octubre 2026). Es carrega DESPRÉS d'app.css i md-charts.css: fixa els tokens i els rols de color.
 *  C1  el taronja vol dir «el territori triat» (dades), mai botons ni Catalunya · C2 referències en neutres (comarca petroli, Catalunya gris discontinu)
 *  C4  text en taronja només amb el to fosc · B   botó principal petroli amb text blanc (7,3:1) · tipografia Fira Sans (pesos 400/500/600) + condensada 700 per a H1/H2
 *  Les fonts són locals (assets/fonts, llicència OFL): cap petició a Google. */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fira-sans-400.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/fira-sans-500.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fira-sans-600.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fira-sans-condensed-700.woff2) format("woff2")}

:root{
  --ink:#16262D;--ink-2:#2F434B;--muted:#55666D;
  --petroli:#355C69;--petroli-2:#5B8B9A;--petroli-soft:#E3ECEF;--deep:#355C69;--blue:#5B8B9A;
  --taronja:#F77F00;--taronja-dades:#E06C00;--taronja-text:#B8520A;--taronja-soft:#FFF1E3;--gris-ref:#8A9AA1;
  --band:#DDE2E6;--band-soft:#EEF2F4;--bg:#DDE2E6;--line:#CBD6DA;
  --ok:#1E7A4C;--warn:#9A5B00;--bad:#B42318;
  --radius:6px;
  --f-display:"Fira Sans Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Fira Sans","Segoe UI",Roboto,Arial,sans-serif;
  /* gràfics (MDCharts): el territori triat en taronja de dades, la referència en petroli */
  --md-accent:#E06C00;--md-hl:#355C69;--md-muted:#55666D;--md-font:"Fira Sans","Segoe UI",Roboto,Arial,sans-serif;
}
body{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit}
h1,h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h1{letter-spacing:-.01em}
h3{font-weight:600;letter-spacing:0}
.muted,.sub,.small.muted,.figure-note,.source,.note{color:var(--muted)}
td,th,.value,.num,.k-v,.kpi .value,.tile-k .value,.fx-kpi-v,.rankrow{font-variant-numeric:tabular-nums}
.eyebrow{color:var(--ink-2)}

/* Botons: un de primari en petroli amb text blanc; secundari amb contorn; focus visible de 3 px en taronja */
.btn{background:var(--petroli);color:#fff;border:1px solid var(--petroli);border-radius:4px;font-weight:600}
.btn:hover{background:#2b4c57;border-color:#2b4c57;filter:none}
.btn.secondary{background:#fff;color:var(--petroli);border-color:var(--petroli)}
.btn.secondary:hover{background:var(--petroli-soft)}
.btn.soft{background:var(--petroli-soft);color:var(--petroli);border-color:transparent}
.textlink{color:var(--petroli)}
:where(a,button,select,input,summary):focus-visible{outline:3px solid var(--taronja);outline-offset:2px}

/* Radis: 6 px a targetes i panells, 4 px a controls */
.card,.tile,.kpi,.figure,.list,.table-wrap,.theme,.territorybar,.notice{border-radius:6px}
input.control,select.control,.searchbar,.searchbar input,.pill,.btn,.town-pick-search input{border-radius:4px}
.pill{border-radius:999px}

/* KPI: línia superior taronja només perquè és el territori triat; xifra en pes 600, tabular */
.kpi,.tiles-kpi .tile-k{border-top:3px solid var(--taronja)}
.kpi.orange{border-top-color:var(--taronja)}
.kpi .value,.tiles-kpi .tile-k .value{font-weight:600;font-size:30px;letter-spacing:-.01em}
.kpi h3{font-weight:500;color:var(--ink-2)}

/* «Sense dada»: un guionet i una nota, no un panell que digui «No disponible» */
.nd{color:var(--muted);font-weight:500}
.nd-box{display:flex;align-items:baseline;gap:10px;min-height:0;padding:14px 0}

/* ---- Peces de visualització del servidor (web/app/viz.php) ---- */
.viz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.viz-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 18px 14px;display:grid;gap:8px;min-width:0}
.viz-card h3{font:600 1.05rem/1.25 var(--f-body)}
.viz-card .sub{font-size:.8rem;margin:0}
.viz-card svg{width:100%;height:auto;display:block;overflow:visible}
.viz-card .note{font-size:.78rem}
.viz-tema{margin:38px 0 14px}
.viz-tema:first-child{margin-top:0}
.viz-tema h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.viz-tema p{color:var(--muted);font-size:14px;margin-top:6px;max-width:70ch}
.fx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:24px}
.fx-kpi{background:#fff;padding:14px 16px;display:grid;gap:5px;min-width:0;border-top:3px solid var(--taronja)}
.fx-kpi-l{font-size:.82rem;color:var(--ink-2);font-weight:500}
.fx-kpi-v{font:600 1.9rem/1.1 var(--f-body);letter-spacing:-.01em}
.fx-kpi-v small{font-size:.9rem;font-weight:500;color:var(--muted);margin-left:4px}
.fx-kpi svg{width:100%;height:34px;display:block}
.fx-kpi-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.fx-kpi a.fx-kpi-l{text-decoration:none}.fx-kpi a.fx-kpi-l:hover{text-decoration:underline}
.d-up{color:var(--bad)}.d-down{color:var(--ok)}.d-flat{color:var(--muted)}
.rank{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.rank-bar{flex:1;height:6px;background:var(--band);border-radius:3px;position:relative}
.rank-bar b{position:absolute;top:-3px;width:4px;height:12px;border-radius:2px;background:var(--taronja-dades)}
.tag{display:inline-block;font:600 .72rem/1.2 var(--f-body);padding:3px 8px;border-radius:999px;background:var(--band-soft);color:var(--ink-2);border:1px solid var(--line)}
.tag.warn{background:#FDF1DC;color:var(--warn);border-color:transparent}
.tag.alt{background:var(--taronja-soft);color:var(--taronja-text);border-color:transparent}
.fx-kpi .note{font-size:.74rem;line-height:1.35;color:var(--muted)}