/* =====================================================================================
   Simulator reteaua DEO - sistemul vizual si asezarea in pagina
   -------------------------------------------------------------------------------------
   Tema inchisa, sobra, pentru un instrument de inginerie energetica. Fara biblioteci
   externe, fara CDN: aplicatia merge complet offline.

   CUPRINS
     1. Variabile (culori, spatii, raze, umbre, marimi)
     2. Temelie (reset, tipografie, bare de derulare, focus)
     3. Asezarea generala in CSS Grid
     4. Antet
     5. Panoul de comanda (sectiuni pliabile, campuri, butoane, lista, legenda)
     6. Zona schemei (bara de unelte, containerul schemei, tooltip)
     7. Manerul de redimensionare
     8. Zona de diagrame (file, grafice, tabele)
     9. Accesul, modul Edit, utilizatorii si salvarile
          9a. starea sesiunii        9b. controale stinse, cu motiv
          9c. modul EDIT             9d. ferestrele de dialog
          9e. utilizatorii           9f. salvarile
    10. Latimi mici si inaltimi mici
    11. Reglaj U/Q: comutatorul de vedere, meniul din panou, fila de rezultat
          11a. comutatorul INAINTE | DUPA | DIFERENTA (bara schemei)
          11b. banda vederii si mostra scarii divergente
          11c. comutatorul MANUAL | OPTIMIZAT si sectiunea "Reglaj optimizat"
          11d. fila de rezultat (verdict, cele trei cifre, tabele, CAPEX, jurnal, note)
          11e. bugetul de inaltime al panoului, refacut pentru a 11-a sectiune
          11f. latimi mici si inaltimi mici, pentru elementele noi
    15. Coloana faptelor (tabelele de utilizatori si de salvari)

   REGULA DE ASEZARE care sta la baza intregului fisier
     Elementele care trebuie sa se poata micsora (containerul schemei, zonele de canvas,
     tabelele) sunt asezate in lanturi de containere care au TOATE min-height: 0 si
     min-width: 0. Fara aceasta, marimea implicita "auto" a unui element flex sau grid
     este cel putin cat continutul lui, containerul se umfla si copilul care ar trebui
     sa se stranga nu primeste niciodata o inaltime utila.
     Schema NU este un <svg> asezat direct ca element flex - asa ajungea la inaltime 0,
     iar incadrarea calcula scale(0) si toata schema se strangea intr-un punct. Aici
     <svg> sta absolut (inset: 0) intr-un DIV pozitionat cu marime cunoscuta, deci are
     intotdeauna o inaltime reala. La fel si fiecare <canvas>.

   VARIABILE FOLOSITE SI DE JAVASCRIPT
     Modulele Diagrama si Grafice pot citi culorile si marimile de mai jos, ca desenul
     sa fie in acelasi registru cu interfata:
         getComputedStyle(document.documentElement).getPropertyValue('--kv-110')
     Utile: --kv-400 --kv-220 --kv-110 --kv-35 --kv-mt --kv-alt
                                                       (niveluri de tensiune - vezi 1a)
            --sch-gros-bara --sch-gros-latura ...      (grosimi in desen - vezi 1b)
            --dg-...                                   (accente de desen - vezi 1c)
            --u-jos --u-bine --u-sus                   (scara de tensiune)
            --dif-neg --dif-zero --dif-poz             (scara pentru variatii)
            --seria-1 ... --seria-8                    (serii in grafice)
            --c-linie --c-text --c-text-2 --c-accent   (axe, etichete, evidentieri)
     Grosimile din 1b sunt NUMERE FARA UNITATE (unitati de desen), ca sa poata fi citite
     cu parseFloat si folosite direct ca stroke-width in coordonatele lumii. Din acelasi
     motiv nu se scriu ca expresii calc(): valoarea calculata a unei proprietati
     particularizate nu este evaluata, iar parseFloat ar citi primul numar din expresie.
     Cine le citeste, ca sa se poata verifica: diagrama.js, functia grosimi() si sirul
     STIL (--sch-gros-simbol, --sch-gros-sageata, folosite direct prin var()).
     Proba, din consola paginii:
         document.documentElement.style.setProperty('--sch-gros-bara','9');
         Diagrama.deseneaza(SIM); Diagrama.grosimi();
     Aici nu se declara nicio variabila pe care sa nu o citeasca nimeni.
   ===================================================================================== */


/* ---------------------------------------------------------------- 1. variabile ---- */
:root {
  /* --- fundaluri, de la cel mai adanc la cel mai ridicat --- */
  --c-fund-0:      #0b0f14;   /* panza schemei si a graficelor */
  --c-fund-1:      #111823;   /* panouri, antet, bare */
  --c-fund-2:      #161f2b;   /* carduri */
  --c-fund-3:      #1d2836;   /* campuri, antet de tabel */
  --c-fund-4:      #26313f;   /* stari hover */

  /* --- linii --- */
  --c-linie:       #26313f;
  --c-linie-tare:  #3a4859;
  --c-linie-slaba: #1b2430;

  /* --- text --- */
  --c-text:        #e3e9f2;
  --c-text-2:      #9aa9bd;
  --c-text-3:      #6b7c92;
  --c-text-tare:   #ffffff;

  /* --- accente si stari --- */
  --c-accent:      #4da3ff;
  --c-accent-inch: #06101c;   /* text pe fundal de accent */
  --c-accent-slab: rgba(77, 163, 255, .14);
  --c-atentie:     #ffb454;
  --c-bine:        #4ec9a5;
  --c-rau:         #ff6b6b;

  /* --- MODUL EDIT ---------------------------------------------------------------
     Culoarea prin care se vede ca schema este deblocata si se poate strica sub mouse:
     chenarul zonei schemei, banda #baraEdit, sectiunea de editare din panou si
     evidentierea elementelor mutabile.
     De ce MAGENTA-VIOLET si nu portocaliu sau rosu: pe ecran se vad in acelasi timp
     rosu 400 kV (#e05c5c), chihlimbar 220 kV (#e8a33d), verde 110 kV (#4ec9a5),
     albastru MT (#4f93f0), galben de nod PU (#ffe9a8), cyan de frontiera (#7fd4ff),
     alb de selectie si de echivalent, albastru de vecin (#9fd0ff) si magenta de judet
     (#ff8ad8). Un chenar in oricare dintre ele s-ar citi drept nivel de tensiune sau
     drept evidentiere. #b98cff este violet: singura zona de nuanta ramasa libera,
     departe si de magenta judetului (dE00 = 24,6), si de albastrul accentului
     (dE00 = 27,4). Chenarul este oricum in AFARA desenului, pe marginea zonei, deci
     nu se poate confunda cu o latura.
     --c-edit-slab este acelasi violet la 16 %, pentru fonduri. */
  --c-edit:        #b98cff;
  --c-edit-slab:   rgba(185, 140, 255, .16);
  --c-edit-tare:   rgba(185, 140, 255, .55);

  /* --- SAGETILE DE CIRCULATIE: P verde, Q albastru ------------------------------
     Cerinta (B) a beneficiarului, pe litere: "Te rog sa pui sagetile pentru P (MW) cu
     verde si pe cele pentru Q cu albastru (conventia pentru Q)."

     CE SE SCHIMBA SI CE SE PIERDE. Pana acum sageata purta culoarea NIVELULUI de
     tensiune al laturii pe care statea. De acum culoarea spune MARIMEA: verde = P,
     albastru = Q. Nivelul nu se pierde - ramane spus de culoarea LINIEI laturii, care nu
     se atinge - dar codul de culoare nu mai este unul singur pe tot desenul, si de asta
     legenda trebuie sa spuna limpede care culoare ce inseamna.
     Forma ramane si ea purtatoare: triunghi PLIN = P, triunghi GOL = Q. Cine nu vede
     culorile citeste tot, din forma.

     Aici sunt DECLARATE, ca sa nu fie scrise de mana in cod: le citeste modulul schemei
     cand deseneaza sagetile (diagrama.js foloseste var(--sag-P) si var(--sag-Q), cu
     aceste valori si ca rezerva) si le citeste legenda din panou (app.js,
     deseneazaLegenda) cand deseneaza mostrele. O singura sursa, deci mostra din legenda
     nu poate arata altfel decat sageata de pe desen.

     VALORILE sunt cele alese si masurate de modulul schemei; sunt scrise si aici, in
     tema, ca sa nu ramana ingropate intr-un sir de stil dinauntrul codului. Verificate
     din nou aici, independent, in CIEDE2000 (dE00), o data in vedere normala si o data
     pe culorile trecute prin simularea Machado-Oliveira-Fernandes (2009), severitate
     1,0. Perechile pe care le-a cerut beneficiarul:

       --sag-P #8ce04a fata de --kv-110 #4ec9a5 (verdele-teal al laturilor de 110 kV)
           normal 21,4   deuteranopie 28,7   protanopie 21,5   tritanopie 10,7
           L* 81,5 ; contrast pe fondul schemei 11,78:1
       --sag-Q #5566ff fata de --kv-mt  #4f93f0 (albastrul laturilor de medie tensiune)
           normal 15,6   deuteranopie  9,2   protanopie 10,6   tritanopie 15,1
           L* 50,3 ; contrast pe fondul schemei 4,33:1

     P si Q intre ele: dE00 = 68,9 normal, 68,6 deuteranopie - nu se pot confunda, nici
     dupa culoare, nici dupa forma (plin fata de gol).

     UNDE RAMAN SLABE, spus cinstit, ca sa se stie ce s-a cumparat cu schimbarea:
       - --sag-P fata de --kv-220 (chihlimbar) scade la 4,1 in deuteranopie. Nu se putea
         evita: la deuteranopie verdele si chihlimbarul cad pe aceeasi axa, si tot acolo
         cad si nivelurile intre ele (minimul lor masurat este 14,5). Sageata se
         deosebeste insa de latura prin FORMA - un triunghi peste o linie - si prin
         marime, nu numai prin culoare.
       - --sag-Q fata de --kv-mt scade la 9,2 in deuteranopie si sta la 7,7 de --u-jos
         (#2b6ce0, capatul de jos al scarii de tensiune; era 8,5, cat timp --u-jos
         scria #4d7fff - o scara pe care nu o desena nimeni). Zona de albastru mediu este
         deja ocupata, iar beneficiarul a cerut anume albastru pentru Q. Daca se doreste
         o despartire mai lata, singura care mai incape este pe LUMINOZITATE, nu pe
         nuanta - masurat, un albastru palid #b6d2ff (L* 83,6) urca perechea Q / --kv-mt
         la 19,0 normal si 21,2 in deuteranopie, cu contrast 12,49:1, dar se apropie in
         schimb de --dg-vecin #9fd0ff (5,4). Schimbarea se face DINTR-UN SINGUR LOC, aici:
         valoarea de mai jos este cea care ajunge si pe desen, si in legenda. */
  --sag-P:         #8ce04a;   /* putere activa P [MW]     - triunghi PLIN */
  --sag-Q:         #5566ff;   /* putere reactiva Q [MVAr] - triunghi GOL */

  /* --- SCARA DE TENSIUNE - O SINGURA CHEIE PE TOATA APLICATIA -------------------
     Beneficiarul a cerut-o de doua ori, pe litere: "rosu pentru 1,1, albastru pentru
     0,9 si verde pentru 1,0", si pe urma "Culorile folosite pentru bare ar trebui
     corelate cu culorile cu care ai facut maparea acesteia."

     SURSA DE ADEVAR NU ESTE AICI, ci in modulul campului de tensiune: campU.js,
     SCARI.bulina. Acela coloreaza fundalul schemei, bulinele de pe bare, barele
     profilului tensiunii si fasia lui de legenda - o foaie de stil nu are cum sa
     coloreze o panza <canvas>. Cele trei valori de mai jos sunt COPIA EXACTA a
     capetelor lui, scrise aici din doua motive: fasia de culoare din panou (.banda-u)
     este HTML si trebuie sa arate ceva si inainte ca JavaScript sa o picteze din
     CampU, iar modulul Grafice le citeste ca repere ale rezervei lui, pentru cazul in
     care pagina se incarca fara campU.js. Cine le schimba AICI si nu in campU.js rupe
     unitatea scarii - proba teste/proba_o_singura_scara.py pica.

     CE ERA INAINTE, SI DE CE ERA GRESIT. Scria #4d7fff / #4ec9a5 / #ff6b6b - o a
     treia scara, pe care nu o desena nimeni. Doua dintre cele trei culori ale ei
     cadeau EXACT peste paleta nivelurilor de tensiune:
         --u-bine #4ec9a5 = --kv-110 #4ec9a5                    dE00 = 0,0
         capatul fasiei .banda-u #e05c5c = --kv-400 #e05c5c     dE00 = 0,0
     Pe un desen pe care se vad si nivelurile, si scara de tensiune, cele doua
     intelesuri nu se puteau deosebi in niciun fel. Coliziunea s-a rezolvat NU
     inventand culori noi, ci scriind aici culorile care se deseneaza de fapt: pe
     schema nu se schimba niciun pixel, iar cele doua coincidente dispar.
         --u-bine #1fb26a fata de --kv-110 #4ec9a5 : 11,4 / 13,6 / 12,2 /  7,4
         --u-sus  #e34a3e fata de --kv-400 #e05c5c :  6,3 /  5,4 /  7,5 /  4,4
         --u-jos  #2b6ce0 fata de --kv-mt  #4f93f0 : 13,3 / 12,2 / 11,6 / 10,8
     (dE00 in vedere normala / deuteranopie / protanopie / tritanopie, pe culorile
     trecute prin simularea Machado-Oliveira-Fernandes 2009 la severitate 1,0 -
     aceeasi masura ca la paleta nivelurilor.)

     UNDE RAMANE SLABA, spus cinstit, ca sa se stie ce s-a cumparat. Rampa intreaga,
     masurata pe 61 de esantioane intre 0,90 si 1,10 pu, fata de fiecare nivel
     (minimul, in vedere normala):
         --kv-400  6,3    --kv-mt   9,5    --kv-110 10,1
         --kv-alt 19,3    --kv-35  20,0    --kv-220 21,7
     Primele trei sunt sub pragul de 12 pe care si-l pune paleta nivelurilor pentru
     daltonism. NU SE POATE ALTFEL: beneficiarul a cerut anume albastru-verde-rosu
     pentru tensiune, iar trei dintre cele patru niveluri care exista in reteaua DEO
     sunt tocmai rosu (400), verde (110) si albastru (MT). Orice alta familie de
     culori ar fi incalcat cerinta lui limpede.
     Deosebirea nu se sprijina deci pe culoare, ci pe FELUL SEMNULUI - si acela ramane
     intreg si pentru cine nu deosebeste rosu de verde: scara de tensiune se deseneaza
     NUMAI ca UMPLUTURA (bulina plina de pe capatul barei, fundalul translucid al
     campului, bara plina din profil, fasia de legenda), nivelul se deseneaza NUMAI ca
     TRASATURA (bara de nod si latura). Singurul loc in care tensiunea ajunge pe
     trasatura este modul de colorare "tensiune [pu]" din schema, iar acolo NICIO bara
     nu mai arata nivelul si legenda scrie care cheie este in vigoare (diagrama.js,
     culoareU). Cele doua intelesuri nu stau niciodata pe acelasi fel de semn.

     MASURAT PE FONDUL APLICATIEI (--c-fund-0 #0b0f14, panza schemei si a graficelor;
     SC 1.4.11 cere 3:1 pentru grafica):
       --u-jos  #2b6ce0  L* 47,8  contrast 3,96:1   (era #4d7fff, L* 56,1, 5,30:1)
       --u-bine #1fb26a  L* 64,3  contrast 6,99:1   (era #4ec9a5, L* 73,6, 9,36:1)
       --u-sus  #e34a3e  L* 53,6  contrast 4,86:1   (era #ff6b6b, L* 64,0, 6,93:1)
     Toate trei raman peste 3:1. Capatul de jos, cel mai slab, are 3,96:1, iar pe
     fundalul panoului (#111823) 3,67:1. Culorile sunt mai inchise decat cele de
     dinainte fiindca asta este scara pe care beneficiarul a vazut-o si a primit-o pe
     schema; ea este acum singura. */
  --u-jos:         #2b6ce0;   /* 0,90 pu si mai jos (saturat) */
  --u-bine:        #1fb26a;   /* 1,00 pu                      */
  --u-sus:         #e34a3e;   /* 1,10 pu si mai sus (saturat) */

  /* --- scara divergenta pentru variatii (dU, sensibilitati) --- */
  --dif-neg:       #5aa9ff;
  --dif-zero:      #566275;
  --dif-poz:       #ffa04d;

  /* --- reglajul U/Q pe schema: bobina propusa si marcajele de banda ------------
     Modulul schemei (diagrama.js) le cere prin var() cu rezerva, deci desenul mergea
     si nedeclarate - dar atunci culorile lui nu se puteau regla din tema, iar foaia
     de stil nu mai era singurul loc in care scrie ce culoare are ce. Valorile sunt
     exact rezervele din diagrama.js, deci desenul nu se schimba cu un pixel.
     Alese anume DEPARTE de paleta nivelurilor: rosu pur fata de rosul spalacit de
     400 kV, verde de iarba (nuanta 100) fata de verdele-turcoaz de 110 kV (nuanta
     160), iar violetul este singura nuanta ramasa libera in schema. */
  --dg-propus:      #b48cff;   /* bobina PROPUSA de optimizare (peste bara)      */
  --dg-propus-fond: #1a1430;   /* fondul chenarului ei punctat                   */
  --dg-afara:       #ff3b30;   /* nod in afara benzii (marcaj punctat)           */
  --dg-rezolvat:    #4ade5a;   /* nod adus in banda de reglaj (marcaj plin)      */

  /* --- 1a. niveluri de tensiune ------------------------------------------------
     CULOAREA CODIFICA NUMAI NIVELUL DE TENSIUNE. Tipul elementului (linie,
     transformator, shunt) se citeste din SIMBOL, niciodata din culoare. Un
     transformator se deseneaza cu doua brate, fiecare in culoarea nivelului lui.
     Sursa unica de adevar: le citesc si schema (diagrama.js), si legenda din
     panou (app.js). Daca se schimba aici, se schimba peste tot.

     Cum au fost alese. Distantele s-au masurat in CIEDE2000 (dE00) intre toate
     cele 15 perechi, o data in vedere normala si apoi pe culorile trecute prin
     simularea Machado-Oliveira-Fernandes (2009) la severitate 1,0 pentru
     deuteranopie, protanopie si tritanopie. Praguri cerute:
        vedere normala   dE00 >= 20   (~9 x pragul de perceptie de 2,3; doua linii
                                       subtiri, departate una de alta pe desen, au
                                       nevoie de mult mai mult decat pragul de
                                       alaturare al doua suprafete)
        daltonism        dE00 >= 12   (sub dicromatism spatiul perceptiv se strange
                                       la doua dimensiuni - luminozitate si axa
                                       galben-albastru - deci sase culori nu mai pot
                                       sta la 20; 12 ramane ~5 x pragul de perceptie)
        contrast WCAG    >= 3:1 fata de fondul schemei (SC 1.4.11, grafica)

     Rezultatul masurat (minimul pe toate perechile):
                        inainte      dupa
        normal            9,7        24,0
        deuteranopie      3,0        14,5
        protanopie        5,8        14,6
        tritanopie       10,0        12,8
        contrast minim   5,36:1      5,30:1

     Perechile care erau practic identice inainte: 35 kV / MT (dE00 = 3,0 in
     deuteranopie, 5,8 in protanopie) si 35 kV / alt nivel (9,7 chiar in vedere
     normala). Cauza: toate trei erau albastru-violet-gri la aceeasi luminozitate -
     #79a6dd L* = 66,9 , #9b8cd8 L* = 62,2 , #8b9bb0 L* = 63,4 - iar luminozitatea
     este singurul lucru care ramane intreg cand nuanta se pierde.

     De ce MT este ALBASTRU. In reteaua DEO exista efectiv patru benzi: 400, 220,
     110 kV si medie tensiune (nivelurile masurate in fisier: 400 / 220 / 110 /
     15,75 / 17 / 10,5 / 6,3 kV - nicaieri 35 kV). Cvartetul rosu-portocaliu-verde-
     albastru este cea mai robusta combinatie de patru culori: albastrul este singura
     nuanta care ramane departe de rosu, de portocaliu si de verde si dupa simularea
     dicromatismului (marja masurata: 1,96 fata de pragurile de mai sus, adica
     dE00 >= 39 in vedere normala fata de fiecare dintre celelalte trei).
     35 kV, banda care nu apare in acest fisier, primeste CYAN DESCHIS: se desparte de
     albastrul de MT prin luminozitate (L* = 81 fata de 60), singura dimensiune care
     supravietuieste intacta la daltonism. Era roz-liliachiu (#d7afd9), dar acela
     statea la dE00 = 5,7 de scarile continue care coloreaza barele - adica exact
     defectul pe care il repara scarile noi. Cyanul este la dE00 >= 20,5 si fata de
     fiecare nivel, si fata de fiecare esantion al celor patru scari. */
  --kv-400:        #e05c5c;   /* rosu       L*=56,4  contrast  5,36:1  (neschimbat) */
  --kv-220:        #e8a33d;   /* chihlimbar L*=72,0  contrast  8,91:1  (neschimbat) */
  --kv-110:        #4ec9a5;   /* verde      L*=73,6  contrast  9,36:1  (neschimbat) */
  --kv-35:         #7fd6e8;   /* cyan deschis L*=81,2  (era #d7afd9; vezi nota) */
  --kv-mt:         #4f93f0;   /* albastru   L*=60,6  contrast  6,19:1  (era #9b8cd8) */
  --kv-alt:        #86868b;   /* gri neutru L*=56,1  contrast  5,30:1  (era #8b9bb0) */

  /* --- 1b. grosimile din schema, in unitati de desen ---------------------------
     Numere fara unitate: modulul Diagrama le citeste cu parseFloat (functia
     grosimi(), diagrama.js) si le pune direct in stroke-width / in inaltimea barei,
     in coordonatele lumii. Valorile de mai jos sunt EXACT cele desenate acum.
     Cerinta D2: bara de nod NET mai groasa decat orice latura. Bara de medie
     tensiune este 4,40 si cea mai groasa latura 2,30, deci raportul cel mai
     defavorabil este 1,91. Modulul apara regula si in cod: daca foaia de stil ar
     cere o latura mai groasa decat jumatate din bara, latura se plafoneaza. */
  --sch-gros-bara:        3.20;  /* bara de medie tensiune; celelalte niveluri sunt
                                    proportionale cu ea: 110 kV 3,60 | 220 kV 4,00 |
                                    400 kV 4,40 (35 kV 3,30).
                                    ERA 4,40. Beneficiarul a cerut bara mai subtire:
                                    "Simbolul pentru noduri poate fi o bara mai subtire".
                                    Laturile NU s-au atins - plafonul lor din diagrama.js
                                    a urcat de la 0,55 la 0,80 din grosimea barei, tocmai
                                    ca subtierea barei sa nu tirasca dupa ea si laturile. */
  --sch-gros-latura:      1.30;  /* latura, cand grosimea NU arata incarcarea */
  --sch-gros-latura-min:  0.75;  /* latura complet descarcata */
  --sch-gros-latura-max:  2.30;  /* latura la incarcare maxima */
  --sch-gros-simbol:      1.15;  /* conturul simbolurilor: trafo, shunt, generator */
  /* LATURA ECHIVALENTA (reducerea Kron). Mai subtire decat ORICE latura reala, ca sa nu
     poata fi luata drept element de retea: 0,60 din latura complet descarcata (0,75),
     adica 0,45. Modulul Diagrama citeste chiar aceasta variabila (functia grosimi(),
     diagrama.js) si apara regula si in cod - oricat s-ar regla aici, grosimea ramane sub
     0,75 din cea mai subtire latura desenata. */
  --sch-gros-echivalent:  0.45;
  --sch-gros-sageata:     1.15;  /* conturul triunghiului GOL de reactiv */
  --sch-dim-sageata:      3.30;  /* semi-latura triunghiului de reactiv, la flux nul */
  --sch-dim-sageata-p:    3.00;  /* idem, triunghiul PLIN de putere activa */

  /* aceleasi grosimi, in pixeli, pentru mostrele din legenda si din panou */
  --sch-bara-px:          4px;
  --sch-latura-px:        2px;

  /* Corpul numelui scris pe bara, in PIXELI DE ECRAN. Modulul Diagrama il pune pe
     elementul <svg> la fiecare asezare (10 px la vederea de ansamblu, 11,5 px la
     marire) si il imparte la factorul de scara, deci textul are aceeasi marime pe
     ecran la orice apropiere. Valoarea de aici este numai rezerva. */
  --dg-et-px:      10px;

  /* --- 1c. accente de desen (roluri, nu niveluri) -------------------------------
     Acestea NU codifica nivelul de tensiune. Sunt culorile prin care se vede la ce
     se uita omul (selectie, vecini) si cu ce se traseaza conturul simbolurilor de
     aparat. Pana acum modulul Diagrama nu le gasea in foaia de stil si folosea
     rezervele scrise in el; doua dintre ele intrau exact peste codul de culoare:

        --dg-trafo  #ffb454  la dE00 = 5,2 de --kv-220  (defectul semnalat: o latura
                             de 110/20 kV se colora identic cu o linie de 220 kV)
        --dg-cap    #6fe0c0  la dE00 = 6,2 de --kv-110  (o baterie de condensatoare
                             pe o bara de 110 kV se citea ca latura de 110 kV)
        --dg-pu     #ffcf5c  la dE00 = 12,1 de --kv-220

     Acum simbolurile de aparat au un singur neutru deschis, --dg-simbol #d3dae2,
     masurat la dE00 = 26,3 / 14,1 / 16,7 (normal / deuteranopie / protanopie) fata
     de cea mai apropiata dintre cele patru benzi care exista in retea. Conturul de
     nod PU s-a deschis la #ffe9a8: 30,5 / 21,6 / 14,1 fata de niveluri si inca 19,9
     fata de albul selectiei, deci ramane "contur galben", fara sa fie 220 kV.
     Bateria si bobina NU se mai despart prin culoare, ci prin simbol - asa cere
     regula: tipul elementului se citeste din simbol, niciodata din culoare.
     Toate se scriu literal, nu prin var(): modulul Diagrama le copiaza una cate una
     in fisierul SVG exportat (lista VARIABILE, diagrama.js).
     --dg-trafo, --dg-shunt si --dg-cap au fost sterse: diagrama.js foloseste acum
     --dg-simbol pentru toate simbolurile de aparat, deci cele trei erau declaratii
     pe care nu le mai citea nimeni. Aici nu se declara decat ce se si citeste. */
  --dg-fundal:     #0b0f14;   /* = --c-fund-0 */
  --dg-banda:      #131c26;   /* banda de tensiune, rand impar */
  --dg-banda2:     #101823;   /* banda de tensiune, rand par */
  --dg-banda-c:    #22303f;   /* conturul benzii */
  --dg-bara-c:     #0b0f14;   /* conturul subtire care desparte bara de fond */
  --dg-sel:        #ffffff;   /* elementul selectat */
  --dg-vecin:      #9fd0ff;   /* vecinii nodului selectat */
  /* EVIDENTIEREA PE JUDET. Culoarea trebuie sa nu se confunde cu niciuna dintre cele
     care se pot vedea odata cu ea: rosu 400 (#e05c5c), chihlimbar 220 (#e8a33d), verde
     110 (#4ec9a5), albastru MT (#4f93f0), galben de nod PU (#ffe9a8), cyan de frontiera
     (#7fd4ff), alb de selectie (#ffffff), albastru de vecin (#9fd0ff). Magenta este
     singurul ton liber si nu apare in nicio banda de tensiune, deci un inel magenta nu
     poate fi luat drept nivel de tensiune. */
  --dg-jud:        #ff8ad8;   /* barele judetului aprins (inel + nume) */
  --dg-pu:         #ffe9a8;   /* contur de nod PU (generator) */
  --dg-front:      #7fd4ff;   /* nod de frontiera (contur punctat) */
  --dg-simbol:     #d3dae2;   /* conturul TUTUROR simbolurilor de aparat: transformator,
                                 bobina de compensare, baterie de condensatoare,
                                 generator; mostrele din legenda folosesc aceeasi */
  --dg-mag:        #5b6b7d;   /* ramura de magnetizare: semn discret */
  /* ECHIVALENTUL RETELEI EXTERNE (reducerea Kron).
     ALB, fiindca nu apartine niciunui nivel de tensiune: culoarea ramane rezervata
     nivelurilor, cum a cerut beneficiarul. Nu este insa albul CURAT: acela este deja al
     selectiei (--dg-sel #ffffff), iar cele doua se pot vedea deodata pe acelasi desen.
     #f2f7fc este cu un pas mai rece si mai stins - destul cat sa se citeasca "alb", nu
     destul cat sa fie luat drept element ales. Deosebirea hotaratoare ramane oricum
     forma: selectia este linie PLINA si mai GROASA decat orice latura, echivalentul este
     linie INTRERUPTA si mai SUBTIRE decat orice latura reala.
     Aceeasi valoare o citesc si schema (diagrama.js, care o copiaza si in fisierul SVG
     exportat), si mostrele din legenda (app.js). Se declara aici o singura data.
     Punctatul si opacitatea NU se declara ca variabile: ele nu se citesc de nicaieri -
     stau in foaia de stil dinauntrul schemei si in mostrele legendei - iar aici nu se
     scrie decat ce se si citeste. */
  --dg-ech:        #f2f7fc;   /* latura si suntul echivalent */
  --dg-text:       #c4d0dd;
  --dg-text-tare:  #e6eef7;
  --dg-text-slab:  #7c8ea2;
  --dg-hud:        rgba(13, 20, 28, .86);
  --dg-hud-c:      #22303f;
  --dg-hud-h:      #1d2836;   /* butonul din antetul schemei, sub cursor */

  /* --- serii in grafice --- */
  --seria-1:       #4da3ff;
  --seria-2:       #ffb454;
  --seria-3:       #4ec9a5;
  --seria-4:       #c792ea;
  --seria-5:       #ff6b6b;
  --seria-6:       #8fd3f4;
  --seria-7:       #e0d267;
  --seria-8:       #7f9cc0;

  /* --- spatii --- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 20px;

  /* --- raze --- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;

  /* --- umbre --- */
  --umbra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --umbra-2: 0 6px 20px rgba(0, 0, 0, .55);

  /* --- marimi de asezare --- */
  --lat-panou:     320px;   /* latimea fixa a panoului din stanga */
  /* --h-jos a fost inaltimea FASIEI de diagrame. Fasia nu mai exista: in josul paginii
     a ramas numai banda de meniuri, iar randul ei din grila este 'auto'. Variabila
     ramane declarata pentru ca nicio regula mai veche care o citeste sa nu cada, dar
     NU MAI HOTARASTE nicio inaltime - schema ia tot ce ramane intre bara vederii si
     banda de jos. */
  --h-jos:         300px;   /* nefolosita: vezi nota de mai sus */
  --h-jos-min:     140px;
  --h-schema-min:  180px;   /* schema nu coboara niciodata sub atat */
  --h-maner:       7px;
  --h-comanda:     28px;    /* inaltimea minima a elementelor clicabile */
  --h-sec-cap:     30px;    /* titlul unei sectiuni pliabile din panou; de el depinde
                               cati px ocupa o sectiune INCHISA, deci si daca titlurile
                               tuturor celor zece sectiuni incap in panou */

  /* --- tipografie --- */
  --font: "Segoe UI", "Inter", system-ui, -apple-system, "Liberation Sans", Arial, sans-serif;
  --font-cifre: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;
  --t-1: 11px;
  --t-2: 12px;
  --t-3: 13px;
  --t-4: 16px;

  color-scheme: dark;
}


/* ----------------------------------------------------------------- 2. temelie ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  height: 100dvh;                     /* dvh evita saltul barelor de sistem */
  margin: 0;
  overflow: hidden;                   /* nicio bara de derulare pe pagina intreaga */
  font: var(--t-3)/1.45 var(--font);
  background: var(--c-fund-0);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

/* toate cifrele au latime fixa, ca sa se citeasca in coloana */
input[type="number"], table, .cifre, .kv td:last-child,
#tabBilant td:last-child, #infoNod { font-variant-numeric: tabular-nums; }

::selection { background: var(--c-accent-slab); }

