/* =====================================================================
   Leads SSM Holding - foaie de stil unica. Fara build, fara preprocesor,
   fara CDN, fara font descarcat. Se serveste direct de pe disc (.htaccess,
   regula 2), deci nu trece prin PHP; versionarea se face cu ?v=APP_VERSIUNE.

   ÎNFĂȚIȘAREA: „Liquid Glass" pe coajă întunecată cu pânză deschisă, exact
   mockup-ul aprobat de proprietar (docs/CONTRACT-VIZUAL.md). Coaja e #0F1118,
   bara laterală e un degrade închis, zona de lucru e #F2F3F8 peste care
   plutesc trei pete de culoare. Sticla nu are fundal propriu: se vede prin ea.

   ⚠️ PETELE SUNT MATERIE PENTRU STICLĂ, NU DECOR. În mockup sticla plutea peste
   conținutul colorat al aplicației; aici conținutul e alb și cifre, deci tenta
   a fost pictată artificial. Calibrată prea tare, s-a văzut ca defect: titlul
   pe o dâră roz, o pată galbenă în josul fiecărei pagini. Regula de acum, în
   §1.11 și §23.1: aburul e sub pragul de observat ȘI e mascat de pe coloana de
   text. Un om străin nu trebuie să vadă că fundalul are culoare.

   ⚠️ LEGEA DE PERFORMANȚĂ, hotărâtă cu proprietarul, nu se reinterpretează:
   sticla (backdrop-filter, cu atât mai mult filtrul SVG de refracție) se pune
   DOAR pe elemente mici și fixe ca număr:
       bara laterală · antetul lipicios · modalele · meniurile și popover-urile
       · notificarea
   NU se pune NICIODATĂ pe un rând de tabel, pe o celulă sau pe orice element
   care se repetă o dată per înregistrare. Un filtru de deplasare recalculat la
   fiecare derulare a unui tabel de 500 de rânduri face aplicația nefolosibilă
   pe un laptop vechi. Tabelele rămân OPACE și rapide. Cardurile și casetele de
   cifre folosesc doar transparență (compunere alfa), care e gratuită.

   ⚠️ ROȘUL DE BRAND #AC2E31 E DOAR IDENTITATE. Apare în exact trei locuri:
       · marca din bara laterală (și cercul de pe ecranele de autentificare,
         care e aceeași marcă)
       · pastila de Diagnostic din meniu
       · pasul CURENT din banda de progres a leadului - „ești aici", nu „e rău"
         (vezi comentariul din vizual.php, viz_bara_lead)
   NU e umplutura niciunui buton. NU e culoare de eroare. Într-o aplicație cu
   marcă roșie, o eroare roșie se pierde în decor. Erorile folosesc
   --stare-rau, care e cărămiziu-portocaliu.

   ⚠️ NUMELE DE CLASE SUNT UN CONTRACT cu vederile din app/views, cu
   app/lib/vizual.php si cu fisierele JS. Se restileaza, nu se redenumesc.
   Ce trebuie sa emita vizual.php ca sa arate corect:
     viz_iconita()    -> <svg class="ico"> (viewBox 0 0 24 24, currentColor)
     viz_pastila()    -> <span class="pastila pastila-<stare>">
     viz_stare_lead() -> aceeasi pastila, cu forma proprie a starii
     viz_stare_diag() -> aceeasi pastila
     viz_gol()        -> <div class="gol"> cu .gol-icon, .gol-titlu, .gol-text
                         si .gol-actiune; $buton e array{0: etichetă, 1: URL}
                         si se randeaza ca <a class="buton">
                         ⚠️ „Nu s-a gasit nimic" nu e o stare goala acceptabila:
                         fiecare ecran are una scrisa anume, care spune si ce urmeaza
     viz_avatar()     -> <span class="avatar">
     viz_palnie()     -> <div class="palnie"> cu .palnie-pas
     viz_bara_lead()  -> <div class="bara-lead"> cu .bara-lead-pas

   ⚠️ CONTRACTUL DE ATRIBUTE cu app.js si cu pachetele de pagina. Vederile
   din app/views emit exact atributele astea, si numai astea:

     data-actiune="<nume>"      buton care declanseaza o actiune de API.
     data-<orice-altceva>       argumente pentru actiune (data-lead-id -> lead_id).
     data-formular="<id>"       formularul din care se citesc campurile.
     data-confirmare="<text>"   intreaba inainte, cu confirmaModal().
     data-mesaj="<text>"        ce scrie notifica() la reusita.
     data-modal="<id>"          deschide modalul: modalDeschide(id).
     data-modal-inchide="<id>"  inchide modalul: modalInchide(id).
     data-navig="<parametru>"   <select> care reincarca pagina cu ?parametru=valoare.
     data-eticheta="<text>"     ⚠️ PUR CSS. Sub 720px tabelele devin cartonase
                                si fiecare celula isi scrie eticheta din
                                `content: attr(data-eticheta)`. Fara ea,
                                telefonul arata o lista de valori fara nume.

   ⚠️ Modalele din pagini sunt MARCAJ IN PAGINA (.modal-fond[hidden] cu id), nu
   HTML construit din JavaScript. Asa raman verificabile si escapate de PHP.
   `[hidden]{display:none!important}` de mai jos e PORTANT: fara el, fiecare
   modal din fiecare pagina se randeaza deschis.

   ⚠️ .continut NU are voie sa primeasca transform, filter, perspective sau
   contain. Modalele sunt copii ai lui si scapa din cutie prin position:fixed;
   oricare dintre proprietatile alea ar face din .continut un bloc continator
   si ar inchide fiecare modal in interiorul paginii.

   CONTRACTUL PENTRU JAVASCRIPT (morph, sticla, pete) e in sectiunea 22, jos.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. simboluri

   Tot sistemul e definit aici. Ca sa se reacordeze paleta, se schimba doar
   valorile din blocul asta; nicio regula de mai jos nu scrie o culoare direct.
   Regula e ce face si tema intunecata posibila: media query-ul de la finalul
   sectiunii REDEFINESTE aceleasi simboluri, nu adauga culori noi.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* ---- 1.1 Identitate. Roșul apare doar la marcă, la pastila de Diagnostic
     și la pasul curent din banda de lead. Nicăieri altundeva. ---- */
  --brand:            #AC2E31;
  --brand-clar:       #C6393C;
  --brand-inchis:     #7E1F22;
  --brand-accent:     #E0575A;
  --brand-marca:      linear-gradient(160deg, var(--brand-clar) 0%, var(--brand) 55%, var(--brand-inchis) 100%);
  --brand-marca-umbra: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px -4px rgba(172, 46, 49, .70);
  --brand-punct:      linear-gradient(180deg, var(--brand-accent), var(--brand));
  --brand-punct-lumina: 0 0 8px rgba(224, 87, 90, .75);

  /* Aliasuri istorice. Vederile nu le folosesc inline, dar au existat in
     contractul de token-uri si nu costa nimic sa ramana valide. */
  --rosu:             var(--brand);
  --rosu-apasat:      var(--brand-inchis);
  --rosu-slab:        rgba(172, 46, 49, .10);

  /* ---- 1.2 Fundaluri: coaja, bara în degrade, pânza. Toate trei își
       urmează tema: pe luminos sunt deschise, pe întuneric închise. ---- */
  /* Coaja e ce se vede IN AFARA aplicatiei: dunga de sus, marginile la
     redimensionare si zona de rubber-band cand tragi de pagina pe Mac. Pana pe
     28.08.2026 era inchisa in ambele teme si se vedea ca o banda intunecata
     deasupra continutului luminos. Acum isi urmeaza tema. */
  --coaja:            #EEEFF4;
  /* ⚠️ BARA E INCHISA IN AMBELE TEME. Cerut de proprietar pe 01.09.2026,
     dupa aplicatia lui de referinta. NU e negru: e exact degradeul care exista
     deja de luni de zile in tema intunecata, adica cerneala proiectata a casei,
     nu o culoare noua. Negru pur ar fi aratat ca o gaura decupata in pagina si
     s-ar fi batut cap in cap cu petele ambientale pastelate din colt.
     Tot ce urmeaza pana la --pe-inchis-inel e acelasi set cu cel din tema
     intunecata: daca se schimba unul, se schimba amandoua.
     Valoarea de dinainte, daca trebuie intors:
       linear-gradient(180deg, #FAFAFC 0%, #F2F3F7 58%, #F6F1F6 100%) */
  --bara-fundal:      linear-gradient(180deg, #171A24 0%, #101219 60%, #16111C 100%);
  --canvas:           #F2F3F8;
  --linie-bara:       rgba(255, 255, 255, .08);   /* bara e inchisa, vezi mai sus */
  /* Alias istoric: --fundal era culoarea paginii. */
  --fundal:           var(--canvas);

  /* ---- 1.3 Suprafețe pe pânză. Sunt semi-transparente ca petele ambientale
     să se simtă prin ele. E compunere alfa, nu filtru: costă zero. ---- */
  --card:             rgba(255, 255, 255, .76);
  --card-plin:        #FFFFFF;
  --card-slab:        rgba(255, 255, 255, .50);
  --card-hover:       rgba(255, 255, 255, .92);
  --linie:            rgba(15, 17, 23, .09);
  --linie-tare:       rgba(15, 17, 23, .18);
  /* Linia care TREBUIE văzută, nu doar bănuită. --linie-tare e o muchie între
     două suprafețe și are voie să fie discretă (1,47:1 pe pânză), dar bara
     verticală dintre bucățile subsolului e un semn de sine stătător: dacă nu
     se vede, rândul arată ca o propoziție ruptă. Calibrată la 3,07:1 pe pânză,
     pragul pentru grafică non-textuală, fără să ajungă la greutatea textului. */
  --linie-vizibila:   rgba(15, 17, 23, .46);

  /* ---- 1.4 Cerneala. Scara de opacități din contractul vizual.

     ⚠️ RECALIBRATĂ PENTRU CONTRAST PE STICLĂ. Pe o suprafață translucidă
     fundalul efectiv nu e pânza, ci pânza VĂZUTĂ PRIN sticlă, care e mai
     deschisă decât ea (bază albă .58 + tentă albă). Cazul cel mai rău din
     temă e ~#FCFCFD. Măsurat pe el, vechiul --text-sters .50 dădea 3,41:1,
     adică sub pragul de 4,5:1 pentru text de corp, iar el scrie subsolul,
     nota cifrei, rândul secundar din tabel și ora din cronologie.
     Valorile de acum, pe #FCFCFD:  mediu 9,5:1 · slab 6,2:1 · șters 4,7:1.
     Pașii rămân trei și se văd ca trei; doar niciunul nu mai cade. ---- */
  --text:             #14161C;
  --text-titlu:       #0F1117;
  --text-mediu:       rgba(20, 22, 28, .80);
  --text-slab:        rgba(20, 22, 28, .68);
  --text-sters:       rgba(20, 22, 28, .60);
  --text-invers:      #FFFFFF;

  /* ---- 1.5 Text pe fundal închis (bara laterală, notificare) ---- */
  /* ⚠️ Numele spune „pe inchis" din motive istorice: pana pe 28.08.2026 bara
     laterala era intunecata in ambele teme. Acum inseamna „text PE BARA", iar
     bara isi urmeaza tema. Valorile de aici sunt cele de pe tema LUMINOASA,
     adica text inchis pe bara deschisa; blocurile de tema intunecata de mai jos
     le pun la loc pe cele albe. Cine schimba unul, le schimba pe amandoua. */
  /* Cerneala DE PE BARA. Numele si-l capata acum pe deplin: bara e inchisa in
     ambele teme, deci scara asta e alba in amandoua. Valorile de dinainte, cand
     bara era luminoasa in tema luminoasa:
       1 #14161D · 2 .90 · 3 .66 · 4 .62 · 5 .64 · 6 .66
       hover .05 · activ .085 · inel inset 0 1px 0 rgba(255,255,255,.85) */
  --pe-inchis-1:      #FFFFFF;
  --pe-inchis-2:      rgba(255, 255, 255, .90);
  --pe-inchis-3:      rgba(255, 255, 255, .74);
  --pe-inchis-4:      rgba(255, 255, 255, .70);
  --pe-inchis-5:      rgba(255, 255, 255, .48);
  --pe-inchis-6:      rgba(255, 255, 255, .34);
  --pe-inchis-hover:  rgba(255, 255, 255, .06);
  --pe-inchis-activ:  rgba(255, 255, 255, .10);
  --pe-inchis-inel:   inset 0 1px 0 rgba(255, 255, 255, .10);

  /* ---- 1.6 Stări. ⚠️ Culoarea e decor; FORMA iconiței e informația.
     Fiecare stare are forma ei, iar formele nu se refolosesc între stări.
     Tentele vin din contractul vizual §1.7. ---- */
  --stare-bun:        #14622C;  --stare-bun-fundal:      rgba(52, 199, 89, .20);
  --stare-bun-linie:  rgba(20, 98, 44, .22);
  --stare-atentie:    #8A4A00;  --stare-atentie-fundal:  rgba(255, 149, 0, .18);
  --stare-atentie-linie: rgba(138, 74, 0, .22);
  --stare-rau:        #A33507;  --stare-rau-fundal:      rgba(176, 58, 11, .15);
  --stare-rau-linie:  rgba(163, 53, 7, .24);
  --stare-in-lucru:   #0A4693;  --stare-in-lucru-fundal: rgba(0, 122, 255, .16);
  --stare-in-lucru-linie: rgba(10, 70, 147, .20);
  --stare-neutru:     rgba(20, 22, 28, .72);
  --stare-neutru-fundal: rgba(15, 17, 23, .09);
  --stare-neutru-linie:  rgba(15, 17, 23, .12);
  /* Rezervă din contractul vizual: violet (modificări cerute) și teal
     (câștigat). Nu le emite nimic azi; stau aici ca să existe într-un loc. */
  --stare-violet:     #62288C;  --stare-violet-fundal:   rgba(175, 82, 222, .18);
  --stare-teal:       #075D58;  --stare-teal-fundal:     rgba(0, 178, 170, .20);

  /* ---- 1.7 Butoane. Sistemul are patru trepte și un singur gabarit.
     Principalul NU e roșu: e cerneala.

     ⚠️ IERARHIA E ORDINEA, nu doar paleta. Cele patru trepte, de sus în jos:
       1. PRINCIPAL  umplut, cerneală plină - lucrul cel mai vizibil din zona lui
       2. SECUNDAR   conturat și abia tentat - se citește ca buton, dar cedează
       3. LINIȘTIT   fără fundal până la hover - la nivel de text
       4. PERICOL    tratament propriu, din paleta de stare, NICIODATĂ roșul de marcă
     Secundarul avea fundal alb .66 și contur .14: pe un card alb ieșea o
     casetă albă cu o dungă abia vizibilă, adică arăta a INPUT, nu a buton, iar
     în alăturare cu principalul umplut inversa citirea. Acum fundalul e o
     tentă de cerneală, iar conturul urcă la .46, unde atinge 3:1 față de alb:
     se vede că e buton, se vede că e al doilea. ---- */
  --buton-primar:        linear-gradient(180deg, #2B2E3A 0%, #16181F 100%);
  --buton-primar-hover:  linear-gradient(180deg, #383B49 0%, #1E212A 100%);
  --buton-primar-text:   #FFFFFF;
  --buton-primar-umbra:  inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px -2px rgba(15, 17, 23, .35);
  --buton-discret-fundal: rgba(15, 17, 23, .045);
  --buton-discret-hover:  rgba(15, 17, 23, .10);
  --buton-discret-linie:  rgba(15, 17, 23, .46);
  --buton-linistit-hover: rgba(15, 17, 23, .06);

  /* ---- 1.8 Spațiere. Scara de 4px se PĂSTREAZĂ ca structură, dar valorile au
     fost strânse în 0.3.12, la cererea proprietarului: aplicația se simțea
     „grea". Măsurat înainte pe /leaduri: 411px de cadru gol până la primul rând
     de date, din care se vedeau 8,4 leaduri din 50.

     ⚠️ 82 de atribute style="" din vederi scriu var(--sp-2..--sp-5) direct
     (contract.php 32, lead.php 38, restul risipite), iar app.js scrie --sp-4 și
     --sp-6, leaduri.js scrie --sp-2. Deci o valoare de aici se mișcă în locuri
     pe care nu le vezi în fișierul ăsta. Numărătoarea veche din comentariu,
     „33 de atribute", era greșită: recontorizat pe 01.09.2026.

     ⚠️ --sp-2 NU se coboară. În 40 din 45 de utilizări e distanța ORIZONTALĂ
     dintre butoane, deci ar lipi comenzile una de alta fără să câștige nimic pe
     verticală.

     ⚠️ --sp-3 nu poate coborî la 8px: ar deveni egal cu --sp-2 și ar topi două
     trepte ale scării într-una. 10px e podeaua lui.

     Valorile dinainte de 0.3.12, dacă trebuie întors ceva:
        --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-7: 48px;
        --h-control: 38px; celula de tabel pe --sp-2. ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 10px; --sp-4: 12px;
  --sp-5: 16px; --sp-6: 32px; --sp-7: 32px; --sp-8: 64px;

  /* Padding-ul VERTICAL al unei celule de tabel, singurul care are token propriu.
     Rândul de tabel e cel mai mare consumator de înălțime din aplicație (69% din
     /leaduri) și e singurul lucru pe care omul îl ochește cu mouse-ul de zeci de
     ori pe zi, deci nu are voie să urmeze o scară gândită pentru cadre.
     7px, nu 6: decizia proprietarului din 01.09.2026, „câștigi 92% din economie
     fără să micșorezi ținta". Sub 6px nu se coboară niciodată. */
  --sp-cel: 7px;
  --sp-rand:    7px;   /* distanța dintre rânduri, din mockup */
  --sp-item:   13px;   /* padding orizontal item de meniu / vertical rând */
  --sp-bara:   14px;   /* padding orizontal bară laterală */

  /* ---- 1.9 Raze. LEGEA CONCENTRICITĂȚII: rază interioară = rază exterioară
     − distanța de inset. 28 − 8 = 20; 20 − 10 = 10. Nu se aleg raze din ochi. ---- */
  --r-coaja:    20px;   /* raza cojii, din contractul vizual */
  --r-mare:     var(--r-coaja);   /* card, modal, antet lipicios, hero */
  --r-card:     18px;
  --r-rand:     14px;   /* cifră, rând-cartonaș, bandă */
  --r-nav:      10px;   /* item de navigație, marcă */
  --r-chip:      8px;   /* chip de stare, cod */
  --r-ico:      10px;
  --r-punct:     3px;
  --r-pastila: 999px;
  /* Aliasuri istorice: societate.php scrie var(--raza) inline pe sigla. */
  --raza-mica:  var(--r-chip);
  --raza:       var(--r-nav);
  --raza-mare:  var(--r-card);

  /* ---- 1.10 Umbre ---- */
  --umbra-1: 0 1px 2px rgba(15, 17, 23, .05);
  --umbra-2: 0 2px 6px -3px rgba(24, 18, 52, .18), 0 12px 30px -14px rgba(24, 18, 52, .34);
  --umbra-3: 0 10px 22px -12px rgba(24, 18, 52, .42), 0 36px 70px -26px rgba(24, 18, 52, .58);

  /* ---- 1.11 Sticla. Rețeta din contractul vizual §2, pusă în simboluri ca să
     poată fi aplicată identic pe modal, pe antet, pe meniu și pe notificare.
     --sticla-baza e stratul care ține lizibilitatea când elementul stă peste
     conținut arbitrar; el dispare aproape complet pe morph, unde sticla chiar
     nu are fundal propriu. ---- */
  --sticla-baza:   rgba(255, 255, 255, .58);
  --sticla-tenta:  linear-gradient(180deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .40) 42%, rgba(255, 255, 255, .44) 100%),
                   linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
  --sticla-blur:   blur(20px) saturate(190%);
  --sticla-lentila: url(#lg-lentila) blur(12px) saturate(196%) brightness(1.04);
  /* Cele șase umbre inset care fac „grosimea" sticlei. Ordinea contează. */
  --sticla-muchii: inset 0 0 0 .5px rgba(255, 255, 255, .34),
                   inset 0 1.2px 0 -.2px rgba(255, 255, 255, .80),
                   inset 1.5px 0 2px -1.5px rgba(255, 255, 255, .60),
                   inset -1.5px 0 2px -1.5px rgba(255, 255, 255, .34),
                   inset 0 -1px 0 -.35px rgba(14, 10, 28, .20),
                   inset 0 -14px 26px -18px rgba(24, 18, 52, .42);
  --sticla-inel:   inset 0 0 0 1px rgba(255, 255, 255, .18);
  --sticla-corp-umbra: 0 1px 0 rgba(255, 255, 255, .10),
                       0 6px 14px -8px rgba(24, 18, 52, .34),
                       0 20px 40px -18px rgba(24, 18, 52, .42);
  --sticla-corp-umbra-deschis: 0 1px 0 rgba(255, 255, 255, .12),
                               0 10px 22px -12px rgba(24, 18, 52, .42),
                               0 36px 70px -26px rgba(24, 18, 52, .58);
  --sticla-cursor: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .44));
  --sticla-cursor-umbra: inset 0 0 0 .5px rgba(255, 255, 255, .75),
                         inset 0 1px 0 rgba(255, 255, 255, .95),
                         0 2px 8px -3px rgba(24, 18, 52, .30);
  --sticla-sep: linear-gradient(90deg, rgba(14, 10, 28, 0), rgba(14, 10, 28, .16) 12%, rgba(14, 10, 28, .16) 88%, rgba(14, 10, 28, 0));
  --sticla-ico: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .46));
  --sticla-ico-umbra: inset 0 0 0 .5px rgba(14, 10, 28, .10),
                      inset 0 1px 0 rgba(255, 255, 255, .92),
                      0 1px 2px rgba(14, 10, 28, .10);

  /* Petele ambientale. Există exact ca să fie refractate de sticlă, NU ca să
     se vadă. În mockup sticla plutea peste conținutul colorat al aplicației;
     aici conținutul e alb și cifre, așa că tenta a fost pictată artificial și
     a ieșit exact ce nu trebuie: titlul stătea pe o dâră roz, iar jos plutea o
     pată galbenă. Într-o aplicație de business asta nu se citește ca decor, se
     citește ca o eroare de randare.

     ⚠️ CALIBRAREA, în trei pârghii care lucrează împreună:
       · alfa mică pe fiecare pată (.34 / .30 / .26 în loc de .92 / .85 / .80)
       · --pata-opacitate coborâtă la .12: peste pânză iese un abur de ~4%
       · --pata-masca golește MIJLOCUL. Coloana de text - titlu, subtitlu,
         carduri, tabele, picior - cade în zona transparentă a măștii, deci
         niciun titlu nu mai stă pe culoare. Tenta trăiește doar pe muchii,
         unde o prind marginile antetului lipicios și ale meniului morph.
     Proba: un om străin care deschide aplicația nu trebuie să observe că
     fundalul are culoare, dar sticla trebuie să rămână sticlă, nu gri plat. */
  --pata-a: radial-gradient(circle at 50% 50%, rgba(255, 58, 122, .78), rgba(255, 58, 122, 0) 70%);
  --pata-b: radial-gradient(circle at 50% 50%, rgba(0, 168, 255, .72), rgba(0, 168, 255, 0) 70%);
  --pata-c: radial-gradient(circle at 50% 50%, rgba(255, 196, 0, .66), rgba(255, 196, 0, 0) 70%);
  /* Intensitatea e cea ceruta de proprietar pe 28.08.2026: culorile TREBUIE sa
     se vada, sunt parte din identitatea vizuala aleasa, nu un accident. O
     coborare 'ca sa fie mai sobru' a fost deja incercata si respinsa. */
  --pata-opacitate: 1;
  --pata-blur: 44px;
  /* Elipsa transparentă din mijloc e ZONA DE TEXT. Culoarea începe abia de la
     52% din rază și ajunge la plin doar în colțuri, adică în afara coloanei. */
  /* Masca nu mai ASCUNDE mijlocul, doar il TEMPEREAZA: culoarea trece si peste
     coloana de continut, dar la 30% acolo unde stau titlurile, ca sa ramana
     lizibile. Colturile primesc culoarea plina. */
  --pata-masca: radial-gradient(150% 130% at 50% 34%,
                  rgba(0, 0, 0, .30) 0 18%,
                  rgba(0, 0, 0, .80) 46%,
                  rgba(0, 0, 0, 1) 74%);

  /* ---- 1.12 Focus. Inel dublu, se vede pe orice fundal. ---- */
  --focus:            #0A66FF;
  --focus-pe-inchis:  rgba(10, 102, 255, .95);
  --inel-focus:       0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 4.5px rgba(16, 18, 26, .82);
  --inel-focus-intern: inset 0 0 0 2px rgba(16, 18, 26, .72);

  /* ---- 1.13 Tipografie. Stivă de sistem, fără niciun font descărcat.
     Diacriticele ă â î ș ț se randează din fontul sistemului. ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-cifre: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --text-xs:   11.5px;  /* chip, notă, cap de tabel, scurtătură */
  --text-sm:   12.5px;  /* subtitlu, text secundar */
  --text-md:     14px;  /* bază */
  --text-lg:     15px;  /* h2 */
  --text-xl:     17px;  /* h1 pe ecranele de autentificare */
  --text-2xl:    23px;  /* h1 */
  --text-3xl:    34px;  /* rezervă: valoare hero */
  --text-cifra:  26px;  /* .cifra-valoare */
  /* Cu cât textul e mai mare, cu atât spațierea e mai negativă; textul mărunt
     scris cu majuscule primește spațiere pozitivă. */
  --ls-3xl: -.032em; --ls-2xl: -.022em; --ls-lg: -.012em;
  --ls-md:  -.008em; --ls-caps:  .10em; --ls-caps-mic: .09em;

  /* ---- 1.14 Gabarite. Un singur gabarit de control pentru TOATĂ aplicația.
     Asta e răspunsul la reclamația proprietarului: „butoanele nu sunt egale". ---- */
  --h-control:      34px;

  /* Inaltimea antetului lipicios .cap-pagina, de care atarna scroll-margin-top
     al ancorelor din /diagnostic. Pana la 0.3.12 era scrisa de mana, 84px, in
     doua locuri: orice schimbare de padding la .cap-pagina rupea in tacere
     cuprinsul, linkul ducea la sectiune dar titlul ramanea sub antet.
     Recalculata pentru scara compacta: 10+10 padding + 28 h1 + 11 fir + 21 subtitlu. */
  --h-antet:        80px;
  --h-control-mic:  30px;

  /* ---- 1.15 Lățimi ---- */
  --lat-continut: 1180px;
  --lat-bara:     208px;   /* 232 pana la 01.09.2026; cerut mai ingusta */

  /* ---- 1.16 Mișcare. O singură curbă pentru formă și poziție. ---- */
  --arc:        cubic-bezier(.32, .72, 0, 1);
  --dur-deschis: 520ms;
  --dur-inchis:  400ms;
  --dur-rapid:   180ms;
  --dur-lenta:   200ms;
}

/* ---------------------------------------------------------------- 1.16b podeaua de deget

   ⚠️ SUB 720px SCARA COMPACTĂ SE ANULEAZĂ. Densitatea din 0.3.12 e un câștig
   când omul ochește cu MOUSE-UL: pe /leaduri scoate 411px de cadru gol și mai
   arată cinci leaduri fără derulare. Pe un ecran îngust omul ochește cu
   DEGETUL, iar fișierul ăsta tratează deja 44px ca prag de deget (vezi
   comentariul de la comutatorul de temă, secțiunea 27). Acolo, cinci pixeli în
   plus de cadru costă mult mai puțin decât o comandă ratată.

   720px e pragul care EXISTĂ deja în fișier, nu unul inventat pentru asta.
   Valorile de mai jos sunt exact cele dinainte de 0.3.12.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-7: 48px;
    --sp-cel: 8px;
    --h-control: 38px;
    /* ZERO, nu 84. Sub 720px `.cap-pagina` devine `position: static`
       (sectiunea 24): nu mai acopera nimic, deci ancorele din /diagnostic nu au
       ce compensa. Un scroll-margin de 84px ar impinge degeaba verificarea
       cautata cu o treime de ecran mai jos. */
    --h-antet: 0px;
  }
}

/* ---------------------------------------------------------------- 1.17 tema întunecată

   ⚠️ Se REDEFINESC simbolurile, nu se scriu culori noi în reguli. Suprafețele
   se RIDICĂ (alb peste fundal), nu se înnegresc; textul nu e alb pur, ca să nu
   vibreze; culoarea de acțiune și stările se luminează ca să păstreze contrastul.

   ⚠️ TREI TREPTE, ca o alegere explicită să bată preferința sistemului ÎN
   AMÂNDOUĂ SENSURILE. Atributul se pune pe <html> (data-tema) de comutatorul
   care vine separat; CSS-ul de aici e gata pentru el de pe acum:

     :root                                  paleta DESCHISĂ completă (§1.1-1.16).
                                            E singurul loc unde o culoare se naște.
     @media dark + :root:not([data-tema="luminos"])
                                            sistemul e pe întuneric ȘI omul n-a
                                            cerut lumină. Fără :not(), un „vreau
                                            luminos" ar fi înghițit de sistem.
     :root[data-tema="intunecat"]           omul a cerut întuneric. Vine DUPĂ
                                            media query și are aceeași specificitate
                                            (0,2,0), deci câștigă prin ordine.

   ⚠️ Blocurile 2 și 3 sunt GEMENE: aceleași declarații, cuvânt cu cuvânt. Cine
   schimbă o valoare într-unul o schimbă și în celălalt, altfel tema comutată de
   om se desparte de tema dată de sistem. CSS simplu nu are cum să le unească:
   o listă de selectori nu poate sări gardul unui @media.

   ⚠️ ȘI NICIO CULOARE NU SE NAȘTE AICI. Orice simbol scris mai jos există deja,
   cu valoare deschisă, în :root. Un token declarat DOAR într-un @media sau doar
   într-un [data-tema] lipsește exact în starea neștampilată, adică în cazul
   obișnuit, și componenta rămâne fără culoare.
   ------------------------------------------------------------------ */

