/* ==========================================================================
   Sistema de disseny de Xalanda Farm
   Heretat de xalanda-meteo-tvc (app/templates/base.html), igual que MediaScope.
   NO s'hi inventen colors, radis ni tipografies: el que hi ha entre la línia
   "Fitxes heretades" i "Components nous" és una còpia, i es toca només si es
   toca l'original.
   ========================================================================== */

/* --- Fitxes heretades ---------------------------------------------------- */
:root {
  color-scheme: light dark;
  --brand: #2563eb; --brand-fosc: #1e40af;
  --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc;
  --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --ombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --radi: 14px;
  --track: #e5e9f0;
  --verd: #16a34a; --vermell: #dc2626; --gris: #94a3b8; --ambre: #d97706;

  /* Sèries de dades (D-10, revisat a D-22). Paleta semàntica: la xarxa costa
     diners i va en vermell, la bateria va en teal —verd, però que sobreviu al
     daltonisme— i el consum en blau. Validada amb `validate_palette.js`, no a ull:
     en clar passa les cinc comprovacions. */
  /* Blaus dels rellotges: el fort per a l'exportació, el cel per a la bateria.
     Van a part de la paleta de sèries perquè fan una feina diferent (D-30). */
  --blau-fort: #0284c7; --blau-cel: #38bdf8;

  /* Mesurador de qualitat de l'aire (D-45). Passos TRIATS i validats contra la
     superfície de cada mode, no una inversió de l'altre: en clar, verd/sol/vermell
     passen el terra de 15 ΔE amb 24,1; en fosc, aquells mateixos hexs fallaven i els
     que passen són verd/ambre/xarxa. Els tres surten del lèxic de sempre. */
  --aire-be: #16a34a; --aire-just: #f59e0b; --aire-mal: #dc2626;

  --sol: #f59e0b;      /* producció fotovoltaica */
  --consum: #2563eb;   /* consum de la casa */
  --bat: #0d9488;      /* bateria */
  --xarxa: #b91c1c;    /* xarxa elèctrica (amb signe) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #131c2e; --surface-2: #0f1728;
    --ink: #e6edf7; --muted: #93a1b5; --line: #24324a;
    --ombra: 0 1px 3px rgba(0,0,0,.4);
    --track: #26334a;
    /* Els mateixos colors, aclarits: sobre fons fosc, els originals cauen per
       sota del contrast mínim. És l'única llibertat que es pren. */
    --sol: #d18a0a; --consum: #4f8ef7; --bat: #12a594; --xarxa: #e5484d;
    --ambre: #f59e0b;
    --blau-fort: #38bdf8; --blau-cel: #7dd3fc;
    --verd: #22c55e; --vermell: #f05252;
  --aire-be: #16a34a; --aire-just: #d97706; --aire-mal: #b91c1c;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #131c2e; --surface-2: #0f1728;
  --ink: #e6edf7; --muted: #93a1b5; --line: #24324a;
  --ombra: 0 1px 3px rgba(0,0,0,.4);
  --track: #26334a;
  --sol: #d18a0a; --consum: #4f8ef7; --bat: #12a594; --xarxa: #e5484d;
  --ambre: #f59e0b;
  --blau-fort: #38bdf8; --blau-cel: #7dd3fc;
  --verd: #22c55e; --vermell: #f05252;
  --aire-be: #16a34a; --aire-just: #d97706; --aire-mal: #b91c1c;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink); line-height: 1.45;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* --- Capçalera ----------------------------------------------------------- */
.topbar { background: linear-gradient(100deg, var(--brand-fosc), var(--brand));
          color: #fff; box-shadow: var(--ombra); }
.topbar-in { max-width: 1180px; margin: 0 auto; padding: .85rem 1.1rem; }
.topbar-main { display: flex; flex-direction: column; gap: .7rem; }
.brand-line { display: flex; align-items: center; justify-content: space-between;
              gap: .6rem 1.5rem; flex-wrap: wrap; }
.brand-left { display: flex; align-items: center; gap: .9rem; }
.brand-right { display: flex; align-items: center; justify-content: flex-end;
               gap: .9rem; flex-wrap: wrap; }
.tabs-row { display: flex; justify-content: space-between; align-items: center;
            gap: .8rem 1rem; flex-wrap: wrap; }
.topbar img { height: 40px; width: auto; display: block; }
.brand-line .t { font-size: 1.6rem; font-weight: 800; letter-spacing: .2px; }
.brand-line .s { font-size: 1.2rem; opacity: .92; font-weight: 500; }

.qos { font-size: .82rem; font-weight: 800; color: var(--brand); white-space: nowrap;
       padding: .34rem .7rem; border-radius: 8px; background: #fff; cursor: default;
       box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.qos::before { content: "◔ "; opacity: .8; }

.servei { display: inline-flex; align-items: center; gap: .5rem;
          font-size: .9rem; font-weight: 700; color: #fff; white-space: nowrap;
          padding: .42rem .95rem; border-radius: 999px;
          background: var(--verd); border: 1px solid rgba(255,255,255,.28);
          box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.servei .dot { width: 12px; height: 12px; border-radius: 50%; background: #eafff1;
               animation: batec-clar 1.8s infinite; }
.servei.off { background: var(--vermell); }
.servei.off .dot { background: #ffe1e1; animation: none; }
@keyframes batec-clar {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.tabs { display: flex; gap: .4rem; align-items: stretch; flex-wrap: wrap; }
.tabs a { color: #fff; text-decoration: none; padding: .42rem .85rem;
          border-radius: 999px; font-size: .9rem; font-weight: 600;
          background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
          transition: background .15s; display: inline-flex; align-items: center; }
.tabs a:hover { background: rgba(255,255,255,.22); }
.tabs a.actiu { background: #fff; color: var(--brand-fosc); border-color: #fff; }
.tabs a .lock { margin-left: .35rem; line-height: 1; font-size: .78rem; }

main { max-width: 1180px; margin: 0 auto; padding: 1.1rem 1.1rem 3rem; }

/* --- Targeta ------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radi); box-shadow: var(--ombra);
        padding: 1.1rem 1.15rem; margin-bottom: 1.15rem; }
.st-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.st-head h2 { font-size: 1.1rem; margin: 0; font-weight: 700; }
.st-head .codi { display: inline-flex; align-items: center; font-size: .8rem;
                 font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
                 background: var(--brand); color: #fff; }
.st-sub { color: var(--muted); font-size: .82rem; margin: .1rem 0 1rem; }

.live { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
        font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
        border: 1px solid var(--line); background: var(--surface-2); }
.st-head .live { margin-left: auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gris); flex: none; }
.live.on { color: var(--verd); border-color: color-mix(in srgb, var(--verd) 35%, var(--line)); }
.live.on .dot { background: var(--verd); animation: batec 2s infinite; }
.live.off { color: var(--vermell); border-color: color-mix(in srgb, var(--vermell) 35%, var(--line)); }
.live.off .dot { background: var(--vermell); }

/* La mateixa píndola, però a la capçalera blava: allà el fons clar i el verd de
   sistema no es llegeixen, i el que ha de destacar és el punt que batega, no la
   caixa. Els colors d'estat es porten al punt i la caixa es fa translúcida, com
   les pestanyes, perquè la capçalera continuï sent una sola peça. */
.live.live-cap { color: #fff; border-color: rgba(255,255,255,.22);
                 background: rgba(255,255,255,.12); font-weight: 700;
                 padding: .34rem .8rem; white-space: nowrap; }
.live.live-cap.on .dot { background: #7ef2a8; animation: batec-clar 2s infinite; }
.live.live-cap.off { background: var(--vermell); border-color: rgba(255,255,255,.28); }
.live.live-cap.off .dot { background: #ffe1e1; animation: none; }
.live.live-cap #moment { font-variant-numeric: tabular-nums; }
@keyframes batec {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* --- Botons, avisos, taules ---------------------------------------------- */
.btn { background: var(--brand); color: #fff; border: 0; border-radius: 8px;
       padding: .42rem .85rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
a.btn { display: inline-block; text-decoration: none; }
.banner { border-radius: 10px; padding: .6rem .9rem; margin: 0 0 1rem;
          font-size: .9rem; font-weight: 600; }
.banner.ok  { color: var(--verd); background: color-mix(in srgb, var(--verd) 14%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--verd) 35%, var(--line)); }
.banner.err { color: var(--vermell); background: color-mix(in srgb, var(--vermell) 12%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--vermell) 35%, var(--line)); }
.banner.avis { color: var(--ambre); background: color-mix(in srgb, var(--ambre) 12%, var(--surface));
               border: 1px solid color-mix(in srgb, var(--ambre) 35%, var(--line)); }
.muted { color: var(--muted); font-size: .85rem; }
.buit { color: var(--muted); font-size: .85rem; padding: 1.5rem 0; text-align: center; }

/* ==========================================================================
   Components nous d'aquest projecte. Documentats a docs/disseny.md.
   ========================================================================== */

/* --- Diagrama de flux (D-11) --------------------------------------------- */
/* El `max-height` creix amb el diagrama: ara és més alt perquè hi pengen les
   càrregues. Si es queda curt, el navegador encongeix l'SVG i deixa marges buits
   als costats en comptes de retallar-lo. */
.flux { width: 100%; height: auto; display: block; max-height: 640px; }

.flux .fx-track { fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; }
/* El tronc del qual pengen les càrregues: més prim que un braç, perquè es llegeixi
   com una derivació i no com una cinquena via principal. */
.flux .fx-track.tronc { stroke-width: 7; stroke-linejoin: round; }
.flux .fx-track.apagat { opacity: .55; }

/* Els punts que corren pels braços: un guió de llargada zero amb extrem rodó és
   un punt. Es mouen amb `stroke-dashoffset`, o sigui que és CSS i prou (D-12). */
.flux .fx { fill: none; stroke-width: 11; stroke-linecap: round;
            stroke-dasharray: 0 26; animation: flux var(--dur, 2s) linear infinite; }
.flux .fx.inv { animation-direction: reverse; }
.flux .fx.apagat { display: none; }
@keyframes flux { to { stroke-dashoffset: -26; } }

.flux .fx-sol { stroke: var(--sol); }
.flux .fx-consum { stroke: var(--consum); }
.flux .fx-bat { stroke: var(--bat); }
.flux .fx-xarxa { stroke: var(--xarxa); }

.flux .nd rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.flux .nd-lab { fill: var(--muted); font: 700 12px system-ui, sans-serif;
                text-transform: uppercase; letter-spacing: .06em; }
.flux .nd-val { fill: var(--ink); font: 800 30px system-ui, sans-serif;
                font-variant-numeric: tabular-nums; }
.flux .nd-u { fill: var(--muted); font: 600 14px system-ui, sans-serif; }
.flux .nd-sub { fill: var(--muted); font: 500 12.5px system-ui, sans-serif; }
/* ⚠️ GLOBAL i no `.flux .ic`: les icones es fan servir al diagrama I als rellotges.
   Mentre aquesta regla va estar limitada al diagrama, dins d'un rellotge el sol es
   dibuixava amb el `fill` negre per defecte i sense traç —els raigs no existien i el
   nucli era una taca fosca— i semblava que la icona no hi fos. */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

.flux .nd-sol    .ic { stroke: var(--sol); }
.flux .nd-consum .ic { stroke: var(--consum); }
.flux .nd-bat    .ic { stroke: var(--bat); }
.flux .nd-xarxa  .ic { stroke: var(--xarxa); }

/* --- Icones amb estat ---------------------------------------------------- */

/* El sol gira i bateja NOMÉS quan produeix. De nit s'atura, i això es veu abans
   que el número. */
.ic-sol .nucli { fill: color-mix(in srgb, var(--sol) 22%, transparent); }
.ic-sol .raigs { transform-origin: 12px 12px; }
.ic-sol.actiu .raigs { animation: gira-sol 22s linear infinite; }
.ic-sol.actiu .nucli { transform-origin: 12px 12px; animation: batec-sol 3.2s ease-in-out infinite; }
.ic-sol:not(.actiu) { opacity: .45; }
@keyframes gira-sol { to { transform: rotate(360deg); } }
@keyframes batec-sol {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.13); }
}

/* La torre: els aïlladors són els punts d'on pengen els cables i van plens. */
.ic-torre .aillador { fill: currentColor; stroke: none; }
.flux .ic-torre .aillador { fill: var(--xarxa); }

/* L'inversor: la sinusoide corre quan converteix. */
.ic-inv .aletes { opacity: .6; }
.ic-inv .ac { stroke-dasharray: 3 2.2; }
.ic-inv.actiu .ac { animation: corre-ac 1.1s linear infinite; }
@keyframes corre-ac { to { stroke-dashoffset: -5.2; } }

/* La bateria: VERTICAL i pintada per ESTAT, no per sèrie. Verd carregant, vermell
   descarregant. No contradiu la regla de reservar verd i vermell per als estats
   (D-10): això és exactament un estat. */
.ic-bat .born { fill: currentColor; stroke: none; opacity: .8; }
.ic-bat .nivell { stroke: none; }
.ic-bat .llamp, .ic-bat .fletxa { display: none; }
.ic-bat.carrega { color: var(--verd); stroke: var(--verd) !important; }
.ic-bat.carrega .nivell { fill: var(--verd); animation: puja-bat 2.4s ease-in-out infinite; }
.ic-bat.carrega .llamp { display: block; fill: var(--verd); stroke: none;
                         animation: batec-llamp 1.6s ease-in-out infinite; }
.ic-bat.descarrega { color: var(--vermell); stroke: var(--vermell) !important; }
.ic-bat.descarrega .nivell { fill: var(--vermell); animation: baixa-bat 2.4s ease-in-out infinite; }
.ic-bat.descarrega .fletxa { display: block; stroke: var(--vermell);
                             animation: batec-llamp 1.6s ease-in-out infinite; }
.ic-bat.repos { color: var(--bat); }
.ic-bat.repos .nivell { fill: var(--bat); opacity: .55; }
@keyframes puja-bat  { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes baixa-bat { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes batec-llamp { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* --- Càrregues individuals ----------------------------------------------- */
.flux .car rect { fill: var(--surface-2);
                  stroke: color-mix(in srgb, var(--consum) 35%, var(--line));
                  stroke-width: 1.4; }
.flux .car-nom { fill: var(--ink); font: 700 14px system-ui, sans-serif; }
.flux .car-sub { fill: var(--muted); font: 500 11.5px system-ui, sans-serif; }
.flux .car-val { fill: var(--consum); font: 800 17px system-ui, sans-serif;
                 text-anchor: end; font-variant-numeric: tabular-nums; }
/* "Altres" és el que no tens mesurat: es dibuixa amb vora discontínua perquè no
   es confongui amb un aparell de veritat. */
.flux .car-altres rect { stroke-dasharray: 5 4; fill: none; }
.flux .car-altres .car-val { fill: var(--muted); }
.flux .car-incoherent rect { stroke: var(--vermell); stroke-dasharray: 5 4; }
.flux .car-incoherent .car-sub, .flux .car-incoherent .car-val { fill: var(--vermell); }
.flux .nd-sol    rect { stroke: color-mix(in srgb, var(--sol) 45%, var(--line)); }
.flux .nd-consum rect { stroke: color-mix(in srgb, var(--consum) 45%, var(--line)); }
.flux .nd-bat    rect { stroke: color-mix(in srgb, var(--bat) 45%, var(--line)); }
.flux .nd-xarxa  rect { stroke: color-mix(in srgb, var(--xarxa) 45%, var(--line)); }

.flux .nd-a { cursor: pointer; }
.flux .nd-a:hover rect { stroke-width: 2.5; filter: brightness(1.03); }

.flux .hub circle { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.flux .hub .ic { stroke: var(--ink); stroke-width: 1.6; }
.flux .hub-lab { fill: var(--muted); font: 800 11px system-ui, sans-serif;
                 text-anchor: middle; letter-spacing: .08em; }
.flux .hub-val { fill: var(--ink); font: 800 26px system-ui, sans-serif;
                 text-anchor: middle; font-variant-numeric: tabular-nums; }
.flux .hub-sub { fill: var(--muted); font: 600 11px system-ui, sans-serif;
                 text-anchor: middle; }
.flux .hub-temp { fill: var(--muted); font: 700 13px system-ui, sans-serif;
                  text-anchor: middle; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .flux .fx, .ic-sol.actiu .raigs, .ic-sol.actiu .nucli, .ic-inv.actiu .ac,
  .ic-bat .nivell, .ic-bat .llamp, .ic-bat .fletxa { animation: none; }
  .servei .dot, .live.on .dot { animation: none; }
}

/* --- Quadres de xifres --------------------------------------------------- */
.quadres { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
           gap: .7rem; }
.quadre { background: var(--surface-2); border: 1px solid var(--line);
          border-radius: 12px; padding: .65rem .8rem; border-top: 3px solid var(--line); }
.quadre .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
             color: var(--muted); font-weight: 700; }
.quadre .v { font-size: 1.55rem; font-weight: 800; margin-top: .15rem;
             font-variant-numeric: tabular-nums; }
.quadre .v .u { font-size: .8rem; color: var(--muted); font-weight: 600; margin-left: .15rem; }
.quadre .extra { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.quadre.q-sol { border-top-color: var(--sol); }
.quadre.q-consum { border-top-color: var(--consum); }
.quadre.q-bat { border-top-color: var(--bat); }
.quadre.q-xarxa { border-top-color: var(--xarxa); }

/* --- Bateria ------------------------------------------------------------- */
.bat-blok { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.bat { width: 84px; height: auto; flex: none; }
.bat .bat-cos { fill: none; stroke: var(--line); stroke-width: 3; }
.bat .bat-cap { fill: var(--line); }
.bat .bat-fill.verd { fill: var(--verd); }
.bat .bat-fill.ambre { fill: var(--ambre); }
.bat .bat-fill.vermell { fill: var(--vermell); }
.bat .bat-reserva { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 4 3; }
.bat .bat-txt { fill: var(--ink); font: 800 20px system-ui, sans-serif; text-anchor: middle; }
.bat-dades { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
             gap: .6rem 1.6rem; flex: 1 1 300px; }
.bat-dada .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); font-weight: 700; }
.bat-dada .v { font-size: 1.15rem; font-weight: 700; }

/* --- Gràfica del dia ----------------------------------------------------- */
.chart-wrap { position: relative; }
.grafica { width: 100%; height: auto; display: block; min-width: 560px; touch-action: none; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-zero { stroke: var(--muted); stroke-width: 1.4; }
.g-axis { fill: var(--muted); font: 500 11px system-ui, sans-serif; text-anchor: end; }
.g-axis.g-x { text-anchor: middle; }
.g-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.g-sol { stroke: var(--sol); }
.g-consum { stroke: var(--consum); }
.g-bat { stroke: var(--bat); }
.g-xarxa { stroke: var(--xarxa); }
.g-area { fill: var(--sol); opacity: .12; stroke: none; }
.g-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.g-dot { stroke: var(--surface); stroke-width: 2; opacity: 0; }
.g-dot.g-sol { fill: var(--sol); } .g-dot.g-consum { fill: var(--consum); }
.g-dot.g-bat { fill: var(--bat); } .g-dot.g-xarxa { fill: var(--xarxa); }
.g-hit { fill: transparent; }
.g-tip { position: absolute; pointer-events: none; background: var(--ink);
         color: var(--bg); font-size: .74rem; line-height: 1.5; padding: .4rem .6rem;
         border-radius: 8px; white-space: nowrap; opacity: 0; z-index: 5;
         transform: translate(-50%, -110%); transition: opacity .1s; }
.g-tip b { font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

.llegenda { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem;
            font-size: .78rem; color: var(--muted); font-weight: 600; }
.llegenda span { display: inline-flex; align-items: center; gap: .35rem; }
.llegenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.llegenda .g-sol i { background: var(--sol); }
.llegenda .g-consum i { background: var(--consum); }
.llegenda .g-bat i { background: var(--bat); }
.llegenda .g-xarxa i { background: var(--xarxa); }

.sp { width: 100%; height: 30px; display: block; margin-top: .35rem; }
.sp polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sp.sp-sol polyline { stroke: var(--sol); }

/* --- Formulari de Sistema ------------------------------------------------ */
.camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
         gap: .9rem 1.2rem; }
.camp label { display: block; font-size: .74rem; font-weight: 700; color: var(--muted);
              text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.camp label .u { text-transform: none; letter-spacing: 0; font-weight: 600; }
.camp input[type="text"], .camp input[type="password"] {
  width: 100%; font: inherit; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.camp input:focus-visible { border-color: var(--brand); }
.camp .ajuda { font-size: .74rem; color: var(--muted); margin: .3rem 0 0; line-height: 1.4; }
/* Les caselles van amb l'etiqueta al costat: una casella sola sota un títol en
   majúscules sembla que falti alguna cosa. */
.camp-bool { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.camp-bool label { order: 2; margin: 0; align-self: center; }
.camp-bool input { order: 1; width: 20px; height: 20px; accent-color: var(--brand);
                   margin-top: .1rem; }
.camp-bool .ajuda { order: 3; flex-basis: 100%; margin-top: .1rem; }
/* Enganxada a baix: quan el formulari és llarg, el botó de desar no ha de quedar
   a tres pantalles de distància del camp que acabes d'escriure. */
.barra-desa { position: sticky; bottom: 0; display: flex; align-items: center;
              gap: .9rem; flex-wrap: wrap; padding: .8rem 1.15rem;
              background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--radi); box-shadow: var(--ombra);
              margin-bottom: 1.15rem; }
code { background: var(--surface-2); border: 1px solid var(--line);
       padding: .05rem .35rem; border-radius: 6px; font-size: .82em; }

/* --- Entrada ------------------------------------------------------------- */
.login-wrap { display: flex; justify-content: center; padding: 3rem 1rem; }
.login-card { width: min(360px, 100%); }
.login-card label { display: block; font-size: .8rem; color: var(--muted);
                    font-weight: 600; margin-bottom: .8rem; }
.login-card input { display: block; width: 100%; margin-top: .25rem; font: inherit;
                    background: var(--surface-2); color: var(--ink);
                    border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.login-card button { width: 100%; margin-top: .4rem; background: var(--brand); color: #fff;
                     border: 0; border-radius: 8px; padding: .55rem; font-weight: 700;
                     font-size: .95rem; cursor: pointer; }

/* --- Pàgina "properament" ------------------------------------------------ */
.properament { text-align: center; padding: 2.4rem 1.5rem; }
.prop-emoji { font-size: 2.6rem; line-height: 1; }
.properament h2 { margin: .5rem 0 .6rem; }
.properament p { max-width: 540px; margin: .4rem auto; color: var(--muted); }

/* ==========================================================================
   Rellotges de la pantalla "Ara mateix" (D-26)
   Aquesta pantalla es mira des del MÒBIL. Per això la reixa és d'una columna a
   sota de 520 px i els rellotges són grans: han de ser llegibles amb el braç
   estirat, no bonics de prop.
   ========================================================================== */

.avisos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.av { font-size: .82rem; font-weight: 700; padding: .34rem .7rem; border-radius: 999px;
      border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.av::before { content: "●"; margin-right: .4rem; font-size: .7em; vertical-align: .1em; }
.av-sol     { color: var(--sol);     border-color: color-mix(in srgb, var(--sol) 40%, var(--line));
              background: color-mix(in srgb, var(--sol) 10%, var(--surface)); }
.av-consum  { color: var(--consum);  border-color: color-mix(in srgb, var(--consum) 40%, var(--line));
              background: color-mix(in srgb, var(--consum) 10%, var(--surface)); }
.av-bat     { color: var(--bat);     border-color: color-mix(in srgb, var(--bat) 40%, var(--line));
              background: color-mix(in srgb, var(--bat) 10%, var(--surface)); }
.av-xarxa   { color: var(--xarxa);   border-color: color-mix(in srgb, var(--xarxa) 40%, var(--line));
              background: color-mix(in srgb, var(--xarxa) 10%, var(--surface)); }
.av-verd    { color: var(--verd);    border-color: color-mix(in srgb, var(--verd) 40%, var(--line));
              background: color-mix(in srgb, var(--verd) 10%, var(--surface)); }
.av-ambre   { color: var(--ambre);   border-color: color-mix(in srgb, var(--ambre) 40%, var(--line));
              background: color-mix(in srgb, var(--ambre) 10%, var(--surface)); }
.av-vermell { color: var(--vermell); border-color: color-mix(in srgb, var(--vermell) 40%, var(--line));
              background: color-mix(in srgb, var(--vermell) 10%, var(--surface)); }

.card-gauges { padding-bottom: 1.4rem; }
/* 300 px de mínim i no 280: amb 280 hi cabien quatre columnes i els rellotges
   quedaven petits. Amb 300 en surten tres, que és com estan pensats els nou. */
.gg-reixa { display: grid; gap: 1.4rem 1rem; margin-top: .2rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 520px) { .gg-reixa { grid-template-columns: 1fr; } }

.gg { margin: 0; display: flex; flex-direction: column; align-items: center; }
.gg-svg { width: 100%; max-width: 340px; height: auto; display: block; }

/* L'escala */
.gg-via { fill: none; stroke: var(--track); stroke-width: 14; stroke-linecap: round; }
.gg-banda { fill: none; stroke-width: 5; stroke-linecap: butt; opacity: .55; }
.gg-b-verd    { stroke: var(--verd); }
.gg-b-ambre   { stroke: var(--ambre); }
.gg-b-vermell { stroke: var(--vermell); }
.gg-b-sol     { stroke: var(--sol); }
.gg-b-consum  { stroke: var(--consum); }
.gg-b-bat     { stroke: var(--bat); }
.gg-b-xarxa   { stroke: var(--xarxa); }
.gg-b-gris    { stroke: var(--gris); }
.gg-tick { stroke: var(--line); stroke-width: 1.4; }
.gg-tick-gran { stroke: var(--muted); stroke-width: 2; opacity: .8; }
/* La marca del llindar: prima, del color de la tinta i per damunt de tot. Diu «aquí
   hi ha una frontera que importa» sense pintar mitja escala. */
.gg-llindar { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; opacity: .75; }

/* L'arc del valor. La transició fa que en arribar una lectura nova per SSE l'arc
   s'hi mogui en comptes de saltar-hi. */
/* ⚠️ La `d` NO es transiciona, i durant un temps sí. Interpolar una `d` d'arc mou
   el punt final en LÍNIA RECTA mentre els radis es queden quiets, i a sobre el
   `large-arc-flag` és un BOOLEÀ —salta de 0 a 1 quan l'arc passa dels 180°, cap als
   dos terços de l'escala— i un booleà no es pot interpolar: el navegador el fa saltar
   a mitja transició i l'arc canvia de forma de cop.
   El camí és FIX i el que es mou és quant se n'encén, que són dos números. */
.gg-valor { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round;
            transition: stroke-dasharray .55s ease, stroke-dashoffset .55s ease,
                        color .3s; }

/* Colors de l'arc del valor (D-30).
   Al rellotge el color és un JUDICI sobre el valor —verd va bé, vermell costa
   diners— i no una manera de distingir sèries: cada esfera va sola i amb el seu
   títol, així que el color és informació redundant i no l'única pista. Per això
   aquí sí que hi entren el verd i el vermell, que a la gràfica del dia segueixen
   fora perquè allà les quatre línies conviuen en un mateix dibuix. */
/* Les classes de color fixen `color`, i cada peça agafa el que li cal: l'arc el vol
   com a traç i l'agulla com a farciment. Així un color es defineix un sol cop. */
.gg-c-verd    { color: var(--verd); }
.gg-c-vermell { color: var(--vermell); }
.gg-c-ambre   { color: var(--ambre); }
.gg-c-blau    { color: var(--blau-fort); }
.gg-c-blaucel { color: var(--blau-cel); }
.gg-c-gris    { color: var(--gris); }
.gg-c-sol     { color: var(--sol); }
.gg-c-consum  { color: var(--consum); }
.gg-c-bat     { color: var(--bat); }
.gg-c-xarxa   { color: var(--xarxa); }

/* L'agulla: cap de fletxa a l'extrem de l'arc, apuntant cap enfora. La vora del
   color del fons la separa de les bandes quan hi passa per sobre. */
/* El mateix, i pitjor: el cap de fletxa és un triangle i interpolar-ne la `d` fa
   viatjar cada vèrtex per la corda. De 2.000 a 6.000 W la punta passava a 69 px del
   centre en comptes dels 97 que li toquen, i semblava que l'agulla sortís del mig del
   rellotge. Girant, va per l'arc, que és el camí que ha de fer. */
.gg-agulla { fill: currentColor; stroke: var(--surface); stroke-width: 1.8;
             stroke-linejoin: round;
             transform-box: view-box; transform-origin: 100px 99px;
             transition: transform .55s ease, color .3s; }

/* Dins de l'esfera hi queda NOMÉS el número i la unitat. Tota la resta va a sota,
   on es pot llegir i on pot ocupar l'ample que li calgui (D-29). */
.gg-val { fill: var(--ink); font: 800 46px system-ui, sans-serif; text-anchor: middle;
          font-variant-numeric: tabular-nums; }
.gg-unitat { fill: var(--muted); font: 600 15px system-ui, sans-serif; text-anchor: middle; }
/* L'estat, a la part baixa de l'esfera. En majúscules i amb el cos ajustat perquè
   no toqui els braços de l'arc, que allà baix es tanquen. */
.gg-estat { fill: var(--muted); font: 800 13px system-ui, sans-serif;
            text-anchor: middle; letter-spacing: .04em; }
.gg-estat.ex-verd { fill: var(--verd); }
.gg-estat.ex-vermell { fill: var(--vermell); }

/* El missatge de sota, fora de l'esfera perquè pugui ocupar dues línies sense
   deformar el dibuix. */
/* La descripció passa a ser una PÍNDOLA, amb el mateix llenguatge que la tira
   d'avisos de dalt. Amplada exacta de l'esfera perquè la columna quedi alineada:
   una píndola que s'ajustés al text faria dents de serra amb nou rellotges. */
.gg-msg { display: block; width: 100%; max-width: 340px; margin: .4rem auto 0;
          font-size: .8rem; font-weight: 700; line-height: 1.3; text-align: center;
          padding: .4rem .7rem; border-radius: 999px;
          border: 1px solid var(--line); background: var(--surface-2);
          color: var(--muted); }
.gg-msg.pd-verd    { color: var(--verd);
                     border-color: color-mix(in srgb, var(--verd) 40%, var(--line));
                     background: color-mix(in srgb, var(--verd) 10%, var(--surface)); }
.gg-msg.pd-vermell { color: var(--vermell);
                     border-color: color-mix(in srgb, var(--vermell) 40%, var(--line));
                     background: color-mix(in srgb, var(--vermell) 10%, var(--surface)); }
.gg-msg.pd-ambre   { color: var(--ambre);
                     border-color: color-mix(in srgb, var(--ambre) 40%, var(--line));
                     background: color-mix(in srgb, var(--ambre) 10%, var(--surface)); }
.gg-msg.pd-blau    { color: var(--blau-fort);
                     border-color: color-mix(in srgb, var(--blau-fort) 40%, var(--line));
                     background: color-mix(in srgb, var(--blau-fort) 10%, var(--surface)); }

/* Als rellotges, cada icona porta el seu color: el de l'arc no serveix perquè la
   icona parla d'una altra cosa (que el sol pica fort, que la xarxa rep). */
.gg .ic-sol    { color: var(--sol); }
.gg .ic-torre  { color: var(--verd); }
.gg .ic-casa   { color: var(--consum); }
.gg .ic-alerta { color: var(--vermell); animation: batec-alerta 1.2s ease-in-out infinite; }
.gg .ic-alerta .punt { fill: currentColor; stroke: none; }
@keyframes batec-alerta {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
.gg .ic-torre .aillador { fill: currentColor; }

.peu-temp { color: var(--muted); font-size: .82rem; text-align: center; margin: -.4rem 0 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .gg-valor, .gg-agulla { transition: none; }
  .gg .ic-alerta { animation: none; }
}

/* El títol va SOTA l'esfera, entre el dibuix i la descripció (D-29): dins hi
   competia amb el número, que és l'únic que s'ha de llegir de lluny. */
/* El títol va SOTA l'esfera, entre el dibuix i la descripció (D-29): dins hi
   competia amb el número, que és l'únic que s'ha de llegir de lluny. */
/* Enganxat a la base de l'esfera: el viewBox acaba tres píxels sota els extrems de
   l'arc, així que el títol queda a tocar del dibuix i no surant al mig del no-res. */
/* El marge negatiu compensa l'espai que el viewBox reserva a l'agulla quan apunta
   cap avall (a 0% i a 100%), perquè el títol segueixi enganxat a la base de l'esfera
   i no baixi nou píxels que la majoria del temps són buits. */
.gg-titol { font-size: 1.18rem; font-weight: 800; letter-spacing: .04em;
            text-transform: uppercase; color: var(--ink); text-align: center;
            margin-top: -.62rem; line-height: 1.2; }

/* ==========================================================================
   Icones dels rellotges (D-31)
   Totes al mateix lloc: a l'esquerra de la unitat, dins de l'esfera. Totes
   animades, perquè una icona quieta no diu que hi estigui passant res.
   ========================================================================== */

/* --- Endoll: el corrent corre pel cable i les clavilles fan espurna ------- */
.gg .ic-endoll { color: var(--vermell); }
.ic-endoll .cable { stroke-dasharray: 2.6 2; animation: corrent-cable 1s linear infinite; }
.ic-endoll .espurna { stroke-width: 1.4; opacity: 0;
                      animation: espurna 2.2s ease-in-out infinite; }
@keyframes corrent-cable { to { stroke-dashoffset: -4.6; } }
@keyframes espurna {
  0%, 78%, 100% { opacity: 0; }
  84%           { opacity: 1; }
  90%           { opacity: .2; }
  95%           { opacity: .9; }
}

/* --- Torre amb fletxa: la fletxa avança en el seu sentit ------------------ */
.gg .ic-torre-fletxa.surt  { color: var(--vermell); }
.gg .ic-torre-fletxa.entra { color: var(--verd); }
.ic-torre-fletxa .aillador { fill: currentColor; stroke: none; }
.ic-torre-fletxa .torre { opacity: .85; }
.ic-torre-fletxa .fletxa { stroke-width: 2.1; }
.ic-torre-fletxa.surt  .fletxa { animation: fletxa-dreta 1.5s ease-in-out infinite; }
.ic-torre-fletxa.entra .fletxa { animation: fletxa-esquerra 1.5s ease-in-out infinite; }
@keyframes fletxa-dreta {
  0%, 100% { transform: translateX(-1.4px); opacity: .45; }
  55%      { transform: translateX(1.6px);  opacity: 1; }
}
@keyframes fletxa-esquerra {
  0%, 100% { transform: translateX(1.4px); opacity: .45; }
  55%      { transform: translateX(-1.6px); opacity: 1; }
}

/* --- Bateria de cel·les: pugen en verd, baixen en vermell ----------------- */
.ic-bat-celles .born { fill: currentColor; stroke: none; opacity: .85; }
.ic-bat-celles .cos { stroke: currentColor; }
.ic-bat-celles .cella { stroke: none; }
.ic-bat-celles .cella.buida { fill: currentColor; opacity: .16; }
.ic-bat-celles .cella.plena { fill: currentColor; }
/* La que s'està omplint o buidant parpelleja: així el sentit es veu sense llegir res.
   ⚠️ La que es mou NO puja fins a l'opacitat plena: si hi arribés es llegiria com una
   cel·la sencera i la icona tornaria a dir més càrrega de la que hi ha, que és
   exactament l'error que es va corregir a `icona_bateria_celles`. */
.ic-bat-celles .cella.movent { fill: currentColor;
                               animation: cella-mou 1.1s ease-in-out infinite; }
/* Quan la que es mou encara no té gens d'alçada, el que parpelleja és el forat, i
   allà el marge d'opacitat ha de ser el d'un forat, no el d'una cel·la plena. */
.ic-bat-celles .cella.buida.movent { animation: forat-mou 1.4s ease-in-out infinite; }
/* ⚠️ El COLOR el diu la banda on cau el SOC, no el sentit. Amb el sentit, la icona
   sortia vermella al 96% només perquè la bateria estava donant energia a la casa —que
   és el que ha de fer— i el vermell d'aquest rellotge ha de voler dir «poca bateria».
   El sentit el continua dient la cel·la que parpelleja. */
.ic-bat-celles.c-verd    { color: var(--verd); }
.ic-bat-celles.c-ambre   { color: var(--ambre); }
.ic-bat-celles.c-vermell { color: var(--vermell); }
.ic-bat-celles.c-blaucel { color: var(--blau-cel); }
.ic-bat-celles.c-bat     { color: var(--bat); }
/* Sense banda —si algun dia s'usa en un rellotge sense bandes— es manté el teal. */
.ic-bat-celles           { color: var(--bat); }
/* En repòs les cel·les respiren molt suaument, una darrere l'altra. */
.ic-bat-celles.repos .cella.plena { animation: cella-respira 3.4s ease-in-out infinite;
                                    animation-delay: calc(var(--i) * .18s); }
@keyframes cella-mou {
  0%, 100% { opacity: .38; }
  50%      { opacity: .9; }
}
@keyframes forat-mou {
  0%, 100% { opacity: .16; }
  50%      { opacity: .42; }
}
@keyframes cella-respira {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-endoll .cable, .ic-endoll .espurna, .ic-torre-fletxa .fletxa,
  .ic-bat-celles .cella { animation: none; }
  .ic-endoll .espurna { opacity: .8; }
}

/* La lluna, parella del sol als rellotges de dia i de nit. Es gronxa a poc a poc
   —dotze segons— perquè és un rellotge d'energia acumulada: si fes el ritme del sol
   semblaria que hi està passant alguna cosa ara mateix. */
.ic-lluna { color: var(--blau-cel); }
.ic-lluna .disc { fill: currentColor; stroke: none; }
.ic-lluna .estrelles { stroke-width: 1.6; opacity: .9; }
.ic-lluna .estrelles path { animation: centelleig 3.2s ease-in-out infinite; }
.ic-lluna .estrelles .e2 { animation-delay: 1.1s; }
.ic-lluna .estrelles .e3 { animation-delay: 2.2s; }
.ic-lluna .disc { animation: gronxa 12s ease-in-out infinite;
                  transform-origin: 12px 12px; }
@keyframes centelleig {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
@keyframes gronxa {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ic-lluna .disc, .ic-lluna .estrelles path { animation: none; }
}

/* El número de la marca del mig de l'escala. Va a dins de l'esfera, sota les marques
   grans: sense ell, una agulla a dos terços del recorregut no diu si són sis mil
   watts o seixanta. */
.gg-marca { fill: var(--muted); font: 700 12px system-ui, sans-serif;
            text-anchor: middle; opacity: .75; letter-spacing: .02em; }

/* ==========================================================================
   Pantalla completa (D-37)
   Els sis rellotges de la radiografia, omplint el monitor que sigui.

   ⚠️ NO es dibuixa cap rellotge nou: es reaprofiten ELS MATEIXOS, amb els mateixos
   identificadors. Duplicar-los voldria dir dos `id="gv-produccio"` a la pàgina, i
   llavors el directe n'actualitzaria un i l'altre es quedaria congelat ensenyant
   dades velles amb tota la naturalitat del món.

   ⚠️ I la reixa la tria el CSS, no el JavaScript. Una mesura feta amb JS es pren un
   cop; una consulta de mitjans es torna a avaluar tota sola quan mous la finestra
   al monitor de l'altra resolució, que és exactament el que ha de passar.
   ========================================================================== */
body.kiosc { overflow: hidden; }
body.kiosc .topbar, body.kiosc .avisos, body.kiosc .peu-temp,
body.kiosc .banner, body.kiosc footer { display: none !important; }
body.kiosc main { position: fixed; inset: 0; max-width: none; padding: 0;
                  background: var(--bg); }
body.kiosc .card { margin: 0; border: 0; border-radius: 0; box-shadow: none;
                   height: 100%; padding: 1.1vmin 1.1vmin .8vmin; }
body.kiosc .gg-reixa {
  height: 100%; margin: 0; gap: .8vmin 1vmin;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
/* Només es veuen els sis de la pàgina on som; la resta desapareix.
   ⚠️ Els altres no s'esborren, s'amaguen: continuen sent al document i el directe
   segueix actualitzant-los, o sigui que en canviar de pàgina ja hi són al dia i no
   ensenyen mig segon de dades velles mentre arriba la lectura següent. */
body.kiosc .gg { display: none; }
body.kiosc[data-pagina="1"] .gg-k1,
body.kiosc[data-pagina="2"] .gg-k2 { display: flex; flex-direction: column;
                                     align-items: center; justify-content: center;
                                     min-height: 0; min-width: 0; }
/* L'SVG ocupa el que queda i el `preserveAspectRatio` ja el centra a dins: així el
   rellotge creix fins on pot sense deformar-se ni sortir de la cel·la. */
body.kiosc .gg-svg { width: 100%; height: 100%; max-width: none;
                     flex: 1 1 0; min-height: 0; }
/* Els textos van en `vmin` perquè creixin amb el monitor i no amb la mida de lletra
   del navegador: el que mana aquí és la distància a la pantalla, no el zoom. */
body.kiosc .gg-titol { font-size: clamp(.8rem, 1.9vmin, 2.6rem); margin: 0;
                       line-height: 1.1; }
body.kiosc .gg-msg { max-width: min(92%, 46vmin); margin: .5vmin auto 0;
                     font-size: clamp(.62rem, 1.35vmin, 1.7rem);
                     padding: .45vmin 1vmin; }

/* Pantalles més altes que amples: dues columnes i tres files.
   ⚠️ El punt de tall és 0,95 i NO «quan és vertical», que és el que semblava. La
   figura sencera fa 200 d'ample per uns 218 d'alt (esfera, títol i píndola), i amb
   això la mida que se'n treu és `min(ample_cel·la/200, alçada_cel·la/218)`. Fent el
   càlcul, el 3×2 ja guanya a partir de 0,95: fins i tot en un 5:4, que sembla
   quadrat, surt un rellotge un 33% més gran que amb dues columnes.
   ⚠️ I NO hi ha reixa d'una sola columna. Sembla la bona per a un mòbil dret i no ho
   és: el rellotge és més ample que alt, i una columna el deixa limitat per l'alçada
   de la cel·la. En un 1080×1920 dona ×1,47 contra el ×2,70 de dues columnes, i en un
   mòbil de 390×844, ×0,65 contra ×0,97. Només passaria a guanyar per sota de la
   proporció 0,31 —fes els números: 400/1308— i cap pantalla real hi arriba: la més
   estreta que existeix és un mòbil dret, i va per 0,46. */
@media (max-aspect-ratio: 19/20) {
  body.kiosc .gg-reixa { grid-template-columns: repeat(2, 1fr);
                         grid-template-rows: repeat(3, 1fr); }
}

/* Els dos controls del quiosc: la pàgina a l'esquerra i la sortida a la dreta.
   Tots dos s'aparten sols quan no hi ha el ratolí a sobre: en un quiosc, el que s'ha
   de veure són els rellotges, no els botons per governar-los. */
.kiosc-sortir, .kiosc-pagina { display: none; }
body.kiosc .kiosc-sortir, body.kiosc .kiosc-pagina {
  display: flex; align-items: center; gap: .7rem;
  position: fixed; top: .8vmin; z-index: 50;
  padding: .4rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); color: var(--muted);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  font-family: inherit; opacity: .22; transition: opacity .25s;
}
body.kiosc .kiosc-sortir { right: 1vmin; }
body.kiosc .kiosc-pagina { left: 1vmin; gap: .5rem; }
body.kiosc .kiosc-sortir:hover, body.kiosc .kiosc-sortir:focus-visible,
body.kiosc .kiosc-pagina:hover, body.kiosc .kiosc-pagina:focus-visible { opacity: 1; }
.kiosc-sortir .px { font-variant-numeric: tabular-nums; opacity: .8; font-weight: 600; }
.kiosc-pagina .quina { font-variant-numeric: tabular-nums; }
.kiosc-pagina .fletxa { opacity: .7; font-size: .9em; }
/* Els punts, que diuen d'una ullada quantes pàgines hi ha i on ets. */
.kiosc-pagina .punts { display: inline-flex; gap: .28rem; }
.kiosc-pagina .punts i { width: 6px; height: 6px; border-radius: 50%;
                         background: currentColor; opacity: .3; }
.kiosc-pagina .punts i.ara { opacity: 1; }

/* El botó de la capçalera, amb el mateix lèxic que les pestanyes. */
.btn-cap { color: #fff; text-decoration: none; padding: .34rem .8rem;
           border-radius: 999px; font-size: .82rem; font-weight: 700;
           background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
           cursor: pointer; white-space: nowrap; font-family: inherit;
           display: inline-flex; align-items: center; gap: .4rem;
           transition: background .15s; }
.btn-cap:hover { background: rgba(255,255,255,.24); }

/* ==========================================================================
   La gràfica d'un rellotge (D-38)
   ========================================================================== */
.gg { cursor: pointer; }
.gg:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px;
                    border-radius: var(--radi); }
/* A pantalla completa no es clica per obrir gràfiques: s'hi va a mirar. */
body.kiosc .gg { cursor: default; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex;
         align-items: center; justify-content: center; padding: 1rem; }
.modal-fons { position: absolute; inset: 0; background: rgba(4, 10, 22, .62); }
.modal-cos { position: relative; width: min(980px, 100%); max-height: 92vh;
             overflow: auto; background: var(--surface); color: var(--ink);
             border: 1px solid var(--line); border-radius: var(--radi);
             box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 1rem 1.15rem 1.2rem; }
.modal-cap { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.modal-cap h2 { margin: 0; font-size: 1.12rem; font-weight: 800; flex: 1; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 1.1rem;
           cursor: pointer; padding: .2rem .4rem; border-radius: 8px;
           font-family: inherit; }
.modal-x:hover { background: var(--surface-2); color: var(--ink); }

.graf-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem;
                 align-items: center; margin-bottom: .7rem; }
.finestres { display: flex; gap: .35rem; flex-wrap: wrap; }
.finestres button, .btn-petit {
  font: 700 .8rem/1 inherit; padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  cursor: pointer; }
.finestres button:hover, .btn-petit:hover { border-color: var(--brand); color: var(--ink); }
.finestres button.actiu { background: var(--brand); border-color: var(--brand);
                          color: #fff; }
.rang { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
        font-size: .8rem; color: var(--muted); font-weight: 600; }
.rang input { font: inherit; padding: .32rem .5rem; border-radius: 8px;
              border: 1px solid var(--line); background: var(--surface);
              color: var(--ink); }

.graf-series { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
               margin-bottom: .8rem; }
.graf-etiqueta { font-size: .78rem; font-weight: 700; color: var(--muted); }
.graf-fitxa { display: inline-flex; align-items: center; gap: .4rem;
              font-size: .78rem; font-weight: 700; padding: .28rem .6rem;
              border-radius: 999px; border: 1px solid var(--line);
              background: var(--surface-2); }
.graf-fitxa .mostra { width: 10px; height: 10px; border-radius: 3px;
                      background: var(--c, var(--gris)); flex: none; }
.graf-fitxa button { background: none; border: 0; color: var(--muted);
                     cursor: pointer; font: inherit; padding: 0 0 0 .1rem; }
.graf-fitxa button:hover { color: var(--vermell); }
.graf-fitxa.base button { display: none; }
#graf-afegeix { font: 700 .78rem inherit; padding: .3rem .5rem; border-radius: 999px;
                border: 1px solid var(--line); background: var(--surface-2);
                color: var(--muted); cursor: pointer; }
.graf-llenc { min-height: 240px; position: relative; overflow-x: auto; }
/* El globus es col·loca des de dalt i no des de baix: la gràfica gran és més alta
   que la del dia i, ancorat a baix, en surt per fora quan el punt és a prop del
   zero. */
.graf-llenc .g-tip { transform: translate(-50%, 0); }
.graf-peu { font-size: .76rem; color: var(--muted); margin: .6rem 0 0; }

/* Les línies de la gràfica gran prenen el color de la sèrie, que el posa el
   servidor amb un `--c` per sèrie: així el lèxic de colors no es duplica al CSS. */
.grafica-gran .g-line { stroke: var(--c, var(--gris)); }
.grafica-gran .g-dot { fill: var(--c, var(--gris)); }
/* La banda de mínim a màxim de cada tram, amb les vores DIBUIXADES.
   ⚠️ Al principi era només una ombra al 17% i no servia: el pic hi era però s'havia
   de trobar amb el ratolí, perquè la línia de la mitjana dominava i la gràfica
   semblava plana. Que un pic de 10.410 W només es vegi passant-hi per sobre és tan
   enganyós com no tenir-lo. Ara el que es llegeix d'una ullada és la FORMA del
   senyal —les puntes— i la mitjana és la línia gruixuda que hi va per dins. */
.grafica-gran .g-banda { fill: var(--c, var(--gris)); opacity: .3; stroke: none; }
.grafica-gran .g-pic { fill: none; stroke: var(--c, var(--gris)); stroke-width: 1;
                       stroke-linejoin: round; stroke-linecap: round; opacity: .72; }
/* La mitjana va per sobre de tot i una mica més prima que abans: amb les puntes
   dibuixades al darrere ja no ha de carregar ella sola amb tota la lectura. */
.grafica-gran .g-line { stroke-width: 1.9; }

@media (max-width: 560px) {
  .modal { padding: .4rem; }
  .modal-cos { padding: .8rem .7rem 1rem; max-height: 96vh; }
  .graf-controls { gap: .5rem; }
}
.g-tip .pic { font-style: normal; opacity: .7; font-size: .92em; }

/* --- La gràfica a pantalla completa (D-39) --------------------------------
   ⚠️ No és cosmètica: com més ample es dibuixa, més punts té sentit calcular. A la
   finestra modal hi caben uns 940 i en un monitor de 2560, uns 2.500. La resolució
   la demana el navegador segons on es dibuixarà de veritat. */
.modal.ple { padding: 0; }
.modal.ple .modal-fons { background: var(--bg); }
.modal.ple .modal-cos { width: 100%; max-width: none; height: 100vh;
                        max-height: none; border: 0; border-radius: 0;
                        box-shadow: none; display: flex; flex-direction: column; }
.modal.ple .graf-llenc { flex: 1 1 auto; min-height: 0; display: flex;
                         align-items: center; }
.modal.ple .grafica { min-width: 0; }
.graf-mida { font-size: .72rem; color: var(--muted); font-weight: 600;
             font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   L'estació del costat dels panells i la previsió (D-40)
   A l'esquerra el que fa ARA on són els panells, a la dreta què farà avui.
   ========================================================================== */
.meteo { display: grid; grid-template-columns: 1.65fr 1fr; gap: 1rem;
         margin-bottom: 1rem; }
.meteo-ara, .meteo-prev, .ambient { background: var(--surface); border: 1px solid var(--line);
                          border-radius: var(--radi); box-shadow: var(--ombra);
                          padding: .8rem .95rem .9rem; }
.meteo-cap { display: flex; align-items: center; justify-content: space-between;
             gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.meteo-lloc { font-size: .78rem; font-weight: 800; color: var(--muted);
              text-transform: uppercase; letter-spacing: .04em; }
.pastilla { font-size: .74rem; font-weight: 800; padding: .26rem .65rem;
            border-radius: 999px; white-space: nowrap; border: 1px solid; }
.pastilla.p-verd    { color: var(--verd); border-color: color-mix(in srgb, var(--verd) 40%, var(--line));
                      background: color-mix(in srgb, var(--verd) 12%, var(--surface)); }
.pastilla.p-vermell { color: var(--vermell); border-color: color-mix(in srgb, var(--vermell) 45%, var(--line));
                      background: color-mix(in srgb, var(--vermell) 14%, var(--surface));
                      animation: batec-alerta 1.4s ease-in-out infinite; }
.pastilla.p-blau    { color: var(--blau-fort); border-color: color-mix(in srgb, var(--blau-fort) 40%, var(--line));
                      background: color-mix(in srgb, var(--blau-fort) 12%, var(--surface)); }
.pastilla.p-ambre   { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 40%, var(--line));
                      background: color-mix(in srgb, var(--ambre) 12%, var(--surface)); }
.pastilla.p-gris    { color: var(--muted); border-color: var(--line);
                      background: var(--surface-2); }

.meteo-valors { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
                gap: .55rem .9rem; }
.mv { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mv .et { font-size: .7rem; font-weight: 700; color: var(--muted);
          text-transform: uppercase; letter-spacing: .03em; }
.mv strong { font-size: 1.42rem; font-weight: 800; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.mv strong i { font-size: .62em; font-weight: 700; font-style: normal;
               color: var(--muted); margin-left: .18rem; }
.mv .peu { font-size: .68rem; color: var(--muted); line-height: 1.25; }
/* La radiació és el número que explica la producció dels rellotges de sota: se li
   dona el color del sol i una mica més de cos que a la resta. */
.mv-gran strong { font-size: 1.9rem; color: var(--sol); }

.meteo-prev-cos { display: flex; align-items: center; gap: .8rem; }
.meteo-prev-cos .emoji { font-size: 2.1rem; line-height: 1; }
.meteo-prev-cos .temps { display: flex; align-items: baseline; gap: .35rem; }
.meteo-prev-cos .temps strong { font-size: 1.9rem; font-weight: 800;
                                font-variant-numeric: tabular-nums; }
.meteo-prev-cos .temps .min { font-size: 1.05rem; font-weight: 700; color: var(--muted); }
.meteo-prev-cos .detall { min-width: 0; }
.meteo-prev-cos .cel { font-size: .82rem; font-weight: 700; }
.meteo-prev-cos .peu { font-size: .7rem; color: var(--muted); }
.meteo-motiu { margin-top: .5rem; font-size: .66rem; color: var(--muted);
               opacity: .85; }

@media (max-width: 780px) { .meteo { grid-template-columns: 1fr; } }
/* A pantalla completa dels rellotges, la tira no hi pinta res. */
body.kiosc .meteo { display: none !important; }

/* ==========================================================================
   Ambient i llum natural (D-43)
   D'ample sencer i sota la tira: la de dalt explica com va la planta ARA, aquesta
   explica en quin dia de l'any som. Mateixes peces —.meteo-cap, .meteo-valors, .mv—
   perquè és el mateix llenguatge llegit a la mateixa distància.
   ========================================================================== */
/* ==========================================================================
   Ambient i llum natural (D-45)
   Quatre caselles i no sis, i el pes visual se'n va al mesurador de partícules,
   que és l'única cosa d'aquí que demana ser mirada i no llegida.
   ========================================================================== */
.ambient { margin-bottom: 1rem; padding: .9rem 1.05rem 1rem; }
.amb-cap { display: flex; align-items: center; justify-content: space-between;
           gap: .6rem; flex-wrap: wrap; margin-bottom: .85rem; }
.amb-titol { font-size: .78rem; font-weight: 800; color: var(--muted);
             text-transform: uppercase; letter-spacing: .06em; }

/* L'aire ocupa gairebé el doble: hi ha un dibuix a dins i la resta són números. */
.amb-reixa { display: grid; gap: .9rem 1.6rem;
             grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.75fr);
             align-items: start; }
.amb { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.amb .et { font-size: .68rem; font-weight: 700; color: var(--muted);
           text-transform: uppercase; letter-spacing: .04em; }
.amb strong { font-size: 1.28rem; font-weight: 800; line-height: 1.15;
              font-variant-numeric: tabular-nums; }
.amb strong.gran { font-size: 1.72rem; }
.amb strong i { font-size: .58em; font-weight: 700; font-style: normal;
                color: var(--muted); margin-left: .16rem; }
.amb .peu { font-size: .68rem; color: var(--muted); line-height: 1.3; }

/* El pendent del vespre: una càpsula petita, que és un fet a part i no un peu. */
.amb-delta { align-self: flex-start; margin-top: .3rem; font-size: .67rem;
             font-weight: 700; padding: .16rem .5rem; border-radius: 999px;
             border: 1px solid var(--line); background: var(--surface-2);
             color: var(--muted); }
.amb-delta.puja  { color: var(--verd);
                   border-color: color-mix(in srgb, var(--verd) 35%, var(--line)); }
.amb-delta.baixa { color: var(--blau-fort);
                   border-color: color-mix(in srgb, var(--blau-fort) 35%, var(--line)); }

/* Els dos CO₂ comparteixen casella; el lloc va SEMPRE al costat del número perquè
   el de Lleida no és d'aquesta finca. */
.amb-parell { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.amb-parell.segon { margin-top: .32rem; padding-top: .32rem;
                    border-top: 1px solid var(--line); }
.amb-parell .on { font-size: .68rem; color: var(--muted); font-weight: 600; }

/* --- El mesurador de partícules -----------------------------------------
   Sense agulla: el valor s'omple d'esquerra a dreta i el que es llegeix és fins on
   arriba. La part omplerta va EN RELLEU i l'escala que queda per fer, ENFONSADA;
   així l'ull hi va sol sense que calgui cap etiqueta que digui «ets aquí».
   ⚠️ El color no hi porta el significat tot sol: cada barra duu el seu nom, el
   número al costat i els llindars escrits a sota. És la condició amb què la
   validació de la paleta deixa passar aquests tres passos. */
.aire { margin-top: .3rem; }
.aire-fila { display: grid; grid-template-columns: 3.4rem 1fr 2.6rem;
             align-items: center; gap: .5rem; margin-bottom: .3rem; }
.aire-nom { font-size: .68rem; font-weight: 800; color: var(--muted);
            letter-spacing: .02em; }
.aire-valor { font-size: .82rem; font-weight: 800; text-align: right;
              font-variant-numeric: tabular-nums; }

.aire-pista { position: relative; display: flex; gap: 2px; height: 11px; }
.aire-pista > .ab { flex: 1; border-radius: 3px; background: var(--c);
                    opacity: .16;
                    /* Enfonsada: l'ombra va cap a dins. */
                    box-shadow: inset 0 1.5px 2.5px rgba(0, 0, 0, .55),
                                inset 0 -1px 0 rgba(255, 255, 255, .06); }
/* La part feta: el MATEIX dibuix, a tot color i en relleu, retallat fins al valor.
   Es retalla amb `clip-path` i no amb una amplada: així les tres bandes conserven
   la seva posició i el tall cau on toca, en comptes d'encongir-se totes. */
.aire-ple { position: absolute; inset: 0; display: flex; gap: 2px;
            clip-path: inset(0 calc(100% - var(--f, 0%)) 0 0 round 3px); }
.aire-ple > .ab { flex: 1; border-radius: 3px; background: var(--c);
                  box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                              inset 0 1px 0 rgba(255, 255, 255, .28); }
.ab-0 { --c: var(--aire-be); }
.ab-1 { --c: var(--aire-just); }
.ab-2 { --c: var(--aire-mal); }

.aire-escala { position: relative; height: .95rem; margin: .1rem 0 0 3.9rem; }
.aire-escala .ae { position: absolute; top: 0; transform: translateX(-50%);
                   font-size: .6rem; font-weight: 700; color: var(--muted);
                   white-space: nowrap; letter-spacing: .02em; }
/* Una guia fina fins a la barra, perquè l'etiqueta i el tall es vegin lligats. */
.aire-escala .ae::before { content: ""; position: absolute; left: 50%; top: -.42rem;
                           width: 1px; height: .34rem; background: var(--line); }

@media (max-width: 1000px) {
  .amb-reixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amb-aire { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .amb-reixa { grid-template-columns: 1fr; } }
/* L'hora en què s'ha fet fosc és la frase del quadre: se li dona el cos de la
   radiació de la tira de dalt, però amb el color del text normal: no és cap estat. */
.ambient .mv-fosc strong { font-size: 1.9rem; }
body.kiosc .ambient { display: none !important; }
/* El rendiment respecte del que li tocaria (D-41). Verd no vol dir «bé» aquí sinó
   «com sempre»: el que s'ha de veure de reüll és quan NO ho és. */
.mv-rend strong.be       { color: var(--verd); }
.mv-rend strong.just     { color: var(--ambre); }
.mv-rend strong.malament { color: var(--vermell); }
.mv-rend strong.cap      { color: var(--muted); }

/* ==========================================================================
   Manteniment (D-42)
   ========================================================================== */
.avis-tab { margin-left: .35rem; font-size: .8rem; line-height: 1; }

.branques { display: grid; gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.branca { border: 1px solid var(--line); border-radius: var(--radi);
          padding: .85rem .95rem; background: var(--surface-2); }
/* El color de la vora és el veredicte: es veu abans de llegir res. */
.branca.b-problema { border-color: color-mix(in srgb, var(--vermell) 55%, var(--line));
                     background: color-mix(in srgb, var(--vermell) 7%, var(--surface)); }
.branca.b-vigila   { border-color: color-mix(in srgb, var(--ambre) 55%, var(--line));
                     background: color-mix(in srgb, var(--ambre) 7%, var(--surface)); }
.b-cap { display: flex; align-items: baseline; justify-content: space-between;
         gap: .5rem; margin-bottom: .3rem; }
.b-cap h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.b-estat { font-size: .72rem; font-weight: 800; text-transform: uppercase;
           letter-spacing: .04em; color: var(--muted); }
.b-problema .b-estat { color: var(--vermell); }
.b-vigila .b-estat   { color: var(--ambre); }
.b-be .b-estat       { color: var(--verd); }
/* Calibrant és un estat de debò i en verd: diu que el procés va com ha d'anar, no que
   falti res (D-49). La targeta no es tenyeix: no hi ha res a mirar de reüll. */
.b-calibrant .b-estat { color: var(--verd); }
.b-explica { font-size: .68rem; color: var(--muted); line-height: 1.4;
             margin-top: .45rem; }
/* Calibratge fallit (D-51): no és cap avaria, però demana una acció —tornar a prémer el
   botó—, i mentre no es faci la branca no es vigila. Ambre i no vermell, i la targeta
   tenyida com la de «vigila», perquè s'ha de veure de reüll. */
.branca.b-fallit { border-color: color-mix(in srgb, var(--ambre) 55%, var(--line));
                   background: color-mix(in srgb, var(--ambre) 7%, var(--surface)); }
.b-fallit .b-estat { color: var(--ambre); }
.b-torna { font-size: .76rem; font-weight: 700; color: var(--ambre); line-height: 1.4;
           margin-top: .45rem; }
/* «Calibrant» és una píndola que batega, amb el mateix batec que la de tempesta: diu que
   hi ha un procés en marxa, no un veredicte (D-52). Qui no vulgui moviment no el té. */
.pastilla.bategant { animation: batec-alerta 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pastilla.bategant { animation: none; } }
/* El títol dels valors provisionals dins d'una targeta de branca: la mateixa veu que les
   etiquetes de la tira de meteo (`.mv .et`). */
.b-sub { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
         letter-spacing: .03em; margin-top: .35rem; padding-top: .35rem;
         border-top: 1px solid var(--line); }
/* La frase dels watts (D-53): el número que s'entén sense saber què és una quota. Verd
   quan s'ha guanyat, que és un estat bo; si en perd, sense color. */
.b-guany { font-size: .76rem; line-height: 1.4; margin: .35rem 0 .2rem; }
.b-guany strong.be { color: var(--verd); }
/* L'historial de neteges, sota el botó: cada neteja amb el que ha guanyat. */
.b-neteges { width: 100%; border-collapse: collapse; margin-top: .55rem; font-size: .72rem;
             font-variant-numeric: tabular-nums; }
.b-neteges th { text-align: left; font-size: .64rem; font-weight: 700; color: var(--muted);
                text-transform: uppercase; letter-spacing: .03em; padding: 0 0 .25rem;
                border-bottom: 1px solid var(--line); }
.b-neteges td { padding: .22rem 0; border-bottom: 1px solid var(--line); }
.b-neteges tr:last-child td { border-bottom: 0; }
.b-neteges .n { text-align: right; font-weight: 700; white-space: nowrap; }
.b-neteges .estat { text-align: right; color: var(--muted); padding-left: .5rem;
                    white-space: nowrap; }
.b-neteges .e-fallit { color: var(--ambre); }
.b-neteges .quan { color: var(--muted); font-weight: 400; }
div.b-quan { margin-top: .45rem; }
.b-fitxa { font-size: .76rem; color: var(--muted); line-height: 1.4;
           margin-bottom: .6rem; }
.b-fila { display: flex; align-items: baseline; justify-content: space-between;
          gap: .6rem; padding: .18rem 0; font-size: .8rem; }
.b-fila .et { color: var(--muted); }
.b-fila .v, .b-fila strong { font-variant-numeric: tabular-nums; }
.b-fila.destacat { border-top: 1px solid var(--line); margin-top: .25rem;
                   padding-top: .35rem; }
.b-fila strong.be       { color: var(--verd); }
.b-fila strong.just     { color: var(--ambre); }
.b-fila strong.malament { color: var(--vermell); }
.b-fila strong.cap      { color: var(--muted); }
.b-peu { font-size: .68rem; color: var(--muted); margin-top: .3rem; }
.b-neteja { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
            margin-top: .7rem; padding-top: .6rem;
            border-top: 1px solid var(--line); }
.b-quan { font-size: .68rem; color: var(--muted); }

.nota { font-size: .75rem; color: var(--muted); line-height: 1.5;
        margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.banner.ok { background: color-mix(in srgb, var(--verd) 12%, var(--surface));
             border-color: color-mix(in srgb, var(--verd) 40%, var(--line));
             color: var(--verd); }

.perfil { margin-top: .8rem; }
.perfil .et { font-size: .74rem; color: var(--muted); font-weight: 700; }
.perfil-files { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.ph { display: inline-flex; align-items: baseline; gap: .28rem;
      font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
      padding: .22rem .5rem; border-radius: 8px; background: var(--surface);
      border: 1px solid var(--line); }
.ph i { font-style: normal; color: var(--muted); font-weight: 600; font-size: .9em; }

.taula-quotes { width: 100%; border-collapse: collapse; font-size: .8rem;
                font-variant-numeric: tabular-nums; }
.taula-quotes th, .taula-quotes td { padding: .3rem .6rem; text-align: right;
                                     border-bottom: 1px solid var(--line); }
.taula-quotes th:first-child, .taula-quotes td:first-child { text-align: left; }
.taula-quotes th { color: var(--muted); font-weight: 700; font-size: .72rem;
                   text-transform: uppercase; letter-spacing: .03em; }

/* ==========================================================================
   Qualitat de servei (D-46)
   ========================================================================== */
.tabs-dreta { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.qos-badge { text-decoration: none; }
.qos-badge::before { content: "◉ "; opacity: .8; }
/* Per sota del 99% deixa de ser una xifra i passa a ser una cosa a mirar. */
.qos-badge.baixa { color: var(--vermell); }

.qos-cim { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
           margin-bottom: .4rem; }
.qos-gran { display: flex; flex-direction: column; }
.qos-gran strong { font-size: 3rem; font-weight: 800; line-height: 1;
                   font-variant-numeric: tabular-nums; }
.qos-gran strong i { font-size: .38em; font-style: normal; font-weight: 700;
                     margin-left: .2rem; color: var(--muted); }
.qos-gran span { font-size: .78rem; color: var(--muted); font-weight: 600;
                 margin-top: .25rem; }
.qos-gran.be strong { color: var(--verd); }
.qos-gran.malament strong { color: var(--vermell); }
.qos-fets { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.qos-fets .et { display: block; font-size: .68rem; font-weight: 700;
                color: var(--muted); text-transform: uppercase;
                letter-spacing: .04em; }
.qos-fets strong { font-size: 1.05rem; font-weight: 800;
                   font-variant-numeric: tabular-nums; }

.taula-qos td.motiu { text-align: left; color: var(--muted); font-size: .76rem; }
.taula-qos tr.oberta td { color: var(--vermell); font-weight: 700; }