/* bare de derulare discrete */
* { scrollbar-width: thin; scrollbar-color: var(--c-linie-tare) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-linie-tare); border-radius: 6px;
  border: 2px solid var(--c-fund-1);
}
*::-webkit-scrollbar-thumb:hover { background: #4c5d73; }

/* focus vizibil peste tot */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* -------------------------------------------------- 3. asezarea generala (Grid) ---- */
/* Doua coloane (panou fix + zona elastica) si patru randuri. Coloana a doua este
   declarata minmax(0, 1fr) ca sa poata cobori sub latimea continutului ei, altfel
   o schema lata ar impinge pagina si ar aparea bara de derulare orizontala.

   SCHEMA UMPLE APROAPE TOT ECRANUL (cerinta beneficiarului, a doua oara).
   Randul de jos nu mai este o FASIE de continut, ci NUMAI BANDA DE BUTOANE: inaltimea
   lui este 'auto', adica exact cat masoara banda (~33 px), nu 'var(--h-jos)' (300 px).
   Cei ~267 px eliberati se duc, unul cate unul, in randul schemei, care este singurul
   declarat 1fr. Manerul de tragere a plecat cu fasia: nu mai are ce sa redimensioneze,
   iar randul lui ramane in grila la 'auto' si masoara zero, fiindca #manerJos este
   scos din pagina (sectiunea 7).
   Variabila --h-jos nu mai intra in nicio inaltime; a ramas declarata numai ca sa nu
   cada regulile mai vechi care o citesc. */
body {
  display: grid;
  grid-template-columns: var(--lat-panou) minmax(0, 1fr);
  grid-template-rows:
      auto                                   /* antet */
      minmax(var(--h-schema-min), 1fr)       /* schema: ia TOT ce ramane */
      auto                                   /* maner (scos din pagina: masoara 0) */
      auto;                                  /* banda de meniuri, cat masoara ea */
  grid-template-areas:
      "antet antet"
      "panou schema"
      "panou maner"
      "panou jos";
}

/* fiecare element din grila trebuie sa se poata micsora */
#antet, #panou, #zonaSchema, #manerJos, #zonaDiagrame { min-width: 0; min-height: 0; }

#antet        { grid-area: antet; }
#panou        { grid-area: panou; }
#zonaSchema   { grid-area: schema; }
#manerJos     { grid-area: maner; }
#zonaDiagrame { grid-area: jos; }


/* -------------------------------------------------------------------- 4. antet ---- */
/* ANTETUL nu mai are 'gap' si nici umplutura laterala pe stanga: blocul din stanga isi ia
   exact latimea panoului, iar ce urmeaza trebuie sa inceapa CHIAR la marginea schemei.
   Umplutura de stanga s-a mutat inauntrul blocului, ca sa nu impinga marginea. */
/* Umplutura de sus si de jos este 4 px, nu 6: cu ea, sigla poate fi de 34 px in loc de 30
   - cu 13 % mai mare, si cu asta lizibila - iar antetul iese tot de 42-43 px, adica schema
   nu pierde niciun pixel. Randul este oricum tinut de comutatoare, care au 30 px. */
#antet {
  display: flex; align-items: stretch; gap: 0;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) 0;
  background: var(--c-fund-1);
  border-bottom: 1px solid var(--c-linie);
}
.antet-stanga { padding-left: var(--sp-3); }

/* Blocul de marca ia CE RAMANE dupa unelte (flex-basis 0), dar nu scade niciodata sub
   140 px: asa nu poate nici sa fure loc uneltelor cu un subtitlu lung, nici sa dispara
   de tot cand pastila de stare primeste un mesaj lung. Textele dinauntru se taie cu
   trei puncte. */
.marca { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 0; min-width: 140px; }

.sigla {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-2);
  background: linear-gradient(180deg, var(--c-fund-3), var(--c-fund-1));
  color: var(--c-accent);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .5px;
}

.titlu { min-width: 0; }
/* si titlul isi taie textul cu trei puncte: daca ar trece pe doua randuri, antetul ar
   creste in inaltime si ar impinge schema in jos ori de cate ori fereastra se ingusteaza */
#antet h1 {
  font-size: var(--t-4); font-weight: 600; letter-spacing: .2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub {
  font-size: var(--t-2); color: var(--c-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* GRUPUL DE UNELTE DIN ANTET SE STRAMTEAZA.
   Cat timp era 'flex: 0 0 auto' nu ceda niciodata: un text lung in pastila de stare -
   chiar avertismentul de suprapuneri intors de server dupa o editare reusita (E7) -
   umfla grupul peste latimea ferestrei, strivea blocul de marca la latime ZERO ('DEO'
   peste 'Simulator reteaua DEO' peste 'Regim', ilizibil) si dadea paginii bara de
   derulare orizontala. Masurat inainte, cu mesajul adevarat: la 1600x900 grupul se
   intindea pana la x = 1621 intr-o pagina de 1600, .marca ramanea de 0 px, iar antetul
   crestea de la 49,6 la 88 px.
   Acum grupul SE STRAMTEAZA (flex: 0 1 auto, min-width: 0) si ramane lipit in dreapta.
   Ce cedeaza si in ce ordine: pastila de stare are un plafon de latime (34 vw) si isi
   taie textul cu trei puncte, blocul de marca ia numai ce ramane, iar alegerea
   regimului si butoanele de sesiune nu se strang deloc. */
/* Uneltele incep de la marginea schemei si curg spre dreapta; distantierul .spatiu imparte
   comenzile desenului (in stanga) de cele ale sesiunii (in dreapta). */
.antet-unelte {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2);
  flex: 1 1 auto; min-width: 0;
}
.antet-unelte > .spatiu { flex: 1 1 auto; min-width: 0; }
.antet-unelte > * { min-width: 0; }

.camp-linie { display: flex; align-items: center; gap: var(--sp-2); }
.camp-linie > span { font-size: var(--t-2); color: var(--c-text-2); white-space: nowrap; }
.camp-linie select { width: auto; min-width: 210px; }
/* alegerea regimului si butoanele de sesiune nu se strang: o lista strivita nu se mai
   poate citi, iar un buton strivit nu se mai poate apasa */
.antet-unelte .camp-linie, .antet-unelte .grup-sesiune { flex: 0 0 auto; }

/* indicatorul de stare; punctul este ::before, deci supravietuieste unui textContent */
.pastila {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 11px; min-height: var(--h-comanda);
  border: 1px solid var(--c-linie); border-radius: 999px;
  background: var(--c-fund-3);
  font-size: var(--t-2); color: var(--c-text-2); white-space: nowrap;
}
.pastila::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.pastila.ok     { color: var(--c-bine);    border-color: rgba(78, 201, 165, .45); }
.pastila.lucru  { color: var(--c-atentie); border-color: rgba(255, 180, 84, .45); }
.pastila.eroare { color: var(--c-rau);     border-color: rgba(255, 107, 107, .45); }

/* PASTILELE DIN ANTET ISI TAIE TEXTUL CU TREI PUNCTE.
   Un mesaj lung (avertismentul de suprapuneri de la E7 are 200 de caractere) nu are
   voie sa impinga antetul afara din pagina. Sunt scrise ca BLOC, nu ca inline-flex:
   text-overflow lucreaza numai intr-un bloc de text, iar intr-un container flex textul
   ar fi doar taiat, fara cele trei puncte. Punctul colorat ramane ::before, asezat pe
   mijlocul randului, deci pastila arata la fel; se schimba numai ce se intampla cand
   textul nu incape. Textul intreg il pune pagina in atributul 'title'. */
#antet .pastila {
  display: block; flex: 0 1 auto;
  max-width: 100%; min-width: 4ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 18px;                       /* 28 - 2 x 4 padding - 2 x 1 chenar */
}
#antet .pastila::before {
  display: inline-block; vertical-align: middle;
  margin-right: var(--sp-2); position: relative; top: -1px;
}
/* pastila calculului poate primi mesaje de 200 de caractere (avertismentul de la E7):
   nu are voie sa ceara mai mult de o treime din antet. Selectorul poarta si #antet, ca
   sa treaca inaintea regulii '#antet .pastila' de mai sus. */
#antet #stareCalc { max-width: 34vw; }


/* ------------------------------------------ 4a. COMUTATORUL RULARE | EDITARE ----
   Cerinta (D). Beneficiarul a spus: "NU vad unde este butonul de switch intre comutare
   si rulare". Masurat, avea dreptate din prima: singurul buton care intra in modul Edit
   (#btnEdit) statea in sectiunea "Editare" a panoului, sectiune PLIATA implicit, deci
   butonul avea inaltime ZERO. Antetul arata numai starea, nu si comanda.

   Regula de asezare care se respecta aici: comutatorul sta in ANTET, iar antetul nu se
   pliaza si nu se deruleaza niciodata. Deci comutatorul se vede la orice incarcare de
   pagina, la orice latime, fara niciun clic.

   CUM SE VEDE STAREA - trei semne deodata, nu numai o nuanta de culoare:
     (1) POZITIA cursorului .cm-glisor, care aluneca intre jumatatea din stanga
         (RULARE) si cea din dreapta (EDITARE). Se citeste si cu ochii mijiti.
     (2) FORMA si greutatea: butonul activ are litera groasa si bulina aprinsa, cel
         inactiv are litera slaba si bulina stinsa, doar conturata.
     (3) ETICHETA scrisa cu litere mari, nu o pictograma.
   Iar in modul Edit tot cursorul devine violet (--c-edit), aceeasi culoare cu chenarul
   schemei si cu banda #baraEdit: cele trei semne spun acelasi lucru.

   COMUTATORUL STINS. Cand contul nu are dreptul 'editare', app.js pune pe #btnModEditare
   'disabled' + 'title' + 'data-motiv'. Regula generala de la 9b (bulina de intrebare)
   este scrisa pentru butoanele patrate din panou si ar strica pastila de aici, deci se
   anuleaza pentru .cm-buton si se pune in loc un semn propriu: eticheta capata un lacat
   inaintea ei si butonul se estompeaza. Textul explicatiei ramane in 'title', citit la
   trecerea cu mouse-ul si de cititoarele de ecran; app.js il scrie in AMBELE locuri
   (title si data-motiv) - defectul rundei trecute a fost exact un data-motiv plin cu
   title gol, adica un buton stins fara explicatie. */
/* LATIME FIXA, si de aceea CELE DOUA JUMATATI SUNT EXACT EGALE.
   Nu este un moft de asezare: cursorul de dedesubt aluneca cu 'transform: translateX(100%)'
   peste o latime de 50 %, deci daca butoanele ar avea latimi diferite - si ar avea, fiindca
   "EDITARE" este cu o litera mai lung decat "RULARE", iar cand comutatorul se stinge
   eticheta mai primeste si semnul de intrebare - cursorul nu s-ar mai potrivi peste
   eticheta pe care o arata. Cu latime fixa si 'flex: 1 1 0' fiecare jumatate ia exact
   jumatate, oricat de lung ar fi textul dinauntru.
   188 px este masurat: jumatatea cea mai incarcata ("? EDITARE", cu bulina de intrebare
   in locul bulinei de stare) cere 90 px; 2 x 91 + 2 x 2 umplutura + 2 x 1 chenar = 188. */
.comutator-mod {
  position: relative;
  flex: 0 0 auto;
  width: 188px;
  display: flex; align-items: stretch;
  padding: 2px;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie-tare);
  border-radius: 999px;
}

/* cursorul care aluneca: o singura jumatate de latime, mutata cu transform.
   Sta SUB butoane (z-index 0 fata de 1), deci nu le fura clicul. */
.cm-glisor {
  position: absolute; z-index: 0;
  top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--c-fund-4);
  border: 1px solid var(--c-linie-tare);
  box-shadow: var(--umbra-1);
  transition: transform .16s ease, background-color .16s linear, border-color .16s linear;
}
/* modul Edit: cursorul trece in dreapta si se face violet */
body.mod-edit .cm-glisor {
  transform: translateX(100%);
  background: var(--c-edit-slab);
  border-color: var(--c-edit);
  box-shadow: 0 0 8px var(--c-edit-slab), var(--umbra-1);
}

.cm-buton {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;         /* exact jumatate, oricat de lung ar fi textul */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: calc(var(--h-comanda) - 4px);
  padding: 0 12px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--c-text-3);
  font-family: inherit; font-size: var(--t-1); font-weight: 600; letter-spacing: .8px;
  white-space: nowrap; cursor: pointer;
  transition: color .16s linear;
}
.cm-buton:hover:not(:disabled) { color: var(--c-text-2); }
.cm-buton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* butonul activ: litera groasa, alba */
.cm-buton.activ { color: var(--c-text); font-weight: 700; }
body.mod-edit #btnModEditare.activ { color: var(--c-edit); }

/* bulina de stare din fiecare buton: plina si aprinsa numai la butonul activ */
.cm-bulina {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid var(--c-text-3);
}
.cm-buton.activ .cm-bulina {
  background: currentColor; border-color: currentColor;
  box-shadow: 0 0 6px currentColor;
}
/* cat timp se editeaza, bulina pulseaza - acelasi puls ca in panou si pe banda schemei */
body.mod-edit #btnModEditare.activ .cm-bulina { animation: puls-edit 1.6s ease-in-out infinite; }

/* STINS, CU MOTIV. Se pastreaza CONVENTIA paginii de la 9b - bulina de intrebare - dar
   asezata altfel: regula generala o lipeste in coltul din dreapta-sus al butonului si,
   pe o pastila rotunda de 24 px, ar cadea peste margine. Aici bulina sta INAINTEA
   etichetei, in randul ei, cu aceleasi culori si aceeasi litera.
   Butonul ramane LA VEDERE (nu dispare, nu se scoate din pagina) si isi pastreaza
   'title': motivul se citeste la trecerea cu mouse-ul si de cititorul de ecran. app.js
   scrie acelasi text in ambele locuri - masurat, 240 de caractere in fiecare pentru un
   cont fara dreptul 'editare'. */
.cm-buton[disabled] { cursor: not-allowed; opacity: .55; }
.cm-buton[disabled][data-motiv] { padding-right: 12px; }
.cm-buton[disabled][data-motiv]::after { content: none; }
/* bulina de stare se preface CHIAR EA in bulina de intrebare: asa semnul nu se adauga
   langa altul, ci ii ia locul, si eticheta se muta cu 5 px, nu cu 18 */
.cm-buton[disabled][data-motiv] .cm-bulina {
  width: 12px; height: 12px;
  background: var(--c-fund-4); border-color: var(--c-linie-tare);
  color: var(--c-text-2); box-shadow: none;
  font-size: 9px; font-weight: 700; line-height: 10px; letter-spacing: 0; text-align: center;
}
.cm-buton[disabled][data-motiv] .cm-bulina::before { content: "?"; }
/* cat timp se lucreaza (se ia copia de siguranta, se scrie geometria) butonul este
   stins, dar NU este o interdictie: nu primeste semnul de intrebare, ci numai cursorul
   de asteptare. Un semn de "nu ai voie" pentru o secunda de asteptare ar minti. */
.cm-buton[disabled][data-lucru] { cursor: progress; }
.cm-buton[disabled][data-lucru] .cm-et::before { content: none; }

/* Pe ferestre inguste eticheta se scurteaza, dar NU dispare: comutatorul trebuie sa
   ramana citibil, nu doar prezent. Sub 1100 px se lasa numai bulinele + prima litera
   ar fi ghicitoare, deci se pastreaza cuvantul intreg si se strange umplutura. */
@media (max-width: 1180px) {
  .comutator-mod { width: 164px; }
  .cm-buton { padding: 0 6px; letter-spacing: .4px; }
}


/* -------------------------------------------------------- 5. panoul de comanda ----

   PANOUL PE SECTIUNI PLIABILE - aici se repara defectul de folosire semnalat:
   glisorul de prag al echivalentului (#glisorPrag) cadea la y = 871 px intr-un panou
   inalt de 852 px (1600x900), adica SUB marginea panoului, si panoul mai primeste inca
   trei grupuri (editarea, utilizatorii, salvarile). Nu se putea repara facand loc.

   Mecanismul, in patru reguli:

   (a) #panou este un container FLEX pe verticala, cu inaltimea data de grila paginii.
       Fiecare sectiune este un <details class="sec">. O sectiune INCHISA ocupa numai
       titlul (--h-sec-cap = 30 px, 28 px sub 800 px inaltime) si nu se stramteaza, deci
       titlurile tuturor celor zece sectiuni incap intotdeauna: 10 x 28 + spatii = ~310
       px, mult sub cei 672 px ai panoului la 1280x720. Orice sectiune este la UN SINGUR
       CLIC distanta.

   (b) Fiecare sectiune deschisa are o PODEA (min-height) sub care nu se stramteaza,
       aleasa astfel incat toate COMENZILE ei sa ramana vizibile. Comanda de reglaj si
       lista comenzilor nu se stramteaza deloc (corpul lor este numai comenzi); celelalte
       se termina cu texte lungi - note de citire, indicatori, legenda - si pot ceda pana
       la podeaua lor, ce ramane sub ea derulandu-se in sectiune.

   (c) Bilantul este singura sectiune fara nicio comanda, deci cedeaza primul si oricat
       (flex-shrink: 100). Asa, cand se deschide echivalentul, bilantul face loc si
       glisorul de prag ramane in panou fara nicio derulare.

   (d) Derularea unei sectiuni se face pe <details> insusi, nu pe .sec-corp - vezi nota
       de la .sec. Titlul ramane lipit sus (position: sticky), ca sa se stie mereu in ce
       sectiune se rasfoieste.

   Daca totusi se deschid deodata mai multe sectiuni decat incap (om hotarat, fereastra
   mica), #panou are overflow-y: auto si se deruleaza normal: nimic nu se pierde, numai
   ca trebuie derulat.

   Masurat, cu sectiunile implicite (nodul, comanda, bilantul), la 1280x720 si 1600x900:
   zero comenzi sub marginea panoului, zero titluri sub marginea panoului, panoul nu are
   ce derula (672/672 si 850/850 px); un singur clic pe titlul echivalentului aduce
   #glisorPrag intreg in panou, cu derularea panoului tot pe zero.

   Se folosesc <details>/<summary> NATIVI: deschiderea, inchiderea, Enter/Space si
   citirea de catre cititoarele de ecran vin de la browser, nu din JavaScript. app.js
   citeste si scrie starea prin proprietatea .open a sectiunii.
   ----------------------------------------------------------------------------------- */
#panou {
  display: flex; flex-direction: column;
  gap: var(--sp-1);
  overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-1);
  border-right: 1px solid var(--c-linie);
}

/* --- sectiunea pliabila --- */
.sec {
  flex: 0 0 auto;                 /* inchisa: cat titlul, si nu se stramteaza */
  /* PODEAUA. Fara ea, o sectiune care cedeaza inaltime se poate strange pana la
     grosimea chenarului (masurat: 2 px), iar titlul ei da pe dinafara si se suprapune
     peste vecin. Podeaua unei sectiuni inchise este exact titlul; a uneia deschise,
     titlul plus un rand de continut - o sectiune "deschisa" care nu arata nimic ar fi
     o minciuna la fel de suparatoare ca un control cazut sub marginea panoului. */
  min-height: calc(var(--h-sec-cap) + 2px);
  /* DERULAREA SE FACE PE <details>, NU PE CORPUL LUI. Un <details> nu isi pune
     continutul direct in propria cutie: browserul il tine intr-o cutie proprie
     (::details-content). Cat timp regulile de derulare erau puse pe .sec-corp, acea
     cutie ramanea de inaltime automata, .sec-corp nu devenea niciodata container de
     derulare, iar continutul unei sectiuni stramtate iesea pe dinafara si trecea peste
     sectiunile de dedesubt - masurat: bifele #chkFluxuri, #chkTrafo, #chkShunturi si
     #chkLegenda ajungeau la y = 727 ... 983 intr-un panou care se termina la y = 720.
     Pusa pe <details> insusi, derularea nu mai depinde de cutia aceea interioara. */
  overflow: hidden;
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie);
  border-radius: var(--r-2);
  box-shadow: var(--umbra-1);
}
.sec[open] {
  flex: 0 1 auto;                 /* deschisa: nu creste, dar poate ceda inaltime */
  min-height: calc(var(--h-sec-cap) + 36px);
  overflow-y: auto; overflow-x: hidden;
}

/* Lista comenzilor NU cedeaza nimic (flex-shrink: 0): corpul ei este numai comenzi, deci
   orice stramtare ar ascunde un camp sau un buton. Ca sa se poata tine promisiunea asta,
   inaltimea ei trebuie sa fie MARGINITA de la inceput - de aceea lista (.lista) are
   max-height si se deruleaza singura. */
#sec-lista[open] { flex-shrink: 0; }

/* COMANDA DE REGLAJ, dupa cerinta (5).
   Pana acum sectiunea era numai comenzi si nu ceda nimic. Acum se termina, ca alte cinci
   sectiuni din panou, cu un INDICATOR asezat SUB ultima comanda: randul care spune ce s-a
   calculat si in cat timp (#stareCalcul). El se scrie numai dupa un calcul.

   CE S-A MASURAT, si de ce regula este asta.
   Panoul este SATURAT la toate cele trei rezolutii de proba: bilantul, singura sectiune
   deschisa cu continut nemarginit, sta deja la podeaua lui (48 px din cateva sute cerute).
   Randul de indicator cere 64 px, si nu exista de unde. Cu regula veche (flex-shrink: 0)
   sectiunea crestea de la 238 px la 323 px si PANOUL INTREG incepea sa se deruleze -
   masurat la 1280x720: 740 px ceruti in 672 px, adica 68 px de derulat, exact defectul
   pe care asezarea pe sectiuni pliabile il inchisese.

   Sectiunea trece deci in aceeasi randuiala ca sectiunile cu note de la #sec-ech in jos:
   cedeaza inaltime, dar numai pana la o PODEA masurata astfel incat TOATE comenzile ei sa
   ramana vizibile - tipul comenzii, tinta, eticheta valorii, glisorul, campul numeric si
   cele doua butoane. Podeaua este chiar inaltimea sectiunii fara indicator, masurata:
     titlu 30 + corp 208 = 238 px.
   Cu ea, la 1280x720, 1600x900 si 1920x1080 deopotriva: panoul are ZERO de derulat si
   toate cele sase comenzi sunt intregi in panou - masurat.

   CE URMEAZA DIN REGULA ASTA, spus pe fata: randul de indicator sta atunci SUB indoitura
   sectiunii lui. Nu este insa lasat ascuns - app.js il ADUCE IN PRIVIRE dupa fiecare
   calcul, deruland sectiunea cu exact cat lipseste (raporteazaCalcululComplet ->
   aduRandulCalculuiInPrivire). Masurat, dupa aducerea in privire:
     1280x720   sectiunea se muta cu 66 px; randul se vede intreg; raman la vedere tinta,
                glisorul, campul de valoare si cele doua butoane
     1600x900   74 px, aceleasi cinci comenzi la vedere
     1920x1080  34 px, si TOATE cele sase comenzi la vedere
   Iese din privire numai lista "Tipul comenzii", cea care se alege o data, nu la fiecare
   calcul; o derulare in sus o aduce inapoi. Panoul insusi are ZERO de derulat la toate
   trei. Cifra pe scurt este oricum si in pastila din antet, cu textul intreg in 'title'. */
#sec-comanda[open] { flex-shrink: 3; min-height: 238px; }

/* Cinci dintre sectiunile cu comenzi se termina cu texte lungi (note de citire,
   indicatori, liste de drepturi) care stau SUB ultima comanda. Ele pot deci ceda
   inaltime - dar numai pana la podeaua de mai jos, masurata astfel incat TOATE
   comenzile sectiunii sa ramana vizibile; ce cade sub ele se deruleaza in corpul
   sectiunii. Podelele sunt sub inaltimea fireasca a fiecarei sectiuni, deci nu produc
   nicaieri spatiu gol. Daca se adauga o comanda intr-una din ele, se creste si podeaua.
     sec-ech         titlu + doua bife + eticheta pragului + randul glisorului
     sec-judete      titlu + eticheta + lista de pastile (marginita la 96 px) + "Toate"
     sec-editare     titlu + Edit/Gata + Anuleaza + Revino + indicatorul de stare
     sec-utilizatori titlu + cele doua butoane
     sec-salvari     titlu + eticheta + campul + Salveaza / Lista salvarilor */
#sec-ech[open]         { flex-shrink: 5; min-height: 180px; }
#sec-judete[open]      { flex-shrink: 5; min-height: 196px; }
#sec-editare[open]     { flex-shrink: 4; min-height: 196px; }
#sec-utilizatori[open] { flex-shrink: 4; min-height: 140px; }
#sec-salvari[open]     { flex-shrink: 4; min-height: 168px; }
/* Afisarea in schema are cele mai multe comenzi din tot panoul - doua liste si sapte
   bife - si abia sub ele stau nota de asezare si legenda. Podeaua ei este deci mare:
   titlu + cele doua liste + cele sapte bife + capul grupului legendei si bifa lui.
   Sub podea raman de derulat numai nota si legenda. */
#sec-afisare[open] { flex-shrink: 6; min-height: 420px; }
/* Nodul selectat nu are comenzi, dar creste cu tabelul nodului ales; cedeaza al treilea. */
#sec-nod[open]     { flex-shrink: 4; }
/* Bilantul este singura sectiune cu continut nemarginit si FARA nicio comanda: un tabel,
   o nota si o panza. El cedeaza primul si oricat - are propria derulare. */
#sec-bilant[open]  { flex-shrink: 100; }

/* --- SECTIUNEA TOCMAI DESCHISA SE LUNGESTE  (cerinta 6) ---
   Beneficiarul: "La Bilantul regimului si nu numai, lasi o fereastra prea ingusta pentru
   fereastra activa. Lungeste-o pe verticala, astfel incat sa nu mai fiu nevoit sa ii dau
   scroll!"

   Regulile de mai sus impart inaltimea panoului dupa cat de multe COMENZI are fiecare
   sectiune - o impartire buna cat timp toate sectiunile sunt deopotriva de interesante.
   Dar in clipa in care omul deschide una anume, aceea este singura la care se uita:
   bilantul, cu flex-shrink 100, se strangea la podeaua lui si isi derula tabelul, exact
   ce s-a reclamat.

   .sec-larga o pune app.js (marcheazaSectiuneaLarga) pe sectiunea abia deschisa, si
   numai pe ea. Cat o poarta:
     - nu mai cedeaza inaltime nimanui (flex-shrink: 0), deci creste cat ii cere
       continutul ei intreg;
     - nu se mai deruleaza pe dinauntru (overflow-y: visible), fiindca nu mai are ce:
       derularea, daca mai ramane vreuna, este a panoului, si acolo o duce app.js singur
       (aduInPrivire), fara ca omul sa dea de ea.
   Cand se deschide alta sectiune, clasa trece la ea si asezarea de mai sus revine. */
#panou .sec.sec-larga[open] {
  flex: 0 0 auto;
  overflow-y: visible;
  max-height: none;
}
/* Corpul unei sectiuni largi nu mai are voie sa-si margineasca inaltimea pe dinauntru:
   altfel s-ar muta derularea cu un rand mai jos si cererea ar ramane neindeplinita. */
#panou .sec.sec-larga[open] > .sec-corp { max-height: none; }

/* --- titlul sectiunii (elementul <summary>) ---
   Fiindca sectiunea se deruleaza, titlul ar fugi in sus cu continutul; sticky il tine
   lipit de marginea de sus, ca sa se stie mereu in ce sectiune se rasfoieste. Fondul
   trebuie sa fie OPAC, altfel textul de dedesubt s-ar vedea prin el. */
.sec > .sec-cap {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--h-sec-cap); padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-2);
  background: var(--c-fund-2);
  color: var(--c-text-3);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  cursor: pointer; user-select: none;
  list-style: none;                        /* scoate triunghiul implicit (standard) */
}
.sec > .sec-cap::-webkit-details-marker { display: none; }   /* idem, WebKit vechi */
.sec > .sec-cap:hover { color: var(--c-text); background: var(--c-fund-3); }
.sec[open] > .sec-cap {
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-linie);
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.sec-titlu { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sageata. Este un chevron desenat din doua laturi de chenar, nu un caracter: asa are
   aceeasi greutate optica la orice familie de litere si se roteste curat. */
.sec > .sec-cap::after {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);   /* inchisa: arata spre dreapta */
  transition: transform .14s ease;
}
.sec[open] > .sec-cap::after { transform: rotate(45deg) translate(-2px, -2px); }  /* deschisa: in jos */

/* --- corpul sectiunii --- */
.sec-corp { padding: var(--sp-3); }
/* Ascunderea continutului cand sectiunea este inchisa se scrie si explicit, nu numai
   pe seama purtarii native a lui <details>: asa ramane sigura si daca se schimba
   vreodata felul de asezare al sectiunii. */
.sec:not([open]) > .sec-corp { display: none; }

/* nota marunta de sub comenzile unei sectiuni */
.sec-nota {
  margin-top: var(--sp-2);
  font-size: var(--t-1); line-height: 1.4; color: var(--c-text-3);
}
.sec-nota strong { color: var(--c-text-2); }
.sec-nota em { font-style: normal; color: var(--c-text-2); }

/* text numai pentru cititoarele de ecran (titlu de grup repetat de titlul sectiunii) */
.sr-doar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* mesaj scurt sub o comanda (rezultatul unei salvari, o eroare de formular) */
.mesaj {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.4;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-accent);
  border-radius: var(--r-1);
  color: var(--c-text-2);
}
.mesaj:empty { display: none; }
.mesaj-rau  { border-left-color: var(--c-rau);     color: #ffb3b3; }
.mesaj-bine { border-left-color: var(--c-bine);    color: #a8e6d1; }
.mesaj-avert{ border-left-color: var(--c-atentie); color: #ffd9a3; }

.camp { margin-bottom: var(--sp-2); }
.camp > label {
  display: block; margin-bottom: 3px;
  font-size: var(--t-1); color: var(--c-text-2);
}
.rand { display: flex; align-items: center; gap: var(--sp-2); }
/* butoanele nu isi rup niciodata textul pe doua randuri: daca nu incap unul langa
   altul, randul se imparte si fiecare buton ocupa toata latimea */
.rand.butoane { margin-top: var(--sp-2); flex-wrap: wrap; }
.rand.butoane > button { flex: 1 1 auto; white-space: nowrap; }
.gol { color: var(--c-text-3); font-style: italic; font-size: var(--t-2); }

/* --- campuri --- */
select,
input[type="number"], input[type="text"], input[type="search"],
input[type="password"] {
  width: 100%; min-height: var(--h-comanda);
  padding: 4px 8px;
  font: inherit; color: var(--c-text);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-1);
}
select { cursor: pointer; }
select option { background: var(--c-fund-2); color: var(--c-text); }
input[type="number"] { flex: 0 0 92px; width: 92px; text-align: right; }
input::placeholder { color: var(--c-text-3); }
select:hover, input:hover { border-color: #48586d; }
select:focus, input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-slab); }
select:focus-visible, input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
select:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
/* Camp numai de citit (numele unui cont existent): se vede ca nu se poate scrie in el,
   dar textul ramane la contrast intreg - este o informatie, nu o comanda oprita. */
input[readonly] {
  background: var(--c-fund-3); border-color: var(--c-linie);
  color: var(--c-text-2); cursor: default;
}
input[readonly]:hover { border-color: var(--c-linie); }
/* Completarea automata a browserului vine cu fond galben-bej si text negru: pe tema
   inchisa campul devine ilizibil. Fondul nu se poate schimba direct, dar se poate
   acoperi cu o umbra interioara groasa, iar textul are proprietatea lui de umplere. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--c-fund-0) inset;
  -webkit-text-fill-color: var(--c-text);
  caret-color: var(--c-text);
}

/* camp scurt, cat ii trebuie. Selectorul are element + clasa: altfel regula de mai sus
   pentru input[type="search"] (aceeasi specificitate, dar scrisa cu atribut) ar castiga
   si campul s-ar intinde pe toata latimea barei. */
input.ingust, select.ingust { width: auto; min-width: 150px; flex: 0 0 auto; }

input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: var(--h-comanda);
  accent-color: var(--c-accent); background: transparent; cursor: pointer;
}

/* --- butoane --- */
button {
  min-height: var(--h-comanda);
  padding: 5px 12px;
  font: inherit; color: var(--c-text);
  background: var(--c-fund-3);
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-1);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
button:hover:not(:disabled) { background: var(--c-fund-4); border-color: #4c5d73; color: var(--c-text-tare); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.pri {
  background: var(--c-accent); border-color: var(--c-accent);
  color: var(--c-accent-inch); font-weight: 600;
}
button.pri:hover:not(:disabled) { background: #66b1ff; border-color: #66b1ff; color: var(--c-accent-inch); }

button.sec { flex: 1 1 auto; }
button.mic { min-height: 26px; padding: 3px 10px; font-size: var(--t-2); }
button.ico { min-width: 30px; padding: 3px 8px; font-size: 15px; line-height: 1; }

.bifa {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 24px;
  font-size: var(--t-2); color: var(--c-text-2); cursor: pointer;
}
.bifa:hover { color: var(--c-text); }
.bifa input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }

/* --- lista comenzilor --- */
.lista { max-height: 128px; overflow-y: auto; }
.lista:empty { display: none; }
/* nota "lista este goala" se arata numai cand lista chiar este goala */
.lista:not(:empty) + .lista-goala { display: none; }
.lista .el {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 4px 4px 4px 8px; margin-bottom: var(--sp-1);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-accent);
  border-radius: var(--r-1);
  font-size: var(--t-2);
}
.lista .el > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .el button {
  flex: 0 0 auto; min-height: 22px; min-width: 24px; padding: 0 6px;
  background: none; border: none; color: var(--c-text-3); font-size: 15px; line-height: 1;
}
.lista .el button:hover { background: none; color: var(--c-rau); }