/* 2 - sistemul cere întuneric, omul n-a cerut altceva */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="luminos"]) {
    color-scheme: dark;

    --brand:        #D6484B;
    --brand-clar:   #E86A6D;
    --brand-inchis: #93262A;
    --brand-accent: #F0797C;
    --brand-marca:  linear-gradient(160deg, var(--brand-clar) 0%, var(--brand) 55%, var(--brand-inchis) 100%);
    --brand-marca-umbra: inset 0 1px 0 rgba(255, 255, 255, .24), 0 4px 14px -4px rgba(224, 87, 90, .55);
    --brand-punct:  linear-gradient(180deg, var(--brand-accent), var(--brand));
    --rosu-slab:    rgba(224, 87, 90, .16);

    --coaja:        #07080C;
    --bara-fundal:  linear-gradient(180deg, #171A24 0%, #101219 60%, #16111C 100%);
    --pe-inchis-1:      #FFFFFF;
    --pe-inchis-2:      rgba(255, 255, 255, .90);
    --pe-inchis-3:      rgba(255, 255, 255, .74);
    --pe-inchis-4:      rgba(255, 255, 255, .70);
    --pe-inchis-5:      rgba(255, 255, 255, .48);
    --pe-inchis-6:      rgba(255, 255, 255, .34);
    --pe-inchis-hover:  rgba(255, 255, 255, .06);
    --pe-inchis-activ:  rgba(255, 255, 255, .10);
    --pe-inchis-inel:   inset 0 1px 0 rgba(255, 255, 255, .10);
    --focus-pe-inchis: rgba(255, 255, 255, .92);
    --canvas:       #12141B;
    --linie-bara:   rgba(255, 255, 255, .08);

    /* Ridicare prin alb transparent: suprafața stă PESTE pânză, nu sub ea. */
    --card:         rgba(255, 255, 255, .055);
    --card-plin:    #1B1E27;
    --card-slab:    rgba(255, 255, 255, .035);
    --card-hover:   rgba(255, 255, 255, .10);
    --linie:        rgba(255, 255, 255, .10);
    --linie-tare:   rgba(255, 255, 255, .22);
    /* 2,0:1 pe pânza întunecată era prea puțin pentru bara din subsol.
       La .34 ajunge la 3,10:1, pragul pentru grafică non-textuală. */
    --linie-vizibila: rgba(255, 255, 255, .34);

    --text:         #E7E8EE;
    --text-titlu:   #F2F3F8;
    /* Aceeași recalibrare ca pe lumină, cu cazul cel mai rău întors: aici
       sticla LUMINEAZĂ fundalul (bază #1C1F29 .68 + tentă albă), deci cel
       mai rău fundal de sub un text deschis nu e pânza, ci sticla peste cel
       mai deschis card, în colțul unde cele două tente albe se adună: ~#41434B
       sub subtitlul din antet, ~#32353D sub restul. Vechiul .48 dădea 3,60:1.
       Acum: mediu 6,8:1 · slab 4,9:1 · șters 4,7:1, toate peste 4,5:1. */
    --text-mediu:   rgba(231, 232, 238, .80);
    --text-slab:    rgba(231, 232, 238, .70);
    --text-sters:   rgba(231, 232, 238, .60);
    --text-invers:  #0F1117;

    --stare-bun:      #5DD98A;  --stare-bun-fundal:      rgba(52, 199, 89, .18);
    --stare-bun-linie: rgba(93, 217, 138, .26);
    --stare-atentie:  #F5B342;  --stare-atentie-fundal:  rgba(255, 149, 0, .18);
    --stare-atentie-linie: rgba(245, 179, 66, .26);
    --stare-rau:      #FF8A5B;  --stare-rau-fundal:      rgba(255, 118, 71, .16);
    --stare-rau-linie: rgba(255, 138, 91, .28);
    --stare-in-lucru: #6BAAFF;  --stare-in-lucru-fundal: rgba(0, 122, 255, .20);
    --stare-in-lucru-linie: rgba(107, 170, 255, .26);
    --stare-neutru:   rgba(231, 232, 238, .70);
    --stare-neutru-fundal: rgba(255, 255, 255, .08);
    --stare-neutru-linie:  rgba(255, 255, 255, .12);
    --stare-violet:   #C89BEA;  --stare-violet-fundal:   rgba(175, 82, 222, .20);
    --stare-teal:     #5FD6CE;  --stare-teal-fundal:     rgba(0, 178, 170, .20);

    /* Acțiunea se luminează: pe întuneric, cerneala nu mai poate fi butonul. */
    --buton-primar:        linear-gradient(180deg, #F4F5FA 0%, #DBDDE6 100%);
    --buton-primar-hover:  linear-gradient(180deg, #FFFFFF 0%, #E7E9F1 100%);
    --buton-primar-text:   #14161C;
    --buton-primar-umbra:  inset 0 1px 0 rgba(255, 255, 255, .70), 0 2px 8px -2px rgba(0, 0, 0, .55);
    /* Conturul secundarului urcă de la .18 (1,9:1, adică invizibil) la .38,
       adică 3,51:1 peste card și 3,43:1 peste suprafața plină: se vede că e
       buton, nu doar un cuvânt. Pragul pentru grafică non-textuală e 3:1. */
    --buton-discret-fundal: rgba(255, 255, 255, .06);
    --buton-discret-hover:  rgba(255, 255, 255, .14);
    --buton-discret-linie:  rgba(255, 255, 255, .38);
    --buton-linistit-hover: rgba(255, 255, 255, .08);

    /* Sticla se întoarce: baza devine închisă, luminile speculare scad. */
    --sticla-baza:  rgba(28, 31, 41, .68);
    --sticla-tenta: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .07) 100%),
                    linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 38%);
    --sticla-muchii: inset 0 0 0 .5px rgba(255, 255, 255, .16),
                     inset 0 1.2px 0 -.2px rgba(255, 255, 255, .34),
                     inset 1.5px 0 2px -1.5px rgba(255, 255, 255, .24),
                     inset -1.5px 0 2px -1.5px rgba(255, 255, 255, .14),
                     inset 0 -1px 0 -.35px rgba(0, 0, 0, .40),
                     inset 0 -14px 26px -18px rgba(0, 0, 0, .55);
    --sticla-inel:  inset 0 0 0 1px rgba(255, 255, 255, .10);
    --sticla-cursor: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    --sticla-cursor-umbra: inset 0 0 0 .5px rgba(255, 255, 255, .22),
                           inset 0 1px 0 rgba(255, 255, 255, .28),
                           0 2px 8px -3px rgba(0, 0, 0, .50);
    --sticla-sep: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 12%, rgba(255, 255, 255, .16) 88%, rgba(255, 255, 255, 0));
    --sticla-ico: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    --sticla-ico-umbra: inset 0 0 0 .5px rgba(255, 255, 255, .14),
                        inset 0 1px 0 rgba(255, 255, 255, .18),
                        0 1px 2px rgba(0, 0, 0, .35);

    /* Pe întuneric aburul are voie cu o idee mai mult decât pe lumină:
       fundalul e închis, deci aceeași cantitate de culoare se vede mai
       puțin. Masca din §1.11 ține și aici mijlocul curat. */
    --pata-opacitate: .82;

    --umbra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --umbra-2: 0 2px 6px -3px rgba(0, 0, 0, .55), 0 12px 30px -14px rgba(0, 0, 0, .70);
    --umbra-3: 0 10px 22px -12px rgba(0, 0, 0, .70), 0 36px 70px -26px rgba(0, 0, 0, .80);

    --focus: #6BAAFF;
    --inel-focus: 0 0 0 2px rgba(16, 18, 26, .92), 0 0 0 4.5px rgba(255, 255, 255, .82);
    --inel-focus-intern: inset 0 0 0 2px rgba(255, 255, 255, .72);
  }
}

/* 3 - omul a cerut întuneric. GEMENUL blocului de mai sus: se editează AMÂNDOUĂ. */
:root[data-tema="intunecat"] {
    color-scheme: dark;

    --brand:        #D6484B;
    --brand-clar:   #E86A6D;
    --brand-inchis: #93262A;
    --brand-accent: #F0797C;
    --brand-marca:  linear-gradient(160deg, var(--brand-clar) 0%, var(--brand) 55%, var(--brand-inchis) 100%);
    --brand-marca-umbra: inset 0 1px 0 rgba(255, 255, 255, .24), 0 4px 14px -4px rgba(224, 87, 90, .55);
    --brand-punct:  linear-gradient(180deg, var(--brand-accent), var(--brand));
    --rosu-slab:    rgba(224, 87, 90, .16);

    --coaja:        #07080C;
    --bara-fundal:  linear-gradient(180deg, #171A24 0%, #101219 60%, #16111C 100%);
    --pe-inchis-1:      #FFFFFF;
    --pe-inchis-2:      rgba(255, 255, 255, .90);
    --pe-inchis-3:      rgba(255, 255, 255, .74);
    --pe-inchis-4:      rgba(255, 255, 255, .70);
    --pe-inchis-5:      rgba(255, 255, 255, .48);
    --pe-inchis-6:      rgba(255, 255, 255, .34);
    --pe-inchis-hover:  rgba(255, 255, 255, .06);
    --pe-inchis-activ:  rgba(255, 255, 255, .10);
    --pe-inchis-inel:   inset 0 1px 0 rgba(255, 255, 255, .10);
    --focus-pe-inchis: rgba(255, 255, 255, .92);
    --canvas:       #12141B;
    --linie-bara:   rgba(255, 255, 255, .08);

    /* Ridicare prin alb transparent: suprafața stă PESTE pânză, nu sub ea. */
    --card:         rgba(255, 255, 255, .055);
    --card-plin:    #1B1E27;
    --card-slab:    rgba(255, 255, 255, .035);
    --card-hover:   rgba(255, 255, 255, .10);
    --linie:        rgba(255, 255, 255, .10);
    --linie-tare:   rgba(255, 255, 255, .22);
    /* 2,0:1 pe pânza întunecată era prea puțin pentru bara din subsol.
       La .34 ajunge la 3,10:1, pragul pentru grafică non-textuală. */
    --linie-vizibila: rgba(255, 255, 255, .34);

    --text:         #E7E8EE;
    --text-titlu:   #F2F3F8;
    /* Aceeași recalibrare ca pe lumină, cu cazul cel mai rău întors: aici
       sticla LUMINEAZĂ fundalul (bază #1C1F29 .68 + tentă albă), deci cel
       mai rău fundal de sub un text deschis nu e pânza, ci sticla peste cel
       mai deschis card, în colțul unde cele două tente albe se adună: ~#41434B
       sub subtitlul din antet, ~#32353D sub restul. Vechiul .48 dădea 3,60:1.
       Acum: mediu 6,8:1 · slab 4,9:1 · șters 4,7:1, toate peste 4,5:1. */
    --text-mediu:   rgba(231, 232, 238, .80);
    --text-slab:    rgba(231, 232, 238, .70);
    --text-sters:   rgba(231, 232, 238, .60);
    --text-invers:  #0F1117;

    --stare-bun:      #5DD98A;  --stare-bun-fundal:      rgba(52, 199, 89, .18);
    --stare-bun-linie: rgba(93, 217, 138, .26);
    --stare-atentie:  #F5B342;  --stare-atentie-fundal:  rgba(255, 149, 0, .18);
    --stare-atentie-linie: rgba(245, 179, 66, .26);
    --stare-rau:      #FF8A5B;  --stare-rau-fundal:      rgba(255, 118, 71, .16);
    --stare-rau-linie: rgba(255, 138, 91, .28);
    --stare-in-lucru: #6BAAFF;  --stare-in-lucru-fundal: rgba(0, 122, 255, .20);
    --stare-in-lucru-linie: rgba(107, 170, 255, .26);
    --stare-neutru:   rgba(231, 232, 238, .70);
    --stare-neutru-fundal: rgba(255, 255, 255, .08);
    --stare-neutru-linie:  rgba(255, 255, 255, .12);
    --stare-violet:   #C89BEA;  --stare-violet-fundal:   rgba(175, 82, 222, .20);
    --stare-teal:     #5FD6CE;  --stare-teal-fundal:     rgba(0, 178, 170, .20);

    /* Acțiunea se luminează: pe întuneric, cerneala nu mai poate fi butonul. */
    --buton-primar:        linear-gradient(180deg, #F4F5FA 0%, #DBDDE6 100%);
    --buton-primar-hover:  linear-gradient(180deg, #FFFFFF 0%, #E7E9F1 100%);
    --buton-primar-text:   #14161C;
    --buton-primar-umbra:  inset 0 1px 0 rgba(255, 255, 255, .70), 0 2px 8px -2px rgba(0, 0, 0, .55);
    /* Conturul secundarului urcă de la .18 (1,9:1, adică invizibil) la .38,
       adică 3,51:1 peste card și 3,43:1 peste suprafața plină: se vede că e
       buton, nu doar un cuvânt. Pragul pentru grafică non-textuală e 3:1. */
    --buton-discret-fundal: rgba(255, 255, 255, .06);
    --buton-discret-hover:  rgba(255, 255, 255, .14);
    --buton-discret-linie:  rgba(255, 255, 255, .38);
    --buton-linistit-hover: rgba(255, 255, 255, .08);

    /* Sticla se întoarce: baza devine închisă, luminile speculare scad. */
    --sticla-baza:  rgba(28, 31, 41, .68);
    --sticla-tenta: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .07) 100%),
                    linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 38%);
    --sticla-muchii: inset 0 0 0 .5px rgba(255, 255, 255, .16),
                     inset 0 1.2px 0 -.2px rgba(255, 255, 255, .34),
                     inset 1.5px 0 2px -1.5px rgba(255, 255, 255, .24),
                     inset -1.5px 0 2px -1.5px rgba(255, 255, 255, .14),
                     inset 0 -1px 0 -.35px rgba(0, 0, 0, .40),
                     inset 0 -14px 26px -18px rgba(0, 0, 0, .55);
    --sticla-inel:  inset 0 0 0 1px rgba(255, 255, 255, .10);
    --sticla-cursor: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    --sticla-cursor-umbra: inset 0 0 0 .5px rgba(255, 255, 255, .22),
                           inset 0 1px 0 rgba(255, 255, 255, .28),
                           0 2px 8px -3px rgba(0, 0, 0, .50);
    --sticla-sep: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 12%, rgba(255, 255, 255, .16) 88%, rgba(255, 255, 255, 0));
    --sticla-ico: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    --sticla-ico-umbra: inset 0 0 0 .5px rgba(255, 255, 255, .14),
                        inset 0 1px 0 rgba(255, 255, 255, .18),
                        0 1px 2px rgba(0, 0, 0, .35);

    /* Pe întuneric aburul are voie cu o idee mai mult decât pe lumină:
       fundalul e închis, deci aceeași cantitate de culoare se vede mai
       puțin. Masca din §1.11 ține și aici mijlocul curat. */
    --pata-opacitate: .82;

    --umbra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --umbra-2: 0 2px 6px -3px rgba(0, 0, 0, .55), 0 12px 30px -14px rgba(0, 0, 0, .70);
    --umbra-3: 0 10px 22px -12px rgba(0, 0, 0, .70), 0 36px 70px -26px rgba(0, 0, 0, .80);

    --focus: #6BAAFF;
    --inel-focus: 0 0 0 2px rgba(16, 18, 26, .92), 0 0 0 4.5px rgba(255, 255, 255, .82);
    --inel-focus-intern: inset 0 0 0 2px rgba(255, 255, 255, .72);
}

/* Fără backdrop-filter (browsere vechi, Firefox cu filtrul oprit) sticla ar fi
   o pată transparentă peste text. Aici baza devine aproape opacă și tenta se
   simplifică - arată tot a sticlă, doar că fără refracție. ⚠️ Blocul stă DUPĂ
   tema întunecată, ca să prindă și peste ea; de-aia are @media înăuntru. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --sticla-baza:  rgba(252, 252, 255, .97);
    --sticla-tenta: linear-gradient(180deg, rgba(252, 252, 255, .96), rgba(240, 241, 248, .94));
    --sticla-cursor: rgba(14, 10, 28, .07);
  }
  /* Aceleași trei trepte ca la §1.17, din același motiv: fără ele, un om care
     a apăsat pe „întunecat" într-un browser fără backdrop-filter ar primi
     sticla opacă DESCHISĂ peste o temă închisă. Gemene, se editează amândouă. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="luminos"]) {
      --sticla-baza:  rgba(28, 31, 41, .97);
      --sticla-tenta: linear-gradient(180deg, rgba(32, 35, 46, .96), rgba(24, 26, 35, .96));
      --sticla-cursor: rgba(255, 255, 255, .09);
    }
  }
  :root[data-tema="intunecat"] {
    --sticla-baza:  rgba(28, 31, 41, .97);
    --sticla-tenta: linear-gradient(180deg, rgba(32, 35, 46, .96), rgba(24, 26, 35, .96));
    --sticla-cursor: rgba(255, 255, 255, .09);
  }
}

/* ---------------------------------------------------------------- 2. baza */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--coaja); }

body {
  margin: 0;
  background: var(--coaja);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.45;
  letter-spacing: var(--ls-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* ⚠️ Aplicatia trebuie sa fie folosibila la 320px FARA derulare
     orizontala. Ce e lat (tabele, diagrame) se deruleaza in cutia lui. */
  overflow-x: hidden;
}

/* ⚠️ PORTANT. Fiecare .modal-fond pleacă cu atributul hidden, iar app.js
   comută proprietatea, nu o clasă. Fără regula asta, fiecare modal din fiecare
   pagină se randează deschis. */
[hidden] { display: none !important; }

a { color: var(--text); text-decoration: none; text-underline-offset: .18em; }
a:hover { text-decoration: underline; }

/* Inel de focus vizibil peste tot. Pe fundal deschis e un contur albastru gros;
   pe bara laterală și pe sticlă trece pe alb (vezi secțiunile 4 și 22). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.22; }
h1 { font-size: var(--text-2xl); font-weight: 680; letter-spacing: var(--ls-2xl); color: var(--text-titlu); }
h2 { font-size: var(--text-lg); letter-spacing: var(--ls-lg); }
h3 { font-size: var(--text-md); letter-spacing: var(--ls-md); }

p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 620; }

code, .cod {
  font-family: var(--font-cifre);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: 0;
  /* ⚠️ Un cod e un identificator ATOMIC: „OF-2026-08-003" nu inseamna nimic
     rupt in bucati. Fara regula asta, intr-o celula ingusta se despica la
     fiecare cratima. Masurat pe 01.09.2026 in cardul „Oferte" de pe fisa
     leadului, care sta intr-o grila de doua coloane: celula primea 75px, codul
     se rupea pe PATRU randuri, iar randul de tabel ajungea 80px inaltime
     pentru un text care incape pe o linie. */
  white-space: nowrap;
}
code, .cod:not(input):not(td):not(dd) {
  background: var(--stare-neutru-fundal);
  border: 1px solid var(--linie);
  border-radius: var(--r-chip);
  padding: 1px 6px;
}
/* Câmpul de cod (CUI, IBAN) rămâne un control normal, nu o pastilă. */
input.cod { background: var(--card-plin); }

/* Numerele care se compară pe verticală. Banii se aliniază la dreapta:
   .num face alinierea, .cifre/.bani fac cifrele tabulare. */
.cifre, .num, td.num, th.num, .bani {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.bani, td.num, th.num, .tabel .num { text-align: right; }

svg.ico { display: block; flex: none; }

/* ⚠️ Plasa pentru iconita fara inaltime. Un <svg> cu `width` dar fara `height`
   se randeaza la 150px inaltime, valoarea implicita din specificatia CSS, si
   umfla fiecare buton si fiecare rand de meniu din aplicatie. Regula se aplica
   DOAR cand atributul lipseste, deci nu atinge marimea ceruta prin
   viz_iconita($nume, $marime). */
svg.ico:not([height]) { height: 1em; }

/* Text doar pentru cititoarele de ecran (legende de tabel, etichete ascunse). */
.doar-cititor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.secundar { color: var(--text-slab); }
.mic      { font-size: var(--text-xs); letter-spacing: 0; }
.tare     { font-weight: 650; }

/* Placeholderul de valoare lipsa e cratima simpla, o singura data pentru
   toata aplicatia (regula 10: nicio liniuta lunga in text vazut de client). */
.gol-valoare { color: var(--text-sters); }

/* ---------------------------------------------------------------- 3. carcasa

   Coaja e închisă, pânza e deschisă. Petele ambientale (.lg-ambient, injectate
   de JS - vezi §22) plutesc peste pânză, sub conținut.
   ⚠️ .continut și .picior sunt `position: relative` FĂRĂ z-index. Poziționate,
   ca să se picteze deasupra petelor; fără z-index, ca să NU devină context de
   stivuire - altfel modalele (z-index 200) ar rămâne prinse sub bară.
   ------------------------------------------------------------------ */

.invelis {
  display: grid;
  grid-template-columns: var(--lat-bara) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--coaja);
}
.invelis-simplu { grid-template-columns: minmax(0, 1fr); }

.zona {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

.continut {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: var(--lat-continut);
  margin-inline: auto;      /* 0.3.12: lipsea, si lasa 508px de gol in dreapta pe 1920px */
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
}
.invelis-simplu .continut {
  max-width: none;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}

.sari-continut {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--buton-primar);
  color: var(--buton-primar-text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-nav);
  font-weight: 650;
  box-shadow: var(--umbra-2);
}
.sari-continut:focus { left: var(--sp-2); top: var(--sp-2); text-decoration: none; }

.picior {
  position: relative;
  /* Aceeasi coloana ca `.continut`. In 0.3.12 continutul a primit
     `margin-inline: auto`, iar subsolul a ramas lipit de bara laterala:
     247px decalaj pe un ecran de 1920px, masurat. Se misca impreuna sau
     deloc. */
  width: 100%;
  max-width: var(--lat-continut);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-6) var(--sp-5);
  color: var(--text-sters);
  font-size: var(--text-xs);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
}
/* Bara verticală dintre bucățile subsolului. Era pe --linie-tare, adică 1,47:1
   pe lumină și 2,0:1 pe întuneric: decor, dar decor pe care nu-l vedea nimeni,
   așa că rândul arăta ca o propoziție ruptă în două. Pe --linie-vizibila ajunge
   la 3,07:1 / 3,10:1, pragul pentru grafică non-textuală, fără să urce la
   greutatea textului de lângă. */
.picior-sep { color: var(--linie-vizibila); }

/* ---------------------------------------------------------------- 4. bara laterala

   ⚠️ Bara e OPACĂ, în degrade închis, exact ca în mockup. Nu primește
   backdrop-filter: un filtru care lucrează în spatele unui fundal opac e GPU
   irosit, pe fiecare cadru, pe toată înălțimea ecranului. Aspectul de sticlă îl
   dau muchiile speculare (inel intern) și tenta, care nu costă nimic.
   ------------------------------------------------------------------ */

.bara {
  position: sticky; top: 0; align-self: start; z-index: 40;
  height: 100vh; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bara-fundal);
  border-right: 1px solid var(--linie-bara);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03);
  color: var(--pe-inchis-3);
}
.bara-interior {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  /* 22/18 si --sp-4 pana in 0.3.20. Strans dupa ce „Ce e nou" a adaugat 46px
     si bara a inceput sa deruleze sub 900px inaltime: fiecare pixel recuperat
     aici e un ecran in plus pe care meniul incape intreg. */
  padding: 16px var(--sp-bara) 14px;
  gap: var(--sp-3);
}
/* Pe fundal închis inelul de focus trece pe alb, altfel dispare. */
.bara :focus-visible { outline-color: var(--focus-pe-inchis); }

/* Marca. ⚠️ Primul din cele trei locuri unde apare roșul de brand.
   Pătratul e desenat de ::before ca să existe și când societatea nu are siglă;
   când există, <img> se suprapune peste el prin margine negativă, deci sigla
   stă ÎN pătratul de marcă, nu lângă el. Socoteala: pătrat 30 + gap 10 = 40;
   sigla trebuie să înceapă la 4px în interior, deci margin-left −36px, iar
   margin-right +4px readuce distanța până la text la 10px. */
/* ⚠️ SIGLA INTREAGA, LA RAPORTUL EI. Pana la 01.09.2026 fisierul
   logo-ssm-alb.png, care e 800x334 adica marca PLUS cuvantul „SSM HOLDING",
   era strivit intr-un patrat de 22x22 peste o tigla rosie de 30x30. Un logo de
   2,4:1 intr-un patrat nu se citeste: arata ca o pata. Sigla era deja in
   proiect, doar nu se vedea.
   Tigla rosie a disparut fiindca sigla alba isi poarta singura marca pe fundalul
   inchis. `--brand-marca` ramane folosita in alte doua locuri. */
.marca {
  display: flex; align-items: center;
  padding: 2px 4px;
  color: var(--pe-inchis-1);
  border-radius: var(--r-nav);
  min-width: 0;
}
.marca:hover { text-decoration: none; color: var(--pe-inchis-1); }
.marca img {
  display: block;
  width: 100%; max-width: 148px; height: auto;
  /* Aspectul e declarat ca browserul sa rezerve locul inainte de a se incarca
     imaginea, altfel bara sare la prima randare. */
  aspect-ratio: 800 / 334;
  object-fit: contain;
}
.marca:hover img { opacity: .88; }
.marca-text {
  min-width: 0;
  font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--pe-inchis-1);
}
.marca-sufix {
  display: block; font-weight: 400; font-size: 11px; letter-spacing: .02em;
  color: var(--pe-inchis-5);
}

/* ⚠️ BARA DE DERULARE TREBUIE SA SE VADA. Cerut de proprietar pe 02.09.2026:
   „altfel nu ar sti utilizatorii ca avem ceva meniuri mai jos". Pe un ecran de
   900px inaltime bara laterala incape exact, la limita; pe orice ecran mai
   scund meniul deruleaza si ultima intrare, „Diagnostic", se taie.

   Pana acum era doar `scrollbar-width: thin`, fara culoare, deci browserul isi
   punea bara lui: pe fundalul inchis iesea un stalp negru, gros si urat.

   ⚠️ `overflow-y: auto`, nu `scroll`: bara apare NUMAI cand chiar e ceva mai
   jos. O bara aratata mereu ar minti pe ecranele inalte, unde totul incape.

   ⚠️ Degetul care apuca bara e desenat cu `background-clip: content-box` peste
   o bordura transparenta: asa are 4px de culoare intr-o pista de 8px, adica se
   vede fara sa taie meniul in doua. */
.bara-navigare {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .26) transparent;
}
.bara-navigare::-webkit-scrollbar { width: 8px; }
.bara-navigare::-webkit-scrollbar-track { background: transparent; }
.bara-navigare::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .26);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.bara-navigare::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .40);
  background-clip: content-box;
}

.nav-eticheta {
  padding: 0 10px var(--sp-2);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--pe-inchis-6);
}
.nav-eticheta:not(:first-child) { padding-top: var(--sp-4); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-2) 10px;
  border-radius: var(--r-nav);
  color: var(--pe-inchis-4);
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  position: relative;
  transition: background var(--dur-rapid) ease, color var(--dur-rapid) ease,
              transform var(--dur-rapid) ease;
}
/* Rândurile se mișcă 2px la hover: mișcarea confirmă ținta mai bine decât o
   schimbare de culoare, și nu costă layout (doar transform). */
.nav-link:hover {
  background: var(--pe-inchis-hover);
  color: var(--pe-inchis-1);
  text-decoration: none;
  transform: translateX(2px);
}
.nav-link.este-activ {
  background: var(--pe-inchis-activ);
  color: var(--pe-inchis-1);
  font-weight: 600;
  box-shadow: var(--pe-inchis-inel);
}
/* Pagina curentă are și o BARĂ verticală, nu doar un fundal mai deschis: forma,
   nu doar culoarea, ca să se vadă și pe un ecran alb-negru.
   ⚠️ Bara e albă, nu roșie. Roșul de brand are exact trei locuri în aplicație
   (marca, pastila de Diagnostic, pasul curent din banda de lead) și un al
   patrulea l-ar dilua. */
.nav-link.este-activ::before {
  content: '';
  position: absolute; left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--pe-inchis-1);
}
.nav-text { flex: 1; min-width: 0; }

/* Contorul din bara laterală. ⚠️ Al doilea loc unde apare roșul de brand:
   pastila de Diagnostic. Fără semnale, pastila nici nu se randează. */
.pastila-nav {
  min-width: 20px; padding: 0 6px;
  border-radius: var(--r-pastila);
  background: var(--pe-inchis-activ);
  color: var(--pe-inchis-2);
  font-size: var(--text-xs); font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pastila-nav.este-atentie {
  background: var(--brand-marca);
  color: #FFFFFF;
  box-shadow: var(--brand-marca-umbra);
}

.bara-eu {
  border-top: 1px solid var(--linie-bara);
  padding-top: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0;
}
.bara-eu-text { min-width: 0; flex: 1; }
.eu-nume {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--pe-inchis-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eu-rol  { display: block; color: var(--pe-inchis-6); font-size: 11px; }

/* ⚠️ viz_avatar() poate scrie style="background:…;color:…" cu culoarea
   societății. Regula de aici NU are voie să fie !important, altfel culoarea
   inline nu mai poate câștiga. */
.avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-nav);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pe-inchis-activ);
  color: var(--pe-inchis-2);
  font-size: var(--text-xs); font-weight: 700;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
}
/* În conținut (nu în bară) avatarul stă pe pânză deschisă. */
.continut .avatar { background: var(--stare-neutru-fundal); color: var(--text-mediu); }

.bara .buton-icon { color: var(--pe-inchis-5); }
.bara .buton-icon:hover { background: var(--pe-inchis-hover); color: var(--pe-inchis-1); }

/* ---------------------------------------------------------------- 5. capul paginii

   Antetul e LIPICIOS și e sticlă: e mic, e unul singur pe pagină și stă fix.
   Exact categoria pe care legea de performanță o permite. Sub 720px redevine
   static: pe telefon se desface pe verticală și ar mânca jumătate de ecran.
   ------------------------------------------------------------------ */

