/* Panell de control d'Amalgama.
 *
 * LA PELL: tot el que és aparença (colors, tipografia, espais, radis, ombres, gràfics) són les variables d'aquest
 * primer bloc i el del mode fosc. Per a canviar de marca, només es toquen aquests dos blocs: la resta del fitxer
 * no porta cap color ni cap mida de lletra escrits a mà.
 */
:root {
  /* Superfícies i tinta */
  --fons: #faf8f6;
  --superficie: #ffffff;
  --superficie-2: #fdf4ec;         /* capçaleres de taula, fons suaus */
  --vora: #ece8e4;
  --vora-forta: #d6d3d1;
  --tinta: #1c1917;
  --tinta-2: #57534e;              /* text secundari */
  --tinta-suau: #78716c;           /* notes, eixos */
  /* Barra de dalt */
  --barra-fons: #141110;
  --barra-tinta: #e7e5e4;
  --barra-tinta-suau: #a8a29e;
  --barra-actiu-fons: #b8501d;
  --barra-actiu-tinta: #ffffff;
  --barra-hover: rgba(255, 255, 255, .08);
  /* Accent (enllaços, botó principal, la sèrie dels gràfics) */
  --accent: #b8501d;
  --accent-tinta: #ffffff;         /* text damunt de l'accent */
  --accent-suau: #fbe6d6;
  --focus: 0 0 0 3px rgba(212, 100, 39, .35);
  /* Estats: sempre amb text o icona, mai només el color */
  --be: #15803d;        --be-fons: #dcfce7;
  --avis: #b45309;      --avis-fons: #fef3c7;
  --critic: #dc2626;    --critic-fons: #fee2e2;
  --info: #2563eb;      --info-fons: #dbeafe;
  /* Gràfics (una sèrie per gràfic) */
  --grafic-serie: var(--accent);
  --grafic-serie-fort: #7f3914;    /* la columna o el punt sota el ratolí */
  --grafic-area-opacitat: .12;
  --grafic-reixa: #f0ece8;
  --grafic-base: #d6d3d1;
  --grafic-eix: var(--tinta-suau);
  --grafic-eix-mida: 12px;         /* en unitats del gràfic (560 d'ample) */
  --grafic-eix-mida-estret: 19px;  /* al mòbil el gràfic s'encongeix: la lletra, menys */
  /* Tipografia */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --mida: 14px;
  --mida-xs: 11px;
  --mida-s: 12px;
  --mida-m: 16px;
  --mida-l: 22px;
  --mida-xl: 28px;
  --pes-fort: 650;
  /* Espais, radis, ombres */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --radi: 8px;
  --radi-gran: 12px;
  --ombra: 0 1px 2px rgba(28, 25, 23, .05);
  --amplaria: 1400px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fons: #141110;
    --superficie: #1f1b18;
    --superficie-2: #2a2420;
    --vora: #332c27;
    --vora-forta: #4a413b;
    --tinta: #f5f5f4;
    --tinta-2: #d6d3d1;
    --tinta-suau: #a8a29e;
    --barra-fons: #0b0908;
    --accent: #e8834a;
    --accent-tinta: #1c1917;
    --accent-suau: #4a2a17;
    --barra-actiu-fons: #b8501d;
    --be: #4ade80;      --be-fons: #14301f;
    --avis: #fbbf24;    --avis-fons: #3a2c0d;
    --critic: #f87171;  --critic-fons: #3b1616;
    --info: #60a5fa;    --info-fons: #172554;
    --grafic-serie-fort: #f6c9a8;
    --grafic-area-opacitat: .18;
    --grafic-reixa: #2a2420;
    --grafic-base: #4a413b;
    --ombra: none;
    color-scheme: dark;
  }
}

/* ---------- a partir d'ací, només variables ---------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: var(--mida); line-height: 1.5; color: var(--tinta); background: var(--fons); }
a { color: var(--accent); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radi); }
h1 { font-size: var(--mida-l); margin: 0 0 var(--esp-4); }
h2 { font-size: var(--mida-m); margin: var(--esp-5) 0 var(--esp-2); }
.suau { color: var(--tinta-suau); font-size: var(--mida-s); }
.n { text-align: right; font-variant-numeric: tabular-nums; }

/* Barra de dalt */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-5); padding: var(--esp-2) var(--esp-5);
  background: var(--barra-fons); color: var(--barra-tinta); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: var(--pes-fort); font-size: var(--mida-m); color: var(--barra-tinta); text-decoration: none; }
.marca span { color: var(--accent); font-weight: 500; }
.barra nav { display: flex; gap: var(--esp-1); flex: 1; overflow-x: auto; scrollbar-width: none; }
.barra nav a { color: var(--barra-tinta); text-decoration: none; padding: 6px 10px; border-radius: var(--radi); white-space: nowrap; }
.barra nav a:hover { background: var(--barra-hover); }
.barra nav a[aria-current] { background: var(--barra-actiu-fons); color: var(--barra-actiu-tinta); }
.barra nav .comptador { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: var(--esp-1); border-radius: 999px;
  font-size: var(--mida-xs); text-align: center; background: var(--critic); color: var(--accent-tinta); }