/* --- tabelul cheie/valoare (bilant, info nod) --- */
table.kv { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
table.kv td { padding: 2px 0; color: var(--c-text-2); vertical-align: baseline; }
table.kv td:last-child {
  text-align: right; color: var(--c-text-tare);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--sp-3);
}
table.kv tr.sep td { border-top: 1px solid var(--c-linie); padding-top: var(--sp-2); }
table.kv tr.cap td { color: var(--c-text-3); text-transform: uppercase; font-size: var(--t-1); letter-spacing: .5px; }
/* Antet de grupa pe toata latimea (cardul nodului: grupa insulei galvanice). Regula de
   mai jos pentru ULTIMA celula ii da white-space:nowrap, aliniere la dreapta si o
   coloana de 47 %; pe o celula unica cu colspan ele ar impinge titlul afara din card,
   asa ca se aduc inapoi aici. */
table.kv tr.cap td[colspan] {
  width: auto; text-align: left; white-space: normal;
  padding-left: 0; line-height: 1.35; color: var(--c-text-3);
}

#infoNod { font-size: var(--t-2); }
/* coloana de etichete are latime fixa, ca o valoare lunga (de exemplu
   sensibilitatea proprie) sa nu o stranga si sa nu rupa etichetele pe doua randuri */
table.kv td:first-child { width: 47%; }

/* =================================================================================
   EVIDENTIEREA PE JUDET (panoul de afisare)

   Ordinea nodurilor pe desen urmeaza structura electrica, nu geografia: judetul nu se
   mai poate citi din pozitie. Aici i se da inapoi ca functie - o pastila pentru fiecare
   judet din regim, cu numarul lui de noduri, in ordinea geografica vest-est (singurul
   loc in care harta mai supravietuieste). Se pot aprinde mai multe deodata; "Toate"
   stinge evidentierea.
   Pastilele le construieste modulul Diagrama (diagrama.js), care isi leaga singur acest
   control, ca si bifele campului de tensiune. Clasele sunt contractul cu el:
     .jud-pastila        pastila unui judet;  .activ = aprins
     .jud-pastila .cod   codul judetului;  .jud-pastila .n  numarul de noduri
     .jud-gol            textul pus cand regimul nu are judete declarate
     #stareJudet         randul de sub pastile, cu ce s-a evidentiat
   ================================================================================= */
.camp-judet { margin-top: var(--sp-3); }
.camp-judet > label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--t-1); color: var(--c-text-2);
}
/* "Toate" nu se intinde pe toata latimea, ca butoanele de comanda: este o comanda mica,
   pereche cu pastilele de deasupra, si trebuie sa arate ca atare */
.camp-judet .rand.butoane { margin-top: var(--sp-2); }
.camp-judet .rand.butoane > button { flex: 0 0 auto; min-width: 74px; }

/* Lista pastilelor are inaltime marginita si se deruleaza singura: intr-un regim cu
   multe judete ea ar creste necontrolat si ar impinge butonul "Toate" si randul de
   stare sub marginea panoului - exact defectul reparat prin sectiunile pliabile. */
.judete {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  max-height: 96px; overflow-y: auto; overflow-x: hidden;
}

.jud-pastila {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 2px 7px;
  font-size: var(--t-1); font-weight: 600; letter-spacing: .4px;
  color: var(--c-text-2);
  background: var(--c-fund-3);
  border: 1px solid var(--c-linie-tare); border-radius: 999px;
  cursor: pointer;
}
.jud-pastila:hover:not(:disabled) {
  background: var(--c-fund-4); border-color: #4c5d73; color: var(--c-text-tare);
}
/* Judetul aprins poarta chiar culoarea evidentierii din schema (--dg-jud), ca pastila
   apasata si inelele de pe bare sa se citeasca drept acelasi lucru. */
.jud-pastila.activ {
  color: var(--dg-jud);
  border-color: var(--dg-jud);
  background: rgba(255, 138, 216, .16);
}
.jud-pastila.activ:hover { background: rgba(255, 138, 216, .24); color: var(--dg-jud); }
.jud-pastila .n {
  font-weight: 400; font-size: 10px;
  font-variant-numeric: tabular-nums; color: var(--c-text-3);
}
.jud-pastila.activ .n { color: var(--dg-jud); opacity: .8; }

/* butonul "Toate" apasat = nicio evidentiere; se marcheaza discret, nu in magenta */
#btnJudetToate.activ { border-color: var(--c-accent); color: var(--c-text); }

.jud-gol { font-size: var(--t-1); color: var(--c-text-3); font-style: italic; }

.jud-stare {
  margin-top: var(--sp-1);
  font-size: var(--t-1); line-height: 1.35; color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.jud-stare:empty { display: none; }

/* Nota de citire de langa legenda. Fara ea, cineva ar cauta Mehedintiul in stanga
   desenului si l-ar crede pierdut. */
.nota-ordine {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45; color: var(--c-text-2);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-accent);
  border-radius: var(--r-1);
}
.nota-ordine strong { color: var(--c-text); }
.nota-ordine em { font-style: normal; color: var(--c-text); }


/* =================================================================================
   ECHIVALENTUL RETELEI EXTERNE (grupul din panoul de afisare)

   Grupul se desparte de bifele de deasupra printr-o linie si un titlu marunt: nu este
   inca un card, dar nici o bifa oarecare - este raspunsul la o reclamatie a
   beneficiarului si trebuie sa se vada ca atare.
   Numele de clase si de identificatori sunt contractul cu app.js:
     #grupEch .grup-cap   titlul grupului
     #glisorPrag          pozitia pe cursa (0 ... 1000), nu chiar pragul
     #pragEch             pragul in pu, camp numeric legat in ambele sensuri
     #stareEch            indicatorul viu; .r1 randul cu cifrele, .r2 detaliile marunte
     #notaEch             nota de citire a grupului
     #notaInsule          nota ceruta de R10, in cardul de bilant
   ================================================================================= */
.grup {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-linie);
}
/* Cand grupul este primul lucru din corpul unei sectiuni pliabile, titlul sectiunii ii
   tine deja loc de linie despartitoare: linia si spatiul de deasupra ar fi de prisos. */
.sec-corp > .grup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.grup-cap {
  margin-bottom: var(--sp-2);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}

/* ================================================== TIPUL ECHIVALENTULUI (Ward | Kron)
   Comutatorul acesta schimba MODELUL, nu desenul, si asta trebuie sa se vada dintr-o
   privire: sta primul in sectiune, deasupra unei linii de despartire, si are indicatorul
   lui de stare. Cursorul alb aluneca dupa #comutatorEch[data-ech], la fel ca la
   comutatorul MANUAL | OPTIM U/Q din antet - aceeasi mecanica, aceeasi latime egala pe
   cele doua jumatati, ca translateX(100%) sa cada exact peste eticheta pe care o arata. */
.camp-ech-tip { margin-top: 0; margin-bottom: 0; }
.rand-et-ajutor {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.rand-et-ajutor > label { flex: 1 1 auto; min-width: 0; line-height: 1.35; }

.ech-comutator {
  position: relative;
  display: flex; align-items: stretch;
  padding: 2px;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie-tare); border-radius: 999px;
}
.ech-glisor {
  position: absolute; z-index: 0;
  top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--c-fund-4);
  border: 1px solid var(--c-linie-tare);
  box-shadow: var(--umbra-1);
  transition: transform .16s ease, background-color .16s linear, border-color .16s linear;
}
/* PASIVUL SE MARCHEAZA CU CULOAREA DE ATENTIE, nu cu cea de accent. Nu este o greseala sa
   il alegi - este modelul de reprezentare cerut -, dar nu este modelul de CALCUL pentru
   reglaj, iar cine se uita peste umar la ecran trebuie sa vada ca nu se lucreaza pe
   implicit. Vezi FOLOSINTA din simulator/api.py pentru masuratoarea din spate. */
.ech-comutator[data-ech="pasiv"] .ech-glisor {
  transform: translateX(100%);
  background: rgba(255, 180, 84, .14);        /* --c-atentie la aceeasi opacitate ca --c-accent-slab */
  border-color: var(--c-atentie);
}
.ech-buton {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 0 6px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--c-text-3);
  font-family: inherit; font-size: var(--t-1); font-weight: 600; letter-spacing: .4px;
  white-space: nowrap; cursor: pointer;
  transition: color .16s linear;
}
.ech-buton:hover:not(:disabled) { color: var(--c-text-2); background: transparent; border: 0; }
.ech-buton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.ech-buton.activa { color: var(--c-text); font-weight: 700; }
.ech-comutator[data-ech="pasiv"] #btnEchPasiv.activa { color: var(--c-atentie); }
/* cat timp se reduce reteaua din nou, comutatorul nu primeste alte apasari */
.ech-comutator.lucru { opacity: .6; pointer-events: none; }

/* "Acum folositi echivalentul ...". Randul acesta nu este un ornament: modelul incarcat
   este singura sursa de adevar, iar comutatorul arata ce s-a CERUT. Cand cererea a esuat,
   cele doua ar putea sa nu se potriveasca, si atunci randul spune ce se foloseste de fapt. */
.ech-acum {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45;
  color: var(--c-text-2);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie);
  border-left: 3px solid var(--c-linie-tare);
  border-radius: var(--r-1);
}
.ech-acum:empty { display: none; }
.ech-acum b { color: var(--c-text-tare); font-weight: 700; }
.ech-acum .r2 { margin-top: 2px; color: var(--c-text-3); }
.ech-acum.implicit { border-left-color: var(--c-bine); }
.ech-acum.implicit b { color: var(--c-bine); }
.ech-acum.altul { border-left-color: var(--c-atentie); }
.ech-acum.altul b { color: var(--c-atentie); }
.ech-acum.lucru { border-left-color: var(--c-linie-tare); }
.ech-acum.lucru b { color: var(--c-text-2); }

.desparte-ech {
  margin: var(--sp-3) 0 var(--sp-2);
  border: 0; border-top: 1px solid var(--c-linie);
}
.nota-desen-ech { margin: 0 0 var(--sp-2); }

/* ------------------------------------------------------- AJUTORUL PLUTITOR
   Bulina "?" de langa o eticheta si balonul care se deschide din ea. Balonul se pune in
   <body> si se aseaza cu position: fixed, NU langa bulina: panoul din stanga are
   overflow-y, deci un balon asezat absolut inauntrul lui ar fi taiat de marginea panoului
   tocmai acolo unde este mai lung. Vezi legaAjutorPlutitor() din app.js. */
.ajutor-semn {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--c-linie-tare);
  background: var(--c-fund-2);
  color: var(--c-text-3);
  font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help;
}
.ajutor-semn:hover, .ajutor-semn[aria-expanded="true"] {
  background: var(--c-fund-4); color: var(--c-text); border-color: var(--c-accent);
}
.ajutor-semn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.ajutor-balon {
  position: fixed; z-index: 90;
  max-width: 340px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie-tare);
  border-radius: var(--r-2);
  box-shadow: var(--umbra-2, var(--umbra-1));
  font-size: var(--t-1); line-height: 1.5;
  color: var(--c-text-2);
}
.ajutor-balon[hidden] { display: none; }
.ajutor-balon h4 {
  margin: 0 0 4px;
  font-size: var(--t-1); font-weight: 700; letter-spacing: .4px;
  color: var(--c-text-tare);
}
.ajutor-balon p { margin: 0 0 var(--sp-2); }
.ajutor-balon p:last-child { margin-bottom: 0; }
.ajutor-balon .ab-nume { color: var(--c-accent); font-weight: 700; }
.ajutor-balon .ab-nume.altul { color: var(--c-atentie); }
.ajutor-balon .ab-subsol { color: var(--c-text-3); }

/* ============================== OPTIMIZAREA U/Q PE SET DE REGIMURI
   Sectiunea sta deasupra celor doua meniuri, ca si comutatorul, fiindca pune alta
   intrebare decat ele: nu "ce comenzi acum", ci "ce se cumpara". Se si vede: capul ei
   poarta o dunga de accent la stanga. */
.sec-set > .sec-cap { border-left: 3px solid var(--c-accent); padding-left: calc(var(--sp-3) - 3px); }

/* ============================== LINIA CARE DESPARTE MODURILE DE RESTUL
   Deasupra ei sta tot ce tine de "ce se calculeaza" (cele trei meniuri de reglaj);
   dedesubt, tot ce tine de "ce se vede". */
.desparte-moduri {
  flex: 0 0 auto;
  margin: var(--sp-2) var(--sp-3);
  border: 0; border-top: 1px solid var(--c-linie-tare);
}

/* ============================== MENIUL "AFISARE"
   Cinci linii, fiecare cu comenzile ei, mutate din bara de deasupra schemei. Nu sunt copii:
   sunt CHIAR elementele de acolo, cu aceleasi id-uri, deci ascultatorii din app.js nu s-au
   atins. Bara de sus a ramas cu un singur rand scurt, iar inaltimea eliberata a intrat in
   desen - acesta a fost si rostul mutarii. */
.af-linie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  margin-bottom: var(--sp-2);
}
.af-linie:last-of-type { margin-bottom: 0; }
.af-et {
  flex: 0 0 auto; margin-right: 4px;
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .5px;
  color: var(--c-text-3); white-space: nowrap;
}
/* butoanele mutate: aceeasi stramtare ca in bara, ca sa incapa in 288 px de panou */
.af-linie button.mic { padding: 3px 6px; letter-spacing: 0; }
.af-linie button.ico { min-width: 24px; padding: 3px 6px; }
.af-linie .grup { display: flex; align-items: center; gap: 2px;
                  margin-top: 0; padding-top: 0; border-top: 0; }
.af-linie .et-mic { margin-right: 2px; }
/* comutatorul de vedere ia toata latimea panoului: cele trei cuvinte nu incap altfel */
.af-linie .comutator-vedere { flex: 1 1 100%; }
/* Banda de culoare imparte linia a sasea cu cele doua fasii de date, iar panoul are 288 px:
   fasia se strange la 34 px, cat sa se citeasca gradientul, si cifrele raman - ele sunt
   chiar rostul benzii. Masurat, asa incap toate trei pe un rand. */
.af-banda .banda-u .bu-fasie { width: 34px; }
.af-linie .banda-u { margin: 0 3px 0 0; gap: 2px; }
.af-banda { gap: 2px; }
.af-banda button.mic { padding: 3px 4px; }
/* eticheta "Valori U" nu se rupe intre cele doua cuvinte */
.af-linie .et-mic { white-space: nowrap; }
/* linia cautarii: caseta ia latimea ramasa, butonul sta la capat */
.af-cautare { flex-wrap: nowrap; }
.af-cautare .cauta { flex: 1 1 auto; min-width: 0; width: auto; }
.af-cautare button { flex: 0 0 auto; }
/* linia care desparte comenzile de afisare de export */
.desparte-afisare {
  margin: var(--sp-2) 0; border: 0; border-top: 1px solid var(--c-linie);
}
/* meniul de export, in panou: se deschide SUB buton, pe latimea panoului */
.af-linie .meniu-export { min-width: 180px; }

/* CASETA VEDERII, mutata in panou. Acolo era un rand care se taia cu trei puncte, fiindca
   bara avea o singura linie de scris; aici are loc sa se desfasoare pe cate randuri ii
   trebuie, deci textul se citeste intreg. Titlul "VEDERE" a plecat: numele meniului spune
   deja despre ce este vorba. */
.bara-vedere.in-panou {
  flex: 1 1 100%;
  min-width: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie); border-left: 3px solid var(--c-linie-tare);
  border-radius: var(--r-1);
}
.bara-vedere.in-panou .bv-text {
  display: block; overflow: visible; white-space: normal; text-overflow: clip;
  font-size: var(--t-1); line-height: 1.45; color: var(--c-text-2);
}
.bara-vedere.in-panou .bv-scara { margin-top: 4px; }

.seturi-gata { display: flex; flex-wrap: wrap; gap: 4px; }
.set-pastila {
  padding: 2px 9px; border-radius: 999px;
  background: var(--c-fund-2); border: 1px solid var(--c-linie-tare);
  color: var(--c-text-2);
  font-family: inherit; font-size: var(--t-1); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.set-pastila:hover { background: var(--c-fund-4); color: var(--c-text); }
.set-pastila.activa {
  background: var(--c-accent-slab); border-color: var(--c-accent); color: var(--c-accent);
}
.set-pastila:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Lista regimurilor. Casuta, numele si eticheta pe un rand; regimurile FICTIVE se vad
   dintr-o privire, fiindca un plan de investitie nu se dimensioneaza pe un caz fabricat. */
.lista-regimuri { display: flex; flex-direction: column; gap: 1px; }
.lista-regimuri > label {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 5px; border-radius: var(--r-1);
  font-size: var(--t-1); line-height: 1.35; cursor: pointer;
}
.lista-regimuri > label:hover { background: var(--c-fund-2); }
.lista-regimuri input { flex: 0 0 auto; margin: 0; }
.lista-regimuri .reg-et { flex: 1 1 auto; min-width: 0; color: var(--c-text-2); }
.lista-regimuri .reg-semn {
  flex: 0 0 auto; font-size: var(--t-0); font-weight: 700; letter-spacing: .4px;
  color: var(--c-text-3);
}
.lista-regimuri > label.fictiv .reg-semn { color: var(--c-atentie); }
.lista-regimuri > label.acum .reg-et { color: var(--c-text-tare); font-weight: 600; }

.set-stare {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45; color: var(--c-text-2);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie); border-left: 3px solid var(--c-linie-tare);
  border-radius: var(--r-1);
}
.set-stare:empty { display: none; }
.set-stare b { color: var(--c-text-tare); }
.set-stare.bine  { border-left-color: var(--c-bine); }
.set-stare.bine b { color: var(--c-bine); }
.set-stare.avert { border-left-color: var(--c-atentie); }
.set-stare.avert b { color: var(--c-atentie); }
.set-stare.rau   { border-left-color: var(--c-rau); color: #ffb3b3; }
.set-stare.lucru { border-left-color: var(--c-accent); }

/* Planul pe set, in meniul Reglaj U/Q de sub schema. Sta primul si se vede ca este alt
   fel de raspuns decat cel pe un regim: chenar propriu, cu dunga de accent. */
.bloc-set {
  border: 1px solid var(--c-linie-tare); border-left: 3px solid var(--c-accent);
  border-radius: var(--r-2); padding: var(--sp-3);
}
/* .tabel-set nu redefineste tabelul - el este deja .tabel.mic, ca toate celelalte din
   rezultat -, ci adauga numai ce ii este propriu: randurile se citesc pe verticala, iar
   regimul se vede din prima daca a intrat sau nu in banda. */
.tabel-set td { vertical-align: top; }

/* ====================== COMPARATIA REGIMURILOR PE ANI si ANUL INTREG
   Capul de an desparte tabelele fara sa fie un titlu de sectiune: sectiunea este una
   singura, anii sunt doua bucati ale ei. */
.an-cap {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .5px;
  color: var(--c-accent);
}
.rez-bloc > .an-cap:first-of-type { margin-top: var(--sp-2); }
/* randul care desparte varfurile de goluri: nu este un rand de date, este o eticheta */
.tabel-an tr.grup-inc td {
  padding-top: var(--sp-2); padding-bottom: 2px;
  border-bottom: 1px solid var(--c-linie-tare);
  font-size: var(--t-0); font-weight: 700; letter-spacing: .9px;
  color: var(--c-text-3); background: transparent;
}
.tabel-an tr.grup-inc:first-child td { padding-top: 0; }
.tabel-an tr.bine td:first-child { border-left: 2px solid var(--c-bine); }
.tabel-an tr.rau  td:first-child { border-left: 2px solid var(--c-rau); }
/* randul pliant cu tensiunile aduse in banda de o bobina */
.tabel-set tr.rand-noduri td { padding: 0 var(--sp-2) var(--sp-2); border-bottom: 0; }
.tabel-set tr.rand-noduri .pliant { margin: 0; }
.tabel-set tr.bine td:first-child { border-left: 2px solid var(--c-bine); }
.tabel-set tr.rau  td:first-child { border-left: 2px solid var(--c-rau); }
/* Randul de diagnostic se intinde peste toate coloanele si poarta o fraza intreaga: el
   TREBUIE sa se rupa pe randuri. Fara asta se taia la marginea din dreapta a tabelului
   tocmai acolo unde se spunea de ce nu s-a putut ("...in meniul de reglaj pe un sing"). */
.tabel-set tr.rand-diag td {
  border-bottom: 1px solid var(--c-linie-tare); padding-top: 0;
  white-space: normal; line-height: 1.45;
}
/* 'slab' exista in pagina numai lipit de '.nota'; blocul de set il foloseste si singur,
   pe bucati de text secundar dintr-un rand de tabel */
.bloc-set .slab { color: var(--c-text-3); font-weight: 400; }
.eticheta-regim {
  display: inline-block; margin: 1px 3px 1px 0; padding: 0 6px;
  border-radius: 999px; border: 1px solid var(--c-linie-tare);
  background: var(--c-fund-2); color: var(--c-text-2);
  font-size: var(--t-0); white-space: nowrap;
}

.set-rezumat { margin-top: var(--sp-2); font-size: var(--t-1); line-height: 1.5; }
.set-rezumat:empty { display: none; }
.set-bob {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0; border-top: 1px solid var(--c-linie);
}
.set-bob:first-child { border-top: 0; }
.set-bob .sb-nume { flex: 1 1 auto; min-width: 0; color: var(--c-text-tare); font-weight: 600; }
.set-bob .sb-mvar {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--c-accent); font-weight: 700;
}
.set-bob .sb-n {
  flex: 0 0 auto; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--c-linie-tare); color: var(--c-text-3);
  font-size: var(--t-0); font-weight: 700;
}

/* campul pragului: eticheta lunga nu are voie sa se rupa urat, iar glisorul si campul
   numeric stau pe acelasi rand, ca la comanda de reglaj */
.camp-prag { margin-top: var(--sp-2); margin-bottom: 0; }
.camp-prag > label { line-height: 1.35; }
.camp-prag input[type="number"] { flex: 0 0 78px; width: 78px; }

/* INDICATORUL VIU. Doua randuri: cifrele cerute (cate laturi echivalente se deseneaza
   si cate insule mai raman) si, dedesubt, detaliile marunte. Cifrele sunt tabulare, ca
   sa nu joace latimea in timpul tragerii glisorului. */
.ech-stare {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-accent);
  border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
}
.ech-stare:empty { display: none; }
.ech-stare .r1 { color: var(--c-text-2); }
.ech-stare .r1 b { color: var(--c-text-tare); font-weight: 700; }
.ech-stare .r2 { margin-top: 2px; color: var(--c-text-3); }
/* cat timp se asteapta raspunsul serverului, chenarul se stinge: se vede ca cifrele
   de pe ecran nu mai sunt cele ale pragului tocmai ales */
.ech-stare.lucru { border-left-color: var(--c-linie-tare); }
.ech-stare.lucru .r1 b { color: var(--c-text-2); }
.ech-stare.rau { border-left-color: var(--c-rau); }
.ech-stare.rau .r1 { color: var(--c-rau); }
/* insulele ramase: una singura este rezultatul bun, mai multe sunt o atentionare */
.ech-stare b.una { color: var(--c-bine); }
.ech-stare b.multe { color: var(--c-atentie); }

/* nota grupului si nota de insule: aceeasi caseta ca .nota-ordine, dar mai stransa */
.nota-ech { margin-top: var(--sp-2); }
.nota-insule { margin-top: var(--sp-2); }
/* insulele nu sunt un defect, deci nota lor nu se scrie in rosu; borderul se muta insa
   pe atentie cand la pragul ales raman mai multe insule decat una */
.nota-insule[data-fel="multe"] { border-left-color: var(--c-atentie); }

/* nota din cardul nodului selectat, pentru un nod dintr-o insula mica */
.nota-insula {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.4; color: var(--c-text-2);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-atentie);
  border-radius: var(--r-1);
}
/* cardul nodului poarta clasa .gol cat timp arata textul de asteptare; nota nu are ce
   cauta acolo, dar daca ar ajunge, nu trebuie sa se vada cursiva de text lipsa */
#infoNod.gol .nota-insula { font-style: normal; }

/* --- legenda schemei ---
   Legenda sta in panoul din stanga, deci nu poate acoperi niciodata desenul. Ii
   trebuie insa loc pentru trei lucruri deodata: nivelurile de tensiune, simbolurile
   si conventia sagetilor. De aceea are inaltime marginita si se deruleaza singura,
   in loc sa impinga celelalte carduri afara din panou.
   Numele de clase sunt contractul cu app.js:
     .bara .capete  - scara continua si capetele ei (colorare dupa U, dU, incarcare)
     .rand .el      - un rand de elemente, fiecare cu o mostra si un text
     .pata          - mostra de culoare; are FORMA DE BARA, ca simbolul de nod
     .linie-ex      - mostra de latura (linie subtire)
     .sect .cap     - o grupa cu titlul ei
     .pic           - pictograma de sageata: bara, bucata de latura, triunghi
     .tri-plin      - triunghi PLIN  = putere activa P
     .tri-gol       - triunghi GOL   = putere reactiva Q
     .stanga        - intoarce triunghiul (sensul opus)
     .nota .slab    - text explicativ marunt
   Culoarea se da din app.js prin style="color:..." pe element: mostrele folosesc
   currentColor, deci nu trebuie repetata nicaieri. */
/* Grupul legendei (cerinta 3): titlul, bifa #chkLegenda si legenda propriu-zisa. Cand
   bifa este stinsa, app.js pune atributul hidden pe #legenda. */
.grup-legenda .bifa { margin-bottom: var(--sp-1); }

#legenda {
  --legenda-fund: var(--c-fund-2);   /* fondul pe care sta legenda; vezi .tri-gol */
  margin-top: var(--sp-2);
  max-height: 260px; overflow-y: auto; overflow-x: hidden;
  font-size: var(--t-1); color: var(--c-text-2);
}
#legenda:empty { display: none; }
#legenda[hidden] { display: none; }

/* scara continua: colturi drepte, ca tot ce se deseneaza in schema */
#legenda .bara {
  height: 10px; border-radius: 0; margin: var(--sp-1) 0 2px;
  border: 1px solid var(--c-linie);
}
#legenda .capete { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

#legenda .sect { margin-top: var(--sp-2); }
#legenda .sect:first-child { margin-top: 0; }
#legenda .cap {
  margin-bottom: 2px;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
}

#legenda .rand { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); }
#legenda .el { display: flex; align-items: center; gap: var(--sp-2); min-height: 18px; }
/* randul de sageti are explicatii lungi: fiecare element pe randul lui */
#legenda .rand.coloana { flex-direction: column; align-items: flex-start; gap: 3px; }
#legenda .rand.coloana .el { align-items: flex-start; }

#legenda .slab, #legenda .nota { margin-top: var(--sp-1); color: var(--c-text-3); }
#legenda .nota { font-style: italic; line-height: 1.35; }

/* Mostra unui nivel de tensiune: o BARA, adica exact simbolul de nod din schema -
   segment drept, mai gros decat latura, cu colturi drepte. Fara border-radius si
   fara chenar: un contur de 1 px ar manca jumatate dintr-o bara de 5 px. */
#legenda .pata {
  flex: 0 0 auto;
  width: 20px; height: var(--sch-bara-px);
  border-radius: 0; border: 0;
  background: currentColor;
}
#legenda .linie-ex {
  flex: 0 0 auto;
  width: 18px; height: var(--sch-latura-px);
  background: currentColor; border: 0; border-radius: 0;
}

/* Pictograma de sageata: [bara] --|>-- . Bara este segmentul vertical din stanga,
   latura este linia subtire, triunghiul arata sensul. */
#legenda .pic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0;
  width: 42px; height: 14px;
}
#legenda .pic .b {
  flex: 0 0 auto; width: var(--sch-latura-px); height: 12px;
  background: currentColor; border-radius: 0;
}
#legenda .pic .l {
  flex: 1 1 auto; height: var(--sch-latura-px);
  background: currentColor; border-radius: 0;
}

/* Triunghiurile. PLIN = P, GOL = Q; nu se pot confunda nici in alb-negru.
   Interiorul triunghiului gol este pictat in culoarea fondului legendei: asa
   conturul ramane curat la orice marime, fara clip-path si fara imagini. */
#legenda .tri-plin, #legenda .tri-gol {
  position: relative; flex: 0 0 auto;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}
/* Triunghiul interior este cel exterior micsorat spre centrul cercului inscris, cu
   1,5 px. Varfurile exterioare sunt (0,0) (0,10) (8,5); raza cercului inscris este
   2,77 px, deci factorul de micsorare este (2,77 - 1,5) / 2,77 = 0,46. Rezulta un
   triunghi interior cu spatele in x = 1,5 si varful in (5,5) - de aici valorile de
   mai jos. Ele se socotesc fata de cutia de umplutura a parintelui, care pentru un
   element de latime zero cu chenare sta la (8 px, 5 px). */
#legenda .tri-gol::after {
  content: "";
  position: absolute; top: -2px; left: -6.5px;
  width: 0; height: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 4px solid var(--legenda-fund);
}
#legenda .stanga { transform: scaleX(-1); }

/* mostra de simbol desenat (transformator, shunt, generator): loc pentru un SVG mic */
#legenda .sim {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 14px;
  color: var(--dg-simbol);
}
#legenda .sim svg { display: block; width: 100%; height: 100%; overflow: visible; }
#legenda .sim svg * { stroke-linecap: butt; stroke-linejoin: miter; }
/* Mostre mai mari, de cand legenda din panou desfasoara chiar blocurile legendei din
   desen: suntul si nodul de frontiera au bara, simbolul si legatura la pamant una sub
   alta (deci sunt mai INALTE), iar cele trei cazuri de citire ale lui Q sunt o mini-schema
   bara - sageata - latura - sageata - bara (deci mai LATE). Fara locul de aici, mostrele
   s-ar strivi intr-o caseta de 22 x 14 px si nu s-ar mai vedea sensurile. */
#legenda .sim.inalt { height: 20px; }
#legenda .sim.caz { width: 46px; }

/* Mostrele echivalentului retelei externe. Latimea este mai mare decat la celelalte
   simboluri, altfel intr-o mostra de 22 px nu se vad decat doua-trei intreruperi si
   linia pare plina - adica exact ce nu trebuie sa para. Culoarea vine de la --dg-ech,
   nu de la currentColor: albul echivalentului nu se mosteneste de la nimic. */
#legenda .sim.ech { width: 30px; color: var(--dg-ech); }
/* mostra de sunt este mai INALTA decat late: are bara, cutia si legatura la pamant una
   sub alta, exact ca simbolul din schema */
#legenda .sim.ech.sunt { height: 21px; }
#legenda .el.ech-el { align-items: center; }


/* --------------------------------------------------------------- 6. zona schemei ---- */
#zonaSchema {
  display: flex; flex-direction: column;
  background: var(--c-fund-0);
  border-left: 0;
}

/* Bara se INFASOARA cand nu incape. De cand comenzile schemei au trecut aici, randul
   cere vreo 1 600 px; pe o fereastra mai ingusta, fara infasurare, butoanele de export
   si campul de cautare ieseau pur si simplu din ecran si nu se mai putea ajunge la ele -
   masurat pe 1 600 x 900, unde bara are 1 280 px. Infasurate, se muta pe randul al
   doilea si raman la indemana. */
.bara-unelte {
  flex: 0 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-1);
  border-bottom: 1px solid var(--c-linie);
}
.bara-unelte .et {
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3); white-space: nowrap; margin-right: var(--sp-2);
}
/* Grupul de butoane din bara de unelte poarta aceeasi clasa .grup ca grupul din panou,
   dar acolo .grup inseamna "grupa despartita printr-o linie de sus"; aici nu trebuie
   nici linie, nici spatii pe verticala. */
.bara-unelte .grup {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: 0; padding-top: 0; border-top: 0;
}
.bara-unelte .spatiu { flex: 1 1 auto; min-width: 0; }
.bara-unelte .cauta { flex: 0 1 220px; width: 220px; min-width: 150px; }

/* ============================ CELE DOUA RANDURI ALE BAREI
   Al doilea rand nu mai are chenar de jos - dedesubtul lui vine fasia legendei sau chiar
   schema - si nu repeta fundalul, ca cele doua sa se citeasca drept una singura. */
.bara-unelte-2 { border-bottom: 0; padding-top: 0; }

/* STRANGEREA BUTOANELOR DIN BARA.
   Pe primul rand incap acum si cele trei comenzi de la capat (Iesiri din banda, Noduri
   tari / slabe, Detalii). Ca sa incapa, butoanele randului s-au stramtat: 6 px de o parte
   si de alta in loc de 10, si fara spatiere de litera. Masurat la 1600 px latime de
   fereastra, atat a fost de ajuns; sub aceasta latime randul se rupe singur, ca inainte.
   Nu se stramteaza si butoanele din panou - acolo latimea nu lipseste. */