.cap-pagina {
  /* ⚠️ top: 0, nu un decalaj. Cu o bară de sticlă lipită la 8px sub muchie,
     conținutul care se derulează se vede trecând prin fâșia de deasupra ei și
     arată a defect. Lipită de muchie, tot ce urcă dispare sub ea. */
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: flex-start; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-mare);
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
  backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), var(--umbra-2);
}
/* ⚠️ Al doilea selector: cand ecranul are sageata de intoarcere, blocul de
   titlu nu mai e :first-child, iar fara el si-ar pierde flex-ul si titlul ar
   sari langa butoane. */
.cap-pagina > div:first-child,
.cap-pagina > .cap-inapoi + div { min-width: 0; flex: 1 1 320px; }

/* ---- sageata de intoarcere ------------------------------------------
   Sta pe LINIA titlului, nu deasupra lui, deci nu costa niciun pixel de
   inaltime. Gabaritul e --h-control-mic (30px), sub inaltimea unui h1, ca sa
   nu inalte antetul. Vezi viz_inapoi() din lib/vizual.php.
   ---------------------------------------------------------------------- */
.cap-inapoi {
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--h-control-mic); height: var(--h-control-mic);
  margin-top: 2px;                       /* pe linia optica a titlului */
  border: 1px solid var(--buton-discret-linie);
  border-radius: var(--r-nav);
  color: var(--text-mediu);
  text-decoration: none;
  transition: background var(--dur-rapid) var(--arc), color var(--dur-rapid) var(--arc);
}
.cap-inapoi:hover { background: var(--buton-discret-hover); color: var(--text); text-decoration: none; }
.cap-inapoi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- bara de filtre din capul paginii ------------------------------
   Introdusa in 0.3.12 pe /leaduri. Inainte, filtrele stateau intr-un card
   propriu sub antet: 8 campuri pe 3 randuri, 253px, folosite o data si lasate
   pe ecran permanent. Masurat pe 01.09.2026: 411px de cadru gol pana la primul
   rand de date, adica 8,4 leaduri vizibile din 50.

   Aici etichetele sunt ascunse cu .doar-cititor, deci `.camp` ramane numai
   controlul. Etichetele NU se sterg din markup: cititorul de ecran are nevoie
   de ele, iar `placeholder` nu e eticheta.

   ⚠️ Randul e al TREILEA copil al lui .cap-pagina, cu flex-basis 100%, deci
   coboara singur sub titlu si sub butoane, fara sa strice asezarea lor.
   -------------------------------------------------------------------- */

.filtre-rand {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--linie);
}
.filtre-rand .camp { flex: 0 1 auto; gap: 0; }
.filtre-rand .camp-cauta { flex: 1 1 220px; max-width: 340px; }
.filtre-rand .camp select { min-width: 9rem; }

/* Bifa se aliniaza pe mijlocul controalelor, nu sus: intr-un rand de o singura
   linie, `align-items: flex-start` mostenit de la .bifa ar ridica-o cu 2px si
   randul ar arata strambat. */
.bifa-rand { align-items: center; margin-inline: var(--sp-1); }

/* Cele doua actiuni ale barei de filtre, ca o singura bucata. Vezi comentariul
   din leaduri.php: sub 480px bara e o grila (sectiunea 24), iar doua elemente
   separate nu pot imparti o celula. Peste 480px nu schimba nimic, randul e flex
   oricum.
   `flex-wrap` e supapa pentru ecranele foarte inguste: mai bine se rup actiunile
   pe doua linii decat sa se striveasca selectul de stare sub pragul de citit. */
.filtre-actiuni {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: var(--sp-2); flex: 0 0 auto;
}
.bifa-rand input { margin-top: 0; }
.bifa-rand label { font-size: var(--text-sm); color: var(--text-mediu); }

/* ---- caseta cu restul filtrelor ------------------------------------
   <details>, nu JavaScript: pagina merge la fel si daca app.js nu ajunge.
   Se deschide singura cand vreun filtru dinauntru e activ, altfel omul ar
   vedea o lista scurta fara sa aiba de unde sti de ce. */
.filtre-mai { flex: 1 0 100%; }
.filtre-mai > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  padding: 5px 8px; margin-left: -8px;
  border-radius: var(--r-nav);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-mediu);
}
.filtre-mai > summary::-webkit-details-marker { display: none; }
.filtre-mai > summary:hover { background: var(--buton-linistit-hover); color: var(--text); }
.filtre-mai > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.filtre-mai > summary .ico { transition: transform var(--dur-rapid) var(--arc); }
.filtre-mai[open] > summary .ico { transform: rotate(90deg); }
.filtre-mai > .campuri { padding: var(--sp-3) 0 var(--sp-1); }

/* Cate filtre ascunse sunt active. Fara numarul asta, o casetei inchisa care
   filtreaza in tacere e exact felul in care omul pierde un lead: vede lista
   scurta si crede ca aia e toata. */
.filtre-numar {
  font-size: var(--text-xs); font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
  background: var(--stare-info-fundal, var(--buton-discret-hover));
  color: var(--text);
}

/* Firul de accent de sub titlu. Nu mai e roșu: roșul e al mărcii. Firul e
   cerneală, ca să nu concureze cu identitatea. */
.cap-pagina h1::after,
.card-cap h2.cu-fir::after {
  content: '';
  display: block;
  width: 28px; height: 3px;
  margin-top: var(--sp-2);
  border-radius: 2px;
  background: currentColor;
  opacity: .28;
}
.subtitlu {
  color: var(--text-slab);
  font-size: var(--text-sm);
  margin-top: 3px;
  max-width: 68ch;
}

/* ---------------------------------------------------------------- 6. actiuni

   ⚠️ „Butoanele nu sunt egale" a fost reclamația de pornire. Se rezolvă în două
   locuri: toate controalele au ACELAȘI --h-control (secțiunea 8 și 9), iar
   .camp aliniază conținutul la BAZĂ (secțiunea 9), ca un buton dintr-o celulă
   fără etichetă vizibilă să stea pe aceeași linie cu inputurile de lângă.
   ------------------------------------------------------------------ */

.actiuni {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
}
/* .actiuni apare și în interiorul unui .camp, ca să pună un buton lângă un
   input (societate.php: CUI + ANAF). Acolo inputul trebuie să curgă, altfel
   width:100% îl aruncă pe butonul de căutare pe rândul următor. */
.camp .actiuni { align-items: stretch; }
.camp .actiuni input,
.camp .actiuni select { flex: 1 1 10rem; width: auto; min-width: 0; }

/* ---------------------------------------------------------------- 7. carduri */

.card {
  background: var(--card);
  border: 1px solid var(--linie);
  border-radius: var(--r-card);
  box-shadow: var(--umbra-1);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
/* .card-cap e folosit și ca SUBSOL de card, cu border-top pus inline din vederi
   (lead.php, leaduri.php). De aceea nu are colțuri proprii și nu presupune că e
   primul copil. */
.card-cap {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--linie);
  background: var(--card-slab);
  min-height: var(--h-control);
}
.card:last-child { margin-bottom: 0; }   /* 0.3.12: golul de la baza paginii */
.card-corp { padding: var(--sp-4); }
.card-corp > :last-child { margin-bottom: 0; }

.grila { display: grid; gap: var(--sp-3); }
.grila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grila-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- 8. casete de cifre */

.cifra {
  background: var(--card);
  border: 1px solid var(--linie);
  border-radius: var(--r-rand);
  box-shadow: var(--umbra-1);
  padding: var(--sp-3) var(--sp-4);
}
.cifra-eticheta {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-slab);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps-mic);
}
.cifra-valoare {
  font-size: var(--text-cifra); font-weight: 700; line-height: 1.1;
  letter-spacing: var(--ls-3xl);
  margin-top: 6px;
  color: var(--text-titlu);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.cifra-nota { color: var(--text-sters); font-size: var(--text-xs); margin-top: 2px; }
/* Un zero nu are de ce sa strige la fel de tare ca un 6. */
.cifra-valoare.este-zero { color: var(--text-sters); font-weight: 600; }

.cifra.este-bun      .cifra-eticheta { color: var(--stare-bun); }
.cifra.este-atentie  .cifra-eticheta { color: var(--stare-atentie); }
.cifra.este-rau      .cifra-eticheta { color: var(--stare-rau); }
.cifra.este-in-lucru .cifra-eticheta { color: var(--stare-in-lucru); }

/* ---------------------------------------------------------------- 9. butoane

   UN SINGUR SISTEM, PATRU TREPTE, în ordinea în care se citesc:

     1. .buton                PRINCIPAL  - cerneală plină, text invers.
        Lucrul cel mai vizibil din zona lui. Pe întuneric se întoarce: fundalul
        devine deschis, cerneala devine text (§1.17), fiindcă pe o pânză închisă
        cerneala nu mai poate fi butonul.
     2. .buton.buton-discret  SECUNDAR   - conturat, tentat, clar subordonat.
     3. .buton.buton-linistit LINIȘTIT   - la nivel de text, fundal doar la hover.
        .buton-icon e aceeași treaptă, forma doar-iconiță.
     4. .buton.buton-pericol  PERICOL    - tratament propriu, din paleta de stare.
        ⚠️ NICIODATĂ roșul de marcă: într-o aplicație cu marcă roșie, o eroare
        roșie se pierde în decor.

   ⚠️ TOATE PATRU au același gabarit: --h-control înălțime, --r-nav rază,
   `border: 1px solid` (transparent acolo unde nu se vede), deci cutiile sunt
   identice la pixel și se aliniază optic pe același rând, în amândouă temele.
   Cine adaugă o treaptă nouă îi dă aceleași trei valori sau strică rândul.
   Mărimi: implicit --h-control, .buton-mic --h-control-mic, .buton-lat 100%.
   ⚠️ Aceeași înălțime și aceeași rază ca inputurile din secțiunea 10.
   ------------------------------------------------------------------ */

.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 15px;
  min-height: var(--h-control);
  border: 1px solid transparent;
  border-radius: var(--r-nav);
  background: var(--buton-primar);
  color: var(--buton-primar-text);
  box-shadow: var(--buton-primar-umbra);
  font: inherit;
  font-size: var(--text-md); font-weight: 620; letter-spacing: var(--ls-lg);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background var(--dur-rapid) ease, color var(--dur-rapid) ease,
              box-shadow var(--dur-rapid) ease, transform var(--dur-rapid) ease;
}
.buton:hover { background: var(--buton-primar-hover); color: var(--buton-primar-text); text-decoration: none; }
.buton:active { transform: translateY(1px); }
.buton[disabled], .buton[aria-busy="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* Treapta 2. ⚠️ Fără umbră proprie: umbra ridică elementul de pe pagină și îl
   pune în concurență cu principalul. Secundarul stă în planul paginii; se vede
   din contur, nu din relief. */
.buton-discret {
  background: var(--buton-discret-fundal);
  border-color: var(--buton-discret-linie);
  color: var(--text);
  box-shadow: none;
}
.buton-discret:hover { background: var(--buton-discret-hover); color: var(--text); }

/* ⚠️ Actiunea distructiva NU e rosie de brand: rosul e al identitatii.
   Foloseste paleta de stare, ca sa se distinga de butonul principal. */
.buton-pericol {
  background: var(--stare-rau-fundal);
  border-color: var(--stare-rau-linie);
  color: var(--stare-rau);
  box-shadow: none;
}
.buton-pericol:hover { background: var(--stare-rau); color: var(--text-invers); }

/* Butonul liniștit: fără fundal până la hover. .buton-icon e forma lui
   doar-iconiță; .buton-linistit e aceeași față pentru un buton cu text, gata
   pentru orice ecran care are nevoie de o a treia treaptă. */
.buton-icon, .buton-linistit {
  background: transparent; border-color: transparent;
  color: var(--text-mediu);
  box-shadow: none;
}
.buton-icon:hover, .buton-linistit:hover {
  background: var(--buton-linistit-hover); color: var(--text);
}
/* ⚠️ Butonul doar-iconita are OBLIGATORIU aria-label in romana cu diacritice. */
.buton-icon {
  padding: 0; width: var(--h-control); min-height: var(--h-control);
}

.buton-mic {
  padding: 0 11px; min-height: var(--h-control-mic);
  font-size: var(--text-sm); border-radius: var(--r-chip);
}
.buton-lat { width: 100%; }

/* ⚠️ IERARHIA INVERSATĂ DIN /leaduri. În captura proprietarului, „Filtrează"
   ieșea negru plin în mijlocul paginii, iar „Adaugă lead" - acțiunea cea mai
   importantă a ecranului - stătea sus, alb și liniștit. Cea mai importantă
   acțiune era cea mai puțin vizibilă. Marcajul le dă la amândouă clasa
   `.buton`, iar numele de clase sunt contract, deci corecția se face aici:

     · A FILTRA O LISTĂ E O ACȚIUNE SECUNDARĂ. Ea rearanjează ce se vede deja;
       nu creează nimic. Coboară pe treapta 2 și încetează să concureze cu
       acțiunea principală a paginii.
     · „Golește" e a treia treaptă: e ieșirea din filtru, nu o alegere de rang
       egal cu filtrarea. Altfel cele două ar arăta identic și zona n-ar mai
       avea ierarhie internă.

   Domeniul e strâns dinadins: `.camp .actiuni` e bara de filtre. Butoanele
   „ANAF" și „Caută" stau tot într-un `.camp .actiuni`, dar sunt type="button"
   și deja discrete, deci nu le atinge nimic. */
.filtre-rand .buton[type="submit"],
.camp .actiuni > .buton[type="submit"] {
  background: var(--buton-discret-fundal);
  border-color: var(--buton-discret-linie);
  color: var(--text);
  box-shadow: none;
}
.filtre-rand .buton[type="submit"]:hover,
.camp .actiuni > .buton[type="submit"]:hover { background: var(--buton-discret-hover); }
.filtre-rand a.buton-discret,
.camp .actiuni > a.buton-discret {
  background: transparent;
  border-color: transparent;
  color: var(--text-mediu);
}
.filtre-rand a.buton-discret:hover,
.camp .actiuni > a.buton-discret:hover {
  background: var(--buton-linistit-hover); color: var(--text);
}

/* Cat timp cererea e in zbor, butonul e blocat si o spune. Fara asta,
   dublu-clicul trimite doua oferte. */
.buton[aria-busy="true"]::after {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: se-invarte .7s linear infinite;
}
@keyframes se-invarte { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 10. formulare

   ⚠️ .camp aliniază conținutul la BAZA celulei (justify-content: flex-end).
   În bara de filtre din /leaduri, celula butonului are eticheta ascunsă
   (.doar-cititor, scoasă din flux), deci fără regula asta butonul ar urca cu o
   linie de etichetă față de inputurile de lângă. Asta a fost, literal,
   „butoanele nu sunt egale".
   ------------------------------------------------------------------ */

.campuri { display: grid; gap: var(--sp-3); }
.campuri-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campuri-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.camp {
  display: flex; flex-direction: column;
  gap: 5px; min-width: 0;
  border: 0; padding: 0; margin: 0;   /* .camp e uneori un <fieldset> */
}
.camp > label,
.camp > legend {
  font-size: var(--text-xs); font-weight: 650; letter-spacing: 0;
  color: var(--text-slab);
  padding: 0;
}

.camp input[type="text"], .camp input[type="email"], .camp input[type="password"],
.camp input[type="search"], .camp input[type="date"], .camp input[type="number"],
.camp input[type="tel"], .camp input[type="url"], .camp input[type="color"],
.camp select, .camp textarea,
input.camp-control, select.camp-control, textarea.camp-control {
  width: 100%;
  padding: 0 11px;
  min-height: var(--h-control);
  border: 1px solid var(--linie-tare);
  border-radius: var(--r-nav);
  background: var(--card-plin);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  box-shadow: var(--umbra-1);
}
.camp textarea, textarea.camp-control {
  min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.45;
}
.camp select, select.camp-control { padding-right: var(--sp-2); }
.camp input[type="file"], input[type="file"].camp-control {
  padding: 7px 10px; min-height: var(--h-control);
  border: 1px dashed var(--linie-tare);
  border-radius: var(--r-nav);
  background: var(--card-slab);
  color: var(--text-mediu);
  font: inherit; font-size: var(--text-sm);
  width: 100%;
}
/* „Renunță la fișier”, pus de app.js sub orice camp de incarcare (26.09.2026). */
.fisier-renunta { margin-top: var(--sp-2); align-self: flex-start; width: auto; }
.fisier-renunta[hidden] { display: none; }
.camp input:focus-visible, .camp select:focus-visible, .camp textarea:focus-visible,
input.camp-control:focus-visible, select.camp-control:focus-visible,
textarea.camp-control:focus-visible { outline-offset: 1px; }
.camp input:disabled, .camp select:disabled, .camp textarea:disabled {
  background: var(--card-slab); color: var(--text-sters); box-shadow: none;
}
/* Inputurile din celulele de tabel sunt mici, ca să nu umfle rândul. */
.tabel .camp-control { min-height: var(--h-control-mic); border-radius: var(--r-chip); }

/* ⚠️ .camp-ajutor și .camp-eroare sunt SCHIMBATE ÎNTRE ELE de JS
   (leaduri.js, societati.js scriu `tinta.className = ...`), adică lista de
   clase e rescrisă complet. Fiecare trebuie deci să fie de sine stătătoare: nu
   se bazează pe nicio a doua clasă alături. */
.camp-ajutor { color: var(--text-slab); font-size: var(--text-xs); letter-spacing: 0; }
/* Eroarea de formular se leaga cu aria-describedby si se anunta cu role="alert". */
.camp-eroare { color: var(--stare-rau); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0; }
/* Hook documentat, încă neemis de PHP. Costă zero și e locul unde se pune
   marcajul de eroare când vederile îl vor scrie. */
.camp.are-eroare input, .camp.are-eroare select, .camp.are-eroare textarea {
  border-color: var(--stare-rau);
  box-shadow: 0 0 0 3px var(--stare-rau-fundal);
}

.bifa { display: flex; align-items: flex-start; gap: var(--sp-2); }
.bifa input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--focus); flex: none; }
.bifa label { font-weight: 450; font-size: var(--text-md); color: var(--text); letter-spacing: var(--ls-md); }
.bifa label .camp-ajutor { display: block; margin-top: 1px; }
/* ⚠️ AICI se rezolvă „butoanele nu sunt egale". Într-o grilă de filtre, celulele
   normale sunt etichetă + control; celula butonului are eticheta ascunsă
   (.doar-cititor, scoasă din flux), deci butonul ei ar urca cu exact înălțimea
   unei etichete față de inputurile de lângă. `margin-top: auto` îl împinge la
   baza celulei, iar --h-control identic pe buton și pe input le pune pe aceeași
   linie. Etichetele rămân aliniate sus, unde le e locul. */
.camp > .actiuni { margin-top: auto; }
.camp > .bifa { margin-top: auto; align-items: center; min-height: var(--h-control); }

.bife { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bife .bifa { flex: 1 1 16rem; min-width: 0; }

/* ---------------------------------------------------------------- 11. tabele

   ⚠️ AICI NU SE PUNE STICLĂ. Rândurile se repetă per înregistrare; un
   backdrop-filter pe fiecare rând recalculează la fiecare pixel de derulare și
   îngheață un tabel de 500 de rânduri. Tabelele sunt OPACE, fără filtru și fără
   transform pe <tr>. Evidențierea la hover e o simplă schimbare de fundal.
   ⚠️ Cutia se deruleaza, nu pagina. Regula asta e ce tine promisiunea
   „folosibila la 320px fara derulare orizontala a paginii".
   ------------------------------------------------------------------ */

.tabel-cutie { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabel { width: 100%; border-collapse: collapse; }
.tabel caption { text-align: left; }
.tabel th, .tabel td {
  padding: var(--sp-cel) var(--sp-4);
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: middle;
}
.tabel thead th {
  background: var(--card-slab);
  padding-top: var(--sp-cel); padding-bottom: var(--sp-cel);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps-mic);
  color: var(--text-sters);
  white-space: nowrap;
}
.tabel tbody tr { transition: background var(--dur-lenta) ease; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--card-hover); }
/* 20.10.2026: randul ofertei din fisa leadului deschide previzualizarea. */
.tabel tbody tr.rand-apasabil { cursor: pointer; }
.ofp-deschide { margin-top: var(--sp-2); }
.tabel .num, .tabel th.num { text-align: right; }
.tabel .stramt { white-space: nowrap; width: 1%; }
.tabel td .actiuni { justify-content: flex-end; flex-wrap: nowrap; }

/* Un rand retras din prim-plan: dezactivat, inchis, expirat. Istoria lui
   ramane vizibila, dar nu mai concureaza cu ce e viu.
   Semnalul nu e doar culoarea: prima celulă poartă o bară verticală, deci
   rândul se distinge și pe un ecran alb-negru. */
.tabel tr.este-stins td { color: var(--text-sters); background: var(--card-slab); }
.tabel tr.este-stins td:first-child { box-shadow: inset 2px 0 0 var(--linie-tare); }
.tabel tr.este-stins:hover td { background: var(--card-slab); }

.rand-titlu { font-weight: 600; color: var(--text); }
.rand-sub   { color: var(--text-sters); font-size: var(--text-xs); display: block; }

/* ⚠️ Codul de sub numele clientului stă pe DOUĂ straturi de cerneală, nu pe
   unul: --text-sters (60%) peste pastila --stare-neutru-fundal (9%). Măsurat
   pe pixelii randați, în tema luminoasă ies 4,43:1 - sub pragul de 4,5:1
   pentru text de 11,5px. Aceeași cerneală, direct pe card, dă 5,2:1, deci
   vinovată e pastila, nu cerneala: se urcă o singură treaptă, la --text-slab
   (5,6:1 măsurat). `.rand-sub` simplu nu se atinge, iar tema închisă trecea
   deja (4,78:1) și urcă și ea. */
.rand-sub.cod { color: var(--text-slab); }

/* ---------------------------------------------------------------- 12. insigne de stare

   ⚠️ Culoarea e decor; FORMA iconitei e informatia. Fiecare stare are forma
   ei, si formele nu se refolosesc intre stari. Vezi VIZ_ICONITE.
   ⚠️ .pastila-in-lucru nu e scrisă literal nicăieri: viz_pastila() o compune la
   rulare din VIZ_PASTILA_LEAD, iar șase stări de lead ajung la ea. Dacă regula
   dispare, jumătate din /leaduri și /acasa rămân fără stil, în tăcere.
   ------------------------------------------------------------------ */

.pastila {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-chip);
  border: 1px solid transparent;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0;
  white-space: nowrap;
  background: var(--stare-neutru-fundal);
  color: var(--stare-neutru);
  border-color: var(--stare-neutru-linie);
}
.pastila .ico { width: 13px; height: 13px; }

.pastila-bun      { background: var(--stare-bun-fundal);      color: var(--stare-bun);      border-color: var(--stare-bun-linie); }
.pastila-atentie  { background: var(--stare-atentie-fundal);  color: var(--stare-atentie);  border-color: var(--stare-atentie-linie); }
.pastila-rau      { background: var(--stare-rau-fundal);      color: var(--stare-rau);      border-color: var(--stare-rau-linie); }
.pastila-in-lucru { background: var(--stare-in-lucru-fundal); color: var(--stare-in-lucru); border-color: var(--stare-in-lucru-linie); }
.pastila-neutru   { background: var(--stare-neutru-fundal);   color: var(--stare-neutru);   border-color: var(--stare-neutru-linie); }

/* Aliasuri, ca aceleasi reguli sa prinda si daca vizual.php scrie starea cu
   underscore in loc de cratima. Doua scrieri ale aceleiasi stari nu au voie
   sa dea doua aspecte. Nu le emite nimic azi; rămân rezervă. */
.pastila-in_lucru    { background: var(--stare-in-lucru-fundal); color: var(--stare-in-lucru); border-color: var(--stare-in-lucru-linie); }
.pastila-ok          { background: var(--stare-bun-fundal);      color: var(--stare-bun);      border-color: var(--stare-bun-linie); }
.pastila-problema    { background: var(--stare-rau-fundal);      color: var(--stare-rau);      border-color: var(--stare-rau-linie); }
.pastila-neaplicabil { background: var(--stare-neutru-fundal);   color: var(--stare-neutru);   border-color: var(--stare-neutru-linie); }

/* ---------------------------------------------------------------- 13. banda de informatie */

.banda {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie);
  border-left-width: 3px;
  border-radius: var(--r-rand);
  background: var(--card-slab);
  color: var(--text-mediu);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}
.banda .ico { margin-top: 1px; }
.banda-corp { min-width: 0; }
.banda-ok      { background: var(--stare-bun-fundal);      border-color: var(--stare-bun-linie);      border-left-color: var(--stare-bun); }
.banda-atentie { background: var(--stare-atentie-fundal);  border-color: var(--stare-atentie-linie);  border-left-color: var(--stare-atentie); }
.banda-rea     { background: var(--stare-rau-fundal);      border-color: var(--stare-rau-linie);      border-left-color: var(--stare-rau); }
.banda-info    { background: var(--stare-in-lucru-fundal); border-color: var(--stare-in-lucru-linie); border-left-color: var(--stare-in-lucru); }
.banda-ok .ico      { color: var(--stare-bun); }
.banda-atentie .ico { color: var(--stare-atentie); }
.banda-rea .ico     { color: var(--stare-rau); }
.banda-info .ico    { color: var(--stare-in-lucru); }

/* ⚠️ .inventar-stergere e pusă de app.js (linia 771) pe o .banda.banda-atentie
   construită la rulare, și e folosită DOAR ca mâner de căutare, ca să poată fi
   scoasă bannerul precedent. Nu are nevoie de aspect propriu; regula asta
   există ca să nu dispară din contract și ca cele trei rânduri .mic dinăuntru
   să stea unul sub altul. */
.inventar-stergere { display: flex; }
.inventar-stergere .banda-corp > .mic,
.inventar-stergere > .mic { display: block; }

/* ---------------------------------------------------------------- 14. stare goala

   ⚠️ „Nu s-a gasit nimic" NU e o stare goala acceptabila. Fiecare ecran are
   una scrisa anume, cu diacritice, care spune si CE URMEAZA.
   ------------------------------------------------------------------ */

.gol {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  max-width: 46ch;
  margin: 0 auto;
}
.gol-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-rand);
  background: var(--sticla-ico);
  box-shadow: var(--sticla-ico-umbra);
  color: var(--text-slab);
  margin-bottom: var(--sp-3);
}
.gol-titlu { font-size: var(--text-lg); font-weight: 650; letter-spacing: var(--ls-lg); color: var(--text-titlu); }
.gol-text  { color: var(--text-slab); margin-top: var(--sp-2); font-size: var(--text-sm); }
.gol-actiune { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------- 15. palnia */

.palnie { display: flex; flex-direction: column; gap: var(--sp-rand); }
.palnie-pas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: 10px var(--sp-4);
  border: 1px solid var(--linie);
  border-radius: var(--r-rand);
  background: var(--card);
  box-shadow: var(--umbra-1);
  transition: background var(--dur-lenta) ease, transform var(--dur-lenta) ease;
}
.palnie-pas:hover { background: var(--card-hover); transform: translateX(2px); }
.palnie-eticheta { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--text-sm); }
.palnie-cifre {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.palnie-numar { font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--ls-lg); }
.palnie-valoare { color: var(--text-slab); font-size: var(--text-sm); text-align: right; }
/* Bara de sub pas: proportia din total. Fara cifra langa ea n-ar spune nimic,
   deci nu sta niciodata singura.
   ⚠️ Copilul <span> primește style="width:N%" din vizual.php:467. Trebuie deci
   să rămână un bloc condus de lățime, NU un copil de flex. */
.palnie-bara {
  grid-column: 1 / -1; height: 4px; border-radius: 2px;
  background: var(--stare-neutru-fundal); overflow: hidden;
}
.palnie-bara span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--stare-in-lucru), var(--focus));
  border-radius: inherit;
}

/* ---------------------------------------------------------------- 16. banda de progres a leadului

   ⚠️ Al treilea și ultimul loc unde apare roșul de brand: pasul CURENT. Aici
   roșul nu marchează o eroare, ci „ești aici" - același rol de identitate ca
   marca. vizual.php spune explicit asta în comentariul lui viz_bara_lead().
   Ca să nu depindă de culoare, pasul curent are și altă FORMĂ: e mai înalt și
   are un inel în jur.
   ------------------------------------------------------------------ */

.bara-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bara-lead-pas {
  flex: 1 1 60px;
  min-width: 44px;
  height: 6px;
  border-radius: var(--r-punct);
  background: var(--stare-neutru-fundal);
  border: 1px solid var(--linie);
}
.bara-lead-pas.este-facut  { background: var(--stare-in-lucru); border-color: var(--stare-in-lucru); }
.bara-lead-pas.este-curent {
  height: 10px;
  background: var(--brand-punct);
  border-color: transparent;
  box-shadow: var(--brand-punct-lumina), 0 0 0 2px var(--rosu-slab);
}
.bara-lead-pas.este-pierdut { background: var(--stare-rau); border-color: var(--stare-rau); }

/* ---------------------------------------------------------------- 17. firul cronologic */

.cronologie { list-style: none; margin: 0; padding: 0; }
.cronologie li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--linie);
}
.cronologie li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cronologie li::before {
  content: '';
  position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--card-plin);
  border: 2px solid var(--linie-tare);
}
/* O schimbare de stare nu arată ca o notă: bulina se umple. Formă, nu culoare. */
.cronologie li.este-schimbare::before {
  border-color: var(--stare-in-lucru);
  background: var(--stare-in-lucru);
  box-shadow: 0 0 0 3px var(--stare-in-lucru-fundal);
}
.cronologie-cap {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: baseline;
}
.cronologie-cand { color: var(--text-sters); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* ---- detaliile unui eveniment, strranse -----------------------------
   Jurnalul e sursa de adevar (§4.3 din CLAUDE.md), deci nu se ascunde nimic:
   se STRANGE. Pana la 0.3.14 fiecare cheie a evenimentului avea randul ei in
   cronologie, iar un „oferta trimisa" cu opt chei ocupa 163px. Cardul Istoric
   era cel mai mare de pe fisa leadului.
   <details>, nu JavaScript: merge si daca app.js nu ajunge.
   -------------------------------------------------------------------- */
.cronologie-detalii { margin-top: 4px; }
.cronologie-detalii > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  font-size: var(--text-xs); font-weight: 650;
  color: var(--text-slab);
  padding: 1px 6px; margin-left: -6px;
  border-radius: var(--r-chip);
}
.cronologie-detalii > summary::-webkit-details-marker { display: none; }
.cronologie-detalii > summary::before {
  content: '+'; font-family: var(--font-cifre); font-weight: 700;
  line-height: 1;
}
.cronologie-detalii[open] > summary::before { content: '\2212'; }
.cronologie-detalii > summary:hover { background: var(--buton-linistit-hover); color: var(--text); }
.cronologie-detalii > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cronologie-detalii .perechi {
  margin-top: 6px;
  gap: 2px var(--sp-3);
  font-size: var(--text-xs);
}
.cronologie-detalii .perechi dd { font-size: var(--text-xs); }