.eixir { display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 0 auto; }
.eixir .email { color: var(--barra-tinta-suau); font-size: var(--mida-s); }

/* Controls */
button, .boto, input, select { font: inherit; color: var(--tinta); }
button, .boto { cursor: pointer; border: 1px solid var(--vora-forta); background: var(--superficie); padding: 6px var(--esp-3);
  border-radius: var(--radi); text-decoration: none; display: inline-block; }
.boto.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-tinta); padding: 10px 18px; font-weight: var(--pes-fort); }
input, select { background: var(--superficie); border: 1px solid var(--vora-forta); border-radius: var(--radi); padding: 6px var(--esp-2); min-height: 34px; }
input[type="search"] { min-width: 220px; }
.filtres { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: flex-end; margin: 0 0 var(--esp-4); }
.filtres label { display: flex; flex-direction: column; gap: 2px; font-size: var(--mida-s); color: var(--tinta-suau); }
.filtres .esborra { align-self: center; font-size: var(--mida-s); }
.xips { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); margin: 0 0 var(--esp-3); }
.xip { display: inline-flex; gap: var(--esp-1); align-items: center; padding: 2px 10px; border: 1px solid var(--vora-forta); border-radius: 999px;
  text-decoration: none; color: var(--tinta-2); font-size: var(--mida-s); background: var(--superficie); }
.xip[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-tinta); }
.xip b { font-weight: var(--pes-fort); }

main { padding: var(--esp-5); max-width: var(--amplaria); margin: 0 auto; }
footer { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: center; padding: var(--esp-2) var(--esp-5) var(--esp-5);
  color: var(--tinta-suau); font-size: var(--mida-s); max-width: var(--amplaria); margin: 0 auto; }
footer label { display: inline-flex; gap: var(--esp-1); align-items: center; cursor: pointer; }

/* Avisos i alertes */
.avis { padding: 10px 14px; border-radius: var(--radi); background: var(--avis-fons); color: var(--avis); }
.avis.error { background: var(--critic-fons); color: var(--critic); }
.alertes { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.alertes a { display: flex; gap: var(--esp-2); align-items: baseline; padding: 10px 14px; border-radius: var(--radi); text-decoration: none;
  border-left: 4px solid currentColor; }
.alertes .critica a { background: var(--critic-fons); color: var(--critic); }
.alertes .avis a { background: var(--avis-fons); color: var(--avis); }
.alertes .info a { background: var(--info-fons); color: var(--info); }
.alertes .nivell { font-size: var(--mida-xs); font-weight: var(--pes-fort); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tot-be { color: var(--be); font-size: var(--mida-s); margin: 0 0 var(--esp-4); }
.buit { padding: var(--esp-6); text-align: center; color: var(--tinta-suau); background: var(--superficie); border: 1px dashed var(--vora-forta); border-radius: var(--radi-gran); }

/* Entrar */
.entrar { max-width: 360px; margin: 15vh auto 0; text-align: center; display: flex; flex-direction: column; gap: var(--esp-4); align-items: center; }
.entrar h1 { font-size: var(--mida-xl); }

/* Targetes de xifres */
.targetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-4); }
.targeta { background: var(--superficie); border: 1px solid var(--vora); border-left: 4px solid var(--vora-forta); border-radius: var(--radi-gran);
  padding: 14px var(--esp-4); box-shadow: var(--ombra); }
.targeta h2, .targeta h3 { margin: 0 0 var(--esp-1); font-size: var(--mida-s); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suau); }
.targeta p { margin: 2px 0; overflow-wrap: anywhere; }
.targeta .gran { font-size: var(--mida-l); font-weight: var(--pes-fort); }
.targeta.be { border-left-color: var(--be); }
.targeta.be .gran { color: var(--be); }
.targeta.mal { border-left-color: var(--critic); }
.targeta.mal .gran { color: var(--critic); }
.targeta.avisa { border-left-color: var(--avis); }
meter { width: 100%; height: 12px; }