.bara-unelte button.mic { padding: 3px 5px; letter-spacing: 0; }
.bara-unelte button.ico { min-width: 24px; padding: 3px 5px; }
/* etichetele de grup ("sageti", "valoare U"): raman, fiindca ele dau intelesul butoanelor
   care si-au pierdut U-ul, dar nu mai risipesc pe spatiere de litera */
.bara-unelte .et-mic { letter-spacing: .2px; margin-right: 1px; }
.bara-unelte .grup { gap: 2px; }
.bara-unelte .et-mic { margin-right: 2px; }
/* si spatiul DINTRE grupuri se strange: cinci grupuri pe rand inseamna cinci spatii.
   Se strang si marginile barei insesi - ele nu poarta nimic si costa 16 px pe rand. */
.bara-unelte { gap: var(--sp-1) 3px; padding-left: var(--sp-2); padding-right: var(--sp-2); }
.bara-unelte .grup { gap: 1px; }
.bara-unelte .et { margin-right: var(--sp-1); letter-spacing: .3px; }
/* Fasia de culoare este singurul lucru de pe rand care nu poarta nicio cifra si nicio
   comanda: cand latimea lipseste, ea cedeaza prima. 96 -> 64 px; reperul de 1,00 ramane
   pe mijloc si gradientul se citeste la fel. */
.bara-unelte .banda-u .bu-fasie { width: 40px; }
.bara-unelte .banda-u { gap: 3px; margin-left: 2px; }

/* RESET. Singurul buton al barei care ARUNCA un calcul, nu schimba o afisare: se scrie
   apasat, cu litera mare si cu chenar propriu, ca sa se deosebeasca de restul inainte de
   a fi apasat. Culoarea este cea de atentie, nu cea de primejdie: nu strica nimic din
   datele beneficiarului, sterge numai rezultate care se pot calcula din nou. */
/* ================================ EXPORTUL, INTR-UN SINGUR BUTON
   Trei butoane alaturate mancau jumatate din rand pentru o comanda care se da rar. Acum
   este unul, iar cele trei stau intr-un mic meniu care se deschide sub el. Meniul se
   deschide la trecerea cu mouse-ul, la focalizare de la tastatura si la apasare
   (aria-expanded, pus de app.js) - toate trei, ca sa mearga si cu degetul pe ecran tactil. */
.grup-export { position: relative; }
.buton-export { font-weight: 600; }
.buton-export .ex-sageata { margin-left: 3px; opacity: .7; font-size: 9px; }
.meniu-export {
  position: absolute; z-index: 60;
  top: calc(100% + 3px); left: 0;
  display: none; flex-direction: column; gap: 1px;
  min-width: 100%;
  padding: 3px;
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-2);
  box-shadow: var(--umbra-2, var(--umbra-1));
}
.grup-export:hover > .meniu-export,
.grup-export:focus-within > .meniu-export,
.grup-export > .buton-export[aria-expanded="true"] + .meniu-export { display: flex; }
/* inauntrul meniului butoanele sunt randuri, nu pastile: pe toata latimea, la stanga */
.bara-unelte .meniu-export button.mic {
  justify-content: flex-start; text-align: left; white-space: nowrap;
  padding: 4px 10px;
}

.buton-reset {
  flex: 0 0 auto;
  font-weight: 700; letter-spacing: .8px;
  color: var(--c-atentie);
  background: rgba(255, 180, 84, .10);
  border-color: var(--c-atentie);
}
.bara-unelte button.mic.buton-reset { padding: 3px 12px; letter-spacing: .8px; }
.buton-reset:hover:not(:disabled) {
  background: rgba(255, 180, 84, .22); border-color: var(--c-atentie);
  color: var(--c-atentie);
}
.buton-reset:focus-visible { outline: 2px solid var(--c-atentie); outline-offset: 2px; }

/* =================================================================================
   COMENZILE SCHEMEI, MUTATE DIN DESEN IN BARA
   Erau desenate ca un strat plutitor peste plansa si ii luau o coloana din latime.
   Aici sunt butoane obisnuite: nu costa niciun pixel de desen. Fiecare pachet isi
   poarta numele la stanga si este despartit de vecin printr-o linie subtire.
   ================================================================================= */
.bara-unelte .grup-schema {
  gap: 3px;
  padding-left: var(--sp-2);
  border-left: 1px solid var(--c-linie);
}
.bara-unelte .et-mic {
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: .4px;
  color: var(--c-text-3); white-space: nowrap; margin-right: 3px;
}
/* Butonul aprins se vede fara nicio indoiala: fond de accent si text pe el, nu numai
   un chenar - la un rand de sase butoane, chenarul singur nu se citeste dintr-o
   privire. */
.bara-unelte .mic.activa {
  background: var(--c-accent); border-color: var(--c-accent); color: #08121f;
  font-weight: 600;
}

/* Banda de culoare a tensiunii, 0,90 - 1,10. Sta la capatul pachetului "valoare U",
   fiindca ea este cheia de citire a celor doua comenzi de dinaintea ei. */
.banda-u {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: var(--sp-1);
  font-size: var(--t-0); color: var(--c-text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.banda-u .bu-fasie {
  position: relative; display: inline-block; width: 96px; height: 7px;
  border-radius: 2px; overflow: hidden;
  /* CELE NOUA OPRIRI SUNT EXACT CampU.opriri('bulina') din campU.js, adica exact
     culorile bulinelor de pe bare si ale barelor din profilul tensiunii. Ce era
     inainte: #3b6fd4 -> #4ec9a5 -> #e05c5c, adica la 1,05 pu fasia arata #949582 in
     loc de #817e54 (dE00 = 11,5) si se termina chiar in rosul de 400 kV. Opririle din
     mijloc nu sunt de podoaba: fara ele browserul trage o dreapta de la un capat la
     altul si rateaza indoirea scarii de la 1,00 pu.
     CAND JAVASCRIPT MERGE, fasia nu se coloreaza de aici: app.js o picteaza din
     CampU.opriri (functia picteazaBandaU), deci nu are cum sa ramana in urma. Ce
     scrie aici este ce se vede pana atunci si ce se vede daca modulul lipseste. */
  background: linear-gradient(90deg,
      #2b6ce0 0%, #287ec2 12.5%, #258fa5 25%, #22a187 37.5%, #1fb26a 50%,
      #50985f 62.5%, #817e54 75%, #b26449 87.5%, #e34a3e 100%);
}
/* reperul de 1,00, chiar pe mijlocul fasiei */
.banda-u .bu-fasie i {
  position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
  background: var(--c-text); opacity: .85;
}
/* Cand nici maparea, nici pastilele nu sunt pornite, culoarea nu spune nimic si banda
   se sterge - ramane la vedere, dar nu mai cere atentie. */
.banda-u.stinsa { opacity: .32; }

/* =================================================================================
   FASIA DE LEGENDA, pe un singur rand, sub bara de unelte
   Simbolurile vin gata desenate de la modulul Diagrama (aceleasi mostre care se
   desenau pe schema). Fasia se infasoara daca fereastra este ingusta; nu se taie.
   ================================================================================= */
.fasia-legendei {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3);
  background: var(--c-fund-1);
  border-bottom: 1px solid var(--c-linie);
}
/* ca si la benzile rulante: display pe clasa bate [hidden] al browserului, deci ascunderea
   se scrie anume - altfel fasia stinsa ar continua sa manance din inaltimea schemei */
.fasia-legendei[hidden] { display: none; }
/* Spatiul dintre simboluri este STRANS anume: cu var(--sp-3) fasia se rupea pe doua
   randuri la 1 600 px, iar ea trebuie sa fie de un singur rand. Cand fereastra este si
   mai ingusta se infasoara totusi - mai bine doua randuri decat simboluri taiate. */
.fasia-legendei .fl-simboluri {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 13px;
  flex: 1 1 auto; min-width: 0;
}
.fasia-legendei .fl-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-0); color: var(--c-text-2); white-space: nowrap;
}
/* Mostrele se deseneaza pe 26 x 22 px; in fasie li se taie din latime cu o fereastra de
   decupare, fiindca desenul lor sta in primii 22 de pixeli. Patru pixeli pe mostra, de
   treisprezece ori, sunt inca un cuvant care incape pe rand. */
.fasia-legendei .fl-item svg {
  display: block; flex: 0 0 auto; width: 22px; margin-right: -2px;
}
.fasia-legendei .fl-culoare {
  display: inline-block; width: 16px; height: 6px; border-radius: 1px;
}
/* numarul nodurilor cu U in afara benzii: ingrosat SI in culoarea marcajului de pe
   schema, ca ochiul sa lege cifra de chenarele rosii */
.fasia-legendei .fl-afara { color: var(--dg-afara, #ff3b30); font-weight: 700; }
.fasia-legendei > .mic { flex: 0 0 auto; }

/* =================================================================================
   BENZILE RULANTE: iesirile din banda si clasamentul tare / slab
   Se arata numai cat butonul lor este aprins. Continutul curge IN BUCLA: inauntru sunt
   mai multe copii ale lui, iar banda se muta cu lungimea EXACTA a unei copii, asa ca la
   capatul miscarii se afla in acelasi loc din care a pornit si trecerea nu se vede.
   Viteza este aceeasi la amandoua, fiindca durata se socoteste din lungime.
   ================================================================================= */
.fasia-date {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-3);
  background: var(--c-fund-1);
  border-bottom: 1px solid var(--c-linie);
  min-height: 24px;
}
/* HIDDEN TREBUIE SA ASCUNDA CU ADEVARAT. Regula "display:flex" de mai sus, fiind pe o
   clasa, bate regula browserului pentru [hidden] (care este pe un atribut si are
   specificitate mai mica): fara randul de mai jos, fasia stinsa ramanea la vedere si
   tot lua 25 de pixeli din inaltimea schemei - masurat. */
.fasia-date[hidden] { display: none; }
.fasia-date .fd-et {
  flex: 0 0 auto;
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: .4px;
  color: var(--c-text-3); white-space: nowrap;
}
.fasia-date .fd-pista {
  position: relative; overflow: hidden;
  flex: 1 1 auto; min-width: 0; height: 20px;
  /* capetele se sting, ca textul sa nu para retezat de marginea pistei */
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.fasia-date .fd-crawl {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center;
  height: 20px; white-space: nowrap;
  font-size: var(--t-0); font-variant-numeric: tabular-nums;
  will-change: transform;
}
.fasia-date .fd-crawl.curge {
  animation: fd-curge var(--fd-durata, 40s) linear infinite;
}
/* -1 x lungimea UNEI copii: la capat, copia a doua a ajuns exact unde era prima */
@keyframes fd-curge {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--fd-drum, -100%)); }
}
/* La trecerea cu mouse-ul banda se opreste: altfel nu se poate citi un nod anume. */
.fasia-date .fd-pista:hover .fd-crawl.curge { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fasia-date .fd-crawl.curge { animation: none; }
  .fasia-date .fd-pista { overflow-x: auto; }
}
.fasia-date .fd-set { display: inline-flex; align-items: center; gap: var(--sp-4); }
.fasia-date .fd-set + .fd-set { margin-left: var(--sp-4); }
.fasia-date .fd-nod { display: inline-flex; align-items: baseline; gap: 5px; }
.fasia-date .fd-nod b { font-weight: 700; }
.fasia-date .fd-val { color: var(--c-text-2); }
.fasia-date .fd-poz {
  display: inline-block; min-width: 20px; text-align: right;
  color: var(--c-text-3); font-weight: 600;
}
.fasia-date .fd-gol { color: var(--c-text-3); font-style: italic; }

.fd-fel {
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: .3px;
  padding: 0 4px; border-radius: 2px;
}
.fd-fel.slab { background: rgba(255, 176, 32, .18); color: #ffb020; }
/* 'tare' era VERDE #4ec9a5 - adica EXACT --kv-110, culoarea nivelului de 110 kV. Trece in
   bleu, culoarea pe care o are si bara nodului tare (.bo-bara.fel-tare), fiindca
   beneficiarul a cerut "portocaliu fata de bleu" si fiindca eticheta si bara nu au voie sa
   spuna lucruri deosebite despre acelasi nod. Se schimba in TREI locuri deodata - fasia
   de sub schema (scrieFasiaTari), tabelul bobinelor din htmlTariSlabe si capul fiecarui
   nod din fereastra de sensibilitati -, si asta se spune, nu se strecoara.
   Masurat pe fundul panoului: #4da3ff are L* 65,7 si contrast 7,32:1 pe --c-fund-0, iar
   fata de portocaliul lui 'slab' (#ffb020) sta la dE00 54,9 / 62,1 / 57,6 / 64,1 in
   vedere normala / deuteranopie / protanopie / tritanopie. */
.fd-fel.tare { background: var(--c-accent-slab); color: var(--c-accent); }

/* =================================================================================
   GRAFICE DE BARE ORIZONTALE, in HTML
   Un rand = eticheta, pista, bara, cifra. Se desenea cu elemente, nu pe panza: textul
   se poate selecta si copia, se mareste cu pagina fara sa se pixeleze, si nu cere
   niciun modul de desen. Scara este comuna pe grafic (vezi bareOrizontale in app.js).
   ================================================================================= */
.bo { display: flex; flex-direction: column; gap: 2px; }
.bo-rand {
  display: grid; grid-template-columns: minmax(90px, 30%) 1fr minmax(74px, auto);
  align-items: center; gap: var(--sp-2);
  font-size: var(--t-1);
}
.bo-et {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text-2);
}
.bo-pista {
  position: relative; height: 11px; min-width: 0;
  background: var(--c-fund-0); border-radius: 2px; overflow: hidden;
}
.bo-bara {
  display: block; height: 100%;
  background: var(--c-accent); border-radius: 2px;
}
/* valorile negative se vad ca atare: alta culoare, nu doar alt numar */
.bo-bara.neg { background: var(--c-atentie, #e0834a); }
.bo-bara.evidenta { background: #ffb020; }
.bo-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text); }
.bo-rand.evidenta .bo-et { color: #ffb020; font-weight: 600; }
/* --------------------------------------------------- FELUL NODULUI, PE BARA
   CERINTA BENEFICIARULUI, textual: "vreau sa pastrezi evidentierea nodurilor slabe
   (portocaliu fata de bleu)" si "vreau sa pui in evidenta si nodurile iesite din banda
   (barele sa aiba conturul rosu si sa pui o legenda in sensul asta)".

   CE ERA INAINTE. Portocaliul exista, dar insemna cu totul altceva: .bo-bara.evidenta
   era "nodul insusi" in bateria de sensibilitati si "bobina propusa de optimizare" in
   tabelul bobinelor. Eticheta .fd-fel.slab era portocalie, dar .fd-fel.tare era VERDE
   #4ec9a5 - adica exact --kv-110, culoarea nivelului de 110 kV -, deci "tare" nu era
   bleu nicaieri. De aceea felul nodului primeste clase NOI si semantice (fel-slab /
   fel-tare / fel-nul), iar 'evidenta' ramane ce a fost - marcajul pus cu mana -, ca sa
   nu capete un al treilea inteles.

   CELE TREI CULORI SI DE CE SUNT ACESTEA (dE00 in vedere normala / deuteranopie /
   protanopie / tritanopie, pe culorile trecute prin simularea Machado-Oliveira-
   Fernandes 2009 la severitate 1,0 - aceeasi masura ca la paleta nivelurilor):
       slab #ffb020 fata de tare #4da3ff : 54,9 / 62,1 / 57,6 / 64,1
       slab #ffb020 fata de nul  #8899ad : 40,0 / 42,9 / 40,6 / 37,6
       tare #4da3ff fata de nul  #8899ad : 14,1 / 16,2 / 16,2 / 14,3
   Toate trei stau peste pragul de 12 pe care si-l pune paleta nivelurilor, si in toate
   patru vederile. Contrastul pe fundul pistei (--c-fund-0 #0b0f14; SC 1.4.11 cere 3:1
   pentru grafica): #ffb020 10,51:1 ; #4da3ff 7,32:1 ; #8899ad 6,60:1.

   'fel-nul' NU este o culoare de umplutura oarecare: este raspunsul la o capcana. In
   bateria unui nod, coloana intai are bare care SUNT noduri (injectii de reactiv), dar
   coloana a doua este de consemne de generator si a treia de ploturi de transformator -
   ele nu au banda de tensiune si nu au fel. Daca ar fi ramas in bleul implicit, s-ar fi
   citit toate drept "tare", iar legenda ar fi mintit. Asa poarta o culoare a lor,
   numita in legenda. */
.bo-bara.fel-slab { background-color: #ffb020; }
.bo-bara.fel-tare { background-color: var(--c-accent); }
.bo-bara.fel-nul  { background-color: #8899ad; }

/* SEMNUL MINUS NU MAI POATE STA PE CULOARE. .bo-bara.neg folosea var(--c-atentie)
   #ffb454, adica practic acelasi portocaliu cu 'slab' #ffb020 - masurat, dE00 = 5,0,
   sub orice prag. De indata ce portocaliul inseamna "nod slab", valoarea negativa
   trebuie sa se vada altfel: pe TEXTURA, nu pe culoare. Dungile merg si pentru cine nu
   deosebeste culorile, si nu ocupa niciun pixel in plus.
   Se scrie 'background-image' peste 'background-color' pus mai sus, nu prescurtarea
   'background': prescurtarea ar sterge culoarea felului. */
.bo-bara.neg.fel-slab, .bo-bara.neg.fel-tare, .bo-bara.neg.fel-nul {
  background-image: repeating-linear-gradient(135deg,
      rgba(11, 15, 20, .55) 0 2px, rgba(11, 15, 20, 0) 2px 5px);
}

/* CONTURUL ROSU AL NODURILOR IESITE DIN BANDA.
   De ce box-shadow si nu border: .bo-pista are height 11px FIX si overflow hidden, iar
   un 'border: 1px solid' ar creste randul cu 2 px - pe 248 de randuri inseamna o
   jumatate de ecran de derulare in plus si o diagrama care sare cand se aprinde
   marcajul. box-shadow: 0 0 0 1px nu ocupa loc in asezare.

   REGULA CASEI SI CUM SE TINE. Scara de tensiune se deseneaza NUMAI ca UMPLUTURA,
   nivelul de tensiune NUMAI ca TRASATURA (vezi nota lunga de la inceputul fisierului).
   Conturul de aici este o trasatura, iar rosul lui #ff6b6b (--c-rau) sta la dE00 = 6,9
   de --kv-400 #e05c5c - adica prea aproape ca sa se poata deosebi de rosul nivelului de
   400 kV. Doua lucruri il salveaza, si amandoua sunt masurate, nu presupuse:
     1. In fereastra de sensibilitati NU se deseneaza niciun nivel de tensiune: nu exista
        acolo nicio bara de nod si nicio latura, ci numai diagrame cu bare orizontale.
        Cele doua semne nu se pot intalni pe acelasi desen, deci nu se pot confunda.
     2. Semnul nu sta numai pe culoare: langa eticheta randului se scrie cuvantul
        "peste" sau "sub" (.bo-semn), deci iesirea din banda se citeste si fara culori.
   Fata de umpluturile din aceeasi fereastra rosul se deosebeste bine: fata de 'slab'
   #ffb020 dE00 = 36,4 / 14,3 / 23,3 / 14,8, fata de 'tare' #4da3ff 46,0 / 50,5 / 40,2 /
   75,0, fata de 'nul' #8899ad 35,4 / 32,5 / 24,2 / 37,2 - peste prag in toate vederile.
   Contrastul pe fundul pistei: 6,93:1, mult peste cei 3:1 ceruti de SC 1.4.11. */
.bo-rand.afara .bo-pista { box-shadow: 0 0 0 1px var(--c-rau); }
.bo-semn {
  display: inline-block; margin-right: 5px; padding: 0 4px;
  border: 1px solid var(--c-rau); border-radius: 2px;
  color: var(--c-rau);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
/* diagrama goala: era 'nota slab', dar proba tabloului citeste ULTIMUL 'p.nota.slab' din
   fereastra ca fiind nota taierii. O coloana goala nu are voie sa ii ia locul. */
.bo-gol { color: var(--c-text-3); font-style: italic; }

/* --------------------------------------------- PAGINILE FERESTREI DE SENSIBILITATI
   Butoanele de pagina stau in bara ferestrei si arata ca restul comutatoarelor din
   aplicatie (.comutator-u button.mic.activa, .fila.activa): fond de accent slab, text
   de accent, ingrosat. */
.sn-nav.activa {
  background: var(--c-accent-slab);
  border-color: var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
}
/* Randul subpaginilor: chiar pilula treptei a doua din panoul Reglaj (.rg-sub), numai ca
   nu mai umple latimea - in panou are 288 px, aici ar avea o mie si ceva, iar doua
   butoane intinse pe un metru nu se mai citesc ca o pereche. */
.sn-sub {
  width: max-content; max-width: 100%;
  margin: 0 0 var(--sp-3);
}
.sn-sub .rg-sub-buton { flex: 0 0 auto; min-height: 24px; padding: 0 14px; }

/* LEGENDA. Sta LA VEDERE, nu pliata: fara ea, omul ghiceste ce inseamna fiecare culoare.
   Semnul fiecarei intrari este chiar bucata de bara pe care o explica - aceeasi inaltime
   de 11 px ca .bo-pista -, nu o bulina inventata pentru legenda. */
.sn-legenda {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie); border-radius: var(--r-1);
  font-size: var(--t-1); color: var(--c-text-3);
}
.sn-legenda b { color: var(--c-text-2); }
.sn-leg { display: inline-flex; align-items: center; gap: 5px; }
.sn-leg-text { color: var(--c-text-3); font-style: italic; }
.sn-leg-semn {
  flex: 0 0 auto; display: inline-block; width: 22px; height: 11px;
  border-radius: 2px; background: var(--c-fund-0);
}
.sn-leg-semn.slab  { background: #ffb020; }
.sn-leg-semn.tare  { background: var(--c-accent); }
.sn-leg-semn.nul   { background: #8899ad; }
.sn-leg-semn.afara { background: var(--c-fund-0); box-shadow: 0 0 0 1px var(--c-rau); }
.sn-leg-semn.neg   {
  background: #8899ad;
  background-image: repeating-linear-gradient(135deg,
      rgba(11, 15, 20, .55) 0 2px, rgba(11, 15, 20, 0) 2px 5px);
}

/* Nodul iesit din banda, ca sectiune intreaga: aceeasi trasatura rosie, pe muchia din
   stanga. Nu se schimba inaltimea randului si nu se muta nimic. */
.sn-nod.afara { border-left: 2px solid var(--c-rau); padding-left: var(--sp-3); }
/* Diagrama efectului comenzilor din lista: sta LATA, peste toate cele trei coloane,
   fiindca ea raspunde la intrebarea pentru care s-a cerut subpagina. */
.sn-efect { margin: 0 0 var(--sp-3); }
.sn-efect h4 { margin: 0 0 var(--sp-1); font-size: var(--t-1); color: var(--c-text-2); }
.sn-efect h4 .sn-un { color: var(--c-text-3); font-weight: 400; }
.sn-mijloc .sn-cap b { font-size: var(--t-3); }


/* =================================================================================
   FERESTRELE DE SENSIBILITATI
   Bateria de trei grafice sta pe trei coloane; sub 1000 px se strang pe doua, apoi pe
   una. Fiecare nod are eticheta lui intreaga - nume real, cod, numar de bara, tensiune.
   ================================================================================= */
/* ================================ FEREASTRA CELOR DOUA ECHIVALENTE
   Cele doua modele stau ALATURI, pe doua coloane, nu unul sub altul: intrebarea careia ii
   raspunde fereastra este "care din doua", iar raspunsul se citeste comparand. Sub ele, un
   tabel de comparatie rand cu rand, si la urma nota despre cat de mult difera pe regim.
   Textele NU sunt scrise aici si nici in pagina: vin de la /api/echivalente. */
/* Locul lamuririi in corpul sectiunii. In panou este gol si ascuns (atributul hidden din
   index.html); se umple numai cat timp corpul sta in fereastra dedicata.

   ASEZAREA IN FEREASTRA. Corpul mutat al unei sectiuni curge implicit pe trei coloane
   (.fer-mutat > .sec-corp). Aici asta ar fi rau: comenzile ar lua o coloana, iar lamurirea
   s-ar rupe in celelalte doua, cu tabelul de comparatie ajuns la mijloc si prima coloana
   goala sub comenzi. Se stinge deci curgerea pe coloane si se pun cele doua parti ALATURI,
   pe o grila: comenzile la latimea lor din panou, lamurirea pe tot restul - unde isi face
   ea singura cele doua coloane, una pentru fiecare echivalent. */
.ech-lamurire { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-linie); }
.ech-lamurire[hidden] { display: none; }
.ech-lamurire h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--t-3); color: var(--c-text-tare); }
.fer-mutat > .sec-corp:has(> .ech-lamurire:not([hidden])) {
  columns: auto;
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.fer-mutat > .sec-corp > .ech-lamurire:not([hidden]) {
  margin-top: 0; padding-top: 0; border-top: 0;
}
@media (max-width: 1040px) {
  .fer-mutat > .sec-corp:has(> .ech-lamurire:not([hidden])) { grid-template-columns: 1fr; }
  .fer-mutat > .sec-corp > .ech-lamurire:not([hidden]) {
    padding-top: var(--sp-3); border-top: 1px solid var(--c-linie);
  }
}

.ech-fer { display: block; }
.ech-fer-doua {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) { .ech-fer-doua { grid-template-columns: 1fr; } }
.ech-fisa {
  padding: var(--sp-3);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie);
  border-top: 3px solid var(--c-linie-tare);
  border-radius: var(--r-2);
}
.ech-fisa.folosit { border-top-color: var(--c-accent); background: var(--c-fund-2); }
.ech-fisa.folosit.altul { border-top-color: var(--c-atentie); }
.ech-fisa h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--t-3); font-weight: 700; color: var(--c-text-tare);
}
.ech-fisa .ech-pastile {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2);
}
.ech-fisa .ech-pastila {
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--c-linie-tare);
  font-size: var(--t-0); font-weight: 700; letter-spacing: .4px;
  color: var(--c-text-3);
}
.ech-fisa .ech-pastila.acum   { color: var(--c-accent); border-color: rgba(77, 163, 255, .45); }
.ech-fisa .ech-pastila.acum.altul { color: var(--c-atentie); border-color: rgba(255, 180, 84, .45); }
.ech-fisa .ech-pastila.implicit { color: var(--c-bine); border-color: rgba(78, 201, 165, .45); }
.ech-fisa h4 {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}
.ech-fisa p { margin: 0 0 var(--sp-2); line-height: 1.55; }
.ech-fisa p:last-child { margin-bottom: 0; }
/* formulele: monospatiat, pe randuri proprii, ca sa se poata citi indicii */
.ech-formula {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie);
  border-radius: var(--r-1);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-1); line-height: 1.7; color: var(--c-text-2);
  white-space: pre;
}
.ech-tabel { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.ech-tabel th, .ech-tabel td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-linie);
  text-align: left; vertical-align: top; line-height: 1.5;
}
.ech-tabel thead th {
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3); border-bottom: 1px solid var(--c-linie-tare);
}
.ech-tabel thead th.c-ward  { color: var(--c-accent); }
.ech-tabel thead th.c-pasiv { color: var(--c-atentie); }
.ech-tabel td.crit { color: var(--c-text-3); width: 28%; }

.sn-corp { display: block; }
.sn-nod {
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-linie);
}
.sn-nod:first-of-type { border-top: 0; padding-top: 0; }
.sn-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-size: var(--t-3);
}
.sn-cap .sn-cod {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--c-text-2);
}
.sn-cap .sn-bus, .sn-cap .sn-kv, .sn-cap .sn-sens {
  font-size: var(--t-1); font-weight: 400; color: var(--c-text-3);
}
.sn-cap .sn-u { font-size: var(--t-1); font-weight: 600; }
.sn-baterie {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.sn-col { min-width: 0; }
.sn-col h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--t-1); color: var(--c-text-2);
}
.sn-col h4 .sn-un { color: var(--c-text-3); font-weight: 400; }
.sn-mai-departe { border-top: 2px solid var(--c-linie); }
@media (max-width: 1000px) {
  .sn-baterie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .sn-baterie { grid-template-columns: 1fr; }
}

/* Corpul schemei. Aici se rezolva defectul principal:
     .corp-schema  - element flex care se intinde, cu min-height: 0 -> are inaltime reala
     #schemaContainer - absolut peste tot corpul -> marimea lui este intotdeauna cunoscuta
     <svg>         - absolut in container, 100% x 100% -> niciodata inaltime 0 */
.corp-schema {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  overflow: hidden;
}

#schemaContainer {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0)
      0 0 / 32px 32px,
    var(--c-fund-0);
  contain: layout paint;               /* continutul schemei nu poate umfla pagina */
}

/* elementul desenat de modulul Diagrama, direct sau imbracat intr-un DIV */
#schemaContainer > svg,
#schemaContainer > div:has(> svg),
#schemaContainer > div > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

#schemaContainer.trage,
#schemaContainer > svg.trage,
#schemaContainer > div > svg.trage { cursor: grabbing; }

/* Din foaia de stil a aplicatiei se dau desenului numai doua lucruri: familia de
   litere si forma capetelor. Nimic despre culori - o regula CSS bate atributele de
   prezentare din SVG, deci ar anula culorile puse de modulul Diagrama pe fiecare
   nod si pe fiecare latura. */
#schemaContainer svg { font-family: var(--font); }

/* COLTURI DREPTE SI CAPETE TAIATE.
   Schema este monofilara: barele sunt segmente drepte cu colturi drepte, iar
   traseele sunt linii frante din segmente orizontale si verticale, cu cotul
   ascutit. Un stroke-linecap: round lungeste fiecare segment cu jumatate din
   grosime si rotunjeste capetele - la o linie franta ortogonala se vede imediat,
   fiindca fiecare cot devine un bot rotund. Regula de mai jos prinde numai
   elementele de geometrie, niciodata <text>: eticheta isi deseneaza haloul cu
   paint-order: stroke si un stroke-linejoin: round, iar trecerea lui la miter ar
   scoate tepi din colturile literelor.
   Selectorul incepe cu un id, deci bate regulile din <style>-ul pe care modulul
   Diagrama il pune in interiorul SVG-ului (acolo specificitatea este de doua clase).
   ATENTIE: fisierul SVG exportat NU trece prin foaia asta de stil - acolo capetele
   trebuie sa fie deja taiate din modulul Diagrama. */
#schemaContainer svg path,
#schemaContainer svg polyline,
#schemaContainer svg polygon,
#schemaContainer svg line,
#schemaContainer svg rect {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* bara de nod: dreptunghi cu colturile taiate, oricat de gros ar fi trasat */
#schemaContainer svg .dg-bara,
#schemaContainer svg .dg-nod rect { rx: 0; ry: 0; }

#tooltip {
  position: absolute; z-index: 30; display: none;
  max-width: 320px; padding: 7px 10px;
  background: rgba(11, 16, 23, .96);
  border: 1px solid var(--c-accent); border-radius: var(--r-2);
  box-shadow: var(--umbra-2);
  font-size: var(--t-2); color: var(--c-text);
  pointer-events: none;
}
/* modulul Diagrama il arata cu style.display = 'block'; clasa merge si ea */
#tooltip.vizibil { display: block; }
#tooltip b { color: var(--c-accent); }
#tooltip table { border-collapse: collapse; margin-top: var(--sp-1); }
#tooltip td { padding: 1px 0; }
#tooltip td:last-child {
  padding-left: var(--sp-4); text-align: right;
  color: var(--c-text-tare); font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------------- 7. manerul ---- */
/* MANERUL A PLECAT ODATA CU FASIA DE JOS.
   El servea la un singur lucru: sa mute granita dintre schema si fasia de diagrame.
   Fasia nu mai exista - in josul paginii a ramas numai banda de meniuri, de inaltimea
   ei fireasca -, deci manerul nu mai are ce granita sa mute; lasat in pagina, ar fi
   furat 9 px din schema (7 px inaltime plus doua linii) si ar fi promis o tragere care
   nu face nimic. Este scos din pagina, nu doar ascuns cu vizibilitate: cu display:none
   randul lui din grila masoara zero.
   Regulile de infatisare raman scrise mai jos, dupa display, ca sa nu fie nevoie sa fie
   inventate din nou daca vreodata se pune la loc o zona redimensionabila. */
#manerJos {
  display: none;
  height: var(--h-maner);
  background: var(--c-fund-1);
  border-top: 1px solid var(--c-linie);
  border-bottom: 1px solid var(--c-linie);
  cursor: row-resize;
  position: relative;
}
#manerJos::after {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--c-linie-tare);
}
#manerJos:hover::after, #manerJos:focus-visible::after { background: var(--c-accent); }