.cronologie-text { color: var(--text-mediu); margin-top: 2px; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- 18. perechi cheie/valoare */

.perechi {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.perechi dt { color: var(--text-slab); font-size: var(--text-xs); font-weight: 650; align-self: center; }
.perechi dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.perechi dd.tare { font-weight: 650; font-size: var(--text-md); }
.perechi dd.cifre { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 19. autentificare

   Ecranele anonime rulează sub .invelis-simplu: fără bară laterală, o singură
   coloană. Cardul e SUB formă de sticlă, fiindcă e unul singur și e fix - exact
   ce permite legea de performanță.
   ------------------------------------------------------------------ */

.login-ecran { width: 100%; display: grid; place-items: center; padding: var(--sp-5) 0; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
  backdrop-filter: var(--sticla-blur);
  border-radius: var(--r-mare);
  box-shadow: var(--sticla-muchii), var(--umbra-3);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.login-marca { text-align: center; margin-bottom: var(--sp-2); }
/* Cercul e marca pe ecranele anonime: al patrulea chip al aceleiași identități,
   nu o a patra utilizare a roșului. */
.login-marca .cerc {
  width: 54px; height: 54px; margin: 0 auto var(--sp-3);
  overflow: hidden;
  border-radius: var(--r-rand);
  background: var(--brand-marca);
  box-shadow: var(--brand-marca-umbra);
  display: grid; place-items: center;
  color: #FFFFFF;
}
/* ⚠️ SIGLA INTREAGA, LA RAPORTUL EI (23.09.2026, a doua treapta: proprietarul a
   cerut sigla in locul bulinei). Latimea e in ch, nu in px, ca sa se poarte ca
   un cuvant de langa textul de sub ea; `aspect-ratio` tine locul rezervat
   inainte ca imaginea sa se incarce, deci cardul nu sare la prima pictura.
   Semnul singur, decupat din aceeasi imagine, se mai foloseste in bulina de
   rezerva si pe ecranul de bun venit. */
.login-sigla {
  display: block; width: 100%; max-width: 168px; height: auto;
  margin: 0 auto var(--sp-4);
  aspect-ratio: 800 / 334;
  object-fit: contain;
}

.login-marca .cerc img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}

.login-marca h1 {
  font-size: var(--text-xl); letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0; line-height: 1.15;
}
.login-marca h1::after { content: none; }

/* „SSM Holding" deasupra numelui aplicatiei: firma intai, produsul dupa. */
.login-holding {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-slab); margin: 0 0 2px;
}
.login-marca p { color: var(--text-slab); margin-top: var(--sp-1); font-size: var(--text-sm); }
.login-desc { max-width: 30ch; margin-left: auto; margin-right: auto; }

/* Butonul fin de cerere de cont: o pastila cu contur, nu un al doilea buton
   principal. „Intră în aplicație" ramane singurul buton plin de pe ecran. */
.login-cerere {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie-vizibila); border-radius: var(--r-pastila);
  background: var(--card);
  color: var(--text-mediu); font-size: var(--text-sm); text-decoration: none;
  transition: background var(--dur-rapid) var(--arc),
              border-color var(--dur-rapid) var(--arc),
              transform var(--dur-rapid) var(--arc);
}
.login-cerere:hover {
  background: var(--card-plin); border-color: var(--text-slab);
  color: var(--text-titlu); text-decoration: none; transform: translateY(-1px);
}
.login-cerere b { color: var(--text-titlu); font-weight: 650; }
.login-cerere .ico { color: var(--text-slab); transition: transform var(--dur-rapid) var(--arc); }
.login-cerere:hover .ico { transform: translateX(3px); }

/* ⚠️ CAMPUL CAPCANA. Ascuns din foaia de stil, NU cu `type="hidden"`: un camp
   ascuns nu pacaleste niciun robot, iar unul pe care il vede numai el, da.
   `left: -9999px` si nu `display:none`, fiindca unele roboti sar peste campurile
   cu `display:none`, dar completeaza tot ce e in arborele paginii. */
.camp-capcana {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* „(opțional)" langa eticheta: cine se grabeste sare peste ele fara sa se
   intrebe daca a gresit. */
.camp-optional { font-weight: 400; color: var(--text-slab); }

@media (prefers-reduced-motion: reduce) {
  .login-cerere, .login-cerere .ico { transition: none; }
  .login-cerere:hover { transform: none; }
  .login-cerere:hover .ico { transform: none; }
}

/* ---------------------------------------------------------------- 20. modal

   Sticlă: e mic, e unul singur deschis, stă fix. Permis de legea de performanță.
   ⚠️ Modalul se inchide pe fundal DOAR daca mousedown A INCEPUT pe fundal.
   Regula traieste in app.js; aici e doar cutia. Fara verificarea aia, o
   selectie de text inceputa in interiorul modalului si terminata in afara
   lui inchide fereastra si pierde ce a scris omul.
   ⚠️ Modalele sunt copii ai .continut, deci .continut nu are voie să capete
   transform/filter/contain (vezi antetul fișierului).
   ------------------------------------------------------------------ */

.modal-fond {
  position: fixed; inset: 0; z-index: 200;
  /* ⚠️ Fondul NU primește backdrop-filter. Ar fi singurul filtru din aplicație
     întins pe tot ecranul, recalculat la fiecare repictare, pe cel mai slab
     laptop din birou. Efectul de sticlă îl dă modalul însuși; fondul rămâne o
     perdea simplă și ieftină. */
  background: rgba(10, 11, 16, .52);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  overflow-y: auto;
}
.modal-fond[hidden] { display: none !important; }
.modal {
  width: 100%; max-width: 520px;
  border-radius: var(--r-mare);
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
  backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), var(--umbra-3);
  max-height: calc(100vh - var(--sp-8));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-cap {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--linie);
}
.modal-sub { color: var(--text-slab); margin-top: var(--sp-1); font-size: var(--text-sm); }
.modal-corp { padding: var(--sp-4); overflow-y: auto; }
.modal-corp > :last-child { margin-bottom: 0; }
.modal-picior {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--linie);
  background: var(--card-slab);
}
.modal-lat { max-width: 780px; }

/* ---- modalul care arata un document intreg (23.09.2026) --------------------
   ⚠️ Cerut de proprietar: cadrul din cardul de contract are 70% din inaltime si
   jumatate din latime, iar un contract de zece pagini nu se citeste asa.
   Modalul ia aproape tot ecranul si lasa cadrul sa creasca pana la marginea lui.

   ⚠️ Corpul NU are padding si NU deruleaza el: derularea e a documentului, in
   <iframe>. Doua bare de derulare, una in alta, sunt cel mai sigur fel de a
   pierde un cititor. */
.modal-plin { max-width: 1180px; height: calc(100vh - var(--sp-6)); max-height: none; }
.modal-corp-plin { padding: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.modal-corp-plin > iframe {
  display: block; width: 100%; height: 100%;
  border: 0; background: #FFFFFF;
}
@media (max-width: 720px) {
  /* Pe telefon, un contract A4 intr-un modal e oricum de citit cu doua degete:
     modalul ia tot ecranul, ca sa nu mai piarda nimic pe margini. */
  .modal-plin { height: calc(100vh - var(--sp-4)); border-radius: var(--r-nav); }
}

/* ---------------------------------------------------------------- 21. notificare */

/* ------------------------------------------------------------------ „Ce e nou"

   Sta in subsolul barei laterale. Panoul se deschide CHIAR DIN buton si creste
   spre dreapta, peste continut: bara are 208px si n-ar incapea in ea.

   ⚠️ Culorile vin din --pe-inchis-*, ca tot ce sta pe bara: bara e inchisa in
   ambele teme, iar cerneala obisnuita ar da negru pe negru.

   ⚠️ Panoul, in schimb, NU e pe bara: pluteste peste continut, deci foloseste
   cerneala si suprafata obisnuite, care au deja pereche pentru tema intunecata.
   ------------------------------------------------------------------ */

.noutati { position: relative; }
.noutati > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; list-style: none;
  padding: 8px 10px; border-radius: var(--r-nav);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--pe-inchis-3);
  min-height: var(--h-control-mic);
}
.noutati > summary::-webkit-details-marker { display: none; }
.noutati > summary .ico { flex: none; }
.noutati > summary:hover { background: var(--pe-inchis-hover); color: var(--pe-inchis-1); }
.noutati > summary:focus-visible { outline: 2px solid var(--focus-pe-inchis); outline-offset: 2px; }
.noutati[open] > summary { background: var(--pe-inchis-activ); color: var(--pe-inchis-1); }

/* Bulina: „e ceva ce n-ai citit". Se stinge din app.js la prima deschidere. */
.noutati-bulina {
  margin-left: auto; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-clar, #E0575A);
  box-shadow: 0 0 0 3px rgba(224, 87, 90, .22);
}
.noutati-bulina[hidden] { display: none; }

.noutati-panou {
  position: absolute; z-index: 360;
  /* ⚠️ Se socoteste si padding-ul barei, nu doar latimea butonului: elementul
     de care atarna panoul sta cu --sp-bara inauntrul marginii barei, deci fara
     el panoul intra PESTE bara. Masurat: pornea la 201px pe o bara de 208. */
  left: calc(100% + var(--sp-bara) + var(--sp-2)); bottom: 0;
  width: 300px; max-width: calc(100vw - var(--lat-bara) - var(--sp-5));
  max-height: min(60vh, 460px); overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-mare);
  /* ⚠️ --card-plin, nu --card. Cardurile obisnuite sunt translucide dinadins,
     ca sa lase petele ambientale sa se vada prin ele, dar ele stau IN pagina.
     Panoul asta pluteste PESTE continut: cu suprafata translucida se citea
     tabelul prin text. Un panou care pluteste are nevoie de fund opac. */
  background: var(--card-plin);
  border: 1px solid var(--linie);
  box-shadow: var(--umbra-2);
  color: var(--text);
}
.noutati-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--ls-caps-mic); text-transform: uppercase;
  color: var(--text-slab);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linie);
}
.noutati-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.noutati-lista > li + li { border-top: 1px solid var(--linie); padding-top: var(--sp-3); }
.noutati-rand-cap {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--text-sm);
}
.noutati-cand { font-size: var(--text-xs); color: var(--text-sters); font-family: var(--font-cifre); }
.noutati-text { font-size: var(--text-sm); color: var(--text-mediu); margin-top: 2px; }

/* ⚠️ Sub 900px bara devine banda orizontala, iar butonul poate sta oriunde pe
   ea. Ancorat de el, panoul iesea din ecran: masurat la 390px, pornea la -49px,
   adica pe langa marginea din stanga. Aici se ancoreaza de ECRAN, nu de buton:
   pe o latime de telefon nu exista oricum loc sa creasca „din buton", iar un
   panou care nu se vede intreg e mai rau decat unul care vine de jos. */
@media (max-width: 900px) {
  .noutati-panou {
    position: fixed;
    left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); top: auto;
    width: auto; max-width: none;
    max-height: min(70vh, 520px);
  }
}

/* ------------------------------------------------------------------ banda de versiune nouă

   Apare cand serverul ruleaza deja alta versiune decat pagina deschisa. Ceruta
   de proprietar pe 02.09.2026.

   ⚠️ JOS, nu sus. Sus sta notificarea (`.notificare`), care e trecatoare si
   apare des; banda asta ramane pana o inchizi sau pana reincarci. Doua benzi
   care se suprapun in acelasi colt ar ascunde-o pe cea trecatoare exact cand
   spune ceva important.

   ⚠️ Sticla e permisa aici: e un element UNIC pe pagina, la fel ca antetul si
   modalele, deci nu incalca legea de performanta din antetul fisierului, care
   interzice sticla pe ce se repeta o data pe inregistrare.

   ⚠️ Nu foloseste --pe-inchis-*: alea urmeaza tema barei laterale, care e
   inchisa in ambele teme. Banda asta sta pe sticla paginii, deci foloseste
   cerneala obisnuita, care are deja pereche pentru tema intunecata.
   ------------------------------------------------------------------ */

.versiune-banda {
  position: fixed; left: 50%; bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 380;
  max-width: min(720px, calc(100vw - var(--sp-5)));
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-radius: var(--r-mare);
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
          backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), var(--umbra-2);
  color: var(--text);
}
.versiune-banda[hidden] { display: none; }

/* ---- mișcarea ------------------------------------------------------
   Ceruta de proprietar pe 02.09.2026: „poate si un pic de efecte pe banner, sa
   ne arate ca e de citit si apasat butonul".

   ⚠️ Doua miscari, amandoua scurte. Banda urca la aparitie, ca ochiul sa o
   prinda venind, si butonul respira de TREI ori, nu la nesfarsit: o pulsatie
   fara sfarsit intr-un colt de ecran devine, dupa un minut, exact lucrul pe
   care omul invata sa nu-l mai vada.

   ⚠️ Cadrele pastreaza `translateX(-50%)`, care e centrarea benzii. Fara el,
   banda ar sari in stanga la fiecare cadru. Pe telefon centrarea se face din
   left/right, deci acolo e alt set de cadre.
   -------------------------------------------------------------------- */

@keyframes versiune-intra {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes versiune-respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(172, 46, 49, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(172, 46, 49, .20); }
}

.versiune-banda { animation: versiune-intra var(--dur-deschis) var(--arc) both; }
.versiune-banda .buton { animation: versiune-respira 2.2s ease-in-out .5s 3; }

.versiune-banda-corp { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.versiune-banda-cap {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-md); letter-spacing: var(--ls-md);
}
.versiune-banda-cap .ico { color: var(--text-slab); flex: none; }
.versiune-banda-nota {
  font-size: var(--text-sm); color: var(--text-mediu);
  /* ⚠️ FARA taiere. Pana in 0.3.21 aici era `-webkit-line-clamp: 2`, si nota se
     rupea in mijlocul propozitiei: „Tot meniul s-a strans..." si atat. O banda
     care anunta ceva si apoi taie anuntul nu isi face treaba.
     Nota se scurteaza la SURSA, in APP_NOUTATI, nu aici: comentariul de acolo
     spune ca se tine scurta, iar banda o arata intreaga oricat ar fi. */
  text-wrap: pretty;
}
.versiune-banda-actiuni { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

@keyframes versiune-intra-ingust {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .versiune-banda { animation-name: versiune-intra-ingust; }
  .versiune-banda {
    left: var(--sp-3); right: var(--sp-3); transform: none;
    max-width: none;
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
  }
  /* Butonul de reincarcare ia latimea, cel de inchidere ramane patrat langa el. */
  .versiune-banda-actiuni > .buton { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- banda de notificare
   („cartonasul de sistem”), app.css sectiunea 21, in locul liniilor 2176-2210.

   Ceruta de proprietar pe 24.09.2026: „vreau sa fie cu ghidaj si pentru
   urmatorul pas (firul logic al actiunilor ca sa ajunga unde trebuie), si poti
   sa ii faci o culoare asa mai draguta cumva, placuta la ochi? [...] cred ca si
   mai mare un pic sa se observe cand agentul termina o actiune”.

   ⚠️ NU MAI E INCHISA PRIN COD. Pana in 0.3.75 fundalul era rgba(16,18,26,.82)
   scris de mana, la fel in ambele teme, si de aceea banda isi redefinea local
   --pe-inchis-1/2/3/5. O cutie neagra de trei randuri asezata peste o pagina
   clara citeste insa a modal, nu a notificare. Acum e sticla casei: urmeaza
   tema, foloseste cerneala obisnuita (--text, --text-mediu), care are deja
   pereche pentru intuneric, si intra SINGURA in blocul @supports de la linia
   691, care inchide sticla acolo unde backdrop-filter lipseste. Redefinirea lui
   --pe-inchis-* a plecat odata cu fundalul inchis: nu mai avea ce apara.

   ⚠️ EROAREA NU MAI E ALB PE --stare-rau. Pana acum aici scria
   `background: var(--stare-rau); color: #FFFFFF`, iar pe tema intunecata
   --stare-rau devine #FF8A5B: alb pe portocaliu deschis, masurat 2,32:1, mult
   sub pragul de 4,5:1, si asta fiindca albul era scris literal si nu urma tema.
   Acum cutia ramane sticla si primeste doar o tenta, ca .pastila si .banda,
   unde perechea tenta plus cerneala e deja masurata in amandoua temele.

   ⚠️ NICIUN JETON GLOBAL NOU. Cele trei variabile de mai jos sunt LOCALE, pe
   element, si doar aleg ce familie --stare-* imbraca banda. Nu se nasc in
   :root, deci nu au ce cauta in cele doua blocuri gemene de tema, iar familiile
   pe care le aleg au deja pereche pentru intuneric.

   ⚠️ CULOAREA TINE FORMA, CERNEALA TINE CUVINTELE. --stare-* atinge medalionul,
   conturul si eticheta de pas; textul de corp ramane pe --text si --text-mediu.
   Pe sticla intunecata --stare-rau masoara in jur de 4,4:1, destul pentru
   grafica (prag 3:1) dar pe muchie pentru text marunt.

   ⚠️ Sticla e permisa: banda e un element UNIC pe pagina, ca antetul, modalele
   si .versiune-banda. Legea de performanta din antetul fisierului interzice
   sticla doar pe ce se repeta o data pe inregistrare.

   ⚠️ RAMANE SUS si ramane singura sus. .versiune-banda sta jos tocmai ca sa nu
   se bata cu ea (vezi comentariul de la linia 2087). Cutia a crescut, dar nu
   s-a mutat.

   ⚠️ DOAR TRANZITII, NICIUN @keyframes. Blocul de la „miscare redusa” (linia
   2900) comprima transition-duration si transition-delay, dar NU atinge
   animatiile: .versiune-banda intra cu @keyframes si ignora acolo setarea
   omului. Cat timp banda se misca din tranzitie, e acoperita de lista in care
   `.notificare` sta deja. Am refuzat deliberat si ideea unei pulsatii „ca sa se
   observe”: versiune-respira pulseaza cu rgba(172,46,49,.20), adica rosul de
   brand, ceea ce regula 12 nu permite, si o bataie repetata intr-un colt de
   ecran devine dupa un minut exact lucrul pe care omul invata sa nu-l mai vada.

   ⚠️ Controalele sunt cele ale casei (.buton .buton-discret .buton-mic pentru
   legatura, .buton .buton-icon pentru inchidere). Nu se deseneaza inca un
   gabarit de control: aplicatia are unul singur, --h-control si
   --h-control-mic, si asta a fost raspunsul la reclamatia ca butoanele nu sunt
   egale. Aici se regleaza doar asezarea lor.

   Contrast calculat (cerneala pe panza vazuta prin sticla, cu tenta de stare
   peste): titlu --text-titlu in jur de 15,8:1 pe clar / 14,1:1 pe intunecat;
   ghidajul --text-mediu 9,5:1 / 9,1:1; eticheta „Pasul următor”
   --stare-in-lucru 9,3:1 / 6,1:1, singurul text marunt care poarta culoare de
   stare si singurul care trebuia verificat fata de pragul de 4,5:1; iconita din
   medalion, grafica non-textuala, peste 4,4:1 in toate cele trei stari si in
   ambele teme. CIFRELE SUNT CALCULATE, NU MASURATE IN BROWSER: se verifica cu
   pipeta pe amandoua temele inainte de livrare, mai ales verdele pe tema clara,
   unde --stare-bun-fundal are alfa .20.
   ------------------------------------------------------------------ */

.notificare {
  /* Reusita e starea implicita a benzii; celelalte doua doar rescriu cele trei
     variabile. Tenta trece obligatoriu printr-un linear-gradient de o singura
     culoare, fiindca intr-un `background` doar ULTIMUL strat poate fi culoare
     simpla, iar ea trebuie sa stea PESTE sticla. */
  --notificare-cerneala: var(--stare-bun);
  --notificare-tenta: linear-gradient(var(--stare-bun-fundal), var(--stare-bun-fundal));
  --notificare-linie: var(--stare-bun-linie);

  position: fixed; left: 50%; top: var(--sp-3);
  /* ⚠️ -50% e CENTRAREA, nu efectul. Orice stare noua a benzii il pastreaza pe
     X, altfel banda sare in stanga in mijlocul miscarii. -160% o duce deasupra
     ecranului, iar scale(.96) o face sa vina „dinspre departare”, ca o
     notificare de sistem, nu sa cada ca un panou. */
  transform: translate(-50%, -160%) scale(.96);
  transform-origin: 50% 0;
  z-index: 400;
  /* max-content ca „S-a salvat.” sa ramana scurt: o cutie de 520px cu trei
     cuvinte in ea arata a cutie goala. Cresterea o face continutul, pana la plafon. */
  width: max-content;
  max-width: min(520px, calc(100vw - var(--sp-5)));
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  /* Cutie cu doua randuri si buton: pilula (--r-pastila) nu mai e corecta pe o
     forma inalta, ar taia coltul textului. --r-mare e raza cardurilor, a
     modalelor si a .versiune-banda. Legea concentricitatii: 20px raza
     exterioara minus 12px inset (--sp-4) da 8px, adica exact --r-chip, raza pe
     care o are deja .buton-mic. */
  border-radius: var(--r-mare);
  background: var(--notificare-tenta), var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
          backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), 0 0 0 1px var(--notificare-linie), var(--umbra-2);
  color: var(--text);
  text-align: left;
  /* ⚠️ Toate trei, ca pana acum: doar transformarea nu ajunge. O cutie goala
     mutata in sus tot lasa cateva puncte pe muchia paginii si tot prinde
     clicuri peste antet. */
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-inchis) var(--arc),
              opacity   var(--dur-inchis) linear;
}

.notificare.este-vizibil {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
  /* Intrarea se aseaza mai lent decat iesirea, ca peste tot in casa, dar
     opacitatea nu asteapta atat: cu 520ms pe ea, cutia ar parea ca se
     decoloreaza, nu ca vine. Ordinea urmeaza ordinea din `transition` de sus:
     intai transform, apoi opacity. */
  transition-duration: var(--dur-deschis), var(--dur-rapid);
}

/* ---- cele doua stari care nu sunt reusita -------------------------------
   ⚠️ Regula 12: eroarea NU e rosu de brand, e caramiziu-portocaliu. Intr-o
   aplicatie cu marca rosie, o eroare rosie se pierde in decor. */

.notificare.este-atentie {
  --notificare-cerneala: var(--stare-atentie);
  --notificare-tenta: linear-gradient(var(--stare-atentie-fundal), var(--stare-atentie-fundal));
  --notificare-linie: var(--stare-atentie-linie);
}
.notificare.este-rea {
  --notificare-cerneala: var(--stare-rau);
  --notificare-tenta: linear-gradient(var(--stare-rau-fundal), var(--stare-rau-fundal));
  --notificare-linie: var(--stare-rau-linie);
}

/* ---- medalionul de stare -------------------------------------------
   ⚠️ Aici traieste regula 11. Culoarea e decor, forma e informatia: cerc cu
   bifa, triunghi, octogon cu X. Cele trei iconite sunt randate toate de PHP si
   se comuta din CSS, deci nici macar forma starii nu se naste in browser. */

.notificare-medalion {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pastila);
  background: var(--notificare-tenta);
  color: var(--notificare-cerneala);
  box-shadow: inset 0 0 0 1px var(--notificare-linie);
}

/* ⚠️ `svg.` PE FIECARE RAND, nu doar clasa. Regula casei de la linia 791 e
   `svg.ico { display: block }`, adica element PLUS clasa, iar un simplu
   `.notificare-ico { display: none }` pierde in fata ei si ramaneau vizibile
   toate trei iconitele odata, una peste alta. Se vede in captura: bifa,
   triunghi si octogon lipite in acelasi medalion. */
svg.notificare-ico { display: none; }
.notificare:not(.este-atentie):not(.este-rea) svg.notificare-ico-bun { display: block; }
.notificare.este-atentie svg.notificare-ico-atentie { display: block; }
.notificare.este-rea svg.notificare-ico-rau { display: block; }

/* ---- corpul --------------------------------------------------------- */

.notificare-corp {
  min-width: 0; padding-top: 2px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  /* Un cod sau un token fara spatii nu are unde sa rupa; fara asta ar impinge
     cutia pana la plafon si apoi ar iesi din ea. */
  overflow-wrap: anywhere;
}

.notificare-cap {
  margin: 0;
  /* De la --text-sm la --text-md, adica de la 12,5 la 14px: asta e „mai mare un
     pic” din cererea proprietarului, pe o treapta reala a scarii, nu un numar
     inventat. */
  font-size: var(--text-md);
  /* ⚠️ 600, nu 550. 550 nu exista decat pe fonturi variabile (SF Pro pe Mac);
     pe Segoe UI sau Roboto se rotunjea, deci aceeasi banda arata altfel la
     birou si pe laptop. 600 e o treapta reala pe orice font. */
  font-weight: 600;
  letter-spacing: var(--ls-md);
  color: var(--text-titlu);
  text-wrap: pretty;
}
/* Fara titlu nu ramane un rand gol care sa impinga ghidajul. */
.notificare-cap:empty { display: none; }

.notificare-pas { margin: 0; display: flex; flex-direction: column; gap: 1px; }
/* ⚠️ `hidden` trebuie scris explicit: altfel display: flex de mai sus il bate. */
.notificare-pas[hidden] { display: none; }

.notificare-pas-eticheta {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--ls-caps-mic); text-transform: uppercase;
  color: var(--stare-in-lucru);
}
.notificare-pas-text {
  font-size: var(--text-sm); font-weight: 400;
  color: var(--text-mediu);
  text-wrap: pretty;
  /* ⚠️ FARA line-clamp, fara ellipsis, fara inaltime fixa. S-a incercat deja la
     .versiune-banda-nota si rupea anuntul in mijlocul propozitiei; a fost scos
     in 0.3.21. Ghidajul se scurteaza LA SURSA, adica in apelul notifica(). */
}

/* ---- legatura catre locul unde se face pasul -------------------------
   E .buton .buton-discret .buton-mic, deci are deja gabaritul, raza si inelul
   de focus ale casei. Aici se regleaza doar asezarea si nuantarea sageata. */

.notificare-link { align-self: flex-start; margin-top: 5px; gap: 6px; }
.notificare-link[hidden] { display: none; }
.notificare-link .ico { transition: transform var(--dur-rapid) var(--arc); }
.notificare-link:hover .ico { transform: translateX(3px); }

/* ---- butonul de inchidere -------------------------------------------
   ⚠️ EXISTA CA SA POATA FI SCOS DIN CLIC. Inchiderea benzii era pana acum un
   clic oriunde pe ea (app.js:848); de cand banda are o legatura de apasat,
   „oriunde” ar insemna si „pe buton”, iar un clic ratat langa el ar stinge exact
   mesajul pe care omul se pregatea sa il urmeze. app.js sare peste clicurile
   care cad pe legatura si pe butonul asta. */

.notificare-inchide { flex: none; align-self: flex-start; margin: -1px -2px 0 0; }

/* ⚠️ Inelul de focus e cel de pe panza, adica regula globala de la linia 745, nu
   --focus-pe-inchis: ala e al barei laterale, care ramane inchisa in ambele
   teme. Banda nu mai e, deci nu are nevoie de nicio exceptie aici. */

/* ---- pe telefon ------------------------------------------------------
   Pana acum banda nu avea nicio regula responsive proprie; cu doua randuri si
   un buton are nevoie, ca .versiune-banda.
   ⚠️ Aici centrarea se face din left/right, deci translateX(-50%) DISPARE din
   amandoua starile. Daca ar ramane doar intr-una, banda ar aluneca lateral in
   timpul miscarii. Aceeasi capcana e notata si la .versiune-banda, care are
   pentru ea doua seturi de cadre. */

@media (max-width: 560px) {
  .notificare {
    left: var(--sp-3); right: var(--sp-3);
    width: auto; max-width: none;
    transform: translateY(-170%) scale(.96);
  }
  .notificare.este-vizibil { transform: translateY(0) scale(1); }
  /* Sub deget, legatura ia latimea. Sub 720px --h-control urca oricum la 38px,
     iar cu marginile lui butonul trece pragul de 44px. */
  .notificare-link { align-self: stretch; justify-content: center; min-height: var(--h-control); }
}

/* ---------------------------------------------------------------- 22. ecranul de diagnostic

   Cu peste 50 de verificari, o lista plata ar ascunde exact randurile pentru
   care s-a deschis pagina. De aceea rezultatele OK stau intr-un <details>
   inchis, iar problemele si atentionarile sunt MEREU vizibile.
   ⚠️ Jumătate din marcajul de aici sosește prin innerHTML după proba de rețea
   (diagnostic.js), deci clasele trebuie să existe chiar dacă nicio pagină nu le
   conține static.
   ------------------------------------------------------------------ */

.diag-cifre { margin-bottom: var(--sp-4); }

.diag-cuprins { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.diag-cuprins a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; min-height: var(--h-control-mic);
  border: 1px solid var(--buton-discret-linie);
  border-radius: var(--r-pastila);
  background: var(--buton-discret-fundal);
  color: var(--text);
  font-size: var(--text-xs); font-weight: 600;
  transition: background var(--dur-rapid) ease, transform var(--dur-rapid) ease;
}
.diag-cuprins a:hover { background: var(--buton-discret-hover); text-decoration: none; transform: translateY(-1px); }