/* Taules (al mòbil, cada fila és una targeta) */
.taula-cont { overflow-x: auto; background: var(--superficie); border: 1px solid var(--vora); border-radius: var(--radi-gran); box-shadow: var(--ombra); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--esp-2) 10px; text-align: left; border-bottom: 1px solid var(--vora); vertical-align: top; }
th { font-size: var(--mida-s); color: var(--tinta-suau); font-weight: 600; white-space: nowrap; background: var(--superficie-2); }
th.n, td.n { text-align: right; }
.ordenable th { cursor: pointer; user-select: none; }
.ordenable th[aria-sort="ascending"]::after { content: " ▲"; }
.ordenable th[aria-sort="descending"]::after { content: " ▼"; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.ruta { font-family: var(--font-mono); font-size: var(--mida-s); word-break: break-all; }
tr.inactiu { opacity: .55; }
tr[hidden] { display: none; }
.etiqueta { display: inline-block; font-size: var(--mida-xs); padding: 1px 6px; border-radius: 999px; background: var(--accent-suau); color: var(--tinta-2); }
.etiqueta.activa { background: var(--be-fons); color: var(--be); }
.etiqueta.suspendida { background: var(--avis-fons); color: var(--avis); }
.etiqueta.baja { background: var(--critic-fons); color: var(--critic); }

/* Gràfics */
.grafics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--esp-4); }
.grafic-targeta { background: var(--superficie); border: 1px solid var(--vora); border-radius: var(--radi-gran); padding: 14px var(--esp-4); box-shadow: var(--ombra); min-width: 0; }
.grafic-targeta h3 { margin: 0; font-size: var(--mida); }
.grafic-targeta .total { font-size: var(--mida-l); font-weight: var(--pes-fort); margin: 2px 0 var(--esp-2); }
.grafic-desplaca { overflow-x: auto; }
svg.grafic { display: block; width: 100%; height: auto; font-family: var(--font); }
.g-reixa { stroke: var(--grafic-reixa); stroke-width: 1; }
.g-base { stroke: var(--grafic-base); stroke-width: 1; }
.g-eix { fill: var(--grafic-eix); font-size: var(--grafic-eix-mida); }
.g-barra { fill: var(--grafic-serie); }
.g-linia { fill: none; stroke: var(--grafic-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-area { fill: var(--grafic-serie); opacity: var(--grafic-area-opacitat); }
.g-punt-final { fill: var(--grafic-serie); stroke: var(--superficie); stroke-width: 2; }
.g-marca { fill: var(--grafic-serie-fort); stroke: var(--superficie); stroke-width: 2; opacity: 0; }
.g-objectiu { fill: transparent; }
.g-periode:hover .g-barra { fill: var(--grafic-serie-fort); }
.g-periode:hover .g-marca { opacity: 1; }
details.taula-grafic { margin-top: var(--esp-2); font-size: var(--mida-s); }
details.taula-grafic summary { cursor: pointer; color: var(--tinta-suau); }
details.taula-grafic table { margin-top: var(--esp-2); }

/* Comentaris */
.comentaris { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.comentaris li { background: var(--superficie); border: 1px solid var(--vora); border-radius: var(--radi-gran); padding: var(--esp-3) var(--esp-4); box-shadow: var(--ombra); }
.comentaris .cap { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); align-items: baseline; }
.comentaris .text { white-space: pre-wrap; margin: var(--esp-2) 0; overflow-wrap: anywhere; }
.comentaris .context { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); margin: 0; font-size: var(--mida-s); color: var(--tinta-2); }
.comentaris .context dt { display: inline; color: var(--tinta-suau); }
.comentaris .context dd { display: inline; margin: 0 0 0 var(--esp-1); overflow-wrap: anywhere; }
.comentaris details { font-size: var(--mida-s); color: var(--tinta-suau); margin-top: var(--esp-1); }

.dos-columnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--esp-4); align-items: start; }
.molla { font-size: var(--mida-s); margin: 0 0 var(--esp-2); }

@media (max-width: 700px) {
  .barra { padding: var(--esp-2) var(--esp-4); gap: var(--esp-2); }
  .barra nav { order: 3; flex-basis: 100%; }
  main { padding: var(--esp-4); }
  footer { padding: var(--esp-2) var(--esp-4) var(--esp-5); }
  .eixir .email { display: none; }
  input[type="search"] { min-width: 0; width: 100%; }
  .targetes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-2); }
  .g-eix { font-size: var(--grafic-eix-mida-estret); }
  .filtres label { flex: 1 1 140px; }
  /* Taules → targetes: cada cel·la porta la seua capçalera (data-label) */
  .taula-cont.mobil-targetes { background: none; border: 0; box-shadow: none; overflow: visible; }
  .mobil-targetes thead { display: none; }
  .mobil-targetes table, .mobil-targetes tbody, .mobil-targetes tr, .mobil-targetes td { display: block; width: 100%; }
  .mobil-targetes tr { background: var(--superficie); border: 1px solid var(--vora); border-radius: var(--radi-gran); margin-bottom: var(--esp-2); padding: var(--esp-2) var(--esp-3); }
  .mobil-targetes tr[hidden] { display: none; }
  .mobil-targetes td { border: 0; padding: 3px 0; text-align: right; overflow-wrap: anywhere; }
  .mobil-targetes td::after { content: ""; display: block; clear: both; }
  .mobil-targetes td::before { content: attr(data-label); float: left; margin-right: var(--esp-3); color: var(--tinta-suau); font-size: var(--mida-s); text-align: left; }
  .mobil-targetes td.titol { display: block; text-align: left; font-size: var(--mida-m); }
  .mobil-targetes td.titol::before { content: none; }
}