/* -------------------------------------------------------------- 8. zona diagrame ----
   ZONA DE JOS ESTE ACUM NUMAI BANDA DE MENIURI.
   Beneficiarul, a doua oara si pe litere: "fereastra de jos in care afisezi iesirile
   pentru Reglaj U/Q, Profil de tensiune ... sa o scoti si sa pui banda cu acele meniuri
   in josul ecranului ... SCHEMA POATE UMPLE APROAPE TOT ECRANUL". Prima data s-a facut
   pe jumatate, fiindca s-a hotarat ca fasia ramane "ca sa nu se piarda privirea de
   ansamblu" - adica tocmai lucrul care tinea schema la jumatate de ecran. Hotararea
   aceea s-a anulat.
   Ce a ramas aici: un rand de butoane, lipit de josul paginii, de inaltimea lui
   fireasca. Zona nu creste (nu are decat un copil, banda), nu se deruleaza si nu
   acopera schema - sta pe randul ei din grila, sub randul schemei.
   Continutul filelor (panzele, tabelele, rezultatul reglajului) traieste numai in
   fereastra: vezi .zona-file mai jos. */
#zonaDiagrame {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 0 0 auto;
  overflow: hidden;                   /* nimic nu se deruleaza in banda */
  background: var(--c-fund-1);
  border-top: 1px solid var(--c-linie);
}

/* RANDUL FILELOR, cu bifa "deschide filele in fereastra" la capatul din dreapta
   (cerinta 8). Linia de despartire trece acum pe INVELIS, nu pe lista de file: altfel
   s-ar opri acolo unde se termina filele si bifa ar atarna deasupra unui gol.
   Bifa nu se stramteaza niciodata (flex: 0 0 auto) si nu intra in derularea orizontala a
   filelor: pe o fereastra ingusta filele se deruleaza sub ea, iar comanda ramane la
   vedere - acelasi principiu ca la comutatorul de mod din antet, care nu are voie sa fie
   de gasit. */
.file-bara {
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: var(--sp-3);
  min-width: 0;
  padding-right: var(--sp-3);
  background: var(--c-fund-1);
  /* linia de despartire s-a mutat pe #zonaDiagrame: banda este acum ULTIMUL lucru din
     pagina, deci chenarul ei trebuie sa fie deasupra, nu dedesubt */
}

.bifa-file {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--t-1); color: var(--c-text-3);
  white-space: nowrap;
}
.bifa-file:hover { color: var(--c-text-2); }
.bifa-file input { width: 13px; height: 13px; }
/* sub 1180 px randul filelor este strans: ramane bifa, fara text, cu explicatia in
   'title'. Comanda nu dispare, se scurteaza. */
@media (max-width: 1180px) {
  .bifa-file span { display: none; }
}

/* ETICHETA "REZULTATE" din capatul randului de meniuri.
   Sta in AFARA lui .file, care se deruleaza pe orizontala cand butoanele nu incap: pusa
   inauntru, eticheta ar pleca de sub ochi tocmai cand randul devine plin, adica exact
   cand este mai nevoie de ea. 'flex: 0 0 auto' o tine pe loc, 'align-self: center' o
   aseaza pe mijlocul inaltimii butoanelor. */
.file-et {
  flex: 0 0 auto; align-self: center;
  padding-left: var(--sp-3);
  font-size: var(--t-1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--c-accent);
  white-space: nowrap;
}

.file {
  flex: 1 1 auto;
  display: flex; gap: 2px;
  min-width: 0;
  padding: 0 var(--sp-3) 0 var(--sp-2);
  background: var(--c-fund-1);
  overflow-x: auto; overflow-y: hidden;
}
/* Butonul unui meniu. Semnul de "deschis" sta SUS (border-top), nu jos: banda este
   lipita de marginea de jos a ferestrei, iar o linie pe muchia de jos ar fi cazut peste
   marginea ecranului si nu s-ar fi vazut. */
.fila {
  min-height: 32px;
  padding: 6px 12px;
  background: none; border: none; border-top: 2px solid transparent; border-radius: 0;
  color: var(--c-text-2); font-size: var(--t-2); white-space: nowrap;
}
.fila:hover:not(:disabled) { background: none; color: var(--c-text); }
.fila.activa, .fila[aria-selected="true"] {
  color: var(--c-accent); border-top-color: var(--c-accent); background: none;
}

/* MENIUL DESCHIS ACUM. Cerinta (2): "Butonul apasat se vede ca fiind cel deschis."
   Clasa o pune app.js la deschiderea ferestrei si o ia la inchiderea ei, deci semnul
   spune adevarul si dupa Esc, nu numai la apasare. Se deosebeste de .activa (care
   inseamna doar "ultimul ales") prin fond si prin muchia groasa de sus.

   SEMNUL NU SCHIMBA LATIMEA BUTONULUI. Prima incercare punea o bulina cu ::before si
   ingrosa literele: amandoua latesc butonul, iar cele din dreapta lui se mutau cu vreo
   12 px ori de cate ori se deschidea o fereastra - o banda care tresare la fiecare
   apasare. Aici se schimba numai culori: fondul, culoarea literelor si culoarea unei
   muchii care era deja acolo, plus o umbra interioara, care nu ocupa loc. */
.fila.deschisa {
  color: var(--c-text-tare);
  border-top-color: var(--c-accent);
  background: var(--c-accent-slab);
  box-shadow: inset 0 2px 0 var(--c-accent);
}

/* ZONA DE CONTINUT A FILELOR ESTE SCOASA DIN PAGINA.
   Nu este stearsa din marcaj, si nu din delicatete: doua dintre ferestre - "Tabelul
   nodurilor" si "Circulatii pe laturi" - MUTA panoul adevarat al filei in fereastra si
   il pun la loc la inchidere (app.js, 19f). O copie ar avea aceleasi id-uri ca
   originalul si nu ar purta ascultatorii de filtrare si de sortare, deci elementele
   trebuie sa existe si intre doua deschideri. Cu display:none ele nu ocupa niciun pixel
   in pagina, iar in fereastra se afiseaza normal, fiindca acolo parintele lor este
   corpul ferestrei, nu acest invelis.
   Modulul graficelor nu deseneaza in panze nevazute (are propriul test de vizibilitate)
   si isi face panza LUI, la marimea ferestrei, cand deschide una - deci nu se pierde
   niciun desen si nu se cheltuie niciun cadru pe panze de 0 px. */
.zona-file { display: none; }

.continut {
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  overflow: hidden;
}
.continut.ascuns, .continut[hidden] { display: none; }

.grafic-cap {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--t-2); color: var(--c-text-2);
}
.grafic-cap > span { flex: 1 1 auto; min-width: 0; }
.grafic-cap select, .grafic-cap input, .grafic-cap button, .grafic-cap label { flex: 0 0 auto; }
.grafic-cap select, .grafic-cap input { width: auto; }

/* Fiecare canvas sta absolut intr-un container relativ: asa nu isi poate umfla
   niciodata parintele si primeste mereu o marime reala, in orice fereastra. */
.zona-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie);
  border-radius: var(--r-2);
  overflow: hidden;
}
.zona-canvas > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* panza mica din panou (bilantul): fara chenar, ca sa nu se vada o cutie goala daca
   modulul Grafice nu deseneaza nimic in ea */
.zona-canvas.mini {
  flex: 0 0 84px; height: 84px; margin-top: var(--sp-2);
  background: transparent; border: none;
}

/* --- tabele --- */
.tabel-scroll {
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  overflow: auto;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.tabel-scroll table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;   /* separate: antetul lipit isi pastreaza linia */
  font-size: var(--t-2); font-variant-numeric: tabular-nums;
}
.tabel-scroll th {
  position: sticky; top: 0; z-index: 2;
  padding: 6px 9px;
  background: var(--c-fund-3);
  box-shadow: inset 0 -1px 0 var(--c-linie);
  color: var(--c-text-2); font-weight: 600; text-align: right; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.tabel-scroll th:hover { color: var(--c-text); }
.tabel-scroll th.cresc::after { content: " \25B2"; font-size: 9px; color: var(--c-accent); }
.tabel-scroll th.desc::after  { content: " \25BC"; font-size: 9px; color: var(--c-accent); }
.tabel-scroll td {
  padding: 3px 9px;
  border-bottom: 1px solid var(--c-linie-slaba);
  text-align: right; white-space: nowrap;
}
.tabel-scroll th:first-child, .tabel-scroll td:first-child { text-align: left; }
.tabel-scroll th.txt, .tabel-scroll td.txt { text-align: left; }
.tabel-scroll tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.tabel-scroll tr.sel td { background: var(--c-accent-slab); }
.tabel-scroll tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--c-accent); }

/* culori de semnalizare, folosite in tabele si in text */
.neg   { color: #ff9d9d; }
.poz   { color: #9de8c8; }
.avert { color: var(--c-atentie); }
.rau   { color: var(--c-rau); }
.bine  { color: var(--c-bine); }
.slab  { color: var(--c-text-3); }

#rezVerif { flex: 0 0 auto; font-size: var(--t-2); color: var(--c-text-2); }
#rezVerif .mare {
  font-size: 15px; font-weight: 600; color: var(--c-text-tare);
  font-variant-numeric: tabular-nums;
}
#rezVerif:empty { display: none; }


/* =====================================================================================
   9. ACCESUL, MODUL EDIT, UTILIZATORII SI SALVARILE

   Tot ce s-a adaugat pentru cerintele 4 - 7. Contractul cu app.js este scris in
   comentarii la fiecare grupa: numele de clase pe care le pune si le scoate codul.
   ===================================================================================== */

/* --------------------------------------------------------- 9a. starea sesiunii ----
   Pastila din antet, cu numele contului si drepturile lui. app.js ii pune clasele
   .ok (autentificat) / .lucru (se verifica) / .eroare (sesiune expirata) - aceleasi
   pe care le foloseste si #stareCalc, deci nu se inventeaza un al doilea sistem. */
.grup-sesiune { display: flex; align-items: center; gap: var(--sp-2); }
#stareSesiune { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
/* contul autentificat: pastila capata culoarea de "bine", ca sa se vada dintr-o privire */
#stareSesiune.ok { color: var(--c-bine); border-color: rgba(78, 201, 165, .45); }

/* Lista drepturilor sesiunii, in sectiunea Utilizatori (o scrie app.js din
   GET /api/sesiune): cate o pastila mica pentru fiecare drept detinut. */
.drept-lista { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.drept-lista:empty { display: none; }
.drept-lista .drept {
  display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--c-bine);
  background: rgba(78, 201, 165, .12);
  border: 1px solid rgba(78, 201, 165, .45); border-radius: 999px;
}
.drept-lista .drept.lipsa {
  color: var(--c-text-3);
  background: transparent;
  border-color: var(--c-linie);
  text-decoration: line-through;
}


/* ---------------------------------------------- 9b. controale stinse, cu motiv ----
   U3: ascunderea butoanelor NU este protectie - serverul verifica oricum - dar
   interfata trebuie sa fie cinstita. Ce nu se poate face ramane LA VEDERE, stins, cu
   motivul scris alaturi. Contractul cu app.js: pe butonul stins se pun DOUA lucruri,
       disabled
       title="<motivul>"        explicatia care se citeste la trecerea cu mouse-ul
       data-motiv="<motivul>"   acelasi text, ca marcaj: de el atarna bulina de mai jos
   si butonul NU se scoate din pagina.

   De ce explicatia sta in 'title' si nu intr-o casetuta desenata de foaia de stil.
   Sectiunile panoului sunt containere de derulare (.sec[open] { overflow-y: auto }).
   Am incercat, si am masurat, ambele feluri de casetuta:
     - pozitionata absolut fata de buton: nu se desena deloc;
     - pozitionata fix, ca sa scape de derulare: se desena, dar era taiata o data de
       titlul lipit de marginea de sus (position: sticky) si o data de marginea din
       dreapta a panoului (overflow-x: hidden), la x = 320 px.
   Tooltipul nativ al browserului nu este taiat de nimic, apare si la navigarea cu
   tastatura si il citesc si cititoarele de ecran. Bulina de intrebare de mai jos ramane
   semnul VIZIBIL ca butonul are o explicatie - ca sa nu para stricat - si este desenata
   INAUNTRUL butonului, nu peste coltul lui, tot ca sa nu o taie sectiunea. */
button[disabled][data-motiv] {
  position: relative;
  padding-right: 22px;           /* locul bulinei, ca sa nu stea peste text */
  pointer-events: auto;          /* altfel butonul stins nu ar arata nici tooltipul */
}
button[disabled][data-motiv]::after {
  content: "?";
  position: absolute; top: 2px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-fund-4); border: 1px solid var(--c-linie-tare);
  color: var(--c-text-2); font-size: 9px; font-weight: 700; line-height: 10px;
  text-align: center;
}

/* butonul unei actiuni care strica ceva greu de refacut (stergerea unui cont,
   intoarcerea la geometria calculata): contur rosu, nu fond rosu - fondul rosu il
   face sa arate ca butonul principal si se apasa din obisnuinta */
button.periculos {
  border-color: rgba(255, 107, 107, .55);
  color: #ffb3b3;
}
button.periculos:hover:not(:disabled) {
  background: rgba(255, 107, 107, .14); border-color: var(--c-rau); color: #ffd0d0;
}


/* ------------------------------------------------------------- 9c. modul EDIT ----
   Cerinta 4. Contractul cu app.js:
     <body class="mod-edit">   modul Edit este PORNIT
     #stareEdit .lucru/.ok/.rau  starea scrisa in sectiunea de editare
     #baraEdit                 banda de deasupra schemei; se vede numai in modul Edit
   E1: modul este oprit la incarcarea paginii si ramane blocat dupa "Gata", pana la o
   noua apasare pe #btnEdit. Nimic din foaia asta de stil nu il porneste singur. */

/* RAMA PE TOATA FEREASTRA (cerinta D5: "cat esti in modul Edit, se vede limpede pe toata
   fereastra, nu numai in antet").
   Este un strat FIX peste toata fereastra, scos din calea mouse-ului, deci nu schimba
   nicio dimensiune si nu fura niciun clic: daca ar fi fost un 'border' pe <body>, grila
   paginii s-ar fi micsorat cu 6 px la fiecare intrare si iesire din modul Edit, iar
   modulul Diagrama isi reface incadrarea din marimea containerului - desenul ar fi
   tresarit de fiecare data.
   z-index 900: peste tot ce este in pagina (tooltipul schemei sta la 30, manerul la
   putin), dar SUB ferestrele modale, care sunt in stratul de deasupra al browserului
   (top layer) si nu se compara cu z-index-ul paginii. Deci rama nu acopera niciodata
   fereastra de autentificare. */
body.mod-edit::after {
  content: "";
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  border: 3px solid var(--c-edit);
  box-shadow: inset 0 0 22px var(--c-edit-slab);
}
/* antetul, cat timp se editeaza: aceeasi culoare pe linia de jos si un fond abia
   colorat, ca privirea sa lege comutatorul de rama */
body.mod-edit #antet {
  background: linear-gradient(180deg, rgba(185, 140, 255, .10), var(--c-fund-1));
  border-bottom-color: var(--c-edit-tare);
}

/* sectiunea de editare din panou: cat timp modul este pornit, capata rama violet */
.bara-edit { margin-top: 0; }
body.mod-edit #sec-editare {
  border-color: var(--c-edit-tare);
  box-shadow: 0 0 0 1px var(--c-edit-slab), var(--umbra-1);
}
body.mod-edit #sec-editare > .sec-cap { color: var(--c-edit); }
/* bulina din titlul sectiunii: pulseaza discret cat timp se editeaza */
.sec-semn { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
body.mod-edit .sec-semn {
  background: var(--c-edit); box-shadow: 0 0 6px var(--c-edit);
  animation: puls-edit 1.6s ease-in-out infinite;
}
@keyframes puls-edit { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.edit-stare {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.4;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-linie-tare);
  border-radius: var(--r-1);
  color: var(--c-text-2);
}
.edit-stare.lucru { border-left-color: var(--c-edit); color: var(--c-text); }
.edit-stare.ok    { border-left-color: var(--c-bine); }
.edit-stare.rau   { border-left-color: var(--c-rau); color: #ffb3b3; }

/* BANDA DE DEASUPRA SCHEMEI. Ascunsa in afara modului Edit; nu ocupa loc atunci. */
.bara-edit-schema {
  flex: 0 0 auto;
  display: none;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(180deg, rgba(185, 140, 255, .20), rgba(185, 140, 255, .10));
  border-bottom: 1px solid var(--c-edit-tare);
  font-size: var(--t-2); color: var(--c-text);
}
body.mod-edit .bara-edit-schema { display: flex; }
.bara-edit-schema .be-semn {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-edit); box-shadow: 0 0 8px var(--c-edit);
  animation: puls-edit 1.6s ease-in-out infinite;
}
.bara-edit-schema .be-titlu {
  flex: 0 0 auto;
  color: var(--c-edit); letter-spacing: 1px; font-size: var(--t-1); font-weight: 700;
}
.bara-edit-schema .be-text {
  flex: 1 1 auto; min-width: 0;
  color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* CHENARUL ZONEI SCHEMEI. Este un strat separat, desenat PESTE desen si scos din calea
   mouse-ului (pointer-events: none). Doua motive:
     - nu schimba nicio dimensiune: modulul Diagrama isi calculeaza incadrarea din
       marimea lui #schemaContainer, iar un border adevarat ar muta desenul cu 2 px la
       fiecare intrare si iesire din modul Edit;
     - o umbra interioara pusa pe .corp-schema ar ramane SUB #schemaContainer, care sta
       absolut peste tot corpul si isi are propriul fond - masurat: chenarul aproape nu
       se vedea. Stratul de aici sta deasupra, dar sub tooltip (z-index 30). */
body.mod-edit .corp-schema::after {
  content: "";
  position: absolute; inset: 0; z-index: 25;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--c-edit), inset 0 0 18px var(--c-edit-slab);
}
body.mod-edit #schemaContainer { cursor: default; }
body.mod-edit #schemaContainer.trage { cursor: grabbing; }

/* ELEMENTELE MUTABILE si cele deja mutate. Clasele le pune modulul Diagrama pe
   elementele din SVG:
     .dg-mutabil   element care se poate trage in modul Edit (bara, eticheta, bulina,
                   manerul unui cot de traseu)
     .dg-tras      elementul aflat chiar acum sub mouse, in timpul tragerii
     .dg-manual    element cu abatere manuala salvata (campul 'manual' de la server);
                   se marcheaza SI IN AFARA modului Edit, cum cere E4
     .dg-maner     manerul desenat peste un cot de traseu ortogonal
   Aici NU se atinge nicio culoare de umplere sau de contur: o regula CSS bate
   atributele de prezentare din SVG si ar sterge codul de culoare pe niveluri de
   tensiune. Se folosesc numai cursorul si un halou desenat cu drop-shadow. */
#schemaContainer svg .dg-mutabil { cursor: default; }
body.mod-edit #schemaContainer svg .dg-mutabil { cursor: move; }
body.mod-edit #schemaContainer svg .dg-mutabil:hover {
  filter: drop-shadow(0 0 3px var(--c-edit)) drop-shadow(0 0 6px var(--c-edit));
}
body.mod-edit #schemaContainer svg .dg-mutabil.dg-tras {
  filter: drop-shadow(0 0 4px var(--c-edit)) drop-shadow(0 0 9px var(--c-edit));
}
/* manerul unui cot: mic si discret in repaus, aprins sub mouse */
#schemaContainer svg .dg-maner { opacity: 0; transition: opacity .1s linear; }
body.mod-edit #schemaContainer svg .dg-maner { opacity: .75; cursor: move; }
body.mod-edit #schemaContainer svg .dg-maner:hover { opacity: 1; }
/* elementul mutat manual ramane marcat oricand, si in afara modului Edit */
#schemaContainer svg .dg-manual { filter: drop-shadow(0 0 2px var(--c-edit-tare)); }


/* ------------------------------------------------------- 9d. ferestrele de dialog ----
   Elemente <dialog> native, deschise din app.js cu .showModal(). De acolo vin, fara
   cod scris de noi: fundalul intunecat (::backdrop), inchiderea cu Esc, focalizarea in
   campul cu autofocus si intoarcerea focalizarii la butonul care a deschis fereastra.

   Inchiderea CU CLIC IN AFARA se face fara JavaScript: primul copil al fiecarei
   ferestre este un <form method="dialog"> cu un buton transparent care acopera toata
   fereastra (.dlg-inafara). Fereastra propriu-zisa (.dlg-corp) sta deasupra lui, cu
   position:relative si z-index, deci un clic pe continut nu ajunge la buton. Butonul
   are tabindex="-1", ca sa nu apara in ordinea tabularii.

   De aceea <dialog> nu are aici nici fond, nici chenar, nici umplutura: el este numai
   dreptunghiul care acopera ecranul. Ce se vede este .dlg-corp. */
.dlg {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent;
  overflow: hidden;
  color: var(--c-text);
}
.dlg::backdrop { background: rgba(4, 8, 13, .72); backdrop-filter: blur(2px); }
.dlg:not([open]) { display: none; }

/* zona de clic din afara ferestrei */
.dlg-inafara { position: absolute; inset: 0; margin: 0; }
.dlg-inafara > button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  cursor: default;
}
.dlg-inafara > button:hover { background: transparent; }

/* fereastra propriu-zisa: centrata, cu inaltime marginita si continut derulabil */
.dlg-corp {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(94vw, 560px); max-height: min(92vh, 900px);
  margin: max(3vh, 12px) auto;
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-3);
  box-shadow: var(--umbra-2);
  overflow: hidden;
}
.dlg-ingust { width: min(94vw, 420px); }
/* Ferestrele late poarta tabele cu o coloana pentru fiecare drept. La 860 px tabelul de
   utilizatori nu mai incapea de indata ce un cont capata pastila PAROLA TEMPORARA (951 px
   ceruti, 816 px avuti), iar beneficiarul a spus ca mai adauga drepturi, deci coloane.
   `min(96vw, ...)` tine fereastra in ecran si pe monitoarele mici. */
.dlg-lat    { width: min(96vw, 1080px); }

.dlg-cap {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--c-fund-3);
  border-bottom: 1px solid var(--c-linie);
}
.dlg-cap h2 {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--t-4); font-weight: 600; letter-spacing: .2px; color: var(--c-text);
}
.dlg-cap form { flex: 0 0 auto; margin: 0; }
.dlg-x {
  min-height: 26px; min-width: 26px; padding: 0 6px;
  background: none; border: 1px solid transparent;
  color: var(--c-text-2); font-size: 19px; line-height: 1;
}
.dlg-x:hover { background: var(--c-fund-4); border-color: var(--c-linie-tare); color: var(--c-text-tare); }

.dlg-continut {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.dlg-continut > .camp { margin-bottom: 0; }

.dlg-butoane {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-linie);
}
.dlg-butoane .spatiu { flex: 1 1 auto; }
.dlg-butoane > button { flex: 0 0 auto; }
/* in fereastra ingusta de autentificare butoanele umplu randul, jumatate-jumatate */
.dlg-ingust .dlg-butoane > button { flex: 1 1 auto; }

.dlg-unelte {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.dlg-unelte .spatiu { flex: 1 1 auto; min-width: var(--sp-2); }
.dlg-unelte .slab { font-size: var(--t-1); }

/* tabelele din ferestre: inaltime marginita, ca formularul de sub ele sa ramana vizibil.
   min-height tine cadrul vizibil si cat timp tabelul este gol, ca sa se vada ca acolo
   VA fi o lista - un cadru de 2 px inaltime ar arata a defect. */
.dlg-tabel { flex: 0 0 auto; min-height: 76px; max-height: 300px; }
.dlg-tabel:has(> table:empty)::before {
  content: "lista se cere de la server...";
  display: block; padding: var(--sp-3);
  font-size: var(--t-1); font-style: italic; color: var(--c-text-3);
}

/* U2: cand fereastra de parola este deschisa fiindca parola este TEMPORARA, nota se
   aprinde si butonul "Renunta" dispare - contul nu poate face nimic altceva. */
.nota-temporara { display: none; }
#dlgParolaNoua.obligatoriu .nota-temporara {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-atentie);
  border-radius: var(--r-1);
  color: #ffd9a3;
}
#dlgParolaNoua.obligatoriu .nota-temporara strong { color: var(--c-atentie); }
#dlgParolaNoua.obligatoriu .dlg-renunta { display: none; }
#dlgParolaNoua.obligatoriu .dlg-x { display: none; }
/* si clicul in afara este scos: fereastra nu se paraseste fara parola noua */
#dlgParolaNoua.obligatoriu .dlg-inafara { display: none; }


/* ----------------------------------------------- 9f. FEREASTRA DEDICATA (cerinta 5) ----
   "Expandeaza in fereastra dedicata". Este acelasi <dialog> nativ ca ferestrele de mai
   sus - deci mosteneste .dlg, .dlg-inafara, .dlg-cap, .dlg-x, .dlg-continut, si odata cu
   ele fundalul intunecat, Esc, clicul in afara si intoarcerea focalizarii - dar are alta
   MARIME si alta asezare a continutului.

   MARIMEA, cu cifre. Beneficiarul a cerut "o fereastra pop generoasa"; .dlg-corp obisnuit
   are min(94vw, 560px) si ar fi ramas o casetuta. Aici:
       min(96vw, 1560px) pe min(92vh, 1120px)
   adica, masurat pe cele trei rezolutii de proba:
       1280x720   1229 x 662     (96,0 % din latime)
       1600x900   1536 x 828
       1920x1080  1560 x 993
   Pe ecran mare foloseste deci spatiul, nu ramane centrata si mica. Coltul din
   dreapta-jos se poate trage (resize: both, fara JavaScript), iar butonul "Cat ecranul"
   din cap pune data-marime="ecran" pe corp si fereastra umple tot.

   ASEZAREA PE COLOANE. Continutul se pune in .fer-grila, care este o grila cu coloane de
   cel putin 320 px: pe fereastra larga ies trei-patru coloane, pe una ingusta se strange
   singura la una, fara niciun prag scris de mana si fara media query. Ce nu are voie sa
   se rupa (un tabel lat, un grafic) poarta .fer-lat si tine tot randul. */
.dlg-fer .dlg-corp {
  width: min(96vw, 1560px);
  height: min(92vh, 1120px);
  max-height: min(92vh, 1120px);
  margin: max(2vh, 10px) auto;
  /* coltul care se trage cu mouse-ul; overflow-ul mostenit de la .dlg-corp il face
     lucrator, deci nu are nevoie de nicio linie de JavaScript */
  resize: both;
  min-width: 360px; min-height: 220px;
  max-width: 100vw;
}
/* INALTIMEA DUPA CONTINUT. Implicit fereastra este inalta - graficele au nevoie de
   inaltime, si tocmai pentru ele s-a cerut. Dar o sectiune scurta (echivalentul: doua
   bife, un glisor si o nota) intr-o fereastra de 828 px lasa doua treimi de gol, si
   golul acela nu ajuta pe nimeni sa inteleaga mai bine. Continuturile scurte cer deci
   data-inalt="continut" (App.fereastra: def.inaltime = 'continut'), si atunci fereastra
   se opreste la cat ii trebuie, dar tot fara sa treaca de plafonul de mai sus.
   LATIMEA nu se schimba: ea ramane generoasa, fiindca de latime atarna coloanele. */
.dlg-fer .dlg-corp[data-inalt="continut"] { height: auto; }
.dlg-fer .dlg-corp[data-inalt="continut"] .fer-continut { flex: 0 1 auto; }

/* "Cat ecranul": fereastra umple tot, fara colturi rotunde si fara margine */
.dlg-fer .dlg-corp[data-marime="ecran"] {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; border-radius: 0; border-width: 0 0 0 0;
  resize: none;
}
/* "Cat ecranul" bate inaltimea dupa continut: omul a cerut anume tot ecranul */
.dlg-fer .dlg-corp[data-marime="ecran"][data-inalt="continut"] { height: 100vh; }
.dlg-fer .dlg-corp[data-marime="ecran"] .fer-continut { flex: 1 1 auto; }