.diag-verdict {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie);
  border-left-width: 3px;
  border-radius: var(--r-rand);
  background: var(--card);
  margin-bottom: var(--sp-4);
}
.diag-verdict.este-problema { border-left-color: var(--stare-rau);     background: var(--stare-rau-fundal); }
.diag-verdict.este-atentie  { border-left-color: var(--stare-atentie); background: var(--stare-atentie-fundal); }
.diag-verdict.este-ok       { border-left-color: var(--stare-bun);     background: var(--stare-bun-fundal); }

.diag-rez {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--linie);
  scroll-margin-top: var(--h-antet);
}
.diag-rez:last-child { border-bottom: 0; }
/* Ancora din cuprins trebuie să se și VADĂ când ajungi la ea. */
.diag-rez:target { background: var(--stare-in-lucru-fundal); }
.diag-ok-lista li:target { background: var(--stare-in-lucru-fundal); border-radius: var(--r-chip); }
.diag-rez-cap {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center; justify-content: space-between;
}
.diag-rez-titlu { font-weight: 620; min-width: 0; }
.diag-rez-mesaj { color: var(--text-mediu); margin-top: var(--sp-1); font-size: var(--text-sm); }

/* Remedierea e singurul text din pagina care cere o ACTIUNE. Nu are voie sa
   arate ca restul. */
.diag-remediere {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--stare-in-lucru);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  background: var(--stare-in-lucru-fundal);
  color: var(--text);
  font-size: var(--text-sm);
}
.diag-detalii {
  margin-top: var(--sp-2);
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--sp-3);
  font-size: var(--text-xs);
}
.diag-detalii dt { color: var(--text-sters); font-weight: 650; }
.diag-detalii dd { margin: 0; overflow-wrap: anywhere; }

.diag-ok-grup { padding: 0 var(--sp-4) var(--sp-3); }
.diag-ok-grup > summary {
  cursor: pointer; padding: var(--sp-2) 0;
  color: var(--text-slab); font-weight: 650; font-size: var(--text-xs);
}
.diag-ok-grup > summary:focus-visible { outline-offset: 0; }
.diag-ok-lista { list-style: none; margin: 0; padding: 0; }
.diag-ok-lista li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 0;
  color: var(--text-mediu);
  border-bottom: 1px solid var(--linie);
  scroll-margin-top: var(--h-antet);
}
.diag-ok-lista li:last-child { border-bottom: 0; }

.diag-subsol { margin-top: var(--sp-5); color: var(--text-sters); }

/* =====================================================================
   23. STICLA LICHIDĂ ȘI MORPH-UL - CONTRACTUL PENTRU AUTORUL DE JAVASCRIPT

   Tot ce urmează e marcaj pe care PHP-ul NU îl emite. E scris de JS, la
   rulare. Numele au prefixul `lg-` tocmai ca să nu se poată ciocni niciodată cu
   cele 130 de clase din contractul cu vederile.

   ── 23.1 Petele ambientale ──────────────────────────────────────────
   JS inserează, ca PRIM copil al `.zona`:

     <div class="lg-ambient" aria-hidden="true">
       <span class="lg-pata lg-pata-a"></span>
       <span class="lg-pata lg-pata-b"></span>
       <span class="lg-pata lg-pata-c"></span>
     </div>

   ⚠️ De ce prim copil al `.zona` și nu al lui `body`: `.lg-ambient` e
   `position: fixed` cu `left: var(--lat-bara)`, ca să nu treacă peste bara
   laterală, iar ordinea în arbore e ce îl ține SUB `.continut` (care e
   poziționat, deci se pictează ca un tot, după el).
   Dacă JS nu rulează, pânza rămâne `--canvas` plat. Nimic nu se rupe.

   ── 23.2 Filtrul SVG ────────────────────────────────────────────────
   JS inserează O SINGURĂ DATĂ, oriunde în body:

     <svg class="lg-defs" aria-hidden="true" focusable="false" …>
       <filter id="lg-lentila" …>  (feImage R=X, feImage G=Y, feBlend screen,
                                    feDisplacementMap scale="18")
     </svg>

   Filtrul trebuie să aibă id-ul EXACT `lg-lentila`: `--sticla-lentila` din §1
   îl caută prin `url(#lg-lentila)`. Hărțile sunt 292×243, cu `href` ȘI
   `xlink:href` identice (WebKit), și `color-interpolation-filters="sRGB"`.
   Definiția completă e în docs/CONTRACT-VIZUAL.md §2.3.

   ── 23.3 Forma care se transformă ───────────────────────────────────
   Structura obligatorie (butonul DEVINE meniul; nu există două panouri care
   fac crossfade):

     <div class="lg-morph" data-open="false">
       <div class="lg-sticla" aria-hidden="true">
         <div class="lg-lentila"></div>
         <div class="lg-tenta"></div>
       </div>
       <button class="lg-declansator" aria-haspopup="menu" aria-expanded="false"
               aria-controls="…">Etichetă<span class="lg-plus">+</span></button>
       <div class="lg-meniu" role="menu" tabindex="-1" aria-label="…">
         <div class="lg-cursor" data-on="false"></div>
         <div class="lg-meniu-titlu">Titlu secțiune</div>
         <button class="lg-item" role="menuitem" tabindex="-1">
           <span class="lg-item-ico"><svg …></span>
           <span class="lg-item-text">Etichetă</span>
           <span class="lg-item-tasta">⌘K</span>
         </button>
         <div class="lg-sep" role="separator" aria-hidden="true"></div>
       </div>
     </div>

   Ce comută JS, și NIMIC altceva:
     · `data-open="true|false"` pe `.lg-morph`  - deschis / închis. Toată
       animația (formă, umbră, etichetă, itemi, separator) atârnă de el.
     · `data-on="true|false"`   pe `.lg-cursor` - cursorul e aprins sau stins.
     · `cursor.style.transform = 'translate3d(0,' + item.offsetTop + 'px,0)'`
       - poziționarea cursorului se face NUMAI prin transform, niciodată prin
       `top`, altfel alunecarea devine un salt de layout.
     · `aria-expanded` pe declanșator, în oglindă cu `data-open`.

   Simbolurile pe care JS le poate rescrie ca să schimbe geometria (toate au
   valori implicite mai jos, deci JS poate să nu le atingă deloc):
     --lg-bw --lg-bh --lg-br   lățimea / înălțimea / raza formei ÎNCHISE
     --lg-mw --lg-mh --lg-mr   lățimea / înălțimea / raza formei DESCHISE
     --lg-gap                  padding-ul interior al meniului
     --lg-ir                   raza interioară = --lg-mr − --lg-gap (28−8=20)
   ⚠️ Dacă JS măsoară meniul și scrie --lg-mh, trebuie să scrie și --lg-mw, iar
   hărțile filtrului SVG rămân la 292×243: refracția e calibrată pe forma
   deschisă. La alte dimensiuni, refracția se deformează proporțional, ceea ce
   e acceptabil; la o schimbare mare, se regenerează hărțile.

   ── 23.4 Ce NU are voie JS ──────────────────────────────────────────
   · Să pună `opacity` sau `visibility` pe `.lg-sticla`. Sticla e CONTINUĂ; se
     animă geometria, nu vizibilitatea.
   · Să dea `.lg-sticla` un fundal opac. `background: transparent` e obligatoriu.
   · Să pună `.lg-ambient`, `.lg-morph` sau orice element cu `backdrop-filter`
     în interiorul unui tabel sau al unui rând.
   · Să scrie duratele în JS. Deschiderea (520ms) și închiderea (400ms) sunt
     declarate pe stări diferite în CSS, tocmai ca JS să nu aibă de calculat.
   ===================================================================== */

.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* --- 23.1 petele ambientale --- */
/* ⚠️ MASCA E PARTEA CARE NU SE SCOATE. Fără ea, aburul cade peste coloana de
   text și titlul stă pe culoare - defectul reclamat. Elipsa transparentă din
   mijloc acoperă antetul lipicios, cardurile, tabelele și subsolul; culoarea
   supraviețuiește doar spre muchii, unde n-o citește nimeni ca fundal, dar de
   unde sticla tot are ce refracta. Browserele fără mask-image (foarte vechi)
   arată aburul nemascat: la .12 opacitate și 44px blur, tot nu se vede. */
.lg-ambient {
  position: fixed;
  top: 0; bottom: 0; right: 0; left: var(--lat-bara);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--pata-masca);
          mask-image: var(--pata-masca);
}
.invelis-simplu .lg-ambient { left: 0; }
.lg-pata {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(var(--pata-blur));
  opacity: var(--pata-opacitate);
  will-change: transform;
}
/* ⚠️ TOATE TREI STAU CU CENTRUL ÎN AFARA ECRANULUI, iar cele două care au ieșit
   prost în captură sunt mutate de pe text: roza nu mai stă deasupra titlului
   (era top: -170px, left: 4%, adică fix peste „Pâlnia"), galbena nu mai plutește
   în mijlocul paginii și nici peste subsol (era bottom: -160px, left: 32%).
   Textul aplicației e aliniat la STÂNGA, deci aburul se ține pe dreapta și pe
   muchia de sus/jos. Cu deriva de la §animații rămân tot afară. */
.lg-pata-a { width: 640px; height: 640px; top: -430px;  right: 20%;   background: var(--pata-a); animation: lg-drift-a 21s ease-in-out infinite; }
.lg-pata-b { width: 680px; height: 680px; top: 28%;     right: -400px; background: var(--pata-b); animation: lg-drift-b 26s ease-in-out infinite; }
.lg-pata-c { width: 580px; height: 580px; bottom: -420px; right: 4%;  background: var(--pata-c); animation: lg-drift-c 18s ease-in-out infinite; }

/* Durate prime și diferite, ca să nu se sincronizeze niciodată. Se mișcă doar
   prin transform, deci nu declanșează layout. */
@keyframes lg-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(96px, 54px, 0) scale(1.12); }
}
@keyframes lg-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-118px, 72px, 0) scale(.94); }
}
@keyframes lg-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(70px, -64px, 0) scale(1.16); }
}

/* --- 23.3 ancora și corpul de sticlă --- */
.lg-morph {
  --lg-bw: 176px; --lg-bh:  46px; --lg-br: 22px;
  --lg-mw: 292px; --lg-mh: 243px; --lg-mr: 28px;
  --lg-gap: 8px;
  --lg-ir: 20px;   /* 28 − 8 = 20 : raza interioară concentrică */

  position: relative;
  width: var(--lg-mw); height: var(--lg-mh);
  pointer-events: none;
}

.lg-sticla {
  position: absolute; top: 0; right: 0;
  width: var(--lg-bw); height: var(--lg-bh);
  border-radius: var(--lg-br);
  /* ⚠️ OBLIGATORIU: sticla nu are fundal propriu. */
  background: transparent;
  pointer-events: none;
  box-shadow: var(--sticla-corp-umbra);
  transition:
    width         var(--dur-inchis) var(--arc),
    height        var(--dur-inchis) var(--arc),
    border-radius var(--dur-inchis) var(--arc),
    box-shadow    var(--dur-inchis) var(--arc);
}
.lg-morph[data-open="true"] .lg-sticla {
  width: var(--lg-mw); height: var(--lg-mh);
  border-radius: var(--lg-mr);
  box-shadow: var(--sticla-corp-umbra-deschis);
  transition:
    width         var(--dur-deschis) var(--arc),
    height        var(--dur-deschis) var(--arc),
    border-radius var(--dur-deschis) var(--arc),
    box-shadow    var(--dur-deschis) var(--arc);
}
/* Stratul 3 - inelul exterior. `inset: -.5px` prinde antialiasingul. */
.lg-sticla::after {
  content: '';
  position: absolute; inset: -.5px;
  border-radius: inherit;
  box-shadow: var(--sticla-inel);
  pointer-events: none;
}

/* Stratul 1 - LENTILA. Blur de bază; unde filtrul SVG chiar se aplică, blurul
   SCADE (imaginea e deja deformată) și crește saturația. */
.lg-lentila { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lg-lentila {
    -webkit-backdrop-filter: var(--sticla-blur);
    backdrop-filter: var(--sticla-blur);
  }
}
@supports (backdrop-filter: url(#lg-lentila)) {
  .lg-lentila { backdrop-filter: var(--sticla-lentila); }
}

/* Stratul 2 - TENTA + cele șase muchii speculare (grosimea sticlei). */
.lg-tenta {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--sticla-tenta);
  box-shadow: var(--sticla-muchii);
}

/* --- eticheta butonului: iese repede, revine cu întârziere --- */
.lg-declansator {
  position: absolute; top: 0; right: 0;
  width: var(--lg-bw); height: var(--lg-bh);
  border: 0; margin: 0; padding: 0 4px 0 0;
  border-radius: var(--lg-br);
  background: transparent;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 620;
  letter-spacing: var(--ls-lg);
  color: var(--text);
  -webkit-appearance: none; appearance: none;
  transition:
    opacity   var(--dur-lenta) var(--arc),
    transform 320ms var(--arc),
    filter    var(--dur-lenta) var(--arc);
  transition-delay: 140ms;   /* la ÎNCHIDERE reapare abia după ce forma s-a strâns */
}
.lg-declansator:hover { color: var(--text-titlu); }
.lg-declansator:focus { outline: none; }
.lg-declansator:focus-visible { outline: none; box-shadow: var(--inel-focus); }
.lg-morph[data-open="true"] .lg-declansator {
  opacity: 0;
  transform: scale(.94) translateY(-3px);
  filter: blur(3px);
  pointer-events: none;
  transition-delay: 0ms;
  transition-duration: 140ms;   /* la DESCHIDERE pleacă imediat și rapid */
}
.lg-plus {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sticla-ico);
  box-shadow: var(--sticla-ico-umbra);
}

/* ⚠️ INSIGNA E ACȚIUNEA. Demotarea lui „Filtrează" a scos inversiunea de
   ierarhie din /leaduri, dar n-a promovat nimic: măsurat pe pixeli, pastila de
   sticlă a declanșatorului se desprindea de antet cu 1,06:1, adică MAI PUȚIN
   decât „Filtrează" de dedesubt (1,09:1). Cele două rămâneau la fel de tăcute,
   iar acțiunea principală a ecranului tot nu era cea mai vizibilă.

   Restul formei nu poate striga: e sticlă, și sticla e contract (§23) - nu se
   umple cu cerneală fără să se rupă morphul. Ce poate purta greutatea e
   insigna: 20×20, exact acolo unde ochiul caută acțiunea. Ia cerneala
   butonului principal și ierarhia se închide fără să se atingă materialul.

   ⚠️ Tokenii sunt cei ai butonului principal, nu culori scrise aici: insigna
   se inversează singură pe temă închisă, ca orice alt buton principal. */
.lg-declansator .lg-plus {
  background: var(--buton-primar);
  box-shadow: var(--buton-primar-umbra);
  color: var(--buton-primar-text);
}

/* --- conținutul meniului --- */
.lg-meniu {
  position: absolute; top: 0; right: 0;
  width: var(--lg-mw); height: var(--lg-mh);
  padding: var(--lg-gap);
  pointer-events: none;
  outline: none;
}
.lg-morph[data-open="true"] .lg-meniu { pointer-events: auto; }

.lg-meniu-titlu {
  height: 30px;
  display: flex; align-items: center;
  padding: 0 var(--sp-bara);
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--text-slab);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 140ms linear, transform 300ms var(--arc);
}
.lg-morph[data-open="true"] .lg-meniu-titlu {
  opacity: 1; transform: none;
  transition: opacity var(--dur-lenta) linear 120ms, transform 420ms var(--arc) 120ms;
}

.lg-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: var(--lg-bh);
  padding: 0 var(--sp-item);
  border: 0; margin: 0;
  border-radius: var(--lg-ir);
  background: transparent;
  color: var(--text);
  font-family: inherit; font-size: var(--text-md); font-weight: 550;
  letter-spacing: var(--ls-md);
  text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  opacity: 0; transform: translateY(-10px) scale(.965);
  transition: opacity 130ms linear, transform var(--dur-lenta) var(--arc);
}
.lg-morph[data-open="true"] .lg-item {
  opacity: 1; transform: none;
  transition: opacity var(--dur-lenta) linear, transform 480ms var(--arc);
}
/* Stagger explicit, NUMAI pe starea deschisă. La închidere nu există delay:
   tot conținutul dispare simultan, în 130ms. */
.lg-morph[data-open="true"] .lg-meniu button:nth-of-type(1) { transition-delay: 110ms; }
.lg-morph[data-open="true"] .lg-meniu button:nth-of-type(2) { transition-delay: 150ms; }
.lg-morph[data-open="true"] .lg-meniu button:nth-of-type(3) { transition-delay: 190ms; }
.lg-morph[data-open="true"] .lg-meniu button:nth-of-type(4) { transition-delay: 236ms; }
/* Inel INTERIOR pe itemi, ca să nu depășească muchia sticlei. */
.lg-item:focus { outline: none; }
.lg-item:focus-visible { outline: none; box-shadow: var(--inel-focus-intern); }

.lg-item-ico {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-ico);   /* 20 − 10 = 10 : concentric față de item */
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  background: var(--sticla-ico);
  box-shadow: var(--sticla-ico-umbra);
}
.lg-item-text { flex: 1 1 auto; min-width: 0; }
/* ⚠️ Litera de scurtătură e SINGURUL --text-sters care ajunge pe sticlă. În
   colțul de sus al meniului, unde cele două tente albe se adună, sticla urcă la
   ~#41434B și --text-sters cade la 3,79:1, sub pragul de 4,5:1. Urcă o treaptă,
   pe --text-slab: 4,54:1 în cel mai rău colț, 6,02:1 unde stă de fapt. Rămâne
   tot mai stinsă decât eticheta de lângă, deci ierarhia rândului nu se schimbă. */
.lg-item-tasta { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-slab); }

.lg-sep {
  height: var(--sp-item); margin: 0 var(--sp-item);
  display: flex; align-items: center;
  opacity: 0;
  transition: opacity 130ms linear;
}
.lg-sep::before { content: ''; display: block; width: 100%; height: 1px; background: var(--sticla-sep); }
.lg-morph[data-open="true"] .lg-sep { opacity: 1; transition-delay: 210ms; }

/* Cursorul de selecție ALUNECĂ pe dedesubt, nu apare. */
.lg-cursor {
  /* ⚠️ top: 0, nu --lg-gap. JS mută cursorul cu `items[i].offsetTop`, care e
     măsurat față de .lg-meniu și include deja paddingul; un top de plecare
     nenul l-ar aduna a doua oară. */
  position: absolute; top: 0; left: var(--lg-gap);
  width: calc(var(--lg-mw) - var(--lg-gap) * 2);
  height: var(--lg-bh);
  border-radius: var(--lg-ir);
  background: var(--sticla-cursor);
  box-shadow: var(--sticla-cursor-umbra);
  opacity: 0; pointer-events: none; z-index: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 380ms var(--arc), opacity 160ms linear;
}
.lg-cursor[data-on="true"] { opacity: 1; }

/* Panou de sticlă generic, pentru orice popover pe care îl mai construiește JS
   fără morph (un meniu de context, o listă de sugestii). Aceleași straturi,
   într-un singur element. */
.lg-panou {
  border-radius: var(--r-mare);
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
  backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), var(--umbra-3);
}

/* ---------------------------------------------------------------- 24. ecrane inguste

   Prag 720px: sub el, tabelele devin liste de cartonase. NU se deruleaza
   orizontal si nu se indeasa in trei coloane de cate opt pixeli.
   Fiecare <td> isi poarta eticheta in atributul data-eticheta.
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .grila-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grila-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continut { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .picior { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

/* Sub 900px bara laterala devine o BANDA DE APLICATIE in capul paginii.
   ⚠️ Nu se lasa pur si simplu sa curga pe verticala: cu opt intrari de meniu si
   trei titluri de grup, meniul ocupa singur tot primul ecran, iar continutul
   incepe sub el, nevazut. Aici marca si contul stau pe un rand, iar meniul pe
   randul urmator, intr-o banda care se deruleaza ORIZONTAL in cutia ei.
   ⚠️ Bara rămâne `position: relative` (nu `static`), altfel z-index-ul nu se
   mai aplică și petele ambientale, care sunt `fixed`, trec peste ea. */