.fer-cap { gap: var(--sp-2); }
.fer-titluri { flex: 1 1 auto; min-width: 0; }
.fer-titluri h2 { margin: 0; }
.fer-subtitlu {
  margin: 2px 0 0; font-size: var(--t-1); color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fer-subtitlu:empty { display: none; }

/* uneltele pe care si le pune continutul (bife, comutatoare); goale, nu iau loc */
.fer-unelte { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fer-unelte:empty { display: none; }
.fer-marime { flex: 0 0 auto; }

.fer-continut {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  gap: var(--sp-4);
}
.fer-continut:focus { outline: none; }

/* asezarea pe coloane cand incape - vezi explicatia de mai sus */
.fer-grila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.fer-lat { grid-column: 1 / -1; }

/* un bloc din fereastra: titlu mic deasupra, chenar discret, ca ochiul sa vada
   despartirea intre "ce s-a masurat" si "ce inseamna" */
.fer-bloc {
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.fer-bloc > h3 {
  margin: 0; font-size: var(--t-2); font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--c-text-3);
}
.fer-bloc > .nota, .fer-bloc > p { margin: 0; }
.fer-bloc .kv { width: 100%; }
/* in fereastra este loc: tabelele de perechi respira mai mult decat in panou */
.fer-bloc .kv td { padding-top: 3px; padding-bottom: 3px; }

/* pastilele mari cu o singura cifra, refolosite din fila de rezultat */
.fer-cifre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}

/* panza unui grafic asezat in fereastra: inalta, ca sa se poata citi */
.fer-panza { position: relative; width: 100%; min-height: 260px; height: 42vh; }
.fer-panza > canvas { width: 100%; height: 100%; display: block; }

/* GAZDA cerute de modulul graficelor (contractul din 19e): un dreptunghi gol care ia
   tot locul ramas in fereastra. Modulul isi pune panza in el si o masoara singur, deci
   aici nu se scrie nici latime, nici inaltime in pixeli - numai "cat a ramas". */
.fer-gazda { flex: 1 1 auto; min-height: 240px; min-width: 0; position: relative; }
.fer-gazda > canvas { display: block; }

/* CORPUL MUTAT al unei sectiuni din panou (19c). In panou coloana are ~300 px si totul
   sta unul sub altul, deci trebuie derulat; aici este loc, si continutul se asaza pe
   COLOANE. Sectiunea isi pastreaza toate comenzile lucratoare - este chiar corpul ei,
   nu o copie.

   Se folosesc coloane de text (`columns`), nu o grila: continutul unei sectiuni nu are
   o structura pe care sa se poata aseza o grila (la #sec-ech, de pilda, tot corpul este
   un singur <div class="grup">, deci o grila ar avea o singura celula si nu ar schimba
   nimic - masurat). Coloanele curg singure, pastreaza ordinea de citire si se strang la
   una singura pe fereastra ingusta, fara nicio latime scrisa de mana.
   break-inside: avoid tine fiecare comanda intreaga: un glisor taiat in doua intre
   coloane ar fi mai rau decat coloana lipsa.

   COLOANELE SE PUN PE NIVELUL PE CARE STA CONTINUTUL, si acela nu este acelasi la
   toate sectiunile - masurat pe pagina:
     #sec-afisare  are in .sec-corp mai multi copii (doua liste, sapte bife, un grup);
     #sec-ech      are in .sec-corp UN SINGUR copil, <div class="grup">, cu tot in el.
   De aceea sunt doua reguli, si numai una lucreaza pe fiecare sectiune: coloanele stau
   pe .sec-corp cand acesta are mai multi copii, si coboara pe .grup cand corpul este
   un singur grup (altfel coloanele ar avea o singura celula si nu ar schimba nimic). */
.fer-mutat > .sec-corp {
  padding: 0;
  columns: 3 330px;
  column-gap: var(--sp-5);
}
.fer-mutat > .sec-corp > * {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
}
/* corpul care este un singur grup: coloanele trec pe copiii grupului */
.fer-mutat > .sec-corp:has(> .grup:only-child) { columns: auto; }
.fer-mutat > .sec-corp > .grup:only-child {
  columns: 3 330px;
  column-gap: var(--sp-5);
  margin: 0; padding: 0; border: 0;
}
.fer-mutat > .sec-corp > .grup:only-child > * {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
}
/* ce nu are voie sa se rupa pe coloane: panzele si legenda schemei */
.fer-mutat .zona-canvas { break-inside: avoid; }
.fer-mutat .zona-canvas.mini { height: 34vh; min-height: 220px; }
/* glisoarele si listele nu mai au voie sa se intinda cat toata fereastra: intr-o
   coloana de 330 px sunt de apucat, la 1500 px sunt greu de nimerit cu ochiul */
.fer-mutat input[type="range"] { max-width: 100%; }

/* ------------------------------------- FILA DIN FASIA DE JOS, MUTATA IN FEREASTRA ----
   Cerinta (8). Panoul ADEVARAT al filei - #f-noduri, #f-ramuri cu tot cu antetul,
   filtrul si tabelul lor - se muta in fereastra cat timp ea este deschisa si se pune
   inapoi la inchidere, exact ca la corpul unei sectiuni din panou (19c). Nu se face nicio
   copie: o copie ar avea aceleasi id-uri (doua #cautNod in aceeasi pagina), nu ar purta
   ascultatorii de sortare si de filtrare, iar omul ar scrie intr-un camp care nu filtreaza
   nimic.

   Panoul filei este scris ca sa umple inaltimea data (display:flex, coloana), deci aici
   trebuie numai sa i se DEA acea inaltime: ia tot ce ramane in fereastra.
   Umplutura lui se scoate, fiindca o are deja fereastra. */
.fer-fila { padding-bottom: var(--sp-4); }
.fer-fila > .continut {
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  padding: 0;
}
/* Tabelele obisnuite din fereastra se opresc la 40vh, ca un tabel de 341 de randuri sa nu
   impinga singur toata asezarea in derulare (vezi regula '.fer-continut .tabel-scroll' de
   mai jos). Aici insa TABELUL ESTE CONTINUTUL: fereastra nu are altceva de aratat, deci el
   ia toata inaltimea si se deruleaza in el insusi - adica exact ce s-a cerut, tabelul
   intreg pe tot ecranul. Selectorul poarta amandoua clasele corpului (.fer-continut si
   .fer-fila) ca sa treaca inaintea regulii generale, care este scrisa mai jos in fisier si
   are aceeasi greutate; masurat, fara asta tabelul se oprea la 40 vh (360 px la 900) si
   lasa 350 px de gol sub el. */
.fer-continut.fer-fila .tabel-scroll { max-height: none; flex: 1 1 auto; min-height: 0; }
/* antetul filei (lamurirea si campul de filtrare) ramane sus, nu se deruleaza cu tabelul */
.fer-fila .grafic-cap { flex: 0 0 auto; }
/* Butonul "Fereastra" din antetul filei nu are ce cauta INAUNTRUL ferestrei pe care o
   deschide: ar fi un buton care nu poate face nimic nou. Se ascunde cat timp panoul filei
   este mutat aici si se intoarce odata cu el. La fel butonul de export CSV NU se ascunde:
   acela lucreaza si de aici. */
.fer-fila .btn-fer { display: none; }

/* REZULTATUL REGLAJULUI in fereastra: blocurile stau alaturi, nu unul sub altul.
   In fila ele se derulau - tocmai reclamatia beneficiarului. Blocul verdictului si
   tabelele lungi (comenzile propuse, jurnalul) tin tot randul, fiindca ele se citesc
   pe orizontala si o coloana ingusta le-ar rupe coloanele. */
/* PATRU coloane, nu trei. Am incercat si coloane mai late (minmax 430px, trei coloane de
   489 px): blocurile de sus s-au scurtat, dar cele cu "span 2" au ajuns sa incapa cate
   unul singur pe rand si a treia coloana ramanea goala - continutul a iesit 1339 px in loc
   de 1337. Cu patru coloane, doua tabele stau alaturi si corpul este cu circa 60 px mai
   scurt. Masurat, nu presupus. */
.fer-rez {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
/* Blocul '.note-economice' a plecat din rezultatul tehnic odata cu cifrele de bani
   (vezi sectiunea 12); in locul lui, tot randul il tine acum '.econ-usa', usa catre
   fereastra de analiza economica. */
.fer-rez > .verdict,
.fer-rez > .rez-mijloace,
.fer-rez > details.rez-bloc,
.fer-rez > .econ-usa { grid-column: 1 / -1; }
/* Blocurile care poarta un TABEL LAT (bobinele propuse, descompunerea CAPEX, comenzile)
   nu incap intr-o coloana de 340 px - coloanele lor s-ar strivi una peste alta. Dar nici
   rand intreg nu li se cuvine: asa se stivuiau toate pe verticala si fereastra "Reglaj U/Q"
   ajungea sa se deruleze cu 688 px pe dinauntru - masurat -, adica exact scrollul pe care
   beneficiarul a cerut sa nu il mai faca. Solutia: DOUA coloane. Intr-o fereastra lata
   (patru coloane) doua tabele stau alaturi; intr-una ingusta (doua coloane) "span 2"
   inseamna oricum tot randul, deci nu se strica nimic. */
.fer-rez > .rez-bloc:has(table.tabel) { grid-column: span 2; }
.fer-rez > .rez-bloc { margin: 0; }

/* Tabelele din fereastra dedicata au mai mult loc decat in panou, dar NU nelimitat: un
   tabel lung (341 de laturi, 260 de noduri) ar impinge singur toata fereastra in derulare.
   Marginit, se deruleaza tabelul in el insusi si asezarea din jur ramane intreaga - ceea
   ce este tocmai deosebirea dintre "derulez ca sa vad datele" si "derulez ca sa gasesc
   blocul". */
.fer-continut .tabel-scroll { max-height: 40vh; }

/* ------------------------------------------------------- butonul care o deschide ----
   Sta in capul sectiunii din panou (langa titlu) sau in antetul unei file. Este mic si
   sters cat nu e atins, ca sa nu concureze cu titlul, dar are 24 px inaltime - deci se
   poate apuca - si un semn limpede de "expandeaza".

   ATENTIE (cerinta 6): in capul sectiunii, nu in josul ei. O sectiune care nu incape in
   panou se deruleaza, iar un buton pus la coada ar fi tocmai partea care nu se vede. */
.btn-fer {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 22px; min-width: 22px; padding: 0 5px;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--c-text-3); font-size: var(--t-1); line-height: 1;
  cursor: pointer;
}
.btn-fer:hover, .btn-fer:focus-visible {
  background: var(--c-fund-4); border-color: var(--c-linie-tare); color: var(--c-text-tare);
}
.btn-fer .btn-fer-semn { font-size: 12px; line-height: 1; }

/* in capul unei sectiuni pliabile: la dreapta titlului, inaintea sagetii de pliere */
.sec-cap .btn-fer { margin-left: auto; }
/* clicul pe buton NU pliaza sectiunea: app.js opreste propagarea, dar semnul de mana
   trebuie sa spuna limpede ca este alt lucru decat titlul */
.sec-cap .btn-fer:hover { color: var(--c-accent); }


/* ------------------------------------------- 9e. tabelul si formularul utilizatorilor ----
   U1. Tabelul il scrie app.js: coloanele sunt numele, bifele de drepturi, starea si
   butoanele randului. Catalogul de drepturi vine de la GET /api/drepturi, deci numarul
   de coloane de drepturi NU este fix - de aceea nu se scrie nicio latime de coloana pe
   pozitie, ci numai reguli pe clase.
     tr.sel       contul deschis in formular
     tr.inactiv   cont dezactivat
     tr.temporar  cont cu parola temporara
     td.bif       celula unei bife de drept
     .bif-da / .bif-nu  semnul din celula */
#tabUtilizatori td.bif, #tabUtilizatori th.bif { text-align: center; }
#tabUtilizatori .bif-da { color: var(--c-bine); font-weight: 700; }
#tabUtilizatori .bif-nu { color: var(--c-text-3); }
#tabUtilizatori tr.inactiv td { opacity: .55; }
#tabUtilizatori tr.inactiv td:first-child { text-decoration: line-through; }
#tabUtilizatori tr.temporar td:first-child::after {
  content: " parola temporara";
  margin-left: 6px; padding: 0 6px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--c-atentie);
  background: rgba(255, 180, 84, .14);
  border: 1px solid rgba(255, 180, 84, .45); border-radius: 999px;
  text-decoration: none;
}
#tabUtilizatori tr.sel td { background: var(--c-accent-slab); }
#tabUtilizatori tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--c-accent); }
/* butoanele din randuri: mici, ca sa nu inalte randul */
#tabUtilizatori td button, #tabSalvari td button {
  min-height: 22px; padding: 1px 8px; font-size: var(--t-1);
}

.form-utilizator, .form-acces {
  padding: var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.fu-cap {
  margin-bottom: var(--sp-2);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}
/* doua campuri pe rand cat incap, unul singur pe latimi mici */
.fu-randuri { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fu-randuri > .camp { flex: 1 1 200px; min-width: 0; margin-bottom: 0; }
.fu-bife { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); }
/* La CREARE nu exista ce sterge: butonul de stergere se ascunde cat timp formularul
   poarta clasa .nou (o pune si o scoate app.js, dupa cum comuta intre creare si
   modificare). Numele contului se poate scrie numai la creare - serverul identifica
   un cont existent dupa numele din URL, deci acolo campul este numai de citit. */
.form-utilizator.nou #btnUtilizatorSterge { display: none; }

.fu-drepturi {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border: 1px solid var(--c-linie); border-radius: var(--r-1);
}
.fu-drepturi > legend {
  padding: 0 var(--sp-2);
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}
/* Bifele de drepturi. Fiecare are eticheta si descrierea VENITE DE LA SERVER, deci
   textul nu se scrie nicaieri in pagina: cand beneficiarul adauga un drept nou, el
   apare singur aici. app.js construieste:
       <label class="drept-bifa"><input type="checkbox" value="editare">
         <span class="db-et">Editare (muta obiecte in diagrama)</span>
         <span class="db-desc">Poate intra in modul Edit si ...</span></label> */
.drept-bife { display: flex; flex-direction: column; gap: var(--sp-2); }
.drept-bife:empty::before {
  content: "se cere catalogul de drepturi de la server...";
  font-size: var(--t-1); color: var(--c-text-3); font-style: italic;
}
.drept-bifa {
  display: grid; grid-template-columns: 15px 1fr; gap: 2px var(--sp-2);
  align-items: start;
  cursor: pointer;
}
.drept-bifa > input {
  grid-column: 1; grid-row: 1;
  width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--c-accent); cursor: pointer;
}
.drept-bifa .db-et   { grid-column: 2; grid-row: 1; font-size: var(--t-2); color: var(--c-text); }
.drept-bifa .db-desc { grid-column: 2; grid-row: 2; font-size: var(--t-1); line-height: 1.35; color: var(--c-text-3); }
.drept-bifa:hover .db-et { color: var(--c-text-tare); }
.drept-bifa input:disabled ~ .db-et,
.drept-bifa input:disabled ~ .db-desc { opacity: .5; }

.camp-durata { margin-top: var(--sp-3); margin-bottom: 0; }
.camp-durata input[type="number"] { flex: 0 0 120px; width: 120px; text-align: right; }


/* ------------------------------------------------------------------ 9f. salvarile ----
   S1, S2. Tabelul il scrie app.js: eticheta, autorul, data, tipul si butoanele.
   Randurile 'automata' se deosebesc de cele 'manuala' printr-o dunga de culoare la
   marginea din stanga si prin pastila de tip - doua semne, nu numai unul, ca deosebirea
   sa se vada si in alb-negru si de catre cine nu distinge culorile.
     tr.manuala / tr.automata   felul salvarii
     .pil-tip.manuala / .automata   pastila de tip, si in tabel, si in legende */
#tabSalvari tr.manuala  td:first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
#tabSalvari tr.automata td:first-child { box-shadow: inset 3px 0 0 var(--c-text-3); }
#tabSalvari tr.automata td { color: var(--c-text-2); }
#tabSalvari td.et { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

.pil-tip {
  display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-radius: 999px; white-space: nowrap;
}
.pil-tip.manuala {
  color: var(--c-accent);
  background: var(--c-accent-slab);
  border: 1px solid rgba(77, 163, 255, .45);
}
/* automata: contur INTRERUPT, ca linia echivalentului din schema - acelasi inteles
   ("nu a facut-o omul, s-a facut singura") purtat de acelasi semn grafic */
.pil-tip.automata {
  color: var(--c-text-3);
  background: transparent;
  border: 1px dashed var(--c-linie-tare);
}
.leg-tip { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-1); color: var(--c-text-3); }


/* ------------------------------------------------ 10. latimi mici, inaltimi mici ---- */

/* sub 1400 px panoul se ingusteaza si bara de unelte renunta la eticheta */
@media (max-width: 1400px) {
  :root { --lat-panou: 288px; --t-4: 15px; }
  .camp-linie select { min-width: 175px; }
  .bara-unelte .cauta { flex: 0 1 220px; width: 220px; }
  .fila { padding: 6px 9px; }
}

/* sub 1200 px dispar etichetele lungi, ca sa nu se suprapuna nimic in bare */
@media (max-width: 1200px) {
  :root { --lat-panou: 260px; --h-jos: 270px; }
  .bara-unelte .et { display: none; }
  .camp-linie > span { display: none; }
  .camp-linie select { min-width: 150px; }
  .bara-unelte .cauta { flex: 1 1 140px; width: auto; min-width: 120px; }
  .sigla { display: none; }
  #stareSesiune { max-width: 130px; }
}

/* sub 960 px panoul trece deasupra, pe toata latimea, si pagina se deruleaza vertical */
@media (max-width: 960px) {
  body {
    height: auto; min-height: 100dvh; overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
    /* si aici randul de jos este numai banda de meniuri: 'auto', nu --h-jos */
    grid-template-rows: auto auto minmax(var(--h-schema-min), 60vh) auto auto;
    grid-template-areas: "antet" "panou" "schema" "maner" "jos";
  }
  #panou { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--c-linie); }
  #antet { flex-wrap: wrap; }
  /* panoul are aici numai 40vh: legenda se strange, ca sa nu ocupe tot cardul */
  #legenda { max-height: 170px; }
}

/* ferestre scunde: zona de diagrame se strange, schema ramane utilizabila */
@media (max-height: 820px) {
  :root { --h-jos: 258px; }
}

/* Sub 800 px inaltime panoul isi strange singur cheltuiala de asezare: titluri cu 2 px
   mai scunde, spatii de 3 px intre sectiuni si umplutura mai mica in corpul lor. Sunt
   ~30 px castigati numai din asezare - exact cat trebuie ca, la 1280x720, titlurile
   tuturor celor zece sectiuni sa ramana in panou cu sectiunile implicite deschise. */
@media (max-height: 800px) {
  :root { --h-sec-cap: 28px; }
  #panou { gap: 3px; padding: var(--sp-1) var(--sp-2); }
  .sec-corp { padding: var(--sp-2); }
}
@media (max-height: 820px) and (min-width: 961px) {
  #legenda { max-height: 230px; }
}
@media (max-height: 680px) {
  :root { --h-jos: 210px; --h-schema-min: 150px; --h-sec-cap: 27px; }
  .sec-corp { padding: var(--sp-2); }
  #panou { gap: var(--sp-1); }
  #legenda { max-height: 180px; }
}


/* ============================================================ 15. COLOANA FAPTELOR
   Defect gasit la verificarea finala, la 1600x900 si la 1280x720 deopotriva: cand un
   singur rand se latea - un cont cu pastila PAROLA TEMPORARA, adica exact starea in care
   ajunge orice cont NOU -, tabelul de utilizatori crestea de la 819 px la 951 px intr-un
   invelis de 816 px, iar TOATE cele opt butoane "Modifica" si "Sterge" ieseau din
   fereastra: dreapta lor ajungea la 1285 si 1334 px, cu marginea ferestrei la 1230 px.
   Nu se pierdea nimic - invelisul se deruleaza in laturi -, dar omul care deschide
   meniul vede un tabel din care lipsesc chiar butoanele pentru care l-a deschis.
   Acelasi lucru il aduce si o coloana noua: beneficiarul a spus ca mai adauga drepturi.

   Leacul tine cat vrea el: coloana din dreapta se lipeste de marginea invelisului, ca
   antetul lipit de sus de mai devreme. Butoanele raman la vedere oricat de lat ar creste
   restul tabelului, iar celelalte coloane se deruleaza pe sub ele.
   Fondul celulei lipite trebuie sa fie OPAC, altfel coloanele care trec pe dedesubt s-ar
   vedea prin ea; de aceea fondurile de rand (trecerea cu mouse-ul, randul ales) se scriu
   aici din nou, ca doua straturi - culoarea stravezie peste fondul opac -, nu ca o
   culoare stravezie singura. */
#tabUtilizatori th:last-child,
#tabSalvari th:last-child {
  position: sticky; right: 0; z-index: 3;
  background: var(--c-fund-3);
  box-shadow: inset 0 -1px 0 var(--c-linie), inset 1px 0 0 var(--c-linie);
  cursor: default;
}
#tabUtilizatori td:last-child,
#tabSalvari td:last-child {
  position: sticky; right: 0; z-index: 1;
  background: var(--c-fund-0);
  box-shadow: inset 1px 0 0 var(--c-linie);
  white-space: nowrap;
}
#tabUtilizatori tbody tr:hover td:last-child,
#tabSalvari tbody tr:hover td:last-child {
  background:
    linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)),
    var(--c-fund-0);
}
#tabUtilizatori tr.sel td:last-child,
#tabSalvari tr.sel td:last-child {
  background:
    linear-gradient(var(--c-accent-slab), var(--c-accent-slab)),
    var(--c-fund-0);
}

/* Butonul stins din tabel isi facea loc pentru bulina de intrebare taind chiar eticheta:
   "Sterge" se citea "Sterg?". Randurile tabelului sunt inguste, deci bulina se muta pe
   linia de baza a textului, iar butonul primeste latimea de care are nevoie. */
#tabUtilizatori td button[disabled][data-motiv],
#tabSalvari td button[disabled][data-motiv] {
  padding-right: 20px;
}
#tabUtilizatori td button[disabled][data-motiv]::after,
#tabSalvari td button[disabled][data-motiv]::after {
  top: 50%; right: 3px; margin-top: -6px;
}


/* =====================================================================================
   11. REGLAJ U/Q - COMUTATORUL DE VEDERE, MENIUL DIN PANOU SI FILA DE REZULTAT

   Cuprins:
     11a. comutatorul de vedere INAINTE | DUPA | DIFERENTA, in bara schemei
     11b. banda vederii, cu nota si mostra scarii divergente
     11c. comutatorul de meniu MANUAL | OPTIMIZAT si sectiunea "Reglaj optimizat"
     11d. fila de rezultat: marcajul pe care il scrie app.js
     11e. bugetul de inaltime al panoului, refacut pentru a 11-a sectiune
     11f. latimi mici si inaltimi mici, pentru elementele noi

   REGULA CARE STA LA BAZA INTREGII SECTIUNI, si care este chiar hotararea data de
   beneficiar - "nu e cazul sa faci ramuri de cod dupa meniu; pune-le sub aceeasi forma":
   nicaieri mai jos nu se intreaba din ce meniu a venit rezultatul. Vederea are un singur
   loc unde isi tine starea (#comutatorVedere[data-vedere]), meniul are un singur loc
   (#modReglaj[data-mod]), iar rezultatul are un singur invelis (#rezReglaj), cu acelasi
   marcaj oricare ar fi meniul care l-a umplut.

   CONTRACTUL CU app.js, la un loc (numele nu se schimba fara sa se spuna):
     #comutatorVedere   data-vedere="inainte"|"dupa"|"diferenta"|"" ; clasa .inactiv
     #btnVedereInainte / #btnVedereDupa / #btnVedereDiferenta
                        clasa .activa, aria-pressed, disabled, title
     #notaVedere        text + data-vedere
     #modReglaj         data-mod="manual"|"optimizat"
     #btnModManual / #btnModOptimizat    clasa .activa, aria-pressed
     #sec-comanda / #sec-optim           <details> deschise pe rand, dupa mod
     #chkOptUg #chkOptQc #chkOptN #chkOptBobine    cele patru bife
     #btnOptimizeaza    clasa .lucreaza, aria-busy, disabled, title; TEXTUL LUI SE
                        INLOCUIESTE de catre app.js, deci butonul nu are copii in pagina
     #stareOptim        data-fel="gol"|"lucru"|"ok"|"rau" + text
     #rezReglaj         invelisul rezultatului; app.js ii scrie tot continutul
   ===================================================================================== */


/* ------------------------------------ 11a. COMUTATORUL DE VEDERE (bara schemei) ----
   Cerinta (C), la amandoua meniurile: "va trebui sa afisezi inainte, dupa si diferente".

   DE CE STA IN BARA SCHEMEI SI NU IN PANOU. Beneficiarul a reclamat deja o data un buton
   pe care nu il gasea: singurul buton care intra in modul Edit statea intr-o sectiune
   pliata implicit, adica avea inaltime ZERO. Comutatorul de vedere este comanda cea mai
   apasata din runda asta, deci nu are voie sa se repete defectul. Bara schemei nu se
   pliaza si nu se deruleaza niciodata: comutatorul se vede la orice incarcare de pagina,
   fara niciun clic si fara derulare. Masurat, la 1280x720 si la 1600x900 deopotriva,
   este intreg in fereastra de la prima pictare.

   LATIME FIXA, DECI TREI TREIMI EXACT EGALE. Acelasi motiv ca la comutatorul
   RULARE | EDITARE din antet: cursorul de dedesubt aluneca cu translateX peste o treime
   de latime, deci treimile trebuie sa fie egale, oricat de diferite ar fi cuvintele
   ("DUPA" are 4 litere, "DIFERENTA" are 9). Masurat, treimea cea mai incarcata cere
   66 px; 3 x 78 + 2 x 2 umplutura + 2 x 1 chenar = 240.
   Verificat ca incape: la 1280x720 bara schemei are 992 px, iar continutul ei cere
   20 (umplutura) + 94 (eticheta) + 246 (comutatorul) + 233 (butoanele) + 12 (spatii) +
   220 (cautarea) = 825 px.

   POZITIA CURSORULUI O HOTARASTE STAREA, nu clicul: atarna de #comutatorVedere
   [data-vedere], pe care il scrie app.js dupa ce vederea s-a schimbat efectiv. Asa
   comutatorul nu poate arata altceva decat ce se afiseaza - nici daca vederea se schimba
   din alta parte (de exemplu automat, la sfarsitul unei optimizari). */
/* LATIMEA ESTE CEA A SCRISULUI, nu una fixa impartita in treimi egale.
   Cele trei cuvinte au lungimi deosebite - INAINTE, DUPA, DIFERENTA -, iar treimile
   egale lasau gol de o parte si de alta a lui "DUPA". Cu latime dupa continut,
   comutatorul se strange cu vreo 50 de pixeli, care se intorc in bara.
   Cursorul alb nu se mai poate aseza din foaia de stil (treimile nu mai exista), deci
   este mutat din arataComutatorVedere, pe pozitia si latimea butonului aprins. */
.comutator-vedere {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  display: flex; align-items: stretch;
  margin-right: var(--sp-1);
  padding: 2px;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie-tare);
  border-radius: 999px;
}

/* cursorul care aluneca: exact o treime, mutat cu transform. Sta SUB butoane
   (z-index 0 fata de 1), deci nu le fura clicul. */
.cv-glisor {
  position: absolute; z-index: 0;
  top: 2px; bottom: 2px; left: 0;
  /* pozitia si latimea vin din JS, dupa butonul aprins */
  width: var(--cv-w, 33%);
  transform: translateX(var(--cv-x, 2px));
  border-radius: 999px;
  background: var(--c-fund-4);
  border: 1px solid var(--c-linie-tare);
  box-shadow: var(--umbra-1);
  transition: transform .16s ease, background-color .16s linear,
              border-color .16s linear, opacity .16s linear;
}
/* cele doua reguli de mutare pe treimi au fost scoase: cursorul se aseaza acum din JS,
   pe pozitia butonului aprins, fiindca butoanele nu mai au latimi egale */
/* In vederea de diferenta cursorul capata culoarea capatului negativ al scarii
   divergente: acelasi semn ca pe desen, unde barele sunt colorate cu ea. */
.comutator-vedere[data-vedere="diferenta"] .cv-glisor {
  background: rgba(90, 169, 255, .16);
  border-color: var(--dif-neg);
}
/* CAT TIMP NU EXISTA NICIUN CALCUL comutatorul nu are ce arata. Ramane LA VEDERE - se
   stie ca exista si unde este - dar se estompeaza si cursorul dispare cu totul: un cursor
   asezat pe o vedere care nu exista ar fi o minciuna. Butoanele sunt stinse de app.js si
   isi poarta motivul in 'title'. */
.comutator-vedere.inactiv { opacity: .55; }
.comutator-vedere.inactiv .cv-glisor { opacity: 0; }

.cv-buton {
  position: relative; z-index: 1;
  flex: 0 0 auto;                     /* cat scrisul, nu o treime din latime */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--h-comanda) - 4px);
  padding: 0 6px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--c-text-3);
  font-family: inherit; font-size: var(--t-1); font-weight: 600; letter-spacing: .5px;
  white-space: nowrap; cursor: pointer;
  transition: color .16s linear;
}
/* regula generala a butoanelor da fond si chenar la hover; aici comutatorul are un singur
   fond, cel al cursorului care aluneca, deci se anuleaza */
.cv-buton:hover:not(:disabled) { color: var(--c-text); background: transparent; border: 0; }
.cv-buton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cv-buton.activa { color: var(--c-text); font-weight: 700; }
.comutator-vedere[data-vedere="diferenta"] .cv-buton.activa { color: #a8d3ff; }
/* butonul stins nu primeste bulina de intrebare de la 9b: pe o pastila rotunda ar cadea
   peste margine. Motivul ramane in 'title', scris de app.js, si se citeste la trecerea cu
   mouse-ul si de cititoarele de ecran. */
.cv-buton:disabled { opacity: 1; cursor: not-allowed; color: var(--c-text-3); }
.cv-buton[disabled][data-motiv]::after { content: none; }
.cv-buton[disabled][data-motiv] { padding-right: 6px; }


/* ------------------------------------------------ 11b. BANDA VEDERII (legenda C3) ----
   Cerinta: "legenda spune ca se afiseaza diferente si care este scara".

   BANDA ARE INTOTDEAUNA ACEEASI INALTIME, in toate cele trei vederi, si nu se ascunde
   niciodata. Nu este un moft de asezare: modulul Diagrama isi calculeaza incadrarea din
   inaltimea lui #schemaContainer. Daca banda ar aparea numai in vederea de diferenta,
   schema s-ar misca la fiecare comutare, si atunci nu s-ar mai putea spune cinstit ca
   trecerea de la o vedere la alta nu face nimic altceva decat sa schimbe proiectia.
   De aceea inaltimea este fixa si mostra scarii se aprinde si se stinge FARA sa o schimbe.

   DE CE DOUA RANDURI SI NU UNUL. Masurat la 1280x720: nota vederii de diferenta are 190
   de caractere - trebuie sa spuna si ca se afiseaza variatii, si INTRE CE VALORI merge
   scara, iar valorile acelea sunt chiar raspunsul la "care este scara". Pe un singur rand
   ea cerea ~1045 px, iar in banda mai raman ~730 px dupa eticheta si mostra: se taia
   exact peste cifrele scarii, adica peste partea pentru care exista nota. Pe doua randuri
   incape intreaga (2 x 730 = 1460 px) si la 1280, si la 1600. Randurile sunt DOUA
   INTOTDEAUNA, nu "doua daca nu incape": inaltimea benzii ramane aceeasi in toate cele
   trei vederi, deci schema nu se misca la comutare. */
/* BANDA VEDERII STA ACUM IN BARA DE UNELTE, nu pe un rand al ei: randul acela lua 36 de
   pixeli din inaltimea schemei pentru un text scurt. Aici este un element ca oricare
   altul din bara - se strange cand nu incape si isi taie textul cu trei puncte, deci nu
   poate creste bara si nu poate misca desenul. */
.bara-vedere {
  flex: 1 1 260px; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 0; height: auto;
  padding: 0 var(--sp-2);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-1);
  font-size: var(--t-0);
  overflow: hidden;
}
.bv-titlu {
  flex: 0 0 auto;
  color: var(--c-text-3);
  font-weight: 700; letter-spacing: .9px;
}
/* Doua randuri, si numai doua: cutia are inaltime fixa, iar ce nu incape se taie cu trei
   puncte la capatul randului al doilea (-webkit-line-clamp). Asa nota nu poate creste
   banda si nu poate misca schema, oricat de lung ar fi textul scris de app.js. */
/* UN SINGUR RAND, taiat cu trei puncte. In bara de unelte nu mai are loc pentru doua,
   iar inaltimea trebuie sa ramana aceeasi in toate cele trei vederi: altfel comutarea
   ar misca schema, si tocmai asta s-a cerut sa nu se intample. Textul intreg ramane la
   indemana in title. */
.bv-text {
  flex: 1 1 auto; min-width: 0;
  color: var(--c-text-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* nota capata culoare numai cand exista o vedere; in vederea de diferenta se aprinde,
   fiindca atunci cifrele de pe tot ecranul sunt variatii, nu marimi */
.bv-text[data-vedere="inainte"], .bv-text[data-vedere="dupa"] { color: var(--c-text-2); }
.bv-text[data-vedere="diferenta"] { color: #a8d3ff; }

/* MOSTRA SCARII DIVERGENTE, cea cu care se coloreaza barele in vederea de diferenta:
   --dif-neg la stanga, --dif-zero in mijloc, --dif-poz la dreapta.
   SE APRINDE SINGURA, din foaia de stil, cand nota de langa ea poarta
   data-vedere="diferenta" - deci nu poate ramane aprinsa intr-o vedere in care nu are ce
   cauta, si nu trebuie stinsa de nimeni din cod.
   Cifrele scarii NU se repeta aici: ele sunt scrise in nota, cu valorile adevarate ale
   regimului (app.js le ia din SIM.vederi.scara). Mostra arata numai in ce sens merg
   culorile - la stanga lui zero si la dreapta lui. */
.bv-scara { flex: 0 0 auto; display: none; align-items: center; gap: var(--sp-1); }
.bv-text[data-vedere="diferenta"] ~ .bv-scara { display: flex; }
.bv-scara-et { color: var(--c-text-2); font-weight: 700; }
.bv-scara-zero { color: var(--c-text-3); font-weight: 400; }
.bv-scara-banda {
  display: block; width: 64px; height: 9px;
  border: 1px solid var(--c-linie); border-radius: 2px;
  background: linear-gradient(90deg, var(--dif-neg), var(--dif-zero));
}
.bv-scara-banda.bv-scara-poz {
  background: linear-gradient(90deg, var(--dif-zero), var(--dif-poz));
}


/* =====================================================================================
   11c. MENIUL "REGLAJ U/Q" IN PANOU

   COMUTATORUL DE MENIU STA DEASUPRA SECTIUNILOR, nu intr-una din ele. Doua motive, si
   amandoua au fost masurate:

   (1) O sectiune pliata are inaltime ZERO. Exact asa s-a pierdut o data butonul de
       intrare in modul Edit, si beneficiarul a reclamat-o pe litere. Comutatorul acesta
       hotaraste ce meniu se foloseste: nu are voie sa fie de gasit.

   (2) Asezarea. Panoul are 672 px la 1280x720. O a douasprezecea sectiune deschisa ar
       cere ~100 px in plus, si titlurile ultimelor cinci sectiuni ar cadea sub marginea
       panoului. Ca strip de 34 px deasupra lor, incape - vezi bugetul masurat de la 11e.

   CE COMUTA. Doua sectiuni care se deschid pe rand, si din care nu se sterge nimic:
       MANUAL    -> #sec-comanda ("Comanda de reglaj") si lista comenzilor
       OPTIMIZAT -> #sec-optim   ("Reglaj optimizat"), cu submeniurile 2.a si 2.b
   ===================================================================================== */
.rg-mod {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-2) 2px var(--sp-3);
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-2);
  box-shadow: var(--umbra-1);
}
.rg-mod > .rg-mod-et {
  flex: 0 0 auto;
  font-size: var(--t-1); font-weight: 700; letter-spacing: .7px;
  color: var(--c-text-3);
}
.rg-mod-comutator {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch;
  padding: 2px;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie-tare); border-radius: 999px;
}
.rg-mod-glisor {
  position: absolute; z-index: 0;
  top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--c-fund-4);
  border: 1px solid var(--c-linie-tare);
  box-shadow: var(--umbra-1);
  transition: transform .16s ease, background-color .16s linear, border-color .16s linear;
}
/* Pozitia atarna de STARE, nu de clic: #modReglaj[data-mod] il scrie app.js dupa ce a
   deschis si a inchis efectiv cele doua sectiuni. */
.rg-mod[data-mod="optimizat"] .rg-mod-glisor {
  transform: translateX(100%);
  background: var(--c-accent-slab);
  border-color: var(--c-accent);
}

/* ============================== COMUTATORUL CU TREI POZITII
   Al treilea meniu - OPTIM U/Q SET REGIMURI - a intrat pe acelasi comutator, deci cursorul
   alb nu mai are jumatate de latime, ci o treime, si sare cu 100 % sau cu 200 %. Regulile de
   mai sus raman pentru comutatorul cu doua pozitii (RULARE | EDITARE din antet); aici se
   suprascriu numai latimea si saltul, si numai pentru .rg-mod-3. */
/* ============================== ANTETUL, PE DOUA BLOCURI
   Blocul din stanga are EXACT latimea panoului, deci ce urmeaza dupa el incepe fix la
   marginea din stanga a schemei. Aceeasi variabila ca grila paginii - nu o potriveala. */