@media (max-width: 900px) {
  .invelis { grid-template-columns: minmax(0, 1fr); }
  .bara {
    position: relative; top: auto; height: auto; align-self: stretch;
    border-right: 0; border-bottom: 1px solid var(--linie-bara);
  }
  .bara-interior {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: var(--sp-2) var(--sp-3); gap: var(--sp-2);
  }
  .marca { flex: 0 0 auto; padding: 2px var(--sp-2) 2px 0; }
  .bara-eu {
    flex: 1 1 auto; min-width: 0;
    border-top: 0; padding-top: 0;
    justify-content: flex-end;
  }
  /* ⚠️ `flex: 1 1 0`, nu `1 1 100%`. Cu 100% navigarea isi lua rand propriu,
     iar comutatorul de tema ramanea singur pe alt rand, desi comentariul de la
     sectiunea 27 spune ca trebuie sa stea lipit de blocul de cont. Trei randuri
     de bara pe un telefon de 390px insemnau 176px de crom inainte de continut.
     Masurat pe 01.09.2026, la trecerea sistematica pe ecrane. */
  /* ⚠️ Basis-ul e „aproape tot randul", nu 0 si nu 100%.
       Cu 0 se strivea la 12px langa siglă si navigarea disparea de pe ecran.
       Cu 100% isi lua rand propriu si lasa comutatorul de tema singur pe altul.
       Scazand latimea comutatorului, navigarea coboara pe randul ei SI ii lasa
       loc alaturi. Prins la a doua masuratoare, 01.09.2026: prima incercare a
       facut navigarea invizibila. */
  .bara-navigare {
    order: 3; flex: 1 1 calc(100% - 150px); min-width: 0;
    display: flex; align-items: center; gap: var(--sp-1);
    overflow-x: auto; overflow-y: hidden;

    /* Semnul ca mai e continut la dreapta. Ultimul element era taiat exact pe
       margine, si nimic nu spunea ca se poate derula: cine nu incerca nu afla
       ca mai exista ecrane. Masca e o umbra a marginii, nu un buton: nu adauga
       niciun element si nu cere JavaScript. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  /* Bara e o zona de derulare: pe iOS trebuie sa curga cu degetul, nu sa sara. */
  .bara-navigare { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bara-navigare::-webkit-scrollbar { display: none; }
  /* Titlurile de grup ar fi cate un rand intreg fiecare. Numele grupului ramane
     pentru cititoarele de ecran, in aria-label de pe <nav>. */
  .nav-eticheta { display: none; }
  .bara-navigare > nav:not(:first-of-type) {
    border-left: 1px solid var(--linie-bara);
    margin-left: var(--sp-1); padding-left: var(--sp-2);
  }
  .nav { flex-direction: row; flex-wrap: nowrap; gap: var(--sp-1); }
  /* ⚠️ 10px, nu 7. La 7 iesea 33px inaltime, sub podeaua de 38px pe care si-o
     scrie fisierul asta la sectiunea 1.16b, pe navigatia PRINCIPALA a
     aplicatiei. Proprietarul a confirmat pe 01.09.2026 ca se lucreaza si de pe
     telefon, deci nu e un caz teoretic. */
  .nav-link { padding: 10px 11px; white-space: nowrap; min-height: var(--h-control); }
  .nav-link:hover { transform: none; }
  .nav-link.este-activ::before { display: none; }
  .lg-ambient { left: 0; }
  .continut { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .picior { padding: var(--sp-3); }
}

@media (max-width: 720px) {
  .grila-2, .grila-3, .grila-4 { grid-template-columns: minmax(0, 1fr); }
  .campuri-2, .campuri-3 { grid-template-columns: minmax(0, 1fr); }

  /* Pe telefon antetul nu mai e lipicios: desfăcut pe verticală, cu butoanele
     pe toată lățimea, ar acoperi jumătate de ecran. */
  .cap-pagina {
    position: static;
    flex-direction: column; align-items: stretch;
  }
  /* ⚠️ Pe coloana, `flex-basis` se aplica pe INALTIME. Fara resetul asta,
     `flex: 1 1 320px` de pe blocul de titlu lasa 320px de gol intre subtitlu si
     butoane, si ecranul arata rupt exact pe telefon. */
  /* ⚠️ AMANDOI selectorii, in oglinda cu regula de la sectiunea 8. Pe ecranele
     cu sageata de intoarcere blocul de titlu NU mai e :first-child, iar in
     0.3.12 exact asta s-a intamplat: antetul fisei de lead a ajuns 446px pe un
     telefon de 390px, cu 320px de gol, fiindca resetul avea un singur selector
     iar regula de baza doi. Daca mai apare un selector acolo, apare si aici. */
  .cap-pagina > div:first-child,
  .cap-pagina > .cap-inapoi + div { flex: 0 0 auto; }

  /* Sub 720px antetul e coloana, deci sageata isi ia rand propriu si argumentul
     „nu costa inaltime" nu mai tine. Ramane doar ca e o tinta de deget, si e
     singura intoarcere de pe /lead, /societate si /contract. */
  .cap-inapoi { width: var(--h-control); height: var(--h-control); }

  .actiuni .buton { flex: 1 1 auto; }
  .camp .actiuni { flex-wrap: wrap; }

  .tabel-cutie { overflow-x: visible; }
  .tabel, .tabel thead, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel thead { display: none; }
  .tabel tr {
    border: 1px solid var(--linie);
    border-radius: var(--r-rand);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--card);
  }
  .tabel tbody tr:hover { background: var(--card); }
  .tabel tr.este-stins td:first-child { box-shadow: none; }
  .tabel td {
    border-bottom: 0;
    padding: 3px 0;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    gap: var(--sp-2);
    text-align: left;
  }
  .tabel td.num { text-align: left; }
  /* ⚠️ Pe cartonaș, celula devine grilă, iar un copil `inline-flex` se
     block-ifică și se întinde pe toată coloana. Pastila de stare trebuie să
     rămână de mărimea textului ei, altfel arată ca o bandă colorată. */
  .tabel td > .pastila,
  .tabel td > .cod { justify-self: start; }
  /* ⚠️ Cârligul cel mai ușor de uitat din tot fișierul: fără el, fiecare tabel
     de pe telefon devine o listă de valori fără nume. */
  .tabel td::before {
    content: attr(data-eticheta);
    color: var(--text-sters);
    font-size: var(--text-xs);
    font-weight: 650;
  }
  /* Celula fara eticheta (butoane de actiune) ocupa tot randul. */
  .tabel td:not([data-eticheta]) { grid-template-columns: minmax(0, 1fr); }
  .tabel td .actiuni { justify-content: flex-start; flex-wrap: wrap; }
  .tabel td.stramt { width: auto; white-space: normal; }

  /* Meniul morph nu are loc lângă un titlu pe 360px: se desface pe toată
     lățimea disponibilă. */
  .lg-morph { --lg-mw: min(292px, calc(100vw - var(--sp-6))); }
}

@media (max-width: 480px) {
  /* ---- bara de filtre, numai pe telefoanele inguste ------------------
     ⚠️ PRAGUL E 480, NU 720. Prima incercare din 0.3.16 a pus grila pe tot
     intervalul de sub 720px si a facut-o mai INALTA acolo unde randul flexibil
     incapea oricum in doua. Masurat pe 02.09.2026, in ambele variante:

        390px   grila 122px   flex 168px   -> grila castiga 46px
        430px   grila 122px   flex 168px   -> grila castiga 46px
        480px   grila 122px   flex 122px   -> egale
        560px   grila 122px   flex  93px   -> FLEXUL castiga 29px
        700px   grila 122px   flex  85px   -> FLEXUL castiga 37px

     Deci 480 e exact punctul in care se intorc. Peste el nu se atinge nimic:
     randul flexibil se aseaza singur mai bine decat orice grila fixa.
     -------------------------------------------------------------------- */
  /* ⚠️ PODEA PE COLOANA INTAI, `minmax(9rem, ...)`, nu `minmax(0, ...)`.
     Cu 0, coloana selectului nu avea nicio podea si inghitea toata strangerea,
     fiindca a doua e `auto` si butoanele sunt `nowrap`: invelisul de actiuni
     lua 202px ficsi din 334. Masurat pe 02.09.2026, in stare filtrata, cat
     primea selectul de stare fata de cei 143px de care are nevoie:
        430px -> 164px      390px -> 124px
        360px -> 110px      320px ->  70px, adica sase caractere
     La 320px „Contract draft trimis" si „Contract final trimis" se scriau
     IDENTIC: doua filtre diferite aratau la fel, si nimic altceva de pe ecran
     nu spunea care e pus. Reparatia de inaltime din 0.3.16 mutase costul pe
     latime.

     `flex-wrap` pe actiuni e supapa: pe ecranele foarte inguste ele se rup pe
     doua linii si platesc un rand, in loc sa striveasca selectul. */
  .filtre-rand {
    display: grid; grid-template-columns: minmax(9rem, 1fr) auto;
    align-items: center;
  }
  .filtre-rand .camp-cauta { grid-column: 1 / -1; max-width: none; }
  /* Fara `order`: bifa a fost mutata in MARCAJ dupa actiuni. `order` muta doar
     ce vezi, nu si ordinea in care ajunge focusul, iar cine naviga cu tastatura
     cobora pe bifa si sarea inapoi in sus. WCAG 2.4.3. */
  .filtre-rand .bifa-rand  { grid-column: 1 / -1; margin-inline: 0; }

  /* „Golește" devine doar iconita: elibereaza ~45px pentru select. Eticheta se
     ascunde VIZUAL, nu se sterge, ca sa ramana numele pentru cititorul de ecran. */
  .filtre-goleste { padding-inline: 0; width: var(--h-control); justify-content: center; }
  .filtre-goleste-text {
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
  .filtre-rand .camp select { min-width: 0; width: 100%; }

  /* Rolurile de sub nume sunt informatie de context, nu de navigare: pe un
     ecran de 320px iau exact randul de care are nevoie meniul. */
  .bara-eu .eu-rol { display: none; }
  .marca-sufix { display: none; }
}

@media (max-width: 380px) {
  .continut { padding: var(--sp-3) var(--sp-2) var(--sp-6); }
  .card-corp { padding: var(--sp-3); }
  .login-card { padding: var(--sp-4); }
  .cap-pagina { padding: var(--sp-3); }
}

/* ---------------------------------------------------------------- 25. miscare redusa

   ⚠️ Abordarea din contractul vizual: tranzițiile NU se anulează, se COMPRIMĂ
   la 1ms. Stările finale rămân identice, deci nu apar salturi de layout și JS-ul
   care ascultă `transitionend` primește tot un eveniment. Petele ambientale se
   opresc de tot; blurul de pe eticheta declanșatorului se anulează separat,
   fiindcă `filter: blur(3px)` chiar și la 1ms tot ar clipi.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lg-pata { animation: none; }

  .lg-sticla,
  .lg-morph[data-open="true"] .lg-sticla,
  .lg-declansator,
  .lg-item,
  .lg-morph[data-open="true"] .lg-item,
  .lg-meniu-titlu,
  .lg-morph[data-open="true"] .lg-meniu-titlu,
  .lg-sep,
  .lg-morph[data-open="true"] .lg-sep,
  .lg-cursor,
  .nav-link,
  .palnie-pas,
  .diag-cuprins a,
  .tabel tbody tr,
  .buton,
  .notificare {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .lg-declansator { filter: none !important; }
  /* ⚠️ Sageata legaturii de ghidaj e singurul control nou cu tranzitie proprie;
     `.notificare` insasi e deja in lista de mai sus. Nimic din banda nu
     foloseste @keyframes, tocmai ca sa nu iasa din blocul asta, cum a iesit
     .versiune-banda. */
  .notificare-link .ico { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .notificare-link:hover .ico { transform: none; }
  .tbl-inapoi .ico { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .tbl-inapoi:hover .ico { transform: none; }
  .nav-link:hover, .palnie-pas:hover, .diag-cuprins a:hover { transform: none; }
  .buton:active { transform: none; }
  /* Rotirea de pe butonul ocupat nu se oprește: e singurul semn că cererea e în
     zbor. Doar încetinește, ca să nu obosească. */
  .buton[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------- 26. tipar */

@media print {
  .bara, .actiuni, .notificare, .modal-fond, .sari-continut, .picior,
  .lg-ambient, .lg-morph, .lg-defs { display: none !important; }
  html, body { background: #FFFFFF; color: #000000; }
  .zona { background: #FFFFFF; }
  .invelis { grid-template-columns: minmax(0, 1fr); }
  .cap-pagina {
    position: static;
    background: none; box-shadow: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .card, .cifra, .palnie-pas {
    box-shadow: none; border-color: #CCCCCC; background: #FFFFFF;
    break-inside: avoid;
  }
  .tabel tbody tr:hover { background: none; }
}

/* ---------------------------------------------------------------- 27. comutatorul de aspect

   Control segmentat cu trei trepte, în subsolul barei laterale. Marcajul vine
   din layout.php; aici e doar înfățișarea lui.

   ⚠️ MATERIALUL E AL BAREI, nu al sticlei. Bara laterală e OPACĂ (§4) tocmai
   ca să nu ardă GPU pe toată înălțimea ecranului, iar comutatorul stă pe ea:
   un `backdrop-filter` aici ar filtra un fundal opac, adică ar costa fără să
   se vadă. Aspectul de sticlă îl dau, ca la bară, muchia speculară și tenta
   de alb transparent - simbolurile --pe-inchis-*, care sunt deja calibrate pe
   degradeul închis și rămân bune și pe temă deschisă, fiindcă bara nu se
   deschide niciodată.

   ⚠️ ROȘUL NU APARE AICI. Treapta curentă se citește din formă și din poziția
   glisorului, nu din culoare. Roșul de brand are trei locuri în aplicație
   (marca, pastila de Diagnostic, pasul curent din banda de lead); un al
   patrulea l-ar dilua.

   ⚠️ GLISORUL NU SE MĂSOARĂ. Spre deosebire de cel din meniu (§11 din app.js,
   unde rândurile au înălțimi diferite), treptele de aici sunt exact trei
   coloane egale, deci poziția e aritmetică pură: `--tema-i` × 100% din propria
   lățime. Fără getBoundingClientRect, fără ResizeObserver, fără remăsurare la
   redimensionare. JS scrie UN simbol și atât.

   ⚠️ Indicele vine ștampilat din PHP, în atributul style. Fără el, glisorul ar
   porni de la treapta implicită și ar traversa comutatorul la fiecare
   încărcare de pagină.

   ⚠️ Legea concentricității, ca peste tot: rază interioară = rază exterioară −
   inset. 10 − 3 = 7, scris ca operație ca să nu se poată despărți.
   ------------------------------------------------------------------ */

.tema-comutator {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  border-radius: var(--r-nav);
  background: var(--pe-inchis-hover);
  box-shadow: var(--pe-inchis-inel);
  /* Butoanele stau peste glisor prin z-index; contextul se izolează aici ca
     ordinea de pictură să nu depindă de ce e în jurul barei. */
  isolation: isolate;
}

.tema-glisor {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: calc(var(--r-nav) - 3px);
  background: var(--pe-inchis-activ);
  box-shadow: var(--pe-inchis-inel);
  pointer-events: none;
  /* Aceeași curbă și aceeași durată ca glisorul din meniu: în aplicație există
     o singură mișcare de „suprafață care alunecă spre alegere". */
  transform: translate3d(calc(var(--tema-i, 2) * 100%), 0, 0);
  transition: transform var(--dur-inchis) var(--arc);
  will-change: transform;
}

.tema-optiune {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  border-radius: calc(var(--r-nav) - 3px);
  background: none;
  color: var(--pe-inchis-5);
  font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; line-height: 1.1;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: color var(--dur-rapid) ease;
}
.tema-optiune:hover { color: var(--pe-inchis-2); }
/* Sursa de adevăr e atributul ARIA, nu o clasă: aspectul nu are cum să spună
   altceva decât cititorul de ecran. */
.tema-optiune[aria-checked="true"] { color: var(--pe-inchis-1); }

/* Inelul intră ÎN treaptă. Cel implicit (§2) stă la 2px în afară, iar aici ar
   ieși din pista de 3px și ar călca peste treptele vecine. Culoarea rămâne cea
   a barei, albă: `.bara :focus-visible` din §4 o dă deja. */
.tema-optiune:focus-visible { outline-offset: -2px; }

.tema-optiune .ico { width: 15px; height: 15px; }

.tema-eticheta {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sub 900px bara e o bandă orizontală (§24). Comutatorul trece după blocul de
   cont și rămâne numai cu glifele.

   ⚠️ Eticheta se ASCUNDE VIZUAL, nu se scoate: cu `display: none` butonul ar
   rămâne fără nume accesibil, iar cititorul de ecran ar anunța trei butoane
   fără conținut. Așa, numele rămâne întreg în arborele de accesibilitate.

   ⚠️ Fără etichetă, treptele se strâng la 33×27px, adică sub degetul oricui.
   Padding-ul le duce la ~41×39, aproape de pragul de 44px, iar `margin-left:
   auto` le lipește sub blocul de cont, ca să se citească drept parte din el,
   nu ca un control rătăcit în mijlocul benzii. */
@media (max-width: 900px) {
  /* ⚠️ `order: 4`, dupa navigare, nu `2`. Cu 2 ajungea inaintea ei si, cum
     navigarea isi lua un rand intreg, comutatorul ramanea SINGUR pe randul lui:
     45px de banda doar pentru el, si arata a control ratacit, exact ce spune
     comentariul de mai sus ca nu trebuie sa se intample. Acum imparte randul cu
     navigarea, pe dreapta. */
  .tema-comutator { order: 4; flex: 0 0 auto; margin-left: var(--sp-2); }
  .tema-optiune { padding: 12px 13px; }
  .tema-eticheta {
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* Aceeași abordare ca în §25: tranziția nu se anulează, se comprimă la 1ms.
   Glisorul SARE pe treaptă în loc să alunece, dar starea finală e identică și
   nimic nu se mișcă în layout. */
@media (prefers-reduced-motion: reduce) {
  .tema-glisor,
  .tema-optiune {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  /* Banda ramane, doar ca apare pe loc: anuntul e informatie, miscarea era doar
     ca sa-l prinzi cu ochiul. */
  .versiune-banda,
  .versiune-banda .buton { animation: none !important; }
}

/* =====================================================================
   PANOUL DE COMPLETARE ȘI EDITORUL VIZUAL AL CONTRACTULUI
   Adăugate 31.08.2026, docs/CONTRACT-EDITOR.md §9 și §7.

   ⚠️ Nicio culoare scrisă direct: totul prin variabile, care au deja
   perechea lor pentru tema întunecată. Roșul de brand nu apare nicăieri
   aici (regula 12): panoul nu semnalează o eroare, ci o treabă de făcut.

   ⚠️ Fiecare grup își poartă forma prin iconița din titlu, pusă de vedere
   (regula 11). CSS-ul nu deosebește grupurile prin culoare.
   ===================================================================== */

/* ------------------------------------------------ grupurile panoului */
.ctr-grup { margin-bottom: var(--sp-5); }
.ctr-grup:last-of-type { margin-bottom: 0; }

.ctr-grup-cap {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-size: var(--text-md); font-weight: 600; color: var(--text-titlu);
}
.ctr-grup-cap .ico { color: var(--text-slab); flex: none; }
.ctr-grup > .camp-ajutor { margin: 0 0 var(--sp-3); }

/* ------------------------------------------------ un rând, un gol */
.ctr-loc {
  background: var(--card-plin);
  border: 1px solid var(--linie);
  border-radius: var(--r-rand);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.ctr-loc:last-child { margin-bottom: 0; }

.ctr-loc-cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2);
}
.ctr-loc-cap label {
  font-size: var(--text-md); font-weight: 550; color: var(--text-titlu);
  letter-spacing: var(--ls-md);
}
.ctr-loc .camp { margin-top: var(--sp-2); }
.ctr-loc > .camp-ajutor { margin-top: var(--sp-2); }
.ctr-loc > .buton { margin-top: var(--sp-3); }

/* Fiecare apariție a unei chei de scos își are propria propoziție și
   propria bifă: trei apariții nu sunt aceeași propoziție. */
.ctr-loc-scoate { margin-top: var(--sp-2); }
.ctr-loc-scoate + .ctr-loc-scoate {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--linie);
}
.ctr-loc-sursa { margin-top: var(--sp-3); }

/* ------------------------------------------------ propoziția din contract
   Clasă nouă: app.css nu avea până azi nicio regulă pe blockquote. */
.ctr-context {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--linie-tare);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  background: var(--card-slab);
  color: var(--text-mediu);
  font-size: var(--text-sm); line-height: 1.55;
}

/* ------------------------------------------------ bara editorului */
.ctr-bara {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  padding-bottom: var(--sp-2);
}
.ctr-bara b, .ctr-bara i { font-style: normal; }
.ctr-bara i { font-style: italic; }

/* ------------------------------------------------ zona editabilă
   ⚠️ Regulile de mai jos NU sunt inventate: sunt cele din <style>-urile
   celor șapte șabloane (db/005 și db/006), citite acolo și restrânse la
   #ctr-corp. Foile de stil ale contractului nu se încarcă în pagina
   aplicației (ar avea selectori pe `p` și `table`, adică ar rescrie tot
   ecranul), dar fără ele omul ar edita un text fără nicio formă, iar
   „editor vizual" ar fi doar alt nume pentru aceeași plângere.

   ⚠️ Hârtia rămâne albă și în tema întunecată, deliberat: e documentul
   care se tipărește și pleacă la client, nu o suprafață a aplicației. */
.ctr-editabil {
  background: #FFFFFF;
  color: #111111;
  border: 1px solid var(--linie-tare);
  border-radius: var(--r-nav);
  padding: 24px 24px;              /* MARGINE DE HARTIE, fixa. Vezi 0.3.12. */
  min-height: 340px;
  max-height: min(70vh, 720px);
  overflow-y: auto;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 15px; line-height: 1.45;
}
.ctr-editabil:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ctr-editabil p          { margin: 0 0 6px; text-align: left; }
.ctr-editabil p.j,
.ctr-editabil p.t-just   { text-align: justify; }
.ctr-editabil p.c,
.ctr-editabil p.t-center { text-align: center; }
.ctr-editabil p.e        { min-height: 1em; }
.ctr-editabil p.gol      { margin-bottom: .5em; }
.ctr-editabil p.num      { padding-left: 1.4em; text-indent: -1.4em; }
.ctr-editabil p.num.l1   { margin-left: 1.4em; }
.ctr-editabil p.num.l3   { margin-left: 4.2em; }
.ctr-editabil p.num.lv1  { padding-left: 3.4em; text-indent: -3.4em; }
.ctr-editabil p.num.lv2  { padding-left: 4.4em; text-indent: -4.4em; }
.ctr-editabil .nr        { display: inline-block; min-width: 2.4em; }
.ctr-editabil .lbl       { white-space: pre; }
.ctr-editabil .tab       { display: inline-block; width: 2.6em; }
.ctr-editabil p.s-Heading1 { font-weight: 700; margin-top: .2em; }
.ctr-editabil p.s-Heading2,
.ctr-editabil p.s-Heading3 { margin-top: .2em; }
.ctr-editabil table      { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.ctr-editabil td,
.ctr-editabil th         { border: 1px solid #999999; padding: 5px 6px; vertical-align: top; }
.ctr-editabil td p       { margin: 0 0 4px; }
.ctr-editabil u          { text-decoration: underline; }

/* Substituentul necompletat trebuie să sară în ochi CHIAR ÎN EDITOR: acolo
   se completează, și acolo se vede dacă a mai rămas unul. */
.ctr-editabil .ph {
  background: var(--stare-atentie-fundal);
  border-bottom: 1px dotted var(--stare-atentie);
  padding: 0 .12em;
}

/* Granița dintre documentele pachetului: la tipar e o pagină nouă, aici e
   o linie, ca omul să vadă unde se termină contractul și încep anexele. */
.ctr-editabil .ctr-separator {
  height: 0; border-top: 2px dashed #BBBBBB; margin: 24px 0;   /* hartie, fix */
}

/* ------------------------------------------------ HTML brut, cazul rar */
.ctr-brut { margin-top: var(--sp-5); border-top: 1px solid var(--linie); padding-top: var(--sp-3); }
.ctr-brut > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--text-slab);
  padding: var(--sp-1) 0; list-style-position: inside;
}
.ctr-brut > summary:hover { color: var(--text); }

/* ---------------------------------------------------------------- 28. generatorul de leasing
   Schela de doua coloane a cardului #lsg-oferta, cu panoul de calcul lipit in
   dreapta, si banda de pe telefon.

   ⚠️ STA AICI, IN FOAIA COMUNA, nu intr-un fisier propriu si nu intr-un <style>
   din lead.php. layout.php incarca o singura foaie, iar un <link> pus in corpul
   paginii ar sosi dupa ce formularul s-a desenat deja: cele doua coloane s-ar
   aseza brusc sub ochii omului. Precedentul e blocul editorului de contract,
   sectiunea 27. Componenta specifica unui ecran, cu media query-urile ei langa.
   -------------------------------------------------------------------------- */

/* ⚠️ `clip`, NU `hidden`. .card are deja `overflow: hidden` (sectiunea 7), iar o
   cutie de derulare devine CADRUL DE REFERINTA al lipirii: panoul nu s-ar mai
   misca niciodata, si nu ar aparea nicio eroare nicaieri. `clip` taie la fel,
   dar nu creeaza cutia. Pe un browser care nu cunoaste `clip`, declaratia cade
   si ramane `hidden`, adica panoul doar nu se lipeste: degradare curata. */
#lsg-oferta { overflow: clip; }

.lsg-schela {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-4);
  /* ⚠️ Conditia lipirii, nu cosmetica: fara ea, coloana se intinde pe toata
     inaltimea randului, iar un element care umple toata cursa nu are pe unde sa
     alunece. Aceeasi reteta ca `align-self: start` pe .bara, sectiunea 4. */
  align-items: start;
  padding: var(--sp-4);
}
.lsg-schela > * { min-width: 0; }
#form-leasing.lsg-stanga { padding: 0; }

/* ---- capacul care se apasa -------------------------------------------------
   ⚠️ Regulile astea existau numai pentru #caz-oferta, intr-un <style> emis sub
   `if ($__cazGenerator)`. Pe societatea care vinde leasing nu exista cazuri
   prin definitie, deci stilul nu se emitea NICIODATA, iar capacul cardului de
   leasing ramanea fara cursor de mana, cu marcajul nativ in Safari si cu o
   sageata care nu se roteste, desi marcajul lui cere `caz-sageata`. */
#lsg-oferta > details > summary { cursor: pointer; list-style: none; }
#lsg-oferta > details > summary::-webkit-details-marker { display: none; }
#lsg-oferta > details:not([open]) > summary { border-bottom: 0; }
#lsg-oferta > details > summary h2 { display: flex; align-items: center; gap: var(--sp-2); }
#lsg-oferta .caz-sageata { transition: transform var(--dur-rapid) ease; }
#lsg-oferta > details[open] > summary .caz-sageata { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #lsg-oferta .caz-sageata { transition: none; } }

/* ---- chemarea la primul pas si firul pasilor (22.09.2026) -------------------
   Cerut de proprietar: „vreau cumva evidențiere că se poate deschide ecranul de
   generator și că e primul pas pe care trebuie să îl facă cel care a creat
   lead-ul”.

   ⚠️ ALBASTRUL DE „IN LUCRU”, NU ROSUL DE BRAND. Rosul are deja un inteles in
   aplicatie, „ești aici” pe banda palniei (§16 de mai sus), si acolo e al
   treilea si ultimul loc unde apare. Un al patrulea loc i-ar toci intelesul, iar
   regula 12 il tine pentru identitate. Albastrul spune „de aici se continuă”, si
   il spune destul de tare.

   ⚠️ Toata evidentierea sta pe clasa .lsg-chemare, pusa de vedere DOAR cat timp
   leadul n-are deviz. Din clipa in care exista unul, cardul redevine linistit:
   o chemare care nu tace niciodata devine zgomot.

   ⚠️⚠️ SELECTORII NU MAI SUNT LEGATI DE `#lsg-oferta` (24.09.2026). Erau, iar
   cand generatorul D.D.D. a primit aceeasi clasa, a primit-o degeaba: marcajul
   spunea „evidentiaza-ma", CSS-ul se uita la alt id, si cardul ramanea alb.
   Proprietarul a gasit-o exact asa: „aici vreau un highlight si ceva cu care sa
   ne dam seama ca generatorul de oferta e primul pas”. O clasa care descrie o
   STARE nu are ce cauta legata de un id: al treilea generator care apare ar fi
   cazut in aceeasi tacere.
   ------------------------------------------------------------------ */
.card.lsg-chemare {
  border: 1px solid var(--stare-in-lucru-linie);
  box-shadow: var(--umbra-1), 0 0 0 3px var(--stare-in-lucru-fundal);
}
.card.lsg-chemare > details > summary { background: var(--stare-in-lucru-fundal); }
.card.lsg-chemare > details[open] > summary { background: var(--card-slab); }

/* Eticheta „Pasul 1”. Forma ei, nu culoarea, o desparte de titlu: e un chip cu
   litere mici si rama proprie.
   ⚠️ Sta in <h2>, lipita de titlu, nu la capatul randului: acolo ar fi parut o
   stare a cardului, nu un numar de pas. */
.card.lsg-chemare > details > summary h2 {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.lsg-pas-eticheta {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--stare-in-lucru-linie);
  border-radius: var(--r-chip);
  background: var(--card-plin);
  color: var(--stare-in-lucru);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-caps-mic);
}
.lsg-chemare-text {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--text-slab);
}
.lsg-chemare-text b { display: inline-flex; align-items: center; gap: 5px; color: var(--stare-in-lucru); }
/* Sageata inainteaza la trecerea cu mausul: miscarea spune „duce undeva”, ceea
   ce o dunga gri nu spunea. Se opreste la prefers-reduced-motion, mai jos. */
.lsg-chemare-text b .ico { transition: transform var(--dur-rapid) var(--arc); }
.card.lsg-chemare > details > summary:hover .lsg-chemare-text b .ico { transform: translateX(3px); }

/* ---- firul celor trei pasi -------------------------------------------------
   ⚠️ FORMA SPUNE STAREA (regula 11): bifa in cerc = facut, cerc cu inel =
   curent, cerc gol si text stins = urmeaza. Pe alb-negru se citeste la fel. */
.lsg-pasi {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4) 0;
  font-size: var(--text-sm);
}
.lsg-pasi li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-sters); }
/* Firul dintre pasi: o liniuta, nu o sageata. Sageata ar fi al doilea semn cu
   acelasi inteles ca ordinea insasi. */
.lsg-pasi li + li::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px; margin-right: 6px;
  background: var(--linie-tare);
}
.lsg-pasi li.este-facut  { color: var(--text-mediu); }
.lsg-pasi li.este-facut .ico { color: var(--stare-bun); }
.lsg-pasi li.este-curent { color: var(--text-titlu); font-weight: 650; }
.lsg-pasi li.este-curent .ico {
  color: var(--stare-in-lucru);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--stare-in-lucru-fundal);
}

/* ---- prognoza pe 12 luni (22.09.2026) --------------------------------------
   ⚠️ Blocul e INTERN, nu pleaca nicaieri (vezi lead.php). Se inchide implicit:
   la deschiderea ecranului, omul vrea devizul, nu tabelul de doisprezece randuri.
   Sta sub schela, pe toata latimea cardului, fiindcă are sapte coloane. */
.lsg-prognoza { border-top: 1px solid var(--linie); }
.lsg-prognoza > details > summary { cursor: pointer; list-style: none; }
.lsg-prognoza > details > summary::-webkit-details-marker { display: none; }
.lsg-prognoza > details:not([open]) > summary { border-bottom: 0; }
.lsg-prognoza > details > summary h2 { display: flex; align-items: center; gap: var(--sp-2); }
.lsg-prognoza .caz-sageata { transition: transform var(--dur-rapid) ease; }
.lsg-prognoza > details[open] > summary .caz-sageata { transform: rotate(180deg); }
.lsg-prognoza tfoot th, .lsg-prognoza tfoot td { border-top: 2px solid var(--linie-tare); }
@media (prefers-reduced-motion: reduce) { .lsg-prognoza .caz-sageata { transition: none; } }

/* ---- ultimul pas, dupa ce ciorna e salvata ---------------------------------
   `este-nou` o pune leasing.js dupa o salvare, si tot el o scoate la sfarsitul
   animatiei: doua batai, nu o bucla. O bucla care nu se opreste niciodata tine
   ochiul ocupat cu nimic. */
.lsg-urmeaza { padding: 0 var(--sp-4) var(--sp-4); outline: none; }
.lsg-urmeaza .actiuni { flex-wrap: wrap; }
/* ⚠️ SARE, nu doar pulseaza (23.09.2026). Proprietarul a cerut „bounce”, si pe
   bună dreptate: un inel care se stinge se vede numai dacă te uitai deja acolo.
   Două bătăi, apoi gata: o buclă fără sfârșit devine, după un minut, exact
   lucrul pe care omul învață să nu-l mai vadă. */
@keyframes lsg-bataie {
  0%   { box-shadow: 0 0 0 0 var(--stare-bun-fundal); transform: translateY(0); }
  30%  { box-shadow: 0 0 0 7px var(--stare-bun-fundal); transform: translateY(-6px); }
  60%  { box-shadow: 0 0 0 3px var(--stare-bun-fundal); transform: translateY(0); }
  80%  { transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 0 var(--stare-bun-fundal); transform: translateY(0); }
}
.lsg-urmeaza.este-nou .banda {
  animation: lsg-bataie 820ms cubic-bezier(.34, 1.56, .64, 1) 2;
  border-radius: var(--r-rand);
}

@media (prefers-reduced-motion: reduce) {
  .lsg-chemare-text b .ico,
  .card.lsg-chemare > details > summary:hover .lsg-chemare-text b .ico { transition: none; transform: none; }
  .lsg-urmeaza.este-nou .banda { animation: none; }
}

/* ---- grupurile formularului ------------------------------------------------
   Linia de despartire sta INTRE grupuri, nu in jurul lor: separa fara sa adauge
   inca o cutie pe un ecran care are deja doua carduri. */
#lsg-oferta .lsg-grup + .lsg-grup {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--linie);
  padding-top: var(--sp-5);
}
#lsg-oferta .lsg-grup-cap {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-size: var(--text-md); font-weight: 600; color: var(--text-titlu);
}
/* Forma grupului, nu culoarea lui: iconita ramane mereu stinsa (regula 11). */
#lsg-oferta .lsg-grup-cap .ico { color: var(--text-slab); flex: none; }
/* O nota pe GRUP, in locul unei linii gri sub fiecare camp. */
#lsg-oferta .lsg-grup > .camp-ajutor { margin: 0 0 var(--sp-3); }

/* ⚠️ Clasa, nu `style="grid-column"` in pagina: un stil scris acolo nu se poate
   stinge dintr-un media query. `1 / -1` e sigur si pe o singura coloana. */
#lsg-oferta .lsg-tot { grid-column: 1 / -1; }

/* ---- unitatea de masura, lipita de control ---------------------------------
   ⚠️ COMPONENTA E NOUA, fiindca in casa nu exista niciuna: unitatea statea in
   eticheta, iar asta era chiar defectul. „Comisionul nostru, in procente” se
   rupea pe doua randuri si strambata randul de campuri.
   Numai pentru unitatile care NU se deduc, „%” si „ore”. „lei” nu se pune pe
   cele douasprezece sume: se spune o data in nota grupului, fiindca
   douasprezece „lei” identice sunt zgomot, nu informatie.
   ⚠️ Sufixul e `aria-hidden` si e repetat in eticheta ca `.doar-cititor`,
   altfel cititorul de ecran ar auzi eticheta fara unitate, sau de doua ori.
   `pointer-events: none`, ca un clic pe „%” sa cada in input. */
#lsg-oferta .lsg-cu-um { position: relative; display: block; min-width: 0; }
#lsg-oferta .lsg-cu-um > input { padding-right: 3rem; }
#lsg-oferta .lsg-um {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  display: flex; align-items: center; padding: 0 11px;
  font-size: var(--text-xs); color: var(--text-sters);
  pointer-events: none;
}

/* Calificativul permanent din eticheta: aceeasi linie, cerneala stinsa. */
#lsg-oferta .lsg-eticheta-nota { font-weight: 450; color: var(--text-sters); }

/* ---- bifa sub suma ei ------------------------------------------------------
   ⚠️ NU se foloseste `.camp > .bifa`: aceea coboara bifa la baza celulei si ii
   da inaltimea unui control, fiindca acolo bifa TINE LOCUL unui input. Aici
   bifa sta SUB input si ar lasa un gol cat un control. */
#lsg-oferta .lsg-bifa-sub { margin-top: var(--sp-1); margin-inline: 0; min-height: 0; }

/* ---- ajutorul, la podeaua celulei ------------------------------------------
   Inaltimea unui rand de grila o da cea mai inalta celula a lui. Cand o celula
   are doua randuri de ajutor si vecina niciunul, intre randuri ramane un gol
   care pare o greseala. Ajutorul coboara la baza, iar campurile raman aliniate.
   ⚠️ `.camp-ajutor` si `.camp-eroare` se SCHIMBA intre ele din JS, prin
   rescrierea intregii liste de clase, deci amandoua sunt scrise aici. */
#lsg-oferta .camp > .camp-ajutor,
#lsg-oferta .camp > .camp-eroare { margin-top: auto; }

/* Mesajul de pe oferta: doua randuri, nu cat un textarea obisnuit. E ultimul
   camp si e optional; creste singur cand se scrie in el. */
#lsg-oferta #lsg-mesaj { min-height: calc(var(--h-control) * 2); }

/* ---- campul care se vede doar cand se foloseste ----------------------------
   ⚠️ SCRIS INVERS, ANUME. Regula ASCUNDE cand felul nu e „separat”; nu arata
   cand e. Pe un browser fara `:has()` declaratia cade intreaga si campul ramane
   vizibil, adica exact starea de azi: o degradare are voie sa arate mai mult,
   niciodata mai putin.
   ⚠️ A doua conditie, `:placeholder-shown`, ascunde numai campul GOL. Serverul
   trece `tichete_taxe` prin lsg_procent() la FIECARE calcul, in orice fel: gol
   da zero si nu poate refuza nimic, dar un procent invalid uitat intr-un camp
   ascuns ar refuza devizul aratand spre ceva ce omul nu vede. */
#lsg-oferta:has(#lsg-tichete-mod option:not([value="separat"]):checked):has(#lsg-tichete-taxe:placeholder-shown)
  .lsg-doar-separat { display: none; }

/* ⚠️ FARA z-index. Antetul de sticla are 30; panoul trebuie sa treaca PE SUB el,
   nu peste. `top` se ia din --h-antet, masurata la rulare, nu ghicita. */
.lsg-dreapta { position: sticky; top: calc(var(--h-antet) + var(--sp-3)); }
.lsg-dreapta > .card {
  margin-bottom: 0;
  /* Opac, nu translucid: un panou care pluteste peste continut in derulare
     lasa textul de dedesubt sa se vada, si asta se citeste ca defect. */
  background: var(--card-plin);
  box-shadow: var(--umbra-2);
  max-height: calc(100vh - var(--h-antet) - var(--sp-6));
  overflow-y: auto;
}

/* Cele doua cifre mari, cerute de proprietar pe 20.09.2026: tariful orar si
   costul lunar. Restul devizului e drumul pana la ele. */
.lsg-erou {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.lsg-erou .cifra { border-color: var(--linie-tare); }
.lsg-erou .cifra-valoare { font-size: var(--text-3xl); }

.lsg-sporuri { margin-top: var(--sp-3); }
.lsg-sporuri .lsg-procent { color: var(--text-slab); font-weight: 600; }

/* ⚠️ Invers fata de .perechi din sectiunea 18: acolo eticheta e `max-content` si
   nu se rupe, iar „Recrutare, SSM, administrare” ar lua tot randul la 390px. */
#lsg-panou .perechi { grid-template-columns: minmax(0, 1fr) max-content; }
#lsg-panou .perechi dd { text-align: right; }

.lsg-desfacere { margin-top: var(--sp-3); border-top: 1px solid var(--linie); padding-top: var(--sp-2); }
.lsg-desfacere > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--text-slab);
  padding: var(--sp-1) 0; list-style-position: inside;
}
.lsg-actiuni { border-top: 1px solid var(--linie); border-bottom: 0; }
.lsg-actiuni .actiuni { width: 100%; }
.lsg-actiuni .buton { flex: 1 1 100%; }