/* BLOCUL DIN STANGA AL ANTETULUI: NUMAI SIGLA, AERISITA.
   Blocul are exact latimea panoului (var(--lat-panou) = 320 px), fiindca tot ce vine dupa
   el trebuie sa inceapa CHIAR la marginea din stanga a ferestrei schemei. Sigla ia din cei
   320 px vreo 73; restul este aer, si asta se vrea: marca nu se inghesuie in nimic.

   Campul "Regim" a stat aici de doua ori, si de doua ori a fost gresit:
     - intai SUB sigla, pe al doilea rand - si asta costa 28 px din inaltimea schemei la
       fiecare incarcare de pagina (masurat: desenul trecea de la 817 la 789 px);
     - apoi LANGA sigla, pe acelasi rand - dar atunci casetei ii ramaneau 187 px, iar
       numele cele mai lungi ("Iarna, gol de dimineata 2033") se taiau tocmai la ANUL,
       adica la singurul lucru care deosebeste doua regimuri altfel identice.
   Acum campul deschide linia de unelte, unde are latimea lui fireasca si nu ia nimanui
   nimic - iar linia intreaga incepe la marginea schemei, cum s-a cerut. */
.antet-stanga {
  flex: 0 0 var(--lat-panou);
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-3);
  min-width: 0; padding-right: var(--sp-3);
}
.antet-stanga .marca { flex: 0 0 auto; min-width: 0; }
/* sigla INCESA: inaltimea o da CSS-ul, latimea o da raportul desenului (2,143 : 1) */
.sigla-logo {
  width: auto; height: 34px; display: block;
  border: 0; border-radius: 0; background: none;
}
/* NUMELE PROGRAMULUI, intre sigla si linia de comenzi. Sta in aerul blocului din stanga,
   deci nu impinge nimic: linia de comenzi ramane aliniata la marginea schemei. Se strange
   si isi taie textul cu trei puncte daca vreodata nu ar mai incapea - un titlu care trece
   pe al doilea rand ar inalta antetul si ar micsora desenul. */
.titlu-antet {
  flex: 0 1 auto; min-width: 0;
  font-size: var(--t-4); font-weight: 600; letter-spacing: .2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* CAMPUL "REGIM" DESCHIDE LINIA DE UNELTE, deci incepe fix la marginea schemei.
   Caseta are o latime de prag potrivita cu datele, nu ghicita: numele cel mai lung dintre
   regimurile caracteristice ("Iarna, gol de dimineata 2033") cere 164 px de text la 13 px,
   plus 16 umplutura si ~20 sageata desenata de browser inauntru = 200 px. Pragul de 218
   lasa si o rezerva pentru un nume ceva mai lung adaugat mai tarziu. Numele FICTIV, de
   trei ori mai lung, nu incape nicaieri si se citeste din lista deschisa. */
.antet-unelte .camp-regim { margin: 0; gap: var(--sp-2); }
.antet-unelte .camp-regim > span {
  flex: 0 0 auto;
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}
/* LATIME DATA, nu 'auto'. Latimea 'auto' a unui <select> este latimea celei mai lungi
   optiuni din el, iar cea mai lunga de aici este numele FICTIV, de 329 px de text: caseta
   iesea de 394 px, impingea uneltele afara din fereastra si pagina capata bara de derulare
   orizontala sub 1440 px. 218 px cuprind intreg orice nume de regim caracteristic, cu o
   rezerva de 18 px. */
.antet-unelte .camp-regim select { flex: 0 0 218px; width: 218px; min-width: 0; }

/* cele doua lupe si Incadrarea, lipite intr-un grup, la marginea schemei */
.antet-unelte .grup-zoom { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-1); }

/* NICIO ETICHETA DIN ANTET NU SE RUPE PE DOUA RANDURI. Masurat la 1150 px latime:
   "U [pu]" si "U [kV]" se rupeau la spatiu, butoanele treceau de la 28 la 41 px, si
   antetul intreg de la 43 la 56 - luand din nou 13 px din schema. Un buton mai ingust
   decat textul lui se strange in latime, nu in inaltime. */
.antet-unelte button, .antet-unelte .camp-linie > span { white-space: nowrap; }

/* Sub 1250 px uneltele nu mai incap pe un rand: de cand caseta regimului a intrat in linie,
   ea cere 218 px in plus, iar masurat la 1150 px uneltele se terminau la x = 1247 intr-o
   pagina de 1150 - adica pagina capata bara de derulare orizontala. Acolo - si numai acolo
   - randul are voie sa se rupa; peste 1250 px antetul ramane de 43 px, cu un singur rand,
   si schema isi tine cei 824 px. O bara de derulare orizontala este mai rea decat un rand
   in plus: ea ascunde comenzi cu totul, in loc sa le coboare. */
@media (max-width: 1250px) {
  .antet-unelte { flex-wrap: wrap; row-gap: var(--sp-1); }
}

/* CE CEDEAZA CAND FEREASTRA SE INGUSTEAZA.
   De cand campul "Regim" a plecat din blocul siglei in linia de unelte, blocul nu mai are
   nimic de impartit: sigla incape in el la orice latime, si nu mai are rost sa fie
   ascunsa. Cine se ingusteaza acum este LINIA DE UNELTE, iar acolo cedeaza intai cuvantul
   "REGIM" - caseta ramane numita pentru cititoarele de ecran prin aria-label - si abia
   apoi randul se rupe (regula de mai sus, sub 1100 px). Numele regimului nu cedeaza
   niciodata: se taie de la coada, adica tocmai la ANUL, si "Iarna, gol de dimineata 20..."
   nu mai spune daca este 2028 sau 2033. */
@media (max-width: 1300px) {
  .antet-unelte .camp-regim > span { display: none; }
}

/* comutatorul U [pu] / U [kV]: doua butoane lipite, care se exclud */
.comutator-u {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--c-linie-tare); border-radius: var(--r-2);
  overflow: hidden;
}
.comutator-u button.mic {
  border: 0; border-radius: 0; padding: 3px 8px;
  background: transparent; color: var(--c-text-3);
}
.comutator-u button.mic + button.mic { border-left: 1px solid var(--c-linie-tare); }
.comutator-u button.mic:hover:not(:disabled) { background: var(--c-fund-4); color: var(--c-text-2); }
.comutator-u button.mic.activ,
.comutator-u button.mic.activa,
.comutator-u button.mic[aria-pressed="true"] {
  background: var(--c-accent-slab); color: var(--c-accent); font-weight: 700;
}

/* ============================== A DOUA TREAPTA A MENIULUI OPTIMAL
   "Un regim" / "Set regimuri". Sta imediat sub comutatorul de meniu si se vede numai cand
   este ales OPTIMAL; cele doua se exclud, ca si treapta de deasupra. */
.rg-sub {
  flex: 0 0 auto;
  display: flex; gap: 2px;
  margin: 3px var(--sp-3) 0;
  padding: 2px;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: 999px;
}
.rg-sub[hidden] { display: none; }
.rg-sub-buton {
  flex: 1 1 0; min-width: 0;
  min-height: 20px; padding: 0 6px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--c-text-3);
  font-family: inherit; font-size: var(--t-1); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.rg-sub-buton:hover:not(:disabled) { color: var(--c-text-2); background: var(--c-fund-2); }
.rg-sub-buton.activa {
  background: var(--c-accent-slab); color: var(--c-accent); font-weight: 700;
}
.rg-sub-buton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* cele doua blocuri ale sectiunii Optimizare */
#optimUnRegim[hidden], #optimSet[hidden] { display: none; }

/* ETICHETA TRECE PE RANDUL EI. Cu doua meniuri, "REGLAJ U/Q" si comutatorul incapeau pe
   acelasi rand in cei 288 px ai panoului. Cu trei nu mai incap: masurat, textul se revarsa
   peste marginea panoului si cursorul alb ajunge sub alta eticheta decat cea aprinsa. Se
   pune deci eticheta deasupra, iar cele trei butoane iau toata latimea - 93 px fiecare, de
   ajuns si pentru cel mai lung dintre ele. */
.rg-mod-3 { flex-wrap: wrap; }
.rg-mod-3 > .rg-mod-et { flex: 1 1 100%; margin: 0 0 3px; }
.rg-mod-3 > .rg-mod-comutator { flex: 1 1 100%; }
.rg-mod-3 .rg-mod-glisor { width: calc(33.333% - 2px); }
.rg-mod-3[data-mod="manual"]    .rg-mod-glisor { transform: translateX(0); }
.rg-mod-3[data-mod="optimizat"] .rg-mod-glisor { transform: translateX(100%); }
.rg-mod-3[data-mod="set"]       .rg-mod-glisor {
  transform: translateX(200%);
  background: var(--c-accent-slab);
  border-color: var(--c-accent);
}
.rg-mod-3[data-mod="set"] #btnModSet.activa { color: var(--c-accent); }
/* trei etichete pe latimea a doua: literele se string, dar raman lizibile */
.rg-mod-3 .rg-mod-buton { padding: 0 3px; font-size: var(--t-0); letter-spacing: .2px; }
.rg-mod-3 .rg-mod-nr { width: 13px; height: 13px; font-size: 8px; }
.rg-mod-buton {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;          /* exact jumatate, oricat de lung ar fi cuvantul */
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 22px;
  padding: 0 6px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--c-text-3);
  font-family: inherit; font-size: var(--t-1); font-weight: 600; letter-spacing: .5px;
  white-space: nowrap; cursor: pointer;
  transition: color .16s linear;
}
.rg-mod-buton:hover:not(:disabled) { color: var(--c-text-2); background: transparent; border: 0; }
.rg-mod-buton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.rg-mod-buton.activa { color: var(--c-text); font-weight: 700; }
.rg-mod[data-mod="optimizat"] #btnModOptimizat.activa { color: var(--c-accent); }
/* numarul meniului (1 sau 2), ca in vorbirea beneficiarului: "meniul 1", "meniul 2" */
.rg-mod-nr {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 9px; font-weight: 700; letter-spacing: 0;
}
.rg-mod-buton.activa .rg-mod-nr { background: currentColor; color: var(--c-fund-0); }

/* numarul meniului, repetat in titlul sectiunii lui: se vede din ce meniu face parte
   sectiunea deschisa, si cand comutatorul a ramas mai sus, in afara privirii */
.sec-nr {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--c-linie-tare);
  background: var(--c-fund-0);
  color: var(--c-text-3);
  font-size: 9px; font-weight: 700; letter-spacing: 0;
}
.sec-optim[open] > .sec-cap .sec-nr { border-color: var(--c-accent); color: var(--c-accent); }

/* --- submeniurile 2.a si 2.b ---
   <fieldset> adevarat, cu <legend>: gruparea nu este numai desen, o citesc si
   cititoarele de ecran. Chenarul implicit se scoate; ramane o linie subtire deasupra, ca
   la .grup, si titlul marunt. Spatiile sunt stranse anume - fiecare pixel de aici intra
   in bugetul de la 11e. */
.rg-grup {
  margin: var(--sp-2) 0 0; padding: 4px 0 0;
  border: 0; border-top: 1px solid var(--c-linie);
  min-width: 0;                       /* un fieldset nu se stramteaza fara asta */
}
.sec-corp > .rg-grup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rg-grup-cap {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0; margin-bottom: 2px;
  font-size: var(--t-1); font-weight: 700; letter-spacing: .7px;
  color: var(--c-text-3);
}
.rg-nr {
  display: inline-block; padding: 0 5px;
  border: 1px solid var(--c-linie-tare); border-radius: 999px;
  background: var(--c-fund-0);
  color: var(--c-text-2); font-size: 9px; font-weight: 700; letter-spacing: .4px;
}

/* Bifa unui mijloc. Cheia scurta (Ug, Q, N, B) sta intr-o pastila cu latime fixa, ca
   toate cele patru randuri sa inceapa in acelasi loc si sa se citeasca in coloana; textul
   lung de langa ea se taie cu trei puncte, ca sa nu treaca niciodata pe doua randuri -
   patru randuri care isi schimba inaltimea ar misca butonul de rulare de sub ele.
   Cheia se aprinde cand bifa este pusa: se vede dintr-o privire care mijloace lucreaza,
   fara sa se citeasca patru propozitii. */
.rg-bifa { gap: var(--sp-2); min-height: 20px; }
.rg-cheie {
  flex: 0 0 22px; width: 22px; text-align: center;
  color: var(--c-text-3); font-weight: 700;
  font-family: var(--font-cifre); font-size: var(--t-1);
}
.rg-bifa input:checked ~ .rg-cheie { color: var(--c-accent); }
.rg-et { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rg-butoane { margin-top: var(--sp-2); }

/* --- butonul de rulare, cu starea lui ---
   Calculul poate dura secunde bune, deci butonul TREBUIE sa arate ca lucreaza.
   INELUL CARE SE INVARTE ESTE ::before, NU UN ELEMENT DIN PAGINA: app.js inlocuieste
   textContent-ul butonului cu "Se optimizeaza...", deci orice copil scris in pagina ar fi
   sters la prima rulare si nu s-ar mai intoarce niciodata.
   Butonul NU capata atunci bulina de intrebare de la 9b: asteptarea nu este o interdictie,
   iar un semn de "nu ai voie" pentru doua secunde de calcul ar minti. */
/* Regula este scrisa pe CLASA, nu pe identificator: acelasi inel il cere acum si
   butonul "Aplica si calculeaza" al meniului manual (cerinta 5), care lucreaza circa o
   secunda si trebuie sa arate ca lucreaza. Selectorul cu identificator ramane dedesubt,
   nescimbat, ca nimic din ce mergea sa nu se schimbe.
   RESPECTA 'prefers-reduced-motion': cine a cerut miscare putina primeste cursorul de
   asteptare si inelul oprit, nu unul care se invarte. */
button.lucreaza { position: relative; cursor: progress; padding-left: 26px; }
button.lucreaza::before {
  content: "";
  position: absolute; left: 9px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px;
  border: 2px solid rgba(6, 16, 28, .35);
  border-top-color: var(--c-accent-inch);
  border-radius: 50%;
  animation: rg-invarte .8s linear infinite;
}
button.lucreaza::after { content: none; }
/* butonul secundar (fara fundal deschis) are nevoie de alt contrast pe inel */
button.sec.lucreaza::before { border-color: var(--c-linie); border-top-color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  button.lucreaza::before { animation: none; }
}

#btnOptimizeaza { position: relative; }
#btnOptimizeaza.lucreaza { cursor: progress; padding-left: 26px; }
#btnOptimizeaza.lucreaza::before {
  content: "";
  position: absolute; left: 9px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px;
  border: 2px solid rgba(6, 16, 28, .35);
  border-top-color: var(--c-accent-inch);
  border-radius: 50%;
  animation: rg-invarte .8s linear infinite;
}
#btnOptimizeaza.lucreaza::after { content: none; }
@keyframes rg-invarte { to { transform: rotate(360deg); } }

/* --- linia de stare din panou ---
   Aceeasi caseta ca #stareEch: in acelasi panou nu se inventeaza un al doilea fel de a
   arata o stare. Cifrele sunt tabulare, ca sa nu joace latimea intre doua rulari.
   'data-fel' il scrie app.js: gol (niciun mijloc bifat), lucru (se calculeaza),
   ok (a mers), rau (nu a mers). */
.rg-stare {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-linie-tare);
  border-radius: var(--r-1);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
.rg-stare:empty { display: none; }
.rg-stare[data-fel="gol"]   { color: var(--c-text-3); }
.rg-stare[data-fel="lucru"] { border-left-color: var(--c-atentie); }
.rg-stare[data-fel="ok"]    { border-left-color: var(--c-bine); }
.rg-stare[data-fel="rau"]   { border-left-color: var(--c-rau); color: #ffb3b3; }
.rg-stare b { color: var(--c-text-tare); font-weight: 700; }
.rg-stare .r2 { margin-top: 2px; color: var(--c-text-3); }


/* =====================================================================================
   11d. FILA DE REZULTAT

   Marcajul il scrie app.js, intreg (arataRezultatulReglajului). Foaia de stil imbraca
   exact clasele lui, in ordinea in care apar pe ecran:
       .verdict (.bun / .rau / .senin) + .verdict-cap      verdictul din cap
       .rez-mijloace                                       ce mijloace au lucrat
       .rez-bloc > h4                                      o grupa cu titlul ei
       .cifre > .cifra (.rau / .bun / .tare)               cifrele mari cerute anume
             .cifra-et  eticheta ; .cifra-val  cifra ; .cifra-sub  lamurirea
       table.kv                                            tabelul cheie/valoare (are deja
                                                           stil, de la sectiunea 5)
       table.tabel.mic                                     tabelele late
       details.pliant                                      jurnalul si listele lungi
       .nota (.avert / .slab)                              notele de sub cifre
   DERULAREA se face pe #rezReglaj, care are min-height: 0 - fara el un container flex nu
   coboara niciodata sub inaltimea continutului si bara de derulare nu apare nicaieri.
   .continut ramane cu 'overflow: hidden', ca toate celelalte file.
   ===================================================================================== */
.rez-reglaj {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-right: var(--sp-2);
  font-size: var(--t-2);
}
.rez-reglaj > * + * { margin-top: var(--sp-3); }

/* ------------------------------------------------------------------ VERDICTUL ----
   Sta in capul rezultatului si spune doua lucruri deodata: daca s-a rezolvat si cate
   abateri erau fata de cate au ramas. Trei stari, si toate trei sunt raspunsuri bune:
     .bun    s-au rezolvat
     .rau    nu s-au rezolvat toate
     .senin  NU ERA NIMIC DE REZOLVAT - pe trei din cele patru regimuri cazul de baza
             este deja in banda. Nu este o eroare si nu se scrie in rosu; are culoarea
             ei, neutra-albastra, ca sa nu fie citita nici drept izbanda, nici drept
             esec. */
.verdict {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie); border-left: 3px solid var(--c-linie-tare);
  border-radius: var(--r-2);
  color: var(--c-text-2); line-height: 1.45;
}
.verdict-cap {
  margin-bottom: 2px;
  font-size: 15px; font-weight: 700; color: var(--c-text-tare);
}
.verdict p { margin: 0; }
.verdict strong { color: var(--c-text-tare); }
.verdict.bun   { border-left-color: var(--c-bine); }
.verdict.bun   .verdict-cap { color: var(--c-bine); }
.verdict.rau   { border-left-color: var(--c-rau); }
.verdict.rau   .verdict-cap { color: #ffb3b3; }
.verdict.senin { border-left-color: var(--c-accent); }
.verdict.senin .verdict-cap { color: var(--c-accent); }
/* A PATRA STARE, adusa de planul pe set de regimuri: nici bun, nici rau - s-a acoperit tot
   ce se putea acoperi cu bobine, iar ce a ramas cere alt fel de masura (noduri sub limita
   de jos, pe care o bobina nu le poate ridica). Culoarea de atentie, nu cea de primejdie. */
.verdict.avert { border-left-color: var(--c-atentie); }
.verdict.avert .verdict-cap { color: var(--c-atentie); }
/* verdictul planului sta deasupra celui pe regim: se deosebeste printr-un fond mai adanc,
   ca sa se citeasca drept capul sectiunii, nu drept al doilea verdict */
.verdict-plan { background: var(--c-fund-0); margin-bottom: var(--sp-2); }
/* lista nodurilor iesite din banda, pliata in verdict */
.verdict .pliant { margin-top: var(--sp-2); }

/* mijloacele folosite, imediat sub verdict */
.rez-mijloace {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-1);
  font-size: var(--t-1); color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.rez-mijloace strong { color: var(--c-accent); }

/* ------------------------------------------------------ o grupa de rezultat ----- */
.rez-bloc {
  padding: var(--sp-3);
  background: var(--c-fund-2);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.rez-bloc > h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-text-3);
}
.rez-bloc > * + * { margin-top: var(--sp-2); }
.rez-bloc > h4 + * { margin-top: 0; }

/* BLOCUL CARE SCHIMBA TEMEIUL CALCULULUI. Cand un rezultat a fost obtinut cu alte limite
   de reactiv decat cele din fisierul de intrare, blocul care spune asta nu are voie sa
   arate ca oricare altul: cine se uita in fuga peste rezultat trebuie sa vada din prima
   privire ca nu se uita la datele livrate. De aceea poarta dunga si fundalul de avertizare
   ale paginii, aceleasi cu ale celorlalte avertismente - nu o culoare noua. */
.rez-bloc.avert-bloc {
  border-left: 3px solid var(--c-atentie);
  background: color-mix(in srgb, var(--c-atentie) 7%, var(--c-fund-2));
}
.rez-bloc.avert-bloc > h4 { color: var(--c-atentie); }

/* CAUTAREA TINTEI PRIN TASTARE, in meniul de reglaj MANUAL.
   Caseta si numarul de potriviri stau pe acelasi rand, deasupra listei: numarul spune
   dintr-o privire daca ce s-a scris a lasat ceva ("7 din 244") sau nimic. Cand nu mai
   ramane nimic, numarul se aprinde in culoarea de atentie - altfel omul crede ca lista s-a
   golit de la sine. */
.tinta-cauta {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 4px;
}
.tinta-cauta input[type="search"] { flex: 1 1 auto; min-width: 0; }
.tinta-numar {
  flex: 0 0 auto;
  font-size: var(--t-0); color: var(--c-text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tinta-numar.gol { color: var(--c-atentie); font-weight: 700; }

/* FEREASTRA PROBLEMEI. Nu este modala: se deschide cu .show(), tocmai ca schema sa ramana
   vazuta si lucratoare cat timp se citeste explicatia. De aceea nu are nici fundal
   intunecat si nici nu sta in mijloc, ci intr-o coloana lipita de marginea din dreapta,
   peste panoul de rezultate - locul in care nu acopera desenul.
   Latimea este marginita in doua feluri: 560 px, dar nu mai mult de 40 % din ecran, ca pe
   un ecran mic sa nu inghita schema pe care tocmai vrea sa o arate. */
.dlg-prob {
  position: fixed; inset: auto var(--sp-4) var(--sp-4) auto;
  width: min(560px, 40vw); height: min(640px, 74vh);
  /* SE POATE MUTA SI REDIMENSIONA. Mutarea se face tragand de capul ferestrei (vezi
     faceFereastraMutabila din app.js), redimensionarea de coltul din dreapta-jos, cu
     'resize' al browserului - care cere ca 'overflow' sa nu fie 'visible'.
     Marginile de mai jos sunt cele in care fereastra ramane de folos: sub 320 px latime
     tabelele nu mai incap, iar peste 96 % din ecran ar acoperi chiar schema pe care este
     chemata sa o arate. */
  min-width: 320px; min-height: 160px;
  max-width: 96vw; max-height: 92vh;
  resize: both;
  margin: 0; padding: 0;
  display: none; flex-direction: column;
  background: var(--c-fund-1);
  color: var(--c-text-1);
  border: 1px solid var(--c-linie-tare);
  border-left: 3px solid var(--c-atentie);
  border-radius: var(--r-2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  overflow: hidden;
  z-index: 40;
}
.dlg-prob:not([hidden]) { display: flex; }
/* NU este un <dialog>, si asta este o hotarare, nu o scapare. Fereastra trebuie sa fie
   nemodala - schema de sub ea se vede si ramane lucratoare -, iar un <dialog> deschis cu
   .show() ar fi ramas totusi un 'dialog[open]' in pagina, adica ar fi fost prins de tot
   codul care intreaba "care fereastra este deschisa acum". Masurat: doua probe citeau
   continutul ferestrei gresite. Un <div> cu 'hidden' nu se amesteca in socoteala aceea. */

.prob-cap {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--c-atentie) 10%, var(--c-fund-2));
  border-bottom: 1px solid var(--c-linie);
  /* de aici se trage fereastra; textul nu se selecteaza in timpul mutarii */
  cursor: move; user-select: none; touch-action: none;
}
.prob-cap button { cursor: pointer; touch-action: auto; }
.prob-cap h2 {
  flex: 1 1 auto; margin: 0;
  font-size: var(--t-2); font-weight: 700; color: var(--c-atentie);
}
.prob-nav { display: flex; align-items: center; gap: 4px; }
.prob-poz { font-size: var(--t-0); color: var(--c-text-3); white-space: nowrap; }
.prob-corp {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
}
.prob-corp > h5 {
  margin: var(--sp-2) 0 0;
  font-size: var(--t-0); font-weight: 700; letter-spacing: .6px;
  color: var(--c-text-2);
}
.prob-regim { margin: 0; font-size: var(--t-2); }
#probMijloc { display: flex; flex-direction: column; gap: var(--sp-2); }
#probMijloc > h5 {
  margin: var(--sp-1) 0 0;
  font-size: var(--t-0); font-weight: 700; letter-spacing: .6px;
  color: var(--c-text-2);
}

/* Campurile numerice din fereastra de capabilitate: destul de late cat sa incapa
   "-142,6" fara sa taie cifrele, si aliniate la dreapta ca sa se poata compara coloana. */
.capab-nr {
  width: 5.5em; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* SUBTITLUL UNEI GRUPE DINAUNTRUL UNUI BLOC. Blocul "Metodele operationale folosite" are
   trei tabele - consemne, injectii, ploturi -, fiindca cele trei mijloace nu se masoara
   in acelasi fel si nu incap intr-un tabel comun. Fiecare isi poarta titlul lui: mai mic
   decat al blocului, ca sa se vada ca este o parte a lui, si putin departat de tabelul
   dinaintea lui, ca cele trei sa nu se citeasca drept unul singur. */
.rez-bloc > h5 {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--t-0); font-weight: 700; letter-spacing: .6px;
  color: var(--c-text-2);
}
.rez-bloc > h5:first-of-type { margin-top: var(--sp-1); }
.rez-bloc > h5 + * { margin-top: 0; }

/* --------------------------------------------- CELE TREI CIFRE CERUTE ANUME -----
   Beneficiarul le-a cerut pe litere: "vreau evidentiat clar impactul asupra CPT
   (diferenta de pierderi totale de MW intre cazul de baza si cel compensat), MVAr
   mobilizati pentru compensare si costul orar al reglajului."
   De aceea sunt scrise la corp mare, in carduri proprii, nu ca randuri dintr-un tabel.
   auto-fit cu minmax(190px, 1fr): unde incap, cifrele stau una langa alta; unde nu,
   trec singure pe randul urmator, fara nicio latime scrisa de mana. */
.cifre {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cifra {
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-linie-tare);
  border-radius: var(--r-1);
}
.cifra-et {
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* CIFRA MARE. tabular-nums, ca semnul sa nu mute cifrele cand trece de la + la -.
   SEMNUL FACE PARTE DIN CIFRA si se scrie intotdeauna: pe cazul de studiu dCPT este
   POZITIV (+0,129 MW), adica reglajul INRAUTATESTE pierderile, si asta trebuie sa se
   vada, nu sa fie ascuns dupa un modul. */
.cifra-val {
  margin-top: 1px;
  font-size: 24px; font-weight: 700; line-height: 1.1;
  color: var(--c-text-tare);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cifra-sub {
  margin-top: 2px;
  font-size: var(--t-1); line-height: 1.35; color: var(--c-text-3);
}
/* CULOAREA URMEAZA SENSUL, nu semnul aritmetic - si asta se hotaraste in app.js, care
   pune clasa: la CPT o crestere a pierderilor este '.rau', o scadere este '.bun'. Aici
   nu se foloseste conventia .poz / .neg din tabele (unde verde inseamna "pozitiv"),
   fiindca la CPT pozitiv inseamna mai rau, si doua conventii cu aceleasi culori in
   aceeasi pagina ar fi o capcana. */
.cifra.rau  { border-left-color: var(--c-atentie); }
.cifra.rau  .cifra-val { color: var(--c-atentie); }
.cifra.bun  { border-left-color: var(--c-bine); }
.cifra.bun  .cifra-val { color: var(--c-bine); }
.cifra.tare { border-left-color: var(--c-accent); background: var(--c-accent-slab); }
.cifra.tare .cifra-val { color: var(--c-text-tare); }

/* ------------------------------------------------ tabelele late din rezultat -----
   Sunt de acelasi fel cu tabelul nodurilor si cel al laturilor - antet lipit sus, cifre
   la dreapta, text la stanga - dar mai stranse, fiindca stau cate patru-cinci intr-o
   fila. Se deruleaza pe orizontala in cutia lor, deci o coloana adaugata de server nu
   poate impinge pagina si nu poate scoate nimic din fereastra. */
.tabel {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--t-1); font-variant-numeric: tabular-nums;
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
  overflow: hidden;
}
.tabel th {
  position: sticky; top: 0; z-index: 2;
  padding: 5px 8px;
  background: var(--c-fund-3);
  box-shadow: inset 0 -1px 0 var(--c-linie);
  color: var(--c-text-2); font-weight: 600; text-align: right; white-space: nowrap;
}
.tabel td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--c-linie-slaba);
  text-align: right; white-space: nowrap;
}
.tabel th.txt, .tabel td.txt { text-align: left; }
.tabel th.num, .tabel td.num { text-align: right; }
.tabel td.tare, .tabel th.tare { color: var(--c-text-tare); font-weight: 700; }
.tabel tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.tabel tfoot td {
  border-top: 1px solid var(--c-linie); border-bottom: 0;
  background: var(--c-fund-3); font-weight: 600; color: var(--c-text);
}
/* randul variantei chiar aplicate, in tabelul de comparatie MILP / rotunjire */
.tabel tr.ales td { background: var(--c-accent-slab); }
.tabel tr.ales td:first-child { box-shadow: inset 2px 0 0 var(--c-accent); }
/* un tabel lat nu are voie sa impinga fila: se deruleaza in laturi in cutia lui */
.rez-bloc .tabel, .pliant .tabel { display: table; }
.rez-bloc > table.tabel, .pliant > table.tabel { table-layout: auto; }

/* ------------------------------------------------- listele pliate din rezultat ---
   Jurnalul trecerilor si lista nodurilor iesite din banda: sunt PROBA, nu titlu, deci
   stau pliate. Aceeasi sageata ca la sectiunile panoului, ca sa nu existe doua feluri de
   a arata "se deschide" in aceeasi pagina. */
.pliant {
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.pliant.rez-bloc { background: var(--c-fund-2); padding: 0; }
.pliant > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 26px; padding: 0 var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  cursor: pointer; user-select: none;
  list-style: none;
}
.pliant > summary::-webkit-details-marker { display: none; }
.pliant > summary:hover { color: var(--c-text); }
.pliant > summary::after {
  content: "";
  flex: 0 0 auto; width: 7px; height: 7px; margin-left: auto; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .14s ease;
}
.pliant[open] > summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.pliant[open] > summary { border-bottom: 1px solid var(--c-linie); }
.pliant > *:not(summary) { margin: var(--sp-3); }
.pliant > table { width: calc(100% - 2 * var(--sp-3)); }

/* un pas al jurnalului: titlul lui si perechile cheie/valoare de sub el */
.jurnal-pas + .jurnal-pas { border-top: 1px solid var(--c-linie); padding-top: var(--sp-3); }
.jurnal-cap {
  margin-bottom: var(--sp-1);
  font-size: var(--t-2); font-weight: 700; color: var(--c-text-2);
}
.jurnal-pas .kv td:first-child { width: 58%; }

/* --------------------------------------------------------- notele de rezultat ----
   .nota           lamurire obisnuita
   .nota.avert     conditia in care se citesc cifrele economice: ofertele sunt GENERICE.
                   Nu este o nota de subsol marunta - fara ea, cifrele ar putea fi luate
                   drept preturi de piata - dar nici o alarma: textul ramane potolit, se
                   aprinde numai chenarul.
   .nota.slab      sursa cifrelor, notele serverului
   Textele sunt ALE SERVERULUI (lamurirea de la /api/reglaj/oferte si cost.VAN_eticheta);
   pagina nu scrie niciunul dintre ele. */