/* Cele patru stari ale panoului, comutate din `data-stare`, fara nicio linie de
   JavaScript in plus: scriptul schimba un singur atribut. */
#lsg-panou [data-lsg-stare], #lsg-panou .lsg-eroare { display: none; }
#lsg-panou[data-stare="necalculat"] [data-lsg-stare="necalculat"],
#lsg-panou[data-stare="in_lucru"]   [data-lsg-stare="in_lucru"],
#lsg-panou[data-stare="calculat"]   [data-lsg-stare="calculat"],
#lsg-panou[data-stare="eroare"]     [data-lsg-stare="eroare"] { display: inline-flex; }
#lsg-panou[data-stare="eroare"] .lsg-eroare { display: flex; }

/* Cifrele se estompeaza cat timp calculul e pe drum. Estomparea e DECOR:
   informatia o duce forma pastilei, clepsidra (regula 11). */
#lsg-panou .cifra-valoare, #lsg-panou .perechi dd {
  transition: opacity var(--dur-rapid) var(--arc);
}
#lsg-panou[data-stare="in_lucru"] .cifra-valoare,
#lsg-panou[data-stare="in_lucru"] .perechi dd { opacity: .55; }

.lsg-bara { display: none; }

@media (max-width: 1024px) {
  .lsg-schela { grid-template-columns: minmax(0, 1fr) 300px; padding: var(--sp-3); }
  /* ⚠️ Masurat pe ecran, nu dedus: intr-un panou de 300px, doua cifre de 34px
     una langa alta nu incap, iar „7.686,36” iesea peste marginea cardului.
     Se aseaza una sub alta; raman amandoua mari, fiindca amandoua sunt cerute
     ca cifre mari. Verificat cu scrollWidth pe panou. */
  .lsg-erou { grid-template-columns: minmax(0, 1fr); }
}

/* ⚠️ Schela se sparge la 900, nu la 720: `.campuri-3` din formular cade la o
   coloana abia la 720, deci intre cele doua praguri, langa un panou de 300px,
   cele trei campuri ar primi sub 150px fiecare. 900 e pragul la care si .bara
   devine banda orizontala, deci nu e un prag inventat. */
@media (max-width: 900px) {
  .lsg-schela { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .lsg-dreapta { position: static; }
  .lsg-dreapta > .card { max-height: none; overflow-y: visible; box-shadow: var(--umbra-1); }

  /* ⚠️ `bottom: var(--sp-3)`, nu 0: lipita de muchie, banda intra sub bara de
     unelte a browserului de telefon, care apare si dispare la derulare. */
  .lsg-bara {
    display: block; position: sticky; bottom: var(--sp-3); z-index: 2;
    margin: 0 var(--sp-4) var(--sp-4); pointer-events: none;
  }
  .lsg-bara-rand {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pastila);
    background: var(--card-plin); border: 1px solid var(--linie-vizibila);
    box-shadow: var(--umbra-2);
    pointer-events: auto;
  }
  .lsg-bara-celula { display: block; min-width: 0; }
  .lsg-bara-celula b {
    display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: var(--ls-caps-mic); text-transform: uppercase; color: var(--text-slab);
  }
  .lsg-bara-celula .cifre { display: block; font-size: var(--text-xl); font-weight: 700; }
}

@media (max-width: 480px) {
  .lsg-erou { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .lsg-schela { padding: var(--sp-2); }
  .lsg-bara { margin: 0 var(--sp-2) var(--sp-2); }
}

/* =====================================================================
   §22. FIRUL PASILOR SI STIVELE, pe ecranul leadului. 23.09.2026
   =====================================================================

   Cerinta proprietarului, cuvant cu cuvant: „trebuie sa avem si un mic wizard
   orizontal cu pasii, primul pas fiind ofertarea care sa pulseze”, iar
   „detaliile despre client si alte informatii pe care nu le folosim in mod
   direct pot sta undeva in dreapta, ca niste stack-uri”.

   ⚠️ PANOUL DESCHIS IL ALEGE FOAIA DE STIL, nu JavaScript. Radiourile ascunse
   din .pasi sunt fratii scenei, iar `:checked ~ .pas-scena` arata panoul lor.
   Asa ecranul e corect inainte sa ruleze vreun script si merge din tastatura
   din prima: sagetile trec de la un pas la altul, fiindca e un grup de radio
   adevarat. */

.pasi { position: relative; }

/* ⚠️ NU `display:none` si NU `visibility:hidden`: amandoua scot radioul din
   ordinea de tabulare, si atunci firul pasilor nu se mai poate folosi de la
   tastatura. Se ascunde vizual, dar ramane focusabil. */
.pasi-radio {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0;
}

.pasi-bara {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4); padding: 0; list-style: none;
}
.pasi-bara > li { display: block; min-width: 0; }

.pasi-pas {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; box-sizing: border-box;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie); border-radius: var(--r-card);
  background: var(--card); cursor: pointer;
  transition: background var(--dur-rapid) var(--arc),
              border-color var(--dur-rapid) var(--arc),
              transform var(--dur-rapid) var(--arc);
}
.pasi-pas:hover { background: var(--card-plin); transform: translateY(-1px); }

.pasi-bulina {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 700; font-size: 13.5px;
  background: var(--card-plin); border: 1px solid var(--linie-vizibila);
  color: var(--text-slab);
}
.pasi-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pasi-titlu { font-size: var(--text-md); font-weight: 650; color: var(--text-mediu); }
.pasi-sub {
  font-size: var(--text-xs); color: var(--text-slab);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⚠️ FIECARE STARE ARE FORMA EI, nu doar culoarea (regula 11): bifa in cerc
   pentru ce e facut, cifra pentru pasul curent, clepsidra pentru „mingea e la
   client”, cifra stinsa pentru ce urmeaza. Pe un ecran alb-negru se disting
   la fel de bine. */
.pasi-pas[data-stare="facut"] .pasi-bulina {
  background: var(--stare-bun-fundal); border-color: transparent; color: var(--stare-bun);
}
.pasi-pas[data-stare="facut"] .pasi-titlu { color: var(--text-titlu); }

.pasi-pas[data-stare="astept"] .pasi-bulina {
  background: var(--stare-in-lucru-fundal); border-color: transparent; color: var(--stare-in-lucru);
}
.pasi-pas[data-stare="astept"] .pasi-titlu { color: var(--text-titlu); }

.pasi-pas[data-stare="curent"] {
  border-color: var(--linie-vizibila); background: var(--card-plin);
}
.pasi-pas[data-stare="curent"] .pasi-bulina {
  background: var(--brand); border-color: transparent; color: #FFF;
}
.pasi-pas[data-stare="curent"] .pasi-titlu { color: var(--text-titlu); font-weight: 700; }

.pasi-pas[data-stare="urmeaza"] { opacity: .72; }

/* ⚠️ PULSEAZA UN SINGUR PAS, si numai cand chiar cere ceva de la noi. Inelul
   creste din bulina, nu din card: o umbra care creste dintr-un dreptunghi de
   280px arata a eroare, nu a „esti aici”.

   ⚠️ Rosul e cel de brand, si e al patrulea si ultimul loc in care apare (vezi
   §16). Aici inseamna „esti aici”, nu „e o problema”: erorile au paleta lor
   (regula 12). */
@keyframes pasi-puls {
  0%   { box-shadow: 0 0 0 0 rgba(172, 46, 49, .42); }
  70%  { box-shadow: 0 0 0 11px rgba(172, 46, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(172, 46, 49, 0); }
}
.pasi-pas.este-chemare .pasi-bulina { animation: pasi-puls 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* Pasul deschis: firul subtire de sub card spune care panou se vede. */
#pas-r-oferta:checked   ~ .pasi-bara [for="pas-r-oferta"],
#pas-r-contract:checked ~ .pasi-bara [for="pas-r-contract"],
#pas-r-semnare:checked  ~ .pasi-bara [for="pas-r-semnare"],
#pas-r-activ:checked    ~ .pasi-bara [for="pas-r-activ"] {
  background: var(--card-plin);
  border-color: var(--linie-vizibila);
  box-shadow: var(--umbra-2), inset 0 -2px 0 0 var(--brand);
}

/* Inelul de focus se vede pe ETICHETA, fiindca radioul e ascuns. */
#pas-r-oferta:focus-visible   ~ .pasi-bara [for="pas-r-oferta"],
#pas-r-contract:focus-visible ~ .pasi-bara [for="pas-r-contract"],
#pas-r-semnare:focus-visible  ~ .pasi-bara [for="pas-r-semnare"],
#pas-r-activ:focus-visible    ~ .pasi-bara [for="pas-r-activ"] {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

.pas-scena {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4); align-items: start;
}
.pas-fluxuri { min-width: 0; }

/* UN SINGUR PANOU DESCHIS O DATA. Doi pasi deschisi inseamna din nou ecranul
   lung de dinainte, adica exact ce am plecat sa desfiintam. */
.pas-panou { display: none; }
#pas-r-oferta:checked   ~ .pas-scena .pas-panou[data-pas="oferta"],
#pas-r-contract:checked ~ .pas-scena .pas-panou[data-pas="contract"],
#pas-r-semnare:checked  ~ .pas-scena .pas-panou[data-pas="semnare"],
#pas-r-activ:checked    ~ .pas-scena .pas-panou[data-pas="activ"] { display: block; }

/* Cardul care cere ceva de la noi, in panoul deschis. Albastrul de „in lucru”,
   nu rosul: rosul si-a spus deja cuvantul in bulina pasului. */
.card.pas-chemare { border-color: var(--stare-in-lucru); box-shadow: var(--umbra-2); }
.card.pas-chemare > .card-cap { background: var(--stare-in-lucru-fundal); }
.card.pas-chemare > .card-cap h2 { color: var(--stare-in-lucru); }

/* Fisierul care asteapta sa fie descarcat si deschis in Word. */
.pas-fisier {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie-vizibila); border-radius: var(--r-nav);
  background: var(--card-slab);
}
.pas-fisier-ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--r-chip);
  background: var(--stare-in-lucru-fundal); color: var(--stare-in-lucru);
}
.pas-fisier-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }

.pas-lista { margin: var(--sp-3) 0 0; padding-left: 1.2em; }
.pas-lista li { margin-bottom: var(--sp-2); }

.pas-registru { margin: 0; padding: 0; list-style: none; }
.pas-registru li {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0; border-top: 1px solid var(--linie);
}
.pas-registru li:first-child { border-top: 0; padding-top: 0; }
.pas-registru-cine {
  flex: none; min-width: 64px;
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--ls-caps-mic); color: var(--text-slab);
}
.pas-registru-ce { display: flex; flex-direction: column; gap: 1px; flex: 1 1 180px; min-width: 0; }
/* In coloana din dreapta (26.09.2026): pastila sus, numele sub ea, butonul la
   capatul randului. Numele lungi de fisier se rup, nu imping coloana. */
.stiva-fisiere .pas-registru li { align-items: flex-start; gap: var(--sp-2); }
.stiva-fisiere .pas-registru-cine { flex-basis: 100%; }
.stiva-fisiere .pas-registru-ce b { overflow-wrap: anywhere; }

/* ------------------------------------------------- stivele din dreapta ----
   Cardurile de care e nevoie rar: datele firmei, parcursul, istoricul. Nu au
   disparut, s-au strans. Capacul spune ce e inauntru, ca sa nu trebuiasca
   deschis ca sa afli daca merita deschis. */

.pas-stive { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.stiva {
  border: 1px solid var(--linie); border-radius: var(--r-card);
  background: var(--card); overflow: hidden;
}
.stiva[open] { box-shadow: var(--umbra-2); border-color: var(--linie-vizibila); }

.stiva-cap {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
}
.stiva-cap::-webkit-details-marker { display: none; }
.stiva-cap:hover { background: var(--card-plin); }
.stiva-ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-chip);
  background: var(--card-slab); color: var(--stare-in-lucru);
}
.stiva-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.stiva-titlu { font-size: var(--text-md); font-weight: 650; color: var(--text-titlu); }
.stiva-rezumat {
  font-size: var(--text-xs); color: var(--text-slab);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stiva-sageata { flex: none; color: var(--text-slab); transition: transform var(--dur-rapid) var(--arc); }
.stiva[open] .stiva-sageata { transform: rotate(180deg); }

/* ⚠️ Capacul cardului dinauntru se ascunde: titlul lui ar fi al doilea titlu,
   sub cel al stivei, care spune acelasi lucru. Cardul isi pierde si conturul,
   fiindca stiva e deja o cutie. */
.stiva-corp > .card,
.stiva-corp > * > .card {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.stiva-corp > .card > .card-cap,
.stiva-corp > * > .card > .card-cap { display: none; }

@media (max-width: 1100px) {
  .pas-scena { grid-template-columns: minmax(0, 1fr); }
  .pas-stive { order: 2; }
}

/* ⚠️ Sub 760px firul devine coloana: patru carduri de 150px nu incap unul
   langa altul, iar textul din ele s-ar taia exact pe cuvantul care spune ce
   ai de facut. */
@media (max-width: 760px) {
  .pasi-bara { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .pasi-pas { padding: var(--sp-2) var(--sp-3); }
  .pasi-sub { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .pasi-pas, .stiva-sageata { transition: none; }
  .pasi-pas:hover { transform: none; }
  .pasi-pas.este-chemare .pasi-bulina { animation: none; box-shadow: 0 0 0 3px rgba(172, 46, 49, .30); }
}

/* ⚠️ Cardurile dintr-un modal pe tot ecranul isi pierd conturul si umbra: sunt
   deja intr-o cutie. Editorul de contract e un <section class="card"> intreg,
   mutat in modal pe 23.09.2026, si fara asta se vedea o cutie in cutie. */
.modal-plin .modal-corp > .card,
.modal-plin .modal-corp > * > .card {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.modal-plin .modal-corp > .card > .card-cap { display: none; }

/* ------------------------------------------------ treptele semnării -------
   23.09.2026. Pasul 3 al leadului nu mai e un card cu formulare una sub alta,
   ci trei trepte numerotate: descarcă varianta aprobată, printeaz-o și
   încarc-o semnată, trimite-i-o.

   ⚠️ TOATE TREPTELE SE VĂD, si cele care nu se pot face inca. Un buton care
   apare abia dupa ce ai facut pasul dinainte il pune pe om sa se intrebe daca
   mai exista; treapta care nu e la rand isi spune conditia in cuvinte.

   ⚠️ Treapta curenta se marcheaza cu FORMA, nu doar cu culoare (regula 11):
   cifra ei e plina, celelalte au contur. */
.pas-trepte { margin: 0; padding: 0; list-style: none; counter-reset: treapta; }
.pas-trepte > li {
  display: flex; gap: var(--sp-4);
  padding: 0 0 var(--sp-5) var(--sp-1);
  position: relative;
}
.pas-trepte > li + li { border-top: 1px solid var(--linie); padding-top: var(--sp-5); }
.pas-trepte > li:last-child { padding-bottom: 0; }

.pas-treapta-nr {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 13.5px; font-weight: 700;
  background: var(--card-plin); border: 1px solid var(--linie-vizibila);
  color: var(--text-slab);
}
.pas-trepte > li.este-acum .pas-treapta-nr {
  background: var(--stare-in-lucru); border-color: transparent; color: #FFF;
}
.pas-treapta-corp { flex: 1 1 auto; min-width: 0; }
.pas-treapta-corp h3 {
  margin: 4px 0 var(--sp-2); font-size: var(--text-md); font-weight: 650;
  color: var(--text-titlu);
}
.pas-trepte > li.este-acum .pas-treapta-corp h3 { color: var(--stare-in-lucru); }
.pas-treapta-corp form { margin: 0; }


/* =====================================================================
   §23. GENERATORUL DE OFERTA D.D.D. (SSM Chemicals). 23.09.2026
   =====================================================================

   Ecranul e cu totul altfel decat cel de leasing de deasupra, si de asta are
   sectiunea lui: acolo sunt paisprezece campuri de suma intr-o schela cu panou
   lipit, aici sunt N grupuri repetabile, fiecare cu un pret si patru randuri de
   serviciu. Singurul lucru imprumutat e `.lsg-chemare`, semnul „aici incepe
   treaba”, care e al pasului, nu al leasingului.

   ⚠️ UN GRUP E UN `<fieldset>`, nu un `<div>`. Randurile lui chiar sunt un
   grup de controale legate intre ele, iar un cititor de ecran anunta asta
   singur. Bordura implicita a browserului se scoate, dar semantica ramane. */

#ddd-oferta .ddd-grup {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--linie-vizibila);
  border-radius: var(--r-card);
  background: var(--card-slab);
}

#ddd-oferta .ddd-grup-cap {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}

/* Tariful e cifra cea mai importanta din grup, deci campul lui e ingust si
   scris cu cifre tabulare: doua tarife unul sub altul trebuie sa se poata
   compara dintr-o privire, iar cifrele proportionale le-ar decala. */
#ddd-oferta .ddd-tarif-camp { margin: 0; max-width: 17rem; flex: 1 1 13rem; }
#ddd-oferta .ddd-cu-um { position: relative; display: block; min-width: 0; }
#ddd-oferta .ddd-cu-um > input { padding-right: 8.5rem; }
#ddd-oferta .ddd-um {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  display: flex; align-items: center; padding: 0 11px;
  font-size: var(--text-xs); color: var(--text-sters);
  pointer-events: none;
}

/* ---- reducerea grupului (db/020, 24.09.2026) -------------------------------
   ⚠️ CAMP INGUST, SI FARA `.ddd-cu-um` MOSTENIT INTACT: `padding-right: 8.5rem`
   de mai sus e calibrat pentru „lei / intervenție”, adica pentru un cuvant lung.
   Peste un „%” ar lasa cifra lipita de marginea stanga a unui camp aproape gol.
   De aceea exista modificatorul de mai jos, in loc sa se atinga regula comuna. */
#ddd-oferta .ddd-reducere-camp { margin: 0; max-width: 9rem; flex: 0 1 8rem; }
#ddd-oferta .ddd-cu-um-procent > input { padding-right: 2.6rem; }

/* Randul „Tarif după reducere”: e o oglinda a ce va scrie serverul, deci sta
   discret sub bara de sus, nu langa cifra tastata. Se aprinde din JavaScript,
   numai cand procentul e valid si mai mare ca zero. */
#ddd-oferta .ddd-reducere-rezultat {
  margin: var(--sp-2) 0 0;
  font-size: var(--text-sm); color: var(--text-mediu);
}
#ddd-oferta .ddd-reducere-rezultat[hidden] { display: none; }
#ddd-oferta .ddd-reducere-rezultat b {
  font-weight: 600; color: var(--text-titlu);
  font-variant-numeric: tabular-nums;
}

#ddd-oferta .ddd-grup-nota { margin: var(--sp-3) 0 var(--sp-3); }

/* ---- randul unui serviciu --------------------------------------------------
   Patru coloane: bifa cu eticheta, textul liber (numai la „Alt serviciu”),
   ritmul, numarul de interventii. Pe ecran ingust se pun una sub alta.

   ⚠️ STAREA E DATA DE `disabled`, NU DE CULOARE (regula 11): un rand nebifat
   are controalele inactive, ceea ce se vede si se simte la Tab, nu doar se
   citeste ca nuanta. Opacitatea de mai jos doar intareste ce spune deja forma. */
#ddd-oferta .ddd-servicii {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

#ddd-oferta .ddd-serviciu {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr minmax(7rem, 9rem) 4.5rem auto;
  align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-nav);
  background: var(--card-plin);
  border: 1px solid transparent;
}
#ddd-oferta .ddd-serviciu.este-bifat {
  border-color: var(--linie-vizibila);
}
#ddd-oferta .ddd-serviciu:not(.este-bifat) { opacity: .62; }

#ddd-oferta .ddd-bifa {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; cursor: pointer; font-weight: 550;
}
#ddd-oferta .ddd-bifa input { flex: none; }

/* Textul liber ocupa coloana a doua. La cele trei servicii standard coloana
   ramane goala, si asta e voit: altfel ritmul si numarul ar dansa de la un
   rand la altul si nu s-ar mai putea citi pe verticala. */
#ddd-oferta .ddd-liber { grid-column: 2; min-width: 0; }
#ddd-oferta .ddd-serviciu > select { grid-column: 3; }
#ddd-oferta .ddd-interventii { grid-column: 4; text-align: right; }
#ddd-oferta .ddd-serviciu > .ddd-um {
  grid-column: 5; position: static; padding: 0;
  font-size: var(--text-xs); color: var(--text-sters);
}

#ddd-oferta .ddd-grup-total { margin: var(--sp-3) 0 0; }

#ddd-oferta .ddd-subsol {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}

/* Sub 720px randul se desface: bifa sus, pe toata latimea, restul dedesubt.
   Grila de 5 coloane pe un telefon ar fi dat campuri de trei caractere. */
@media (max-width: 720px) {
  #ddd-oferta .ddd-serviciu {
    grid-template-columns: 1fr auto auto;
    row-gap: var(--sp-2);
  }
  #ddd-oferta .ddd-bifa { grid-column: 1 / -1; }
  #ddd-oferta .ddd-liber { grid-column: 1 / -1; }
  #ddd-oferta .ddd-serviciu > select { grid-column: 1; }
  #ddd-oferta .ddd-interventii { grid-column: 2; width: 4.5rem; }
  #ddd-oferta .ddd-serviciu > .ddd-um { grid-column: 3; }
  #ddd-oferta .ddd-cu-um > input { padding-right: 8.5rem; }
  /* ⚠️ Repetat si aici: regula de deasupra il rescrie pe cel ingust. */
  #ddd-oferta .ddd-cu-um-procent > input { padding-right: 2.6rem; }
  /* Sub deget, cele doua campuri stau unul langa altul, nu unul sub altul:
     tariful si procentul lui se citesc impreuna sau deloc. */
  #ddd-oferta .ddd-tarif-camp { flex: 1 1 9rem; }
  #ddd-oferta .ddd-reducere-camp { flex: 0 1 6.5rem; }
}


/* =====================================================================
   §23.b GENERATORUL GDPR / DPO (SSM Safety Team). 25.09.2026
   =====================================================================

   ⚠️ Mult mai simplu decat cel D.D.D., fiindca si problema e mai simpla: patru
   pachete cunoscute dinainte, fiecare cu o bifa si un pret. Fara <template>,
   fara clonare, fara randuri care se adauga. Refoloseste `.ddd-cu-um` si
   `.ddd-um` pentru pastila de unitate din camp: sunt aceeasi forma, si a doua
   pereche de clase pentru acelasi lucru ar diverge peste trei luni.
   ===================================================================== */

#dpo-oferta .dpo-pachete {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-4); margin: var(--sp-4) 0 0;
}
#dpo-oferta .dpo-pachet {
  margin: 0; padding: var(--sp-4); border: 0;
  border-radius: var(--r-card); background: var(--card-slab);
  /* ⚠️ Chenarul spune care pachet intra pe hartie, si e o FORMA, nu o nuanta:
     un inel de un punct care apare si dispare se vede si pe alb-negru. */
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur-rapid) var(--arc);
}
#dpo-oferta .dpo-pachet.este-ales {
  box-shadow: inset 0 0 0 1px var(--stare-in-lucru);
}
#dpo-oferta .dpo-pret-camp { margin: var(--sp-3) 0 0; max-width: 15rem; }
#dpo-oferta .dpo-pachet-nota { margin: var(--sp-2) 0 0; }

/* Totalurile de pe ecran: oglinda celor pe care le scrie serverul. */
#dpo-oferta .dpo-totaluri-ecran {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin: var(--sp-4) 0 0; font-size: var(--text-sm);
}
#dpo-oferta .dpo-totaluri-ecran[hidden] { display: none; }
#dpo-oferta .dpo-total[hidden] { display: none; }
#dpo-oferta .dpo-total b {
  font-weight: 600; color: var(--text-titlu); font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  #dpo-oferta .dpo-pachet { transition: none; }
}


/* =====================================================================
   §24. CEO DASHBOARD: INELUL INTERACTIV SI NOTELE. 23.09.2026
   =====================================================================

   ⚠️ LISTA E DOCUMENTUL, INELUL E DECORUL. Tot ce spune desenul e scris in
   lista de langa el, in cuvinte si cifre, deci nimic nu se pierde pe un ecran
   alb-negru sau pentru un om cu daltonism (regula 11). De aceea inelul e
   `aria-hidden` in marcaj, iar pastilele colorate de langa randuri sunt un
   ajutor pentru ochi, nu purtatoare de informatie.

   ⚠️ Culorile feliilor stau in `tablou.js`, nu aici: sunt date de desen, se
   aleg dupa pozitia feliei si se pun inline. In CSS raman doar formele. */

/* ⚠️ INELUL SUS SI MARE, LISTA DEDESUBT (23.09.2026, cerut de proprietar:
   „vreau mai mare piechart, sa se vada frumos si bine, si cred ca centrat, si
   dedesubt textul cu ce se incarca in fiecare ecran”). Pana azi erau doua
   coloane, iar inelul incapea in cel mult 260px: pe un ecran lat ramanea mic
   tocmai acolo unde era loc destul. Asezate una sub alta, amandoua primesc
   latimea de care au nevoie, si ochiul citeste in ordinea fireasca: intai
   desenul, apoi ce scrie in el. */
.tbl-scena { display: block; }

/* ---- inelul ---------------------------------------------------------- */

.tbl-inel {
  position: relative;
  /* `min()` ca sa nu depaseasca latimea ecranului pe telefon: 86vw lasa
     marginile cardului intacte, iar 420px e cat se citeste comod pe desktop
     fara sa impinga lista sub linia de plutire. */
  width: min(420px, 86vw);
  aspect-ratio: 1 / 1;
  margin: var(--sp-2) auto var(--sp-5);
}
.tbl-svg  { display: block; width: 100%; height: 100%; }

.tbl-felie {
  cursor: pointer;
  transform-origin: 120px 120px;
  transition: opacity var(--dur-rapid) var(--arc), transform var(--dur-rapid) var(--arc);
}
/* Felia atinsa creste putin SI celelalte se sting: doua semne pentru acelasi
   lucru, fiindca o singura schimbare de opacitate nu se vede pe o felie mica. */
.tbl-inel:hover .tbl-felie { opacity: .55; }
.tbl-felie.este-atins { opacity: 1; transform: scale(1.035); }

/* Mijlocul inelului. Sta locului si nu urmareste mouse-ul: un numar care sare
   la fiecare mișcare nu se poate citi. */
.tbl-mijloc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: none; text-align: center;
}
/* Cifra creste odata cu inelul: pe un desen de 420px, 30px arata pierdut in
   mijloc. `clamp()` o tine intre ce se citeste pe telefon si ce nu devine
   strident pe desktop.
   ⚠️ `vw`, nu `cqw`: inelul insusi e masurat in `vw` pana la 420px, deci cele
   doua cresc impreuna, si nu mai e nevoie de un container de interogare, adica
   de o proprietate noua pusa doar pentru o cifra. */
.tbl-mijloc b {
  font-size: clamp(34px, 10vw, 50px); font-weight: 700; line-height: 1;
  color: var(--text-titlu);
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
}
.tbl-mijloc span { font-size: var(--text-sm); color: var(--text-sters); }

/* ---- lantul de inele (14.10.2026) --------------------------------------

   Cererea CEO-ului: „fiecare pie, cand apasa, sa se sparga in mai multe
   pie-uri, ca sa vada si istoricul, separate pe ecran”. Fiecare nivel deschis
   ramane pe ecran ca un inel mai mic, cu felia aleasa scoasa din cerc, iar
   inelul nou intra langa el. Pe telefon lantul curge in jos. */

.tbl-lant {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: var(--sp-3) var(--sp-2) var(--sp-5);
  scroll-padding-inline: var(--sp-4);
}
.tbl-panou {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.tbl-panou-inel {
  position: relative;
  width: 170px; aspect-ratio: 1 / 1;
  transition: width 420ms cubic-bezier(.2, .8, .2, 1);
}
.tbl-panou.este-acum .tbl-panou-inel { width: min(380px, 80vw); }
.tbl-panou:not(.este-acum) .tbl-panou-inel { cursor: pointer; }
.tbl-panou:not(.este-acum) .tbl-mijloc b { font-size: 26px; }
.tbl-panou:not(.este-acum) .tbl-mijloc span { font-size: var(--text-xs); }

.tbl-panou-titlu {
  max-width: 180px; text-align: center;
  font-size: var(--text-sm); color: var(--text-mediu); line-height: 1.3;
}
.tbl-panou.este-acum .tbl-panou-titlu {
  max-width: 380px; font-weight: 650; color: var(--text-titlu);
}

/* Felia pe care s-a coborat iese din cerc; celelalte se sting. Inelele din
   spate raman de citit, dar nu se mai cearta cu cel curent pentru privire. */
.tbl-felie.este-stins { opacity: .28; }
.tbl-felie.este-ales  { opacity: 1; filter: drop-shadow(0 3px 6px rgba(15, 25, 48, .22)); }
.tbl-panou.este-acum .tbl-panou-inel:hover .tbl-felie { opacity: .55; }
.tbl-panou.este-acum .tbl-felie.este-atins { opacity: 1; transform: scale(1.035); }

/* Firul dintre inele, cu o sageata mica: arata in ce sens s-a coborat. */
.tbl-legatura {
  flex: none; position: relative;
  width: 40px; height: 2px; border-radius: 2px;
  background: var(--linie-tare);
  transform-origin: left center;
}
.tbl-legatura::after {
  content: ''; position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent; border-left-color: var(--linie-tare); border-right: 0;
}

/* ---- animatia de „spargere” ---- */
@keyframes tbl-sparge {
  0%   { opacity: 0; transform: scale(.35) rotate(-140deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes tbl-felie-intra {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tbl-fir-intra {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes tbl-pleaca {
  to { opacity: 0; transform: scale(.6); }
}
.tbl-panou.tbl-nou .tbl-panou-inel { animation: tbl-sparge 560ms cubic-bezier(.2, .8, .2, 1) both; }
.tbl-panou.tbl-nou .tbl-felie      { animation: tbl-felie-intra 420ms cubic-bezier(.2, .8, .2, 1) backwards; }
.tbl-panou.tbl-nou .tbl-panou-titlu { animation: tbl-felie-intra 420ms 160ms ease-out backwards; }
.tbl-legatura.tbl-nou { animation: tbl-fir-intra 260ms ease-out both; }
.tbl-pleaca { animation: tbl-pleaca 240ms ease-in forwards; pointer-events: none; }

@media (max-width: 760px) {
  .tbl-lant { flex-direction: column; overflow-x: visible; gap: var(--sp-2); }
  .tbl-panou-inel { width: 130px; }
  .tbl-panou.este-acum .tbl-panou-inel { width: min(320px, 82vw); }
  .tbl-legatura { width: 2px; height: 28px; transform-origin: center top; }
  .tbl-legatura::after {
    right: auto; top: auto; left: -4px; bottom: -1px;
    border: 5px solid transparent; border-top-color: var(--linie-tare); border-bottom: 0;
  }
  @keyframes tbl-fir-intra {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbl-panou.tbl-nou .tbl-panou-inel,
  .tbl-panou.tbl-nou .tbl-felie,
  .tbl-panou.tbl-nou .tbl-panou-titlu,
  .tbl-legatura.tbl-nou { animation: none; }
  .tbl-panou-inel { transition: none; }
  .tbl-felie.este-ales { transform: none !important; }
}

/* ---- drumul: butonul de intoarcere si firimiturile --------------------

   ⚠️ BUTONUL ARE FORMA DE BUTON, firimiturile raman text (25.09.2026).
   Pana azi drumul era numai firimituri, iar ele arata a eticheta: fara chenar,
   fara fundal, cu pastila doar la hover. Proprietarul le-a avut sub ochi si a
   cerut „un buton cumva inapoi sa fie usor de inteles”. Concluzia nu e sa se
   ingroase firimiturile, ci sa existe UN loc cu forma limpede de buton, care
   spune si unde duce. Firimiturile raman ce sunt: harta, nu comanda. */

.tbl-drum {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.tbl-inapoi { flex: none; }
.tbl-inapoi[hidden] { display: none; }
/* Sageata pleaca spre stanga la trecerea cu mouse-ul, in sensul in care duce
   butonul. Acelasi gest ca la legatura din banda de notificare. */
.tbl-inapoi .ico { transition: transform var(--dur-rapid) var(--arc); }
.tbl-inapoi:hover .ico { transform: translateX(-3px); }

.tbl-firimituri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; font-size: var(--text-sm);
}
.tbl-firimitura {
  border: 0; background: none; padding: 2px 6px; margin: 0;
  font: inherit; color: var(--text-mediu); cursor: pointer;
  border-radius: var(--r-chip);
}
.tbl-firimitura:hover { background: var(--card-slab); color: var(--text-titlu); }
.tbl-firimitura.este-acum { color: var(--text-titlu); font-weight: 650; cursor: default; }
/* Firul dintre firimituri: o liniuta, nu o sageata. Sageata ar fi al doilea
   semn cu acelasi inteles ca ordinea insasi. */
.tbl-firimitura-fir {
  width: 14px; height: 1px; background: var(--linie-tare); flex: none;
}

/* ---- lista ------------------------------------------------------------ */

/* Lista sta sub inel si e MARGINITA IN LATIME, nu intinsa pe tot cardul: un
   rand de o mie de pixeli, cu numele la un capat si cifra la celalalt, se
   citeste sarind cu ochii, nu dintr-o privire. */
.tbl-legenda {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 44rem;
}

.tbl-rand {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-nav);
  border: 1px solid transparent;
}
.tbl-rand + .tbl-rand { margin-top: 2px; }
.tbl-rand.este-atins { background: var(--card-slab); border-color: var(--linie-vizibila); }

.tbl-pastila { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.tbl-rand-nume {
  min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-titlu);
}
/* Randul care duce mai departe E UN BUTON. Unul care nu duce nicaieri ramane
   text: un buton care nu face nimic e o promisiune mincinoasa. */
.tbl-rand-buton {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-weight: 550; cursor: pointer;
}
.tbl-rand-buton:hover { text-decoration: underline; }

.tbl-rand-cifre {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  white-space: nowrap;
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
}
.tbl-rand-castigate { font-size: var(--text-xs); color: var(--stare-bun); }
.tbl-rand-link { font-size: var(--text-xs); white-space: nowrap; }

/* Sub 760px inelul trece deasupra listei, pe toata latimea, dar nu mai mare
   decat incape confortabil pe un telefon. */
@media (max-width: 560px) {
  /* Pe telefon linkul coboara pe randul lui: trei coloane si un link la capat
     ar fi lasat numelui trei caractere. */
  .tbl-rand  { grid-template-columns: 10px 1fr auto; row-gap: 2px; }
  .tbl-rand-link { grid-column: 2 / -1; }
  /* Si numele se rupe pe doua randuri in loc sa se taie cu trei puncte: acum
     lista e sub inel, pe toata latimea, deci are unde sa curga. „SSM GLOBAL
     WORK...” nu spune care dintre cele doua societati care incep la fel e. */
  .tbl-rand-nume { white-space: normal; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  /* Aceeasi abordare ca in restul foii: tranzitia nu se anuleaza, se comprima. */
  .tbl-felie { transition-duration: 1ms; }
  .tbl-felie.este-atins { transform: none; }
}

/* ---- notele („Ce văd în cifre") --------------------------------------- */

.tbl-note { list-style: none; margin: 0; padding: 0; }

.tbl-nota {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
.tbl-nota + .tbl-nota { border-top: 1px solid var(--linie); }
.tbl-nota-corp { min-width: 0; }
.tbl-nota-corp b { display: block; margin-bottom: 2px; color: var(--text-titlu); }
.tbl-nota-corp p { margin: 0 0 var(--sp-2); color: var(--text-mediu); }

/* ⚠️ Tonul se vede prin FORMA (iconița) si abia apoi prin culoare (regula 11).
   Si niciodata rosul de brand pentru atentionari (regula 12): paleta de stari. */
.tbl-nota-semn { flex: none; line-height: 0; padding-top: 2px; }
.tbl-nota-bun     .tbl-nota-semn { color: var(--stare-bun); }
.tbl-nota-atentie .tbl-nota-semn { color: var(--stare-atentie); }
.tbl-nota-neutru  .tbl-nota-semn { color: var(--text-sters); }

/* ---- randurile libere din generatorul D.D.D. (24.09.2026) --------------
   ⚠️ Un grup poate avea ORICATE servicii scrise de agent (capcane,
   consumabile), nu unul singur. Randul liber are deci un buton de scoatere,
   pe care cele trei standard NU il au: alea sunt lista firmei si raman pe
   ecran, nebifate, ca sa se vada ca exista. */
#ddd-oferta .ddd-serviciu-liber { grid-template-columns:
  minmax(9rem, 12rem) 1fr minmax(7rem, 9rem) 4.5rem auto auto; }

#ddd-oferta .ddd-scoate-rand {
  grid-column: 6;
  border: 0; background: none; padding: 0 2px; margin: 0;
  font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--text-sters);
}
#ddd-oferta .ddd-scoate-rand:hover { color: var(--stare-rau); }

/* Subsolul grupului: butonul de adaugare in stanga, numaratoarea in dreapta. */
#ddd-oferta .ddd-grup-jos {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}

@media (max-width: 720px) {
  #ddd-oferta .ddd-serviciu-liber { grid-template-columns: 1fr auto auto; }
  #ddd-oferta .ddd-scoate-rand { grid-column: 3; }
}


/* =====================================================================
   §25. SECTIUNI DE FORMULAR. 24.09.2026
   =====================================================================

   Cererea proprietarului, despre modalul de lead nou: „hai să-l facem mai
   frumos aici, cosmetizează-l”. Formularul avea treisprezece campuri intr-o
   singura coloana, fiecare cu linia lui de ajutor dedesubt: un perete gri de
   o mie opt sute de pixeli, in care nimic nu era grupat.

   ⚠️ TIPARUL E CEL DE PE PAGINA DE DATE A CLIENTULUI (`.dc-grup`), nu unul
   nou. Omul vede ambele ecrane in aceeasi zi, iar doua feluri de a grupa
   campuri intr-o aplicatie mica se citesc ca doua aplicatii.

   ⚠️ Clasa e GENERALA, nu legata de un id: urmatorul formular lung o ia de-a
   gata. `.camp-sectiune` e un <fieldset>, deci grupeaza si pentru cititorul de
   ecran, nu doar pentru ochi. */

.camp-sectiune { border: 0; padding: 0; margin: 0; min-width: 0; }
.camp-sectiune + .camp-sectiune {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--linie);
  padding-top: var(--sp-4);
}
.camp-sectiune > legend {
  padding: 0; margin: 0 0 var(--sp-3);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-sters);
}

/* ---- modalul lat -------------------------------------------------------
   ⚠️ 640px, nu latimea implicita de 520: sub atat, cele doua butoane de sursa
   si perechea CUI + denumire cad fiecare pe cate un rand, adica exact
   verticala pe care sectiunile au venit sa o scurteze. Nu se schimba `.modal`
   in general: restul modalelor au un camp, doua, si 520 le e bine. */
.modal-lat { max-width: 640px; }

/* ---- modalul de lead nou ----------------------------------------------- */

/* Cele doua butoane de sursa incap pe un rand la 640px. Baza implicita de
   16rem le-ar fi trecut unul sub altul. */
#modal-lead-nou .bife .bifa { flex: 1 1 13rem; }

/* CUI ingust, denumirea ia restul: CUI-ul are opt cifre, iar denumirea e
   lunga si e chiar ce apare dupa cautare. */
#modal-lead-nou .ln-rand-cui { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }

/* ⚠️ INPUTUL IMPARTE RANDUL CU BUTONUL, nu il imbranceste pe randul urmator.
   `.camp input` e `width: 100%`, ceea ce intr-o celula ingusta inseamna „tot
   randul", iar „Caută" cadea dedesubt si arata a formular neterminat. Aici
   inputul devine elastic si butonul isi pastreaza latimea lui. */
#modal-lead-nou .ln-rand-cui .actiuni { flex-wrap: nowrap; }
#modal-lead-nou .ln-rand-cui .actiuni input { width: auto; flex: 1 1 auto; min-width: 0; }
#modal-lead-nou .ln-rand-cui .actiuni .buton { flex: none; }

@media (max-width: 560px) {
  /* Pe telefon tot pe o coloana: doua campuri de 7rem nu se pot completa. */
  #modal-lead-nou .ln-rand-cui { grid-template-columns: 1fr; }
}


/* =====================================================================
   §26. ECRANELE INTERNE, RUNDA DE UX DIN 14.10.2026

   Aprobate de proprietar, toate odata: banda „Pasul următor”, pasii facuti
   stransi intr-un rand, valoarea reala in liste, sortarea si vederile rapide,
   randurile compacte pe telefon, bara de sus mai subtire.

   ⚠️ Nimic de aici nu foloseste rosul de brand pentru o eroare (regula 12):
   erorile de camp iau --stare-rau, ca restul aplicatiei. Rosul apare doar pe
   butonul principal, prin .buton, cum era deja.
   ===================================================================== */

/* ---- banda „Pasul următor” pe fisa leadului --------------------------
   ⚠️ Lipicioasa SUB antet, nu peste el: `top` se ia din --h-antet, masurata
   la rulare (lgInaltimeAntet). z-index 25, sub antetul de sticla (30), ca sa
   treaca pe sub el si nu peste. Pe telefon antetul nu mai e lipicios, iar
   banda coboara la marginea de jos, unde ajunge degetul mare. */
.pas-urmator {
  position: sticky; top: calc(var(--h-antet) + var(--sp-2)); z-index: 25;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie-vizibila);
  border-left: 3px solid var(--stare-in-lucru);
  border-radius: var(--r-card);
  background: var(--card-plin);
  box-shadow: var(--umbra-2);
}
.pas-urmator.este-terminal { border-left-color: var(--linie-vizibila); }
.pas-urmator-stare { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.pas-urmator-eticheta {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-sters);
}
.pas-urmator-text { margin: 0; flex: 1 1 260px; min-width: 0; color: var(--text); font-size: var(--text-md); }
.pas-urmator-actiuni { display: flex; align-items: center; gap: var(--sp-2); flex: none; margin-left: auto; }
.pas-urmator-buton { white-space: nowrap; }
#lead-actualizeaza[aria-busy="true"] .ico-actualizeaza { animation: actualizeaza-roti 1s linear infinite; }
@keyframes actualizeaza-roti { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #lead-actualizeaza[aria-busy="true"] .ico-actualizeaza { animation: none; } }

/* Panoul de leasing lipicios din dreapta trece sub banda, nu sub ea si antet. */
.pas-urmator ~ .pasi .lsg-dreapta { top: calc(var(--h-antet) + var(--h-pas-urmator, 0px) + var(--sp-4)); }

/* Locul lasat jos pe telefon, ca banda fixa sa nu acopere ultimul rand. */
.pas-urmator-loc { height: 0; }

@media (max-width: 720px) {
  .pas-urmator {
    position: fixed; top: auto; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
    margin: 0; padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-1) var(--sp-2);
  }
  .pas-urmator-text { flex-basis: 100%; font-size: var(--text-sm); order: 2; }
  .pas-urmator-stare { order: 1; }
  .pas-urmator-actiuni { order: 3; flex: 1 1 100%; margin-left: 0; }
  .pas-urmator-buton { flex: 1 1 auto; justify-content: center; }
  .pas-urmator-eticheta { display: none; }
  .pas-urmator-loc { height: 132px; }
}

/* ---- persoana de contact, in antetul fisei ----------------------------- */
.lead-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.lead-contact-nume { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mediu); font-size: var(--text-sm); }
.lead-contact-nume .ico { color: var(--text-slab); }
@media (max-width: 720px) {
  .lead-contact .buton { flex: 1 1 auto; justify-content: center; min-height: var(--h-control); }
}

/* ---- pasul facut, strans intr-un rand; pasul viitor, un rand ------------ */
.pas-rezumat {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--stare-bun-linie, var(--linie)); border-radius: var(--r-card);
  background: var(--stare-bun-fundal);
}
.pas-rezumat-ico { display: flex; color: var(--stare-bun); flex: none; }
.pas-rezumat-text { margin: 0; min-width: 0; color: var(--text); }
.pas-detalii { margin: var(--sp-2) 0 var(--sp-4); }
.pas-detalii > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  padding: 6px 10px; border-radius: var(--r-nav);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-slab);
}
.pas-detalii > summary::-webkit-details-marker { display: none; }
.pas-detalii > summary:hover { background: var(--buton-linistit-hover); color: var(--text); }
.pas-detalii > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pas-detalii-sageata { transition: transform var(--dur-rapid) var(--arc); }
.pas-detalii[open] > summary .pas-detalii-sageata { transform: rotate(180deg); }
.pas-detalii[open] > summary { margin-bottom: var(--sp-3); }

/* Forma e cercul gol, aceeasi ca bulina „urmează” din fir (regula 11). */
.pas-viitor {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--linie-vizibila); border-radius: var(--r-card);
  color: var(--text-slab); font-size: var(--text-sm);
}
.pas-viitor .ico { flex: none; margin-top: 1px; }

/* ---- procentele cu baza lor --------------------------------------------- */
.cifra-baza { font-size: .55em; font-weight: 600; color: var(--text-sters); margin-left: 2px; }
.tabel .cifra-baza { font-size: var(--text-xs); }
/* Sub pragul de cazuri procentul se stinge, dar ramane citibil. */
.este-baza-mica { opacity: .55; }
.palnie-nota { margin: var(--sp-3) 0 0; }
.tbl-nemiscate {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); color: var(--text-mediu);
}
.tbl-nemiscate .ico { color: var(--stare-atentie); }

/* ---- /leaduri: vederi rapide, sortare, valoare cu sursa ----------------- */
.vederi-rapide { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.vedere-pastila {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--h-control-mic); padding: 4px 12px;
  border: 1px solid var(--linie-vizibila); border-radius: 999px;
  background: var(--card); color: var(--text-mediu);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.vedere-pastila:hover { background: var(--card-plin); color: var(--text); text-decoration: none; }
.vedere-pastila.este-aleasa {
  background: var(--stare-in-lucru-fundal); border-color: var(--stare-in-lucru); color: var(--stare-in-lucru);
}

.antet-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.antet-sort:hover { color: var(--text); text-decoration: underline; }
.antet-sort.este-activ { color: var(--text-titlu); }
.antet-sus { transform: rotate(180deg); }
.valoare-sursa { font-size: 11px; letter-spacing: .02em; }
.td-unitate { display: none; }
.td-ce-urmeaza { max-width: 260px; }

/* ---- „Ce e nou”: restul intrarilor, la un clic ---------------------------- */
.noutati-toate { margin-top: var(--sp-3); border-top: 1px solid var(--linie); padding-top: var(--sp-2); }
.noutati-toate > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-slab); }
.noutati-toate > .noutati-lista { margin-top: var(--sp-3); }

/* ---- erorile de camp, aratate la iesirea din camp ------------------------ */
.camp-eroare-vie { margin-top: 4px; }

/* ---- bara de sus pe telefon: sigla + meniu + cont ------------------------
   ⚠️ Pe ecran lat invelisul nu exista pentru asezare (`display: contents`) si
   butonul de cont nu se vede: bara laterala ramane neatinsa. */
.bara-subsol { display: contents; }
.bara-cont-buton { display: none; }

@media (max-width: 900px) {
  .cu-js .bara-interior { flex-wrap: nowrap; position: relative; }
  .cu-js .marca { order: 1; }
  .cu-js .marca img { max-width: 92px; }
  .cu-js .bara-navigare { order: 2; flex: 1 1 0; min-width: 0; }
  .cu-js .bara-cont-buton {
    order: 3; flex: none;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: var(--h-control); padding: 4px 6px;
    border: 0; border-radius: var(--r-nav);
    background: none; color: var(--pe-inchis-3); cursor: pointer;
  }
  .cu-js .bara-cont-buton:hover,
  .cu-js .bara-cont-buton[aria-expanded="true"] { background: var(--pe-inchis-hover); color: var(--pe-inchis-1); }
  .cu-js .bara-cont-buton[aria-expanded="true"] .ico { transform: rotate(180deg); }

  /* Panoul de cont: inchis implicit, deschis din buton. */
  .cu-js .bara-subsol { display: none; }
  .cu-js .bara-subsol.este-deschis {
    display: flex; flex-direction: column; gap: var(--sp-3);
    position: absolute; top: calc(100% + 6px); right: var(--sp-2); z-index: 60;
    width: min(300px, calc(100vw - var(--sp-5)));
    padding: var(--sp-3);
    border: 1px solid var(--linie-bara); border-radius: var(--r-mare);
    background: var(--bara-fundal);
    box-shadow: var(--umbra-2);
  }
  .cu-js .bara-subsol.este-deschis .tema-comutator { order: 0; margin-left: 0; }
  .cu-js .bara-subsol.este-deschis .tema-optiune { padding: 8px 4px; }
  .cu-js .bara-subsol.este-deschis .tema-eticheta {
    position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip-path: none;
  }
  .cu-js .bara-subsol.este-deschis .bara-eu {
    order: 0; justify-content: flex-start;
    border-top: 1px solid var(--linie-bara); padding-top: var(--sp-3);
  }
  .cu-js .bara-subsol.este-deschis .bara-eu .eu-rol { display: block; }
}

/* ---- randurile compacte din /leaduri, pe telefon --------------------------
   Doua randuri in loc de opt etichete: clientul si starea sus, societatea,
   zilele si valoarea jos. Restul coloanelor sunt pe fisa leadului, la un clic.
   ⚠️ Celulele ascunse au `display: none`, nu se sterg din marcaj: pe ecran lat
   tabelul ramane intreg. */
@media (max-width: 720px) {
  .tabel-leaduri tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "client client stare" "soc zile valoare";
    gap: 2px var(--sp-3); align-items: center;
  }
  .tabel-leaduri td { display: block; width: auto; padding: 0; }
  .tabel-leaduri td::before { content: none; }
  .tabel-leaduri .td-client   { grid-area: client; min-width: 0; }
  .tabel-leaduri .td-stare    { grid-area: stare; justify-self: end; text-align: right; }
  .tabel-leaduri .td-societate { grid-area: soc; min-width: 0; color: var(--text-slab); font-size: var(--text-xs);
                                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabel-leaduri .td-zile     { grid-area: zile; color: var(--text-slab); font-size: var(--text-xs); text-align: right; }
  .tabel-leaduri .td-valoare  { grid-area: valoare; text-align: right; font-size: var(--text-sm); }
  .tabel-leaduri .td-valoare .valoare-sursa { display: inline; margin-left: 4px; }
  .tabel-leaduri .td-unitate  { display: inline; }
  .tabel-leaduri .td-ascuns-mobil,
  .tabel-leaduri .td-ce-urmeaza { display: none; }
  .tabel-leaduri .td-client .rand-sub.cod { display: none; }

  /* „Adaugă lead” pe toata latimea, nu lipit in dreapta. */
  .cap-pagina > .actiuni { width: 100%; }
  .cap-pagina > .actiuni > .buton { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   §27. REGISTRUL DE NUMERE: pagina si panoul lateral. 17.10.2026.

   Cererea proprietarului: alocarea numerelor de contract intr-un panou
   lateral, „foarte destept si foarte usor de folosit”, la nivel Apple/Google.
   Panoul intra din dreapta, ca o foaie; continutul e acelasi cu al paginii
   /registru. Starile au forma lor (regula 11), culoarea doar insoteste.
   ===================================================================== */

html.fara-derulare { overflow: hidden; }

.sertar-fond {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(10, 11, 16, 0);
  transition: background var(--dur-deschis) var(--arc);
}
.sertar-fond[hidden] { display: none !important; }
.sertar-fond.este-deschis { background: rgba(10, 11, 16, .38); }

.sertar {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--sticla-tenta), var(--sticla-baza);
  -webkit-backdrop-filter: var(--sticla-blur);
  backdrop-filter: var(--sticla-blur);
  box-shadow: var(--sticla-muchii), var(--umbra-3);
  border-radius: var(--r-mare) 0 0 var(--r-mare);
  transform: translateX(104%);
  transition: transform var(--dur-deschis) cubic-bezier(.2, .8, .2, 1);
}
.sertar-fond.este-deschis .sertar { transform: none; }

.sertar-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--linie);
}
.sertar-cap h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--text-lg); }
.sertar-cap-actiuni { display: flex; align-items: center; gap: var(--sp-2); }
.sertar-corp { flex: 1; overflow-y: auto; padding: var(--sp-4); overscroll-behavior: contain; }
.sertar-corp[aria-busy="true"] { opacity: .55; transition: opacity var(--dur-rapid) var(--arc); }

/* ---- continutul registrului (pagina si panou) ---- */

.rgn { display: flex; flex-direction: column; gap: var(--sp-4); }

.rgn-firme { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rgn-firma {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-pastila);
  border: 1px solid var(--linie-vizibila);
  color: var(--text-mediu); text-decoration: none; font-size: var(--text-sm);
}
.rgn-firma:hover { background: var(--card-slab); color: var(--text-titlu); }
.rgn-firma.este-aleasa {
  background: var(--text-titlu); border-color: var(--text-titlu);
  color: var(--text-invers); font-weight: 600;
}

.rgn-urmator {
  background: var(--card); border: 1px solid var(--linie);
  border-radius: var(--r-card); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.rgn-urmator-cap { display: grid; gap: 2px; margin-bottom: var(--sp-2); }
.rgn-eticheta {
  font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-slab);
}
.rgn-urmator-cifra {
  font-size: 44px; line-height: 1.05; font-weight: 700; color: var(--text-titlu);
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
}
.rgn-urmator-nota { font-size: var(--text-sm); color: var(--text-slab); }

.rgn-actiune { border-top: 1px solid var(--linie); padding-top: var(--sp-2); }
.rgn-actiune > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; cursor: pointer; list-style: none;
  font-weight: 550; color: var(--text-titlu);
}
.rgn-actiune > summary::-webkit-details-marker { display: none; }
.rgn-actiune > summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-slab); border-bottom: 1.5px solid var(--text-slab);
  transform: rotate(45deg); transition: transform var(--dur-rapid) var(--arc);
}
.rgn-actiune[open] > summary::after { transform: rotate(-135deg); }
.rgn-form { display: grid; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-2); }
.rgn-form .buton { justify-self: start; }

.rgn-sumar { margin: 0; font-size: var(--text-sm); color: var(--text-slab); }

.rgn-lista { list-style: none; margin: 0; padding: 0; }
.rgn-rand {
  display: grid; grid-template-columns: 32px 1fr auto; gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--linie);
}
.rgn-rand:last-child { border-bottom: 0; }
.rgn-semn {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.rgn-semn.ton-bun     { color: var(--stare-bun);      background: var(--stare-bun-fundal); }
.rgn-semn.ton-atentie { color: var(--stare-atentie);  background: var(--stare-atentie-fundal); }
.rgn-semn.ton-info    { color: var(--stare-in-lucru); background: var(--stare-in-lucru-fundal); }
.rgn-semn.ton-neutru  { color: var(--stare-neutru);   background: var(--stare-neutru-fundal); }
.rgn-rand-corp { min-width: 0; }
.rgn-rand-numar {
  font-weight: 650; color: var(--text-titlu);
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
}
.rgn-rand-numar a { color: inherit; text-decoration: none; }
.rgn-rand-numar a:hover { text-decoration: underline; }
.rgn-rand-sub { font-size: var(--text-sm); color: var(--text-slab); overflow-wrap: anywhere; }
.rgn-actiune-rand { border-top: 0; padding-top: 0; margin-top: var(--sp-1); }
.rgn-actiune-rand > summary { min-height: 32px; font-size: var(--text-sm); color: var(--text-mediu); }
.rgn-rand-actiuni { display: flex; gap: var(--sp-2); }

/* Alegerea numarului la trimitere: randuri mari, apasabile pe toata latimea,
   fiecare cu forma starii lui (regula 11). */
.rgn-alege { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rgn-alege legend { font-weight: 600; color: var(--text-titlu); margin-bottom: var(--sp-2); padding: 0; }
.rgn-optiune {
  display: grid; grid-template-columns: auto 28px 1fr; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--linie-vizibila); border-radius: var(--r-card);
  background: var(--card); cursor: pointer;
  transition: border-color var(--dur-rapid) var(--arc), background var(--dur-rapid) var(--arc);
}
.rgn-optiune:hover { background: var(--card-slab); }
.rgn-optiune:has(input:checked) { border-color: var(--focus); background: var(--card-slab); box-shadow: 0 0 0 1px var(--focus); }
.rgn-optiune input { width: 16px; height: 16px; accent-color: var(--focus); margin: 0; }
.rgn-optiune-semn { color: var(--text-slab); display: inline-flex; justify-content: center; }
.rgn-optiune-text { display: grid; gap: 1px; min-width: 0; }
.rgn-optiune-text b { color: var(--text-titlu); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.rgn-optiune-text span { font-size: var(--text-sm); color: var(--text-slab); }

/* Caseta registrului de pe fisa leadului (pasul Contractul). */
.rgn-caseta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3); border-radius: var(--r-card);
  background: var(--card-slab); border: 1px solid var(--linie);
}
.rgn-caseta-text { flex: 1; min-width: 12rem; font-size: var(--text-sm); color: var(--text-mediu); }
.rgn-caseta-text b { color: var(--text-titlu); font-feature-settings: 'tnum'; }

@media (max-width: 560px) {
  .sertar { border-radius: 0; }
  /* Firmele pe un singur rand, derulat cu degetul: patru nume lungi, unul sub
     altul, impingeau numarul care urmeaza sub ecran. */
  .rgn-firme { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rgn-firma { flex: none; }
  .rgn-urmator-cifra { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .sertar, .sertar-fond { transition: none; }
}


/* =====================================================================
   §28. CONTRACTELE, PENTRU FACTURARE. 17.10.2026.

   Numarul si data sunt cel mai mare lucru de pe rand: dupa ele se cauta cand se
   factureaza. Restul (client, perioada, valoare, stare) sta pe doua randuri
   scurte, iar datele de facturare sub „Date pentru facturare”.
   ===================================================================== */

.ctl-bara {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-3);
}
.ctl-filtre { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ctl-cauta { display: flex; gap: var(--sp-2); flex: 1 1 260px; max-width: 420px; }
.ctl-cauta input[type="search"] { flex: 1; min-width: 0; }

.ctl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ctl-rand {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4); border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--linie);
}
.ctl-numar { display: grid; gap: 2px; }
.ctl-numar-cifra {
  font-size: 28px; line-height: 1.05; font-weight: 700; color: var(--text-titlu);
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ctl-numar-data { font-size: var(--text-sm); color: var(--text-slab); }
.ctl-numar-fara { font-size: var(--text-sm); color: var(--text-slab); font-style: italic; }
.ctl-corp { min-width: 0; display: grid; gap: 4px; }
.ctl-client { font-weight: 650; color: var(--text-titlu); text-decoration: none; }
.ctl-client:hover { text-decoration: underline; }
.ctl-sub { font-size: var(--text-sm); color: var(--text-mediu); }
.ctl-stare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: 2px; }
.ctl-stare a { display: inline-flex; align-items: center; gap: 4px; }
.ctl-detalii { margin-top: var(--sp-2); }
.ctl-detalii > summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-mediu); min-height: 32px; display: flex; align-items: center; }
.ctl-detalii .perechi { margin-top: var(--sp-2); }
.ctl-actiuni { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }

@media (max-width: 720px) {
  .ctl-rand { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ctl-numar { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--sp-2); }
  .ctl-actiuni { align-items: stretch; }
  .ctl-actiuni .buton { justify-content: center; min-height: 44px; }
}