.nota {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-1); line-height: 1.45; color: var(--c-text-2);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-linie-tare);
  border-radius: var(--r-1);
}
.nota strong { color: var(--c-text); }
.nota.avert { border-left-color: var(--c-atentie); color: #ffd9a3; }
.nota.avert strong { color: var(--c-atentie); }
.nota.slab { color: var(--c-text-3); border-left-color: var(--c-linie); }
/* '.note-economice' nu se mai naste in fila de rezultat: notele despre oferte si despre
   ce inseamna "VAN" au plecat in fereastra de analiza economica, la sectiunea 12. */
.rez-reglaj .kv { width: 100%; }
.rez-reglaj .kv td { font-size: var(--t-1); }
.rez-reglaj .kv td:first-child { width: 60%; color: var(--c-text-3); }
.rez-reglaj .kv td.tare, .rez-reglaj .kv td .tare { color: var(--c-text-tare); font-weight: 700; }


/* =====================================================================================
   11e. BUGETUL DE INALTIME AL PANOULUI, REFACUT PENTRU A 11-A SECTIUNE

   Panoul avea zece sectiuni si zero controale sub marginea lui. A unsprezecea nu incape
   pe gratis, deci bugetul se reface, nu se spera.

   MASURAT la 1280x720, in panoul de 672 px, cu sectiunile implicite (px):

     MODUL MANUAL (cel de pornire)          MODUL OPTIMIZAT
       comutatorul de meniu       34          comutatorul de meniu       34
       nodul selectat             71          nodul selectat             68
       comanda de reglaj         238          comanda de reglaj          30 (inchisa)
       reglaj optimizat           30 (inchis) reglaj optimizat          241
       bilantul                   48          bilantul                   48
       alte 6 titluri inchise    180          alte 6 titluri inchise    180
       lista comenzilor           30          lista comenzilor           30
       spatii + umplutura         41          spatii + umplutura         41
       ---------------------------------      ---------------------------------
       total                     672          total                     672
       de derulat                  0          de derulat                  0

   La 1600x900 (panou de 850 px) ramane loc: bilantul isi ia inaltimea intreaga (188 px)
   si tot nu se deruleaza nimic.

   CE TINE PROMISIUNEA. Cele doua sectiuni ale celor doua meniuri nu stau niciodata
   deschise deodata: app.js (alegeModReglaj) o deschide pe una si o inchide pe cealalta.
   Din aceasta cauza panoul nu are de purtat niciodata amandoua deodata, si de asta
   atarna incaperea. Daca ar sta amandoua deschise, panoul s-ar derula - nu s-ar pierde
   nimic, dar promisiunea "zero controale sub margine" nu ar mai tine, deci comutarea
   sectiunilor este parte din contract, nu un moft.

   #sec-optim NU CEDEAZA NIMIC (flex-shrink: 0), la fel ca "Comanda de reglaj": corpul lui
   este numai comenzi - patru bife si un buton - deci orice stramtare ar ascunde chiar
   comanda pentru care s-a deschis sectiunea. Podeaua lui este masurata: titlu + cele doua
   submeniuri + butonul de rulare, adica tot ce se poate apasa.
   ===================================================================================== */
#sec-optim[open] { flex-shrink: 0; min-height: 232px; }

/* Nodul selectat si bilantul isi cedeaza cate un pic de podea celei de-a unsprezecea
   sectiuni. Amandoua au voie: nodul selectat arata un tabel, bilantul un tabel si o
   panza, si NICIUNUL nu are vreo comanda. Podeaua noua este tot destul cat sa se vada ca
   sectiunea este deschisa si sa se citeasca primul rand din ea - o sectiune "deschisa"
   care nu arata nimic ar fi la fel de suparatoare ca un buton cazut sub marginea
   panoului. */
#sec-nod[open]    { min-height: calc(var(--h-sec-cap) + 26px); }
#sec-bilant[open] { min-height: calc(var(--h-sec-cap) + 20px); }
/* REZERVA, masurata. La 1280x720 panoul este exact plin: 672 din 672 px, zero de derulat.
   Cat mai poate ceda, daca vreun rand creste - de exemplu linia de stare a optimizarii,
   care poate ajunge la doua randuri: bilantul este deja pe podeaua lui (48 px), iar nodul
   selectat mai are pana la a lui 71 - 54 = 17 px in modul manual si 68 - 54 = 14 px in
   cel optimizat. Peste atat panoul se deruleaza: nu se pierde nimic, dar se pierde
   promisiunea. Cand se ajunge acolo se coboara podelele de mai sus sau se strang randurile
   sectiunii noi - NU se adauga alta sectiune deschisa. */


/* ------------------------------------- 11f. latimi mici, pentru elementele noi ---- */

/* Sub 1180 px comutatorul de vedere se stramteaza, dar NU renunta la cuvinte: aceeasi
   regula ca la comutatorul RULARE | EDITARE - doua initiale ar fi o ghicitoare. */
@media (max-width: 1180px) {
  .comutator-vedere { width: 206px; }
  .cv-buton { padding: 0 3px; letter-spacing: 0; }
}

/* Panoul se ingusteaza la 288, apoi la 260 px: eticheta "REGLAJ U/Q" de langa comutatorul
   de meniu ar fura din latimea celor doua jumatati, care trebuie sa ramana egale. Se
   scoate; titlul se citeste oricum din titlurile celor doua sectiuni. */
@media (max-width: 1200px) {
  .rg-mod > .rg-mod-et { display: none; }
  .rg-mod { padding-left: var(--sp-2); }
}

/* Ferestre scunde: zona de diagrame are numai ~210 px, deci cifra mare se micsoreaza.
   Nimic nu dispare - rezultatul se deruleaza. */
@media (max-height: 800px) {
  .cifra-val { font-size: 21px; }
}
@media (max-height: 680px) {
  .cifra-val { font-size: 19px; }
  .cifre { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
}

/* Sub 960 px pagina se aseaza pe o coloana si se deruleaza pe verticala. Bara schemei
   nu mai are loc pentru tot ce poarta pe un singur rand, deci TRECE PE DOUA RANDURI.
   Prima incercare a fost sa i se dea comutatorului toata latimea ('width: 100%'), si a
   fost gresita: intr-un rand flex fara innadire, un element care cere 100 % ii impinge
   pe ceilalti afara. Masurat la 900x700: bara cerea cu 333 px mai mult decat avea, si
   pagina capata bara de derulare ORIZONTALA - defect pe care aplicatia nu il avea.
   Acum bara se innadeste, iar comutatorul isi pastreaza latimea lui de 206 px: cele trei
   treimi raman egale si citibile, iar cautarea trece pe randul al doilea.
   Masurat dupa reparatie, la 900x700: zero derulare orizontala, zero de derulat in bara. */
@media (max-width: 960px) {
  .bara-unelte { flex-wrap: wrap; }
  .bara-unelte .spatiu { display: none; }
  .bara-unelte .cauta { flex: 1 1 160px; width: auto; }
  .comutator-vedere { width: 206px; margin-right: 0; }
  .cv-buton { padding: 0 3px; letter-spacing: 0; }
  /* banda vederii poate ajunge la trei randuri pe latimi mici: nota este aceeasi, dar
     randul este mai scurt. Se lasa mai inalta, tot FIX, ca schema sa nu se miste. */
  /* banda vederii este acum un element din bara de unelte, nu un rand al ei: nu mai
     are inaltime proprie de fixat */
  .bv-text { -webkit-line-clamp: 3; }
}



/* =====================================================================================
   12. ANALIZA ECONOMICA SI GLOSARUL

   BENEFICIARUL, pe litere: "fereastra de rezultat va contine doar rezultatul tehnic.
   Analiza economica va avea un buton puternic contrastant si se va deschide intr-o
   fereastra mare, in care vei pune toate datele de intrare, Qcalculat, Bobine alese -
   caracteristici si preturi, analiza cost - beneficiu, analiza recuperarii investitiei
   ROI (Return of Investment) grafice relevante, imagini si tot ce consideri necesar."
   Si: "Te rog sa le pui in fereastra ca preambul, inainte de a prezenta rezultatele."
   Si: "Te rog sa si explici marimile pe care le folosesti sau sa pui linkuri catre
   adrese unde pot fi gasite explicatiile."

   CUPRINS
     12a. culoarea si butonul puternic contrastant
     12b. corpul ferestrei: preambulul pe coloane, apoi rezultatele
     12c. ipotezele reglabile
     12d. blocurile de rezultat (Q, formule, panzele graficelor)
     12e. usa din fila de rezultat tehnic
     12f. glosarul
     12g. latimi mici
   ===================================================================================== */


/* ------------------------------------------------ 12a. CULOAREA SI BUTONUL (D7) ----
   DE CE CHIHLIMBAR PLIN, si ce s-a cantarit inainte. Pe ecran sunt deja luate:
   albastrul (--c-accent) de butoanele primare si de nivelul MT, verdele (--c-bine) de
   110 kV, rosul de 400 kV si de erori, violetul de modul EDIT, magenta de judete.
   Ramanea chihlimbarul - si el este si culoarea in care ochiul citeste "bani". Riscul
   stiut: --kv-220 este tot chihlimbar. Butonul nu sta insa niciodata pe schema, ci in
   antetul filei de rezultat si in capul ferestrei, deci nu se poate citi drept nivel de
   tensiune; iar forma lui - dreptunghi PLIN, cu text inchis, majuscule - nu seamana cu
   nimic altceva din pagina.
   Contrastul textului pe fond: #0b0f14 pe #f0b429 = 11,9:1, mult peste pragul AA.
   Fata de fondul filei (--c-fund-1 #111823) butonul insusi are 10,7:1, adica exact ce
   inseamna "puternic contrastant". */
:root {
  --c-econ:      #f0b429;
  --c-econ-tare: #ffc94d;
  --c-econ-inch: #0b0f14;
  --c-econ-slab: rgba(240, 180, 41, .14);
}

.btn-econ {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 28px; padding: 0 14px;
  background: var(--c-econ);
  border: 1px solid var(--c-econ-tare); border-radius: var(--r-2);
  color: var(--c-econ-inch);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  line-height: 1; cursor: pointer;
  box-shadow: var(--umbra-1);
}
.btn-econ:hover, .btn-econ:focus-visible {
  background: var(--c-econ-tare);
  border-color: #ffe3a0;
  color: #000;
}
.btn-econ:disabled {
  background: none; border-color: var(--c-linie-tare); color: var(--c-text-3);
  box-shadow: none; cursor: not-allowed;
}
.btn-econ-semn { font-size: 10px; line-height: 1; }
/* in antetul filei sta la dreapta, dupa lamurire */
.grafic-cap .btn-econ { margin-left: auto; }
/* in capul ferestrei dedicate (bara #ferUnelte) nu are voie sa fie mai inalt decat
   celelalte unelte, altfel ridica randul titlului */
.fer-unelte .btn-econ { min-height: 26px; }


/* ---------------------------------------- 12b. CORPUL FERESTREI DE ANALIZA ----
   ORDINEA ESTE CERUTA, nu aleasa: preambulul PRIMUL (definitia venitului anual necesar,
   ipotezele reglabile, cele doua perspective, avertismentele), rezultatele dupa el.
   Marcajul le scrie in aceasta ordine si asezarea nu o schimba - grila curge in ordinea
   de citire, deci ce este scris primul se si citeste primul.

   ASEZAREA. Patru coloane pe fereastra mare (1560 px), blocurile DOUA CATE DOUA: asa
   fereastra nu se intinde in lungime cat un raport tiparit. La 1200 px trece la doua
   coloane, sub 780 px la una singura. Nicaieri o latime scrisa cu mana in continut:
   coloanele sunt fractiuni. */
.econ-continut { gap: var(--sp-4); }

.econ-preambul,
.econ-grila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.econ-preambul > *, .econ-grila > * { min-width: 0; }
/* cate doua pe rand; ce este lat tine tot randul */
.econ-doi { grid-column: span 2; }
.econ-lat { grid-column: 1 / -1; }
.econ-definitie { grid-column: span 2; }
.econ-preambul > .econ-bloc { grid-column: span 2; }
.econ-perspective { grid-column: span 2; display: grid; gap: var(--sp-4);
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.econ-averti { grid-column: span 2; }

.econ-bloc > h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* ETICHETA UNEI CIFRE MARI poarta si semnul de glosar, deci nu mai poate fi un rand
   taiat cu "...": se innadeste pe doua randuri. In fila de rezultat eticheta ramane
   cum era - acolo nu are semne langa ea. */
.econ-bloc .cifra-et {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.econ-bloc .cifra-val { white-space: normal; }

/* ASEZAREA PREAMBULULUI PE FEREASTRA LARGA. Ipotezele sunt blocul cel mai inalt (610 px
   masurat), definitia cel mai scurt (339 px): puse pe acelasi rand, sub definitie
   ramanea un gol de 270 px. De aceea, de la 1201 px in sus, ipotezele tin DOUA randuri
   in coloana din dreapta, iar in stanga curg definitia si cele doua perspective.
   Ordinea de citire NU se schimba - ea este data de marcaj, si acolo blocurile stau in
   ordinea ceruta: definitie, ipoteze, perspective, avertismente.
   Masurat: preambulul se scurteaza de la 1258 px la circa 1000 px. */
@media (min-width: 1201px) {
  .econ-definitie             { grid-column: 1 / 3; grid-row: 1; }
  .econ-preambul > .econ-bloc { grid-column: 3 / 5; grid-row: 1 / 3; }
  .econ-perspective           { grid-column: 1 / 3; grid-row: 2; }
  .econ-averti                { grid-column: 1 / -1; grid-row: 3; }
}
/* --- IMPACTUL IN TARIF: analiza principala, primul bloc de rezultat --------------
   Se vede ca este blocul de titlu, nu unul dintre multe: dunga de accent la stanga,
   capul scris in culoarea economiei si cifra dintai la corp mai mare. Framingul de
   pana acum era al unui investitor nereglementat ("in cati ani imi scot banii"); pentru
   un operator reglementat intrebarea este cat adauga in tariful de distributie, si de
   aceea cifra aceea este cea care trebuie sa se citeasca dintr-o privire. */
.econ-cap-tarif {
  border-left: 3px solid var(--c-econ);
  background: var(--c-fund-1);
}
.econ-cap-tarif > h3 { color: var(--c-econ); }
.econ-cap-tarif .fer-cifre > .cifra.tare .cifra-val { font-size: 30px; }
.econ-cap-tarif .tabel .slab { font-weight: 400; }

/* blocul secundar - recuperarea din cost evitat - se citeste ca secundar */
.econ-roi > h3 { color: var(--c-text-2); }

.econ-bloc .kv td:first-child { width: 58%; color: var(--c-text-3); }
.econ-bloc .tabel { width: 100%; }
.econ-bloc > .fer-cifre { margin: 2px 0; }
.econ-bloc .pliant { background: var(--c-fund-0); }
.econ-bloc .pliant .rez-bloc { background: none; padding: 0; }
.econ-bloc .pliant .rez-bloc > h4 { display: none; }

/* --- definitia, in capul preambulului: este raspunsul la "ce inseamna VAN aici" --- */
.econ-definitie {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie);
  border-left: 3px solid var(--c-econ);
  border-radius: var(--r-2);
}
.econ-definitie-cap {
  font-size: var(--t-4); font-weight: 600; color: var(--c-text);
}
.econ-definitie-cap strong { color: var(--c-econ); }
.econ-citat {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
  color: var(--c-text); font-size: var(--t-3); font-style: italic; line-height: 1.5;
}
.econ-citat cite {
  display: block; margin-top: var(--sp-2);
  font-size: var(--t-1); font-style: normal; color: var(--c-text-3);
}
.econ-citat cite::before { content: "\2014\00a0"; }

/* --- avertismentele: la vedere, nu la subsol --- */
.econ-averti {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 180, 84, .07);
  border: 1px solid rgba(255, 180, 84, .38); border-radius: var(--r-2);
}
.econ-averti-cap {
  margin-bottom: var(--sp-2);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--c-atentie);
}
.econ-averti ul { margin: 0; padding-left: 18px; }
.econ-averti li {
  margin-bottom: var(--sp-2);
  font-size: var(--t-2); line-height: 1.5; color: var(--c-text-2);
}
.econ-averti li:last-child { margin-bottom: 0; }
.econ-averti strong { color: var(--c-text); }
.econ-averti .slab { color: var(--c-text-3); font-size: var(--t-1); }


/* ------------------------------------------------- 12c. IPOTEZELE REGLABILE ----
   Fiecare cu unitatea ei, cu semnul de glosar si cu randul care spune ca este ipoteza
   de studiu. Schimbarea oricareia recalculeaza indata TOATA analiza (app.js,
   econSchimbaIpoteza): campurile stau in preambul, iar rescrierea atinge numai
   #econRez, deci cursorul nu sare din camp in timp ce se tasteaza. */
.econ-ipoteze {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.econ-ip {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
  cursor: default;
}
.econ-ip-lat { grid-column: 1 / -1; }
.econ-ip-et {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-2); font-weight: 600; color: var(--c-text);
}
.econ-ip-camp { display: flex; align-items: center; gap: 6px; }
.econ-ip-camp input[type="number"] {
  width: 84px; min-height: 26px; padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.econ-ip-camp input[type="range"] { flex: 1 1 auto; min-width: 120px; }
.econ-ip-nr { flex: 0 0 auto; }
.econ-ip-u { font-size: var(--t-1); color: var(--c-text-3); white-space: nowrap; }
.econ-ip-sub { font-size: var(--t-1); line-height: 1.45; color: var(--c-text-3); }
.econ-ip-sub strong { color: var(--c-text-2); }

.econ-ip-bara {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-linie);
}
/* ECOUL: ce a iesit din ipoteze, pe un singur rand, langa butonul de aducere la
   valorile de studiu. Fara el, omul care trage de glisor ar trebui sa coboare cu
   ochii in fereastra ca sa vada daca s-a schimbat ceva. */
.econ-ecou {
  flex: 1 1 260px;
  font-size: var(--t-2); color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.econ-ecou strong { color: var(--c-econ); font-weight: 700; }


/* --------------------------------------------- 12d. BLOCURILE DE REZULTAT ----  */

/* Q calculat: reperul continuu care nu se poate cumpara si Q-ul instalat in trepte */
.econ-q {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.econ-q-rand {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 2px 0;
}
.econ-q-et { font-size: var(--t-2); color: var(--c-text-2); }
.econ-q-val {
  font-size: var(--t-4); font-weight: 600; color: var(--c-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.econ-q-val.tare { color: var(--c-econ); }
.econ-q-unde {
  padding: 2px 0 var(--sp-2);
  font-size: var(--t-1); color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.econ-q .nota { margin-top: var(--sp-2); }

/* formulele, scrise langa cifre ca sa se poata verifica cu ochiul */
.econ-formule {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.econ-formula {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-1);
}
.econ-formula > span {
  flex: 0 0 auto;
  font-size: var(--t-1); text-transform: uppercase; letter-spacing: .3px;
  color: var(--c-text-3);
}
.econ-formula code {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-2); color: var(--c-text);
  overflow-wrap: anywhere;
}

/* PANZELE GRAFICELOR. Sunt gazde goale, cu inaltime data: modulul diagramelor
   (Grafice.economic) isi pune panza in ele si o masoara singur. Inaltimea este scrisa
   aici, nu in JavaScript, ca sa se poata schimba fara sa se atinga codul. */
.econ-panza {
  position: relative; width: 100%;
  height: 215px; min-height: 190px;
  margin-top: var(--sp-2);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
  overflow: hidden;
}
.econ-panza > canvas, .econ-panza > svg { display: block; width: 100%; height: 100%; }
.econ-panza-mica { height: 175px; min-height: 160px; }

/* Cele trei randuri de formula din explicatia beneficiarului (textul din
   "Explicativa economica"). Sunt egalitati, nu proza: se aliniaza unele sub altele si
   primesc cifre de latime fixa, ca semnele = si x sa cada in coloana. Numele este
   "egalitati", nu "formule": .econ-formule de mai sus este grila casetelor de formula
   si nu are legatura cu lista aceasta. */
.econ-egalitati {
  margin: var(--sp-2) 0 var(--sp-3);
  padding-left: var(--sp-5);
  list-style: none;
}
.econ-egalitati li {
  position: relative;
  margin: var(--sp-1) 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
}
.econ-egalitati li::before {
  content: "\2022";
  position: absolute; left: calc(-1 * var(--sp-3));
  color: var(--c-accent);
}
/* diagrama recuperarii este cea care poarta hotararea de investitie: cea mai mare si
   pe tot randul */
.econ-panza-mare { height: 290px; min-height: 250px; }
.econ-fara-grafic {
  display: flex; align-items: center; justify-content: center;
  height: 100%; margin: 0; padding: var(--sp-4);
  text-align: center; border: 0;
}

/* TABELELE LATE se deruleaza IN ELE INSELE, nu impinge fereastra pe orizontala.
   .econ-scroll ramane PLASA DE SIGURANTA: daca serverul adauga maine o coloana, ea se
   deruleaza in cutia ei si nu scoate nimic din fereastra.

   DAR PLASA NU ESTE SOLUTIA. Beneficiarul a reclamat anume ca "caracteristicile
   bobinelor necesita scroll orizontal pentru citire", si o cutie care se deruleaza
   ramane tot o cutie care se deruleaza. De aceea tabelele au fost stranse pana INCAP,
   pe trei drumuri deodata:
     1. ANTETELE poarta numai numele marimii; unitatile si semnele de glosar au coborat
        intr-un rand de sub tabel (.econ-unit). Masurat, antetul "pierderi proprii [MW]"
        singur cerea 123 px, mai mult decat cifrele de sub el.
     2. BLOCURILE cu tabele de multe coloane tin toata latimea ferestrei, nu jumatate.
     3. CELULELE au captuseala mai stransa in fereastra economica: 4 px in laturi in loc
        de 8, adica 8 px castigati pe coloana - la zece coloane, 80 px.
   Masurat dupa, la 1920x1080, 1600x900 si 1366x768: zero pixeli de derulat pe
   orizontala in toate tabelele ferestrei. */
.econ-scroll { max-width: 100%; overflow-x: auto; }
.econ-scroll > table, .econ-scroll .tabel { width: 100%; }
.econ-scroll > .rez-bloc { padding: 0; background: none; border: 0; }

/* captuseala stransa NUMAI in fereastra economica: in fila de rezultat tabelele stau
   singure pe latimea lor si nu au nevoie de asa ceva */
.econ-continut .tabel th { padding: 5px 4px; }
.econ-continut .tabel td { padding: 3px 4px; }
.econ-continut .tabel th:first-child,
.econ-continut .tabel td:first-child { padding-left: 8px; }
.econ-continut .tabel th:last-child,
.econ-continut .tabel td:last-child { padding-right: 8px; }

/* randul de unitati de sub un tabel: acolo au coborat unitatile si semnele de glosar
   care largeau antetele. Se citeste o data, nu la fiecare rand. */
.econ-unit {
  margin: 4px 0 0;
  font-size: var(--t-1); line-height: 1.45; color: var(--c-text-3);
}
.econ-unit strong { color: var(--c-text-2); font-weight: 600; }

/* alternativa nemasurata inca: nota si butonul care o cere */
.econ-alt-lipsa {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--c-fund-0);
  border: 1px dashed var(--c-linie-tare); border-radius: var(--r-2);
}
.econ-alt-lipsa .nota { flex: 1 1 260px; margin: 0; border: 0; padding: 0; background: none; }

.econ-note-bara { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.econ-gol { padding: var(--sp-4); }

/* butoanele de navigare din capul ferestrei: fereastra este un document lung, deci
   are nevoie de o bara care nu se deruleaza odata cu el */
.econ-nav { min-height: 24px; padding: 0 8px; font-size: var(--t-1); }


/* --------------------------------------- 12e. USA DIN FILA DE REZULTAT TEHNIC ----
   Acolo unde stateau cifrele de bani sta acum blocul care spune unde au plecat si
   butonul care duce la ele. Fara el, cine cauta CAPEX in fila ar crede ca s-a pierdut. */
.econ-usa {
  border-left: 2px solid var(--c-econ);
}
.econ-usa > h4 { color: var(--c-econ); }
.econ-usa .btn-econ { margin-top: var(--sp-2); }
.fer-rez > .econ-usa { grid-column: 1 / -1; }


/* --------------------------------------------------------- 12f. GLOSARUL ----
   Semnul discret de langa fiecare marime, si fereastra pe care o deschide.

   SEMNUL este un buton de 15 px, sters cat nu este atins: langa o cifra el nu are voie
   sa fure privirea, dar trebuie sa se poata apuca si cu mouse-ul, si cu Tab. */
.gl-semn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0;
  vertical-align: baseline;
  background: none;
  border: 1px solid var(--c-linie-tare); border-radius: 50%;
  color: var(--c-text-3);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help;
}
.gl-semn:hover, .gl-semn:focus-visible {
  background: var(--c-accent-slab); border-color: var(--c-accent); color: var(--c-accent);
}
.gl-mostra { cursor: default; }

/* fereastra: lista la stanga, lamurirea la dreapta */
.dlg-glosar .dlg-corp {
  width: min(94vw, 1020px);
  height: min(86vh, 720px);
  max-height: min(86vh, 720px);
}
.gl-cauta { flex: 0 0 200px; min-height: 26px; }
.gl-trup {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 258px minmax(0, 1fr);
}
.gl-lista {
  min-height: 0; overflow-y: auto;
  padding: var(--sp-2);
  background: var(--c-fund-1);
  border-right: 1px solid var(--c-linie);
}
.gl-grup + .gl-grup { margin-top: var(--sp-3); }
.gl-grup-cap {
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  font-size: var(--t-1); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--c-text-3);
}
.gl-rand {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  width: 100%; min-height: 26px; padding: 3px var(--sp-2);
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--c-text-2); font-size: var(--t-2); text-align: left;
  cursor: pointer;
}
.gl-rand:hover { background: var(--c-fund-3); color: var(--c-text); }
.gl-rand.ales {
  background: var(--c-accent-slab); border-color: var(--c-accent);
  color: var(--c-text-tare); font-weight: 600;
}
/* Termenul are tot randul de care are nevoie; unitatea sta la dreapta si se taie cu
   "..." daca este lunga. Fara marginirea aceasta, unitatea CPT-ului ("MW (putere) sau
   MWh (energie, pe un rastimp)") impingea termenul si il rupea in doua randuri. */
.gl-rand-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.gl-rand-u {
  flex: 0 1 auto; max-width: 42%;
  font-size: 10px; color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gl-detaliu { padding: var(--sp-4) var(--sp-5); }
.gl-detaliu:focus { outline: none; }
.gl-cap-mare { font-size: var(--t-4); font-weight: 600; color: var(--c-text); }
.gl-art { display: flex; flex-direction: column; gap: var(--sp-3); }
.gl-art-cap { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-linie); }
.gl-art-cap h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--c-text-tare); }
.gl-art-nume { margin-top: 2px; font-size: var(--t-3); color: var(--c-text-2); }
.gl-art-fel { margin-top: var(--sp-2); font-size: var(--t-1); color: var(--c-text-3); }
.gl-art-fel strong { color: var(--c-text-2); }
.gl-def { margin: 0; font-size: var(--t-3); line-height: 1.6; color: var(--c-text); }
.gl-formula {
  padding: var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-accent);
  border-radius: var(--r-1);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-3); color: var(--c-text);
  overflow-wrap: anywhere;
}
.gl-sursa {
  padding: var(--sp-3);
  background: var(--c-fund-1);
  border: 1px solid var(--c-linie); border-radius: var(--r-2);
}
.gl-sursa-cap {
  margin-bottom: var(--sp-2);
  font-size: var(--t-1); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--c-text-3);
}
.gl-sursa p { margin: 0 0 var(--sp-2); }
.gl-sursa p:last-child { margin-bottom: 0; }

/* LEGATURA EXTERNA: fila noua, si se vede ca este in afara paginii */
.gl-leg {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--c-accent); font-size: var(--t-3); text-decoration: none;
  border-bottom: 1px solid rgba(77, 163, 255, .4);
}
.gl-leg:hover { color: var(--c-text-tare); border-bottom-color: var(--c-text-tare); }
.gl-leg-semn { font-size: 11px; }

/* text numai pentru cititorul de ecran */
.doar-citit {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ----------------------------------------------------------- 12g. LATIMI MICI ----
   Fereastra este generoasa, dar poate fi trasa mica, si ecranul poate fi de 1280.
   Grila trece de la patru coloane la doua, apoi la una singura; glosarul isi pune lista
   deasupra lamuririi, nu alaturi. Nicaieri nu se ascunde continut - se reaseaza. */
@media (max-width: 1200px) {
  .econ-preambul, .econ-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .econ-preambul, .econ-grila { grid-template-columns: minmax(0, 1fr); }
  .econ-doi, .econ-definitie, .econ-preambul > .econ-bloc,
  .econ-perspective, .econ-averti { grid-column: 1 / -1; }
  .gl-trup { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px minmax(0, 1fr); }
  .gl-lista { border-right: 0; border-bottom: 1px solid var(--c-linie); }
  .gl-cauta { flex: 1 1 120px; }
}
@media (max-height: 760px) {
  /* pe ecrane joase panzele se strang, ca sa nu manance singure toata fereastra */
  .econ-panza { height: 185px; min-height: 165px; }
  .econ-panza-mare { height: 235px; min-height: 205px; }
  .econ-panza-mica { height: 155px; min-height: 145px; }
}

/* doua diagrame de sprijin alaturi, in blocul recuperarii; pe fereastra ingusta
   trec una sub alta, fara niciun prag scris de mana */
.econ-doua-panze {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.econ-doua-panze > .econ-panza { margin-top: 0; }
/* VERIFICAREA INCRUCISATA: aceleasi marimi, socotite de fereastra si de server.
   Chenar verde-albastru discret, ca sa se vada ca este o proba, nu un rezultat nou. */
.econ-verif {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--c-fund-0);
  border: 1px solid var(--c-linie); border-left: 2px solid var(--c-bine);
  border-radius: var(--r-2);
}
.econ-verif-cap {
  margin-bottom: var(--sp-2);
  font-size: var(--t-1); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--c-text-3);
}
.econ-verif .nota { margin: var(--sp-2) 0 0; }
.econ-verif-bara { margin-top: var(--sp-2); }


/* =================================================================================
   NUMELE MENIURILOR DIN PANOU: BLEU SI APASAT

   Cerinta beneficiarului, pe litere: numele meniurilor - REGLAJ U/Q, OPTIMIZARE,
   AFISARE, BILANTUL REGIMULUI, ECHIVALENTUL RETELEI EXTERNE, JUDETE, EDITARE,
   UTILIZATORI, SALVARI, EXPORTA - sa fie scrise bold, cu albastru deschis, ca sa se
   vada limpede si sa iasa in evidenta.

   Pana acum erau scrise cu var(--c-text-3) = #6b7c92, adica un cenusiu-albastrui care pe
   fundalul capului de sectiune da un contrast de 3,9 : 1 - sub pragul de 4,5 : 1 cerut de
   WCAG pentru text obisnuit. Accentul paginii, #4da3ff, da 6,3 : 1 pe acelasi fundal
   (masurat in pagina, nu socotit pe hartie): se citeste bine si este exact "bleu"-ul pe
   care il foloseste tot restul programului, deci meniurile nu introduc o culoare noua.

   SE COLOREAZA NUMAI NUMELE (.sec-titlu si .rg-mod-et), nu tot capul de sectiune.
   Sageata de pliere si butonul "Fereastra" raman cenusii: ele sunt unelte, nu titlu, si
   daca ar fi si ele albastre, capul de sectiune ar deveni o dunga colorata in care nu se
   mai vede ce este numele si ce este comanda.

   Culoarea nu se schimba nici cand sectiunea se deschide, nici la trecerea cu mausul:
   altfel numele ar palpai la fiecare miscare. Ce raspunde la maus si la deschidere este
   FUNDALUL capului, ca si pana acum.
   ================================================================================= */
.sec > .sec-cap > .sec-titlu,
.sec[open] > .sec-cap > .sec-titlu,
.sec > .sec-cap:hover > .sec-titlu,
.rg-mod > .rg-mod-et {
  color: var(--c-accent);
  font-weight: 700;
}

/* SEMNALUL MODULUI EDIT NU SE PIERDE. Cat timp se editeaza, sectiunea "Editare" isi
   scria titlul cu violetul modului (var(--c-edit)) - un semn care spune dintr-o privire
   ca diagrama este deblocata. Regula de mai sus, pusa pe .sec-titlu, ar fi trecut peste
   el, fiindca atinge chiar elementul care poarta textul; se scrie deci si aici. */
body.mod-edit #sec-editare > .sec-cap > .sec-titlu { color: var(--c-edit); }
/* RANDUL NODULUI SCOS DIN BANDA DE COMANDA. Nu este o stare de dinainte, ci urmarea
   comenzii tocmai date - si tocmai el este vestea. Se pune primul in tabel si se aprinde,
   ca sa nu se piarda printre nodurile care erau deja afara. */
.tabel tr.rand-nou > td {
  background: color-mix(in srgb, var(--c-atentie) 12%, transparent);
}
.tabel tr.rand-nou > td:first-child { font-weight: 700; }

/* UN BLOC CU TREI CIFRE MARI CERE DOUA COLOANE. Cardurile cifrelor au o latime minima de
   190 px si se aseaza pe randuri; intr-o coloana de 363 px ele se stivuiesc, iar blocul
   creste in inaltime cat trei. Masurat pe rezultatul unei comenzi manuale, dupa ce CPT-ul
   a primit si cele doua cifre in lei: blocul CPT ajungea la 704 px si impingea sub
   marginea de jos tabelul comenzilor - 939 px de continut in 856 px de fereastra. Cu doua
   coloane, cele trei cifre stau una langa alta si blocul se turteste. */
.fer-rez > .rez-bloc:has(.cifre > .cifra:nth-child(3)) { grid-column: span 2; }

/* RANDUL INGROSAT AL UNUI TABEL CHEIE-VALOARE SE VEDE SI IN FEREASTRA, nu numai in fila.
   Regula de pana acum era legata de .rez-reglaj, adica de panoul din fila; in fereastra,
   care poarta .fer-rez, randul de total isi pierdea ingrosarea - tocmai acolo unde se uita
   beneficiarul. Se leaga acum de tabel, nu de invelisul lui. */
table.kv td.tare, table.kv th.tare { font-weight: 700; color: var(--c-text-tare); }