/* =====================================================================
   Portofoliul profesional digital — sistemul vizual
   =====================================================================

   IDEEA, ÎNTR-O FRAZĂ: ecranul este masa pe care se adună un dosar, nu un
   panou de administrare care se întâmplă să tipărească.

   Obiectul real al acestui produs nu este interfața, ci hârtia care iese din
   ea: opisul depus la comisie, declarația din Anexa nr. 2, fișa de evaluare.
   Toate se tipăresc, se semnează și ajung într-un dosar. Sistemul de mai jos
   pleacă de acolo: hârtie, cerneală, linii, numerotare.

   SCENA CARE A DECIS TEMA: o profesoară de 54 de ani, la 21:30, în bucătărie,
   pe telefon, după o zi de opt ore, verificând dacă inspectorul i-a deschis
   dosarul înainte de comisia de mâine. Lumină, nu întuneric. Un produs despre
   documente nu se citește pe fond negru, iar ea nu stă într-o cameră întunecată.

   CE AM EVITAT DELIBERAT
   Reflexul de categorie: educație publică → bleumarin de minister, carduri albe
   pe gri, umbre moi. Îl avea și versiunea anterioară, iar foaia de stil o
   recunoștea singură. Al doilea reflex, cel de sub el — „produs educațional
   care nu vrea să pară de minister" → crem cald cu titluri cu serife — e la fel
   de previzibil. Aici: hârtie caldă, cerneală aproape neagră, LINII în loc de
   umbre, iar acțiunea principală în culoarea cernelii, nu într-un albastru de
   marcă. Roata culorilor rămâne liberă pentru ce înseamnă ceva.

   CULORILE SUNT ÎN OKLCH și au fost alese calculând contrastul, nu din ochi.
   Perechile verificate: cerneală pe hârtie 15,8:1 · cerneală slabă 6,3:1 ·
   sigiliu 7,5:1 · bine 7,1:1 · atenție 7,3:1 · eroare 7,4:1 · linia
   structurală 3,2:1. Într-un design fără umbre, LINIA este structura: dacă nu
   se vede pe un telefon ieftin, în lumină de zi, ierarhia dispare. Versiunea
   anterioară avea 1,17:1 acolo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   LITERELE IDENTITATII „CATEDRA" (directia B, aleasa de client).
   Lora — titlurile: serifa umanista, cu radacini caligrafice; vocea calda
   a cancelariei, nu a tribunalului. Source Sans 3 — corpul: desenata pentru
   interfete si formulare, cu cifre limpezi. Ambele variabile, gazduite LANGA
   aplicatie (CSP 'self', zero CDN), cu subsetul latin-extins pentru
   diacriticele romanesti corecte (s si t cu virgula). Licentele OFL sunt in
   public/fonturi/. Total: ~84 KB pentru patru fisiere.  */
/* FONTURILE ERAU STATICE, DECLARATE CA VARIABILE.
   Fisierele livrate pana acum nu aveau tabela `fvar`, adica erau o singura
   taietura — dar `font-weight: 400 700` ii spunea browserului ca acopera tot
   intervalul. Urmarea: browserul folosea acelasi fisier pentru 400, pentru 600
   si pentru 700, si NU sintetiza nimic. Masurat in pagina: sirul
   „Planificare calendaristica 8 septembrie 2026" la 32px iesea 621,77px la
   TOATE cele patru greutati. Georgia, pentru comparatie, da 629,78 la 400 si
   736,56 la 700.

   Deci toata ierarhia construita prin greutate era invizibila pe ecran, si
   feedbackul „totul e bold, nu am nicio diferentiere" era literal adevarat.

   Acum sunt fonturi VARIABILE reale (tabelele `fvar` si `gvar` verificate in
   fisier), asa ca 400, 600 si 700 chiar arata diferit. */
@font-face {
  font-family: 'Lora';
  src: url('fonturi/lora-latin.woff2') format('woff2-variations'),
       url('fonturi/lora-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  src: url('fonturi/lora-latin-ext.woff2') format('woff2-variations'),
       url('fonturi/lora-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonturi/source-sans-3-latin.woff2') format('woff2-variations'),
       url('fonturi/source-sans-3-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonturi/source-sans-3-latin-ext.woff2') format('woff2-variations'),
       url('fonturi/source-sans-3-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* fetele de litera: titlurile poarta vocea, corpul ramane functional,
     iar TOT ce e dovada (amprente, coduri, pozitii de opis) e monospatiat —
     limbajul vizual al actelor emise de masina, nu scrise de mana. */
  --fata-titlu: 'Lora', 'Iowan Old Style', 'Georgia', serif;
  /* Fața de text avea familia scrisă direct pe `body`, în timp ce titlul și
     monospațiatul aveau tokeni. Acum toate trei se numesc la fel. */
  --fata-corp:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fata-mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;

  /* --- hârtie și cerneală ------------------------------------------- */
  --hartie:        oklch(97.7% 0.008 95);   /* hartia calda a Catedrei */
  --hartie-inalta: oklch(99.3% 0.005 95);   /* suprafețele ridicate */
  --hartie-adanca: oklch(95%   0.010 95);   /* zone retrase: antet de tabel */
  --cerneala:      oklch(26%   0.020 170);  /* cerneala verde-neagra: 14,4:1 */
  --cerneala-slab: oklch(47%   0.020 170);  /* metadate: 6,3:1 */

  /* --- linii: structura ---------------------------------------------- */
  --linie:      oklch(62% 0.015 165);       /* 3,3:1 — delimitări portante */
  --linie-fina: oklch(87% 0.012 120);       /* despărțiri interioare */

  /* --- sigiliu: culoarea dovezii ------------------------------------- */
  /* Se folosește NUMAI pentru ce ține de dovadă: amprente, coduri de
     verificare, versiuni blocate, integritate confirmată. Este singurul lucru
     pe care acest produs îl face și un folder partajat nu. Merită o culoare
     care nu apare nicăieri altundeva. */
  --sigiliu:      oklch(33% 0.055 170);     /* VERDELE TABLEI: 11,1:1 pe hartie */
  --sigiliu-slab: oklch(94.5% 0.018 165);
  --tabla-adanca:  oklch(28% 0.050 170);     /* hover pe actiunea principala */
  /* Cărămidă arsă, pentru titlurile de SECȚIUNE din opis și din editor.
     Marchează nivelul de sus al structurii din Anexa nr. 1, singurul nivel pe
     care legea îl cere grupat. Nu e podoabă.

     DE CE ATÂT DE ÎNCHISĂ. Prima versiune era oklch(38% 0.15 27) — la DOUĂ
     GRADE de roșul erorii, oklch(46% 0.16 25), cu o distanță perceptuală de
     numai 8,1. Era cel mai apropiat lucru de culoarea erorii din toată
     aplicația: un antet roșu deasupra listei de diplome se citea ca o alarmă.
     Coborâtă la 29% luminozitate, distanța urcă la 18,4, iar contrastul pe
     cardul alb la 14,3:1. Rămâne totuși la 11,0 de cerneala textului, deci se
     vede în continuare ca o CULOARE, nu ca text îngroșat. */
  --catalog:      oklch(29% 0.09 32);
  --catalog-slab: oklch(96.5% 0.027 32);
  --creta:         oklch(97.5% 0.010 95);    /* textul pe tabla: 11,1:1 */
  --creta-stinsa:  oklch(85%  0.020 165);    /* navigatia inactiva pe tabla: 8,5:1 */
  --creta-galbena: oklch(93%  0.070 98);     /* markerul: DOAR pasul urmator; cerneala pe el 12,6:1 */

  /* --- stări ---------------------------------------------------------- */
  --bine:         oklch(44% 0.10 152);
  --bine-slab:    oklch(95.5% 0.025 152);
  --atentie:      oklch(45% 0.11 68);
  --atentie-slab: oklch(96%  0.035 68);
  --eroare:       oklch(46% 0.16 25);
  --eroare-slab:  oklch(95.5% 0.03 25);

  /* --- tipar: opt trepte, raport ~1,18 ------------------------------- */
  /* Erau 26 de mărimi, improvizate una câte una. Podeaua e la 13px: publicul
     are vârstă medie mare, iar metadatele de 10px nu se citeau. */
  --t-xs:  0.8125rem;  /* 13px — metadate, cel mai mic text funcțional */
  --t-sm:  0.875rem;   /* 14px */
  /* --t-md a fost 15px — o treapta „medie" intre 14 si 16. Masurat pe pagina
     de portofoliu: 421 din ~450 de elemente cu text stateau in trei trepte
     intinse pe 2 pixeli (13/14/15), deci ierarhia se sprijinea numai pe culoare
     si greutate. Treapta de mijloc s-a dovedit falsa: „mediul" ESTE corpul.
     Bonus concret: campurile de formular ajung la 16px, pragul sub care
     Safari pe iPhone mareste singur pagina la fiecare atingere a unui camp. */
  --t-md:  1rem;  /* 16px */
  --t-baza: 1rem;      /* 16px — corpul */
  --t-lg:  1.125rem;   /* 18px */
  --t-xl:  1.3125rem;  /* 21px */
  --t-2xl: 1.625rem;   /* 26px */
  --t-3xl: 2rem;       /* 32px */

  /* --- greutăți: trei, nu șase --------------------------------------- */
  /* 550 și 650 se rotunjeau imprevizibil pe Segoe UI, deci aceeași etichetă
     arăta diferit pe două calculatoare din aceeași cancelarie. */
  --g-normal: 400;
  --g-semi:   600;
  --g-tare:   700;

  /* --- spațiere: șapte trepte ---------------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;

  /* Inaltimea antetului lipicios al site-ului. Antetul de secțiune se lipeste
     imediat sub el, deci trebuie sa stie cat ocupa. Pe telefon navigatia se
     desface pe mai multe randuri si antetul creste la ~164px — acolo lipirea
     se OPRESTE (vezi pragul de 46rem): 164px inseamna o cincime din ecran
     pierduta, iar pe o coloana singura te orientezi oricum derulant putin. */
  --antet-inaltime: 62px;

  /* FORMA SPUNE DACA SE APASA.
     Foaia ajunsese la treisprezece rotunjiri diferite — 999px, 8, 6, 5, 4, 3, 2,
     plus tokeni — scrise una cate una, dupa cum a picat. Un utilizator a
     intrebat direct, aratand un buton: „ce buton este acesta? uite si tu cum
     arata". Avea dreptate: la 999px si 44px inaltime, un cuvant scurt iese o
     pastila aproape rotunda la capete, care seamana cu o eticheta, nu cu un
     buton. Iar campurile de langa el erau la 6px.

     Patru forme, fiecare cu rolul ei:
       --raza          suprafete: carduri, panouri, casete
       --raza-control  CONTROALE: butoane, campuri, file, optiuni — tot ce se apasa
       --raza-mica     marunt in linie: coduri, insigne dreptunghiulare
       --raza-pastila  STARE, nu control: contorul ferestrei, pasii wizardului

     Regula, pe scurt: pastila raporteaza, dreptunghiul rotunjit se apasa. */
  --raza: 10px;       /* Catedra: colturi blande, nu taioase */
  --raza-control: 8px;
  --raza-pastila: 999px;
  --raza-mica: 6px;
  --latime: 66rem;

  /* Compatibilitate: numele vechi trimit la cele noi, ca nimic să nu se rupă
     în șabloanele care încă le folosesc. */
  --culoare-text: var(--cerneala);
  --culoare-text-slab: var(--cerneala-slab);
  --culoare-fundal: var(--hartie);
  --culoare-card: var(--hartie-inalta);
  --culoare-linie: var(--linie-fina);
  --culoare-accent: var(--cerneala);
  --culoare-accent-inchis: var(--cerneala);
  --culoare-accent-slab: var(--hartie-adanca);
  --culoare-bine: var(--bine);
  --culoare-bine-slab: var(--bine-slab);
  --culoare-atentie: var(--atentie);
  --culoare-atentie-slab: var(--atentie-slab);
  --culoare-eroare: var(--eroare);
  --culoare-eroare-slab: var(--eroare-slab);
  --umbra: none;

  /* Loc de derulare in coada paginii, cat tine turul de bun venit. Zero in mod
     obisnuit; JavaScript ii pune inaltimea reala a panoului cat e deschis.
     Se declara AICI, nu doar ca valoare de rezerva in `var(...)`: un token care
     traieste numai in JavaScript nu se vede de nicaieri citind foaia. */
  --tur-spatiu: 0px;

  /* O SINGURA TEMA, CU BUNA STIINTA. Identitatea foii este hartia: un registru
     scolar se citeste pe alb cald, in sali luminate, de un public cu varsta
     medie mare. O varianta intunecata ar insemna a doua paleta intreaga de
     verificat la fiecare schimbare — cost real pentru un castig pe care acest
     public nu l-a cerut. Daca apare nevoia, se porneste de la tokenuri, nu de
     la reguli razlete. */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--culoare-fundal);
  color: var(--culoare-text);
  font: 16px/1.6 var(--fata-corp);
}

.container { max-width: var(--latime); margin: 0 auto; padding: 0 1.25rem; }

/* Textul curgator nu depaseste 68 de caractere pe rand. Listele, tabelele si
   anunturile raman late — sunt date, nu lectura.
   Latimea se declara O SINGURA DATA, mai jos, la regula `p`. Aici statea o a
   doua declaratie, cu 65ch, care nu se aplica niciodata: era anulata de cea de
   la 30 de linii mai jos, iar comentariul asta anunta cifra moarta. */
/* Cele 68 de caractere pe rand sunt pentru PROZA — paragrafele care se
   citesc. O linie de metadate nu e proza: „21 de documente asezate · opisul
   s-a actualizat acum 13 ore · ordonare automata dupa data dobandirii" e o
   singura fraza, citita o data, si incape pe un rand daca o lasi.

   Masurat, inainte: subtitlul paginii avea 507px si ii trebuiau 912; rezumatul
   avea 473 din 1016 disponibili; primul rand din subsol avea 473 si ii trebuiau
   554 — se rupea in doua pentru 81 de pixeli. Toate patru se strangeau intr-o
   coloana ingusta cu jumatate de pagina goala langa ele.

   Regula: proza pastreaza limita, metadatele primesc latimea containerului si
   se rup abia cand chiar nu mai incap. */
.anunt, .gol, td p, th p,
.subtitlu, .rezumat, .subsol p { max-width: none; }

/* Ierarhia se face din SCARĂ și GREUTATE, nu din culori. Raportul dintre trepte
   e ~1,18 și nu mai există trepte plate: h3 era la 1,02rem, adică practic
   identic cu textul de corp. */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--s-2); font-weight: var(--g-tare); }
/* Titlurile de pagina si de sectiune poarta litera documentara. h4 si mai jos
   raman in litera de interfata: sub 18px, slabul devine zgomot. */
h1, h2, h3 { font-family: var(--fata-titlu); }
h1 { font-size: var(--t-3xl); letter-spacing: -0.008em; }
h2 { font-size: var(--t-xl);  letter-spacing: -0.004em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); text-transform: uppercase; letter-spacing: .06em; color: var(--cerneala-slab); }

/* <strong> inseamna „important", nu „titlu".
   Implicit browserul il pune la 700 — aceeasi greutate ca un h1. Asa se
   ajunsese ca numarul de documente dintr-o linie de metadate sa fie mai greu
   decat antetul sectiunii de dedesubt. La 600 accentul se vede, dar nu mai
   concureaza cu titlurile. Locurile care chiar au nevoie de 700 (marca din
   antet) o cer explicit si castiga prin specificitate. */
strong, b { font-weight: var(--g-semi); }
p { margin: 0 0 var(--s-3); max-width: 68ch; }

a { color: var(--culoare-accent-inchis); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--culoare-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.sari-la-continut {
  position: absolute; left: -9999px;
  background: var(--creta-galbena); color: var(--cerneala);
  font-weight: var(--g-tare);
  padding: .7rem 1rem; border-radius: 0 0 var(--raza-mica) 0; z-index: 100;
}
.sari-la-continut:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- antet */
/* Antetul e TABLA: verdele adanc poarta identitatea, creta scrie pe el.
   Singura suprafata scufundata in culoare — restul paginii respira pe hartie. */
.antet-site {
  background: var(--sigiliu);
  color: var(--creta);
  position: sticky; top: 0; z-index: 40;
}
.antet-site__interior {
  display: flex; align-items: center; gap: 1rem; row-gap: 0;
  padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit;
         min-height: 2.75rem; }   /* e un link de navigare, deci și el o țintă */
/* Marca: un bloc plin si trei randuri — structura paginii, in mic.
   `color` da culoarea patratului, `--marca-cerneala` pe cea a randurilor, deci
   acelasi desen merge si in crema pe verde, si invers. */
.marca__semn {
  width: 34px; height: 34px; flex: none; display: block;
  color: var(--creta);
  --marca-cerneala: var(--sigiliu);
  transition: transform .15s ease-out;
}
.marca:hover .marca__semn { transform: rotate(-3deg); }
/* Numele produsului: un singur rand. Subtitlul cu numarul ordinului a plecat —
   il stie oricine deschide aplicatia, si statea sub nume ca o nota de subsol
   lipita de logo. Ordinul se citeaza acolo unde chiar conteaza: in subsol si
   in textele care invoca un articol anume. */
.marca__text {
  color: var(--creta); font-family: var(--fata-titlu); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: .01em; line-height: 1.1;
}

.navigatie { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
/* Fila curentă se marchează cu o linie sub ea, ca despărțitorii dintr-un
   registru, nu cu o pastilă plină. Pastilele făceau ca navigarea să concureze
   vizual cu acțiunile din pagină. */
.navigatie a {
  padding: var(--s-2) var(--s-1); margin: 0 var(--s-2); text-decoration: none;
  color: var(--creta-stinsa); font-weight: var(--g-semi); font-size: var(--t-sm);
  border-bottom: 3px solid transparent; border-radius: 0;
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
.navigatie a:hover { color: var(--creta); }
.navigatie a[aria-current="page"] { color: var(--creta); border-bottom-color: var(--creta); }
/* Linkul spre panoul de test: creta galbena pe tabla — vizibil, tematic (10:1). */
.navigatie__test { border: 1px dashed var(--creta-galbena); color: var(--creta-galbena) !important; }

.utilizator { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--creta-stinsa); }
.utilizator__nume { font-weight: var(--g-semi); color: var(--creta); }
.utilizator .insigna { border-color: var(--creta-stinsa); color: var(--creta); background: transparent; }
.antet-site :focus-visible { outline-color: var(--creta); }

/* ------------------------------------------------------------- anunturi */
.anunt {
  margin: 1rem 0; padding: .8rem 1rem; border-radius: var(--raza);
  border: 1px solid; font-size: var(--t-md);
}
.anunt--succes { background: var(--culoare-bine-slab); border-color: var(--bine); color: var(--culoare-bine); }
.anunt--eroare { background: var(--culoare-eroare-slab); border-color: var(--eroare); color: var(--culoare-eroare); }
.anunt--info   { background: var(--culoare-accent-slab); border-color: var(--linie); color: var(--culoare-accent-inchis); }
.anunt--atentie{ background: var(--culoare-atentie-slab); border-color: var(--atentie); color: var(--culoare-atentie); }

.bara-ceas {
  background: var(--culoare-atentie-slab);
  border-bottom: 1px solid var(--atentie);
  color: var(--culoare-atentie);
  font-size: var(--t-sm); padding: .5rem 1.25rem; text-align: center;
}
.bara-ceas a { color: inherit; }

/* ---------------------------------------------------------------- carduri */
main { padding: 1.5rem 0 4rem; }

/* FĂRĂ UMBRE. Structura o dau liniile, ca într-un formular tipărit. Umbrele
   moi pe alb-pe-aproape-alb dădeau un chenar de 1,17:1 față de fundal — adică
   invizibil pe un telefon ieftin, în lumină de zi. */
.card {
  background: var(--hartie-inalta); border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: var(--s-6); margin-bottom: var(--s-4);
}
.card__antet { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* CAPUL DE PAGINA nu e o cutie. Cardul care incepe cu <h1> isi pierde chenarul
   si fundalul si devine antetul unei file: titlul mare in litera documentara,
   subtitlul dedesubt, o linie de despartire jos. Imbunatatire progresiva:
   fara :has(), ramane cardul de pana acum — nimic nu se strica. */
.card:has(> h1),
.card:has(> .card__antet > div > h1),
.card:has(> .antet-cu-actiuni > div > h1) {
  background: transparent; border: none; border-radius: 0;
  padding-left: 0; padding-right: 0; padding-top: var(--s-2);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--s-6);
}
.card:has(> h1) h1 { margin-bottom: var(--s-1); }

/* Sublinierea de creta: ancora vizuala a fiecarei sectiuni (R7 din critica). */
.card > h2, .card > .card__antet h2, .card > .antet-cu-actiuni h2 {
  position: relative; padding-bottom: .45rem; margin-bottom: .8rem;
}
.card > h2::after, .card > .card__antet h2::after, .card > .antet-cu-actiuni h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.6rem; height: 3px; background: var(--sigiliu); border-radius: 2px;
}
/* Starea unui card se marcheaza pe TOT conturul si pe fundal, nu cu o dunga
   pe o singura latura: dunga se pierde la tiparire, dispare in modul cu
   contrast ridicat si nu spune nimic pe un ecran ingust, unde cardul incepe
   oricum la marginea paginii. */
.card--atentie { border-color: var(--atentie); background: var(--atentie-slab); }
.card--pericol { border-color: var(--eroare); background: var(--eroare-slab); }

/* Incheierea unei pagini: doua fraze si un buton, sub o linie, la masura
   textului. NU e card — pus intr-unul de latimea paginii, textul umplea sub
   jumatate din cutie, iar golul citea ca un defect de asezare. O nota finala
   nu e un panou de lucru. */
.incheiere {
  margin: var(--s-8) 0 var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linie-fina);
  max-width: 46rem;
}

.subtitlu { color: var(--cerneala-slab); font-size: var(--t-md); margin-top: calc(var(--s-1) * -1);
            text-wrap: pretty; }
/* O bucata care nu se rupe la capat de rand. Folosita pentru data si ora
   dintr-un subtitlu: „25.08.2026, 00:48" se rupea intre data si ora, si
   ramanea „00:48" singur pe randul al doilea, lat de 36px. */
.fara-rupere { white-space: nowrap; }

/* Paginile cu un singur lucru de facut (intrare, inregistrare, resetare):
   o coloana ingusta, centrata — formularul nu se intinde cat ecranul. */
.card--ingust { max-width: 30rem; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- butoane */
/* Acțiunea principală este în culoarea CERNELII, nu într-un albastru de marcă.
   Două motive: nu seamănă cu niciun panou de administrare din categorie, și
   lasă toată roata culorilor liberă pentru lucrurile care chiar înseamnă ceva
   (verde de sigiliu pentru dovadă, chihlimbar pentru atenție, roșu pentru
   pericol). Un buton albastru „de marcă" ar fi concurat cu toate. */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid var(--sigiliu); background: var(--sigiliu); color: var(--creta);
  padding: var(--s-2) var(--s-6); border-radius: var(--raza-control); font: inherit;
  font-weight: var(--g-semi); font-size: var(--t-md);
  min-height: 2.75rem;   /* ținta de atingere, nu o rotunjire */
  cursor: pointer; text-decoration: none;
  /* Si conturul, si culoarea textului: la butonul de text ele SUNT semnalul,
     iar fara ele in lista de tranzitii apareau brusc, fara legatura cu fondul. */
  transition: background-color .12s cubic-bezier(.22,1,.36,1),
              border-color .12s cubic-bezier(.22,1,.36,1),
              color .12s cubic-bezier(.22,1,.36,1);
}
.buton:hover { background: var(--tabla-adanca); border-color: var(--tabla-adanca); }
.buton[disabled], .buton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Apasarea se simte: butonul coboara un pixel cat e tinut apasat. `transform`
   nu e proprietate de asezare, deci nu misca nimic in jur; fara tranzitie,
   ca raspunsul sa fie instantaneu, ca la un intrerupator. */
.buton:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
/* Actiunea de rezerva: contur neutru, greutate normala.
   Doua motive, amandoua masurate.
   Unu: cand „Opisul", „Cosul" si „Finalizeaza" sunt la fel de ingrosate ca
   „+ Adauga documente", nu se mai vede care e drumul principal.
   Doi, si mai important: butonul secundar apare de 64 de ori in sabloane, si
   pana acum purta verdele de sigiliu. Foaia asta declara, cu majuscule, ca
   verdele „apare NUMAI" pe dovada — amprente, coduri, versiuni blocate — „de
   aceea inseamna ceva cand apare". Cu 64 de butoane verzi nu mai insemna
   nimic; pe ecranul de versiune ieseau cinci butoane verzi lipite chiar de
   amprenta, adica de singurul lucru care avea dreptul la culoarea aceea.
   Verdele revine la atingere si la focalizare, deci raspunsul controlului
   ramane intreg. Contur 3,5:1 si text 6,6:1, peste pragurile WCAG. */
.buton--secundar { background: transparent; color: var(--cerneala-slab); border-color: var(--linie);
                   font-weight: var(--g-normal); }
.buton--secundar:hover, .buton--secundar:focus-visible {
  background: var(--sigiliu-slab); color: var(--sigiliu); border-color: var(--sigiliu);
}
.buton--pericol { background: var(--eroare); border-color: var(--eroare); color: var(--hartie); }
.buton--pericol:hover { background: oklch(38% 0.15 25); border-color: oklch(38% 0.15 25); }
/* „Mic" înseamnă mai puțin LAT, nu mai jos: înălțimea rămâne o țintă de atins
   cu degetul. Butoanele de 31px din versiunea anterioară cădeau sub minimul
   WCAG 2.5.8 chiar pentru acțiuni curente.
   Comentariul acesta era, până acum, o minciună: regula punea 2,5rem (40px),
   adică sub angajamentul de 44px al proiectului, iar pe o singură pagină se
   adunau 29 de butoane sub prag. Măsurat, nu presupus. */
.buton--mic { padding: var(--s-1) var(--s-3); font-size: var(--t-sm); min-height: 2.75rem; }

/* Buton fara fundal, pentru actiuni discrete (Iesi din antet). */
/* ===================================================================
   SCARA BUTOANELOR — trei trepte, si se vede care e care
   Feedback: „butoanele toate sunt outline, nu am nicio ierarhie de ce este
   mai important". Era adevarat: actiunea principala, alternativa si actiunea
   de rand aveau toate acelasi contur.
     1. PRINCIPAL   `.buton`            umplut cu verdele tablei. Drumul inainte.
                                        Cel mult unul pe card.
     2. ALTERNATIV  `.buton--secundar`  contur neutru. Alta cale, la fel de
                                        valabila, dar nu cea asteptata.
     3. DE RAND     `.buton--text`      doar text, fond la atingere. Se repeta
                                        de zeci de ori intr-o lista si nu are
                                        voie sa concureze cu primele doua.
   =================================================================== */
.buton--text {
  background: transparent; border-color: transparent;
  color: var(--cerneala-slab); font-weight: var(--g-normal);
  padding-inline: var(--s-2);
}
/* Butonul se RIDICA din rand, nu se afunda in el.
   Prima varianta ii dadea la hover fondul `--hartie-adanca` — adica exact
   fondul pe care randul de document tocmai il primise la hover-ul lui. Ca sa
   ajungi cu mausul pe buton treci obligatoriu peste rand, deci randul era deja
   la 95% si butonul se colora tot in 95%: invizibil. Se schimba doar culoarea
   textului, si atat s-a si vazut.
   Acum merge in sens invers: fond mai DESCHIS decat randul (99,3% fata de 95%)
   si contur care apare. La hover, eticheta devine buton — afordanta apare fix
   in clipa in care e nevoie de ea. Conturul e transparent in repaus, cu aceeasi
   grosime, deci nimic nu se misca. */
.buton--text:hover, .buton--text:focus-visible {
  background: var(--hartie-inalta); color: var(--cerneala);
  border-color: var(--linie);
}
/* Eliminarea e ireversibila pana la Cos: se coloreaza abia cand o atingi, ca
   sa nu para o alarma permanenta pe fiecare rand. */
.buton--text--pericol:hover, .buton--text--pericol:focus-visible {
  background: var(--eroare-slab); color: var(--eroare); border-color: var(--eroare);
}

.buton--gol {
  font-weight: var(--g-normal);
  background: transparent;
  color: inherit;
  border-color: transparent;
}
.buton--gol:hover { border-color: currentColor; background: transparent; }

.utilizator__iesire { display: inline; margin-left: 0.5rem; }

.buton--mare { padding: var(--s-3) var(--s-6); font-size: var(--t-baza); min-height: 3rem; }

.randuri-butoane { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- insigne */
/* Insignele se definesc O SINGURA DATA, in blocul DOVADA de mai jos. Aici
   statea o prima definitie din care nu supravietuia decat asezarea: greutatea,
   umplutura, rotunjirea si fondul erau toate rescrise acolo. Cine citea numai
   regula asta credea ca insignele sunt pastile gri de 20px cu text la 700. */

/* Linia de rezumat de sub actiunile principale: cifra iese, restul e context. */
.rezumat { margin: .6rem 0 0; }
.rezumat strong { color: var(--cerneala); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- tabele */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--culoare-linie); vertical-align: top; }
/* Antetul de tabel se defineste O SINGURA DATA, mai jos. Aici statea o
   definitie din care nu se aplica NICIO proprietate — toate cinci erau
   rescrise. Prima corectura a greutatii a fost facuta exact aici si n-a avut
   niciun efect vizibil: de asta conteaza sa nu existe straturi. */
.tabel tr:last-child td { border-bottom: none; }
/* Coloana de numere: cifrele se aliniaza una sub alta. */
.tabel td.nr { font-variant-numeric: tabular-nums; }
.tabel--compact th, .tabel--compact td { padding: .4rem .5rem; }
.tabel-container { overflow-x: auto; }

/* Linkurile din tabele si din subsol: zona de atingere de 44px prin padding
   compensat cu margin negativ — tinta creste, randul ramane la fel (WCAG
   2.5.8; angajamentul nostru e 44px, nu minimul de 24). */
.tabel a, .subsol a, .gol a, .inapoi a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .6rem .3rem; margin: -.6rem -.3rem;
}
/* Legatura de intoarcere din josul unei pagini. Existau trei feluri de a o
   scrie: `.buton--gol` in fluxul de finalizare, si un `<a>` gol intr-un
   `<p class="text-mic">` in alte trei locuri — acolo inaltimea era 22px, adica
   jumatate din prag. Acum are un nume, si numele intra in regula de 44px de
   deasupra. */
.inapoi { margin-top: var(--s-4); font-size: var(--t-sm); }
.inapoi a { color: var(--cerneala-slab); }
.inapoi a:hover { color: var(--sigiliu); }

/* -------------------------------------------------------------- formular */
.camp { margin-bottom: .9rem; }
.camp > label { display: block; font-weight: var(--g-normal); font-size: var(--t-sm);
               color: var(--cerneala-slab); margin-bottom: .25rem; }
.camp__ajutor { display: block; color: var(--culoare-text-slab); font-size: var(--t-sm); margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="date"], select, textarea {
  width: 100%; padding: .5rem .65rem; font: inherit; font-size: var(--t-md);
  border: 1px solid var(--linie); border-radius: var(--raza-control); background: var(--hartie-inalta); color: inherit;
  min-height: 2.75rem;   /* tinta de atingere: 44px si pe campuri */
}
textarea { min-height: 5rem; resize: vertical; }

/* Bifele si butoanele radio: mai mari (starea se VEDE, nu se ghiceste — public
   cu vedere variata) si in verdele tablei. Tinta reala e eticheta asociata,
   care e mare; marimea de aici e pentru lizibilitatea starii. */
input[type="checkbox"], input[type="radio"] {
  width: 1.35rem; height: 1.35rem; accent-color: var(--sigiliu); flex: none;
}
.camp-inline { display: flex; gap: .75rem; flex-wrap: wrap; }
.camp-inline .camp { flex: 1; min-width: 9rem; }
fieldset { border: 1px solid var(--culoare-linie); border-radius: var(--raza); padding: 1rem; margin: 0 0 1rem; }
legend { font-weight: var(--g-tare); padding: 0 .4rem; font-size: var(--t-md); }

.bifa { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.bifa input { margin-top: .3rem; flex: none; width: 1.05rem; height: 1.05rem; }
.bifa label { font-size: var(--t-md); }

/* ------------------------------------------------------------- acordeon */
.sectiune { border: 1px solid var(--culoare-linie); border-radius: var(--raza); background: var(--culoare-card); margin-bottom: .9rem; overflow: hidden; }
.sectiune > summary {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 3.25rem;
  cursor: pointer; background: var(--hartie-adanca);
  font-weight: var(--g-semi); font-size: var(--t-md); list-style: none;
}
.sectiune > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.sectiune > summary::-webkit-details-marker { display: none; }
.sectiune > summary::before {
  content: "▸"; color: var(--culoare-text-slab); transition: transform .15s; flex: none;
}
.sectiune[open] > summary::before { transform: rotate(90deg); }
.sectiune > summary:hover { background: var(--culoare-accent-slab); }
.sectiune__litera {
  flex: none; display: grid; place-items: center;
  min-width: 1.6rem; line-height: 1;
  color: var(--catalog);
  font-family: var(--fata-titlu); font-weight: var(--g-tare); font-size: var(--t-2xl);
}
/* CONTORUL E NEUTRU, NU IN TONUL SECTIUNII.
   A purtat o vreme rosul de catalog, ca sa se lege de litera de langa care
   sta. Dar `--catalog` (nuanta 32) e la un pas de `--eroare` (nuanta 25):
   „9 documente" citea ca o alarma, pe fiecare sectiune, pe toata pagina. Un
   contor spune CATE sunt, nu ca e ceva in neregula — legatura cu titlul o face
   pozitia, nu culoarea. Rosul ramane literei si titlului, unde e identitate. */
/* `.insigna.sectiune__numar`, nu doar `.sectiune__numar`: clasa de baza
   `.insigna` e scrisa mai jos in fisier si are `background: transparent`. La
   aceeasi specificitate castiga cea de jos, deci fondul se pierdea. Doua clase
   ridica specificitatea la (0,2,0) si regula se aplica. */
.insigna.sectiune__numar {
  margin-left: auto; flex: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--cerneala-slab); background: var(--hartie-adanca); border-color: var(--linie-fina);
}
.sectiune__corp { padding: .25rem 1rem 1rem; border-top: 1px solid var(--culoare-linie); }

/* Unde lucrez acum. Feedback in trei timpi, de la acelasi utilizator:
   1. „nu am niciun status de hover per sectiune" — a aparut starea de hover;
   2. „subsectiunile ar trebui sa aiba border-ul de la hover [permanent], si la
      hover o culoare mai inchisa pe subsectie" — conturul a devenit permanent;
   3. „nu pune fundal la hover, te-am rugat doar bordura" — deci culoarea mai
      inchisa e a BORDURII, nu a suprafetei. Forma finala: cutia se vede mereu
      (contur `--linie`), iar la atingere conturul se inchide pe verdele de
      sigiliu. Fara fond: suprafata ramane a randului de document de dedesubt.
      `:focus-within` primeste la fel, deci si la navigarea cu tastatura. */
.componenta {
  border: 1px solid var(--linie); border-radius: var(--raza);
  padding: var(--s-3); margin-bottom: var(--s-3);
  transition: border-color .12s ease;
}
.componenta:hover, .componenta:focus-within {
  border-color: var(--sigiliu);
}
.componenta__antet {
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--linie-fina);
}
.componenta__cod {
  font-size: var(--t-xs); font-weight: var(--g-semi); flex: none;
  color: var(--creta); background: var(--sigiliu);
  padding: .1rem .45rem; border-radius: var(--raza-mica);
  font-variant-numeric: tabular-nums;
}
/* Trei niveluri, trei marimi. Titlul componentei avea 15px — exact cat titlul
   unui document de dedesubt — si se deosebea numai prin culoare. Un nivel de
   structura trebuie sa se vada si cand te uiti de departe, nu doar cand
   citesti. 18px il aseaza intre secțiune (21px, caramiziu, cu serife) si
   document (15px, cerneala). */
.componenta__titlu {
  margin: 0; font-family: var(--fata-corp);
  font-weight: var(--g-semi); font-size: var(--t-lg); color: var(--sigiliu);
  line-height: 1.35; text-transform: none; letter-spacing: 0;
}
/* Insigna, in linie cu textul titlului. `vertical-align` o ridica putin, ca sa
   stea pe aceeasi linie de baza cu literele mari de langa ea. */
.componenta__titlu .componenta__cod { margin-right: .4rem; vertical-align: .06em; }
/* Fara umplutura laterala proprie: `.componenta` are acum padding, iar cele
   doua se adunau — la 375px ramaneau 309px din 335 pentru continut. */
.componenta__corp { padding: 0; }
.componenta--declarativa { border-color: var(--atentie); background: var(--atentie-slab); }

.ajutor { margin: .2rem 0 .6rem; }
.ajutor > summary {
  cursor: pointer; color: var(--culoare-accent-inchis);
  font-size: var(--t-sm); font-weight: var(--g-semi);
  /* Zona de atingere: 44px prin padding compensat — ajutorul se deschide la
     click/atingere (D-040), deci tinta trebuie sa fie atinsa usor si de un
     deget nesigur. Randul vizibil ramane la fel.
     Socoteala: textul are 14px cu inaltimea randului 1,6, adica 22,4px. Ca sa
     ajunga la 44 mai trebuie 21,6px, deci 10,8 sus si jos. La .65rem ieseau
     10,4 si tinta ramanea la 43px — cu UN pixel sub prag, masurat cu sonda. */
  padding: .7rem .3rem; margin: -.7rem -.3rem;
  display: inline-block;
}
/* Fără dungă laterală: chenar întreg și fundal retras. Dunga dispare la
   tipărire și în modul cu contrast ridicat, iar pe ecran îngust nu spune nimic. */
.ajutor__corp {
  font-size: var(--t-sm); color: var(--cerneala-slab);
  padding: var(--s-3); background: var(--hartie-adanca);
  border: 1px solid var(--linie-fina); border-radius: var(--raza);
  margin-top: var(--s-2);
}
.ajutor__corp strong { color: var(--culoare-text); }

.avertisment-permanent {
  background: var(--culoare-atentie-slab); border: 1px solid var(--atentie); color: var(--cerneala);
  padding: .7rem .85rem; border-radius: var(--raza); font-size: var(--t-sm); margin: .3rem 0 .7rem;
}
/* Titlul casetei: UNUL singur, si e o clasa, nu un element.
   Regula veche prindea ORICE <strong> din casetă și îl făcea bloc portocaliu.
   Doua urmari, amandoua rele: trei „titluri" de aceeasi greutate intr-o casetă
   cu un singur avertisment real, si o frază ruptă în trei rânduri de fiecare
   dată când cineva accentua două cuvinte în mijlocul ei. */
.avertisment-permanent__titlu {
  margin: 0 0 .35rem; max-width: none;
  font-weight: var(--g-semi); color: var(--atentie);
}
/* Paragrafele din casetă: distanță mică între ele, fără spațiu la coadă. */
.avertisment-permanent p { margin: 0 0 .45rem; max-width: none; }
.avertisment-permanent > :last-child { margin-bottom: 0; }
/* Accentul din interiorul unei fraze rămâne accent, în linie. */
.avertisment-permanent strong { font-weight: var(--g-semi); }

/* ------------------------------------------------------------ documente */
.lista-documente { list-style: none; margin: .4rem 0; padding: 0; }
/* Rândul unui document: pictogramă, conținut, acțiuni.
   Pe ecran îngust acțiunile trec DEDESUBT. Cu două butoane alături de text pe
   375px, titlului îi rămâneau 12px de lățime și se rupea literă pe rând.

   RÂND, NU CARD. Documentul a fost un card cu chenar complet — adică un card
   într-o componentă într-o secțiune, toate cu aceeași greutate. Când totul e
   card, cardul nu mai spune nimic, iar o listă de 24 devine un teanc de cutii.
   Tabelul „Versiuni depuse" de pe prima pagină, care e listă cu linii subțiri,
   se citea vizibil mai ușor decât listele de documente. Acum documentul e un
   rând despărțit cu o linie fină, ca acela: cardul rămâne al componentei, iar
   ierarhia se vede din formă, nu se ghicește. */
.document {
  /* Randul se ridica usor cand e sub maus sau cand o actiune din el e
     focalizata: altfel, intr-o lista de 24, nu se vede pe care esti. */
  transition: background-color .12s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pictograma continut" ". actiuni";
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--linie-fina);
}
.lista-documente .document:last-child { border-bottom: none; }
.document__pictograma {
  width: 34px; height: 40px; flex: none; border-radius: var(--raza-mica); background: var(--culoare-accent-slab);
  color: var(--culoare-accent-inchis); display: grid; place-items: center; font-size: var(--t-xs); font-weight: var(--g-semi);
}
.document__pictograma { grid-area: pictograma; }
.document__continut { grid-area: continut; min-width: 0; }
/* Randul pe care esti.
   Prima varianta schimba doar culoarea conturului: utilizatorul a spus ca nu o
   vede. Semnalul are nevoie de SUPRAFATA, nu de o muchie.
   Randurile sunt transparente si stau pe hartia paginii (componenta nu are
   fond nici la hover — utilizatorul a cerut explicit doar bordura acolo), deci
   `--sigiliu-slab` (94,5%) coboara 3,2 puncte SI aduce nuanta verde — acelasi
   semnal pe care il dau butoanele secundare la atingere, deci deja invatat.
   Cursorul ramane cel obisnuit: randul nu e o legatura, actiunile lui sunt
   „Corecteaza" si „Elimina". Evidentierea spune „aici esti", nu „apasa". */
.document:hover, .document:focus-within {
  background: var(--sigiliu-slab);
}
.document__titlu { font-weight: var(--g-semi); font-size: var(--t-md); word-break: break-word; }
.document__meta { font-size: var(--t-xs); color: var(--culoare-text-slab); }
.document__actiuni {
  grid-area: actiuni; display: flex; gap: var(--s-2);
  align-items: center; justify-content: flex-start; flex-wrap: wrap;
}
/* Actiunile de pe randul unui document nu mai au nevoie de regula proprie:
   butonul secundar e neutru peste tot, de la clasa de baza. */

@media (min-width: 40rem) {
  /* Pe ecran lat încap pe același rând, cu acțiunile la dreapta. */
  .document {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "pictograma continut actiuni";
    align-items: start;
  }
  .document__actiuni { justify-content: flex-end; }
}

.eticheta-link { font-size: var(--t-xs); font-weight: var(--g-semi); padding: .1rem .4rem; border-radius: var(--raza-mica); }
.eticheta-link--nesigur { background: var(--culoare-atentie-slab); color: var(--culoare-atentie); }
.eticheta-link--deschis { background: var(--culoare-bine-slab); color: var(--culoare-bine); }

/* STAREA GOALA e o fila nescrisa, nu o scuza. Chenar punctat ca un loc de
   completat intr-un formular, text centrat, fara italice sterse. */
.gol {
  color: var(--culoare-text-slab); font-size: var(--t-md);
  border: 1px dashed var(--linie); border-radius: var(--raza);
  padding: var(--s-6) var(--s-4); text-align: center;
}

/* ------------------------------------------------------------- progres */
.progres { height: 8px; background: var(--hartie-adanca); border-radius: var(--raza-mica); overflow: hidden; }
.progres > span { display: block; height: 100%; background: var(--culoare-accent); }
.progres--bine > span { background: var(--culoare-bine); }

/* --------------------------------------------------------------- audit */
/* `.audit-evaluator` si antetul lui se definesc mai jos, in blocul dedicat.
   Aici stateau doua definitii din care nu supravietuia nimic. */
.audit-evaluator__nume { font-weight: var(--g-semi); }
.audit-evaluator__email { color: var(--culoare-text-slab); font-size: var(--t-sm); }
/* Contoarele raspund intrebarii nr. 1 a profesorului: „cate am?" (R2).
   Cifre mari, tabulare, in litera titlurilor, in verdele tablei. */
.audit-cifre {
  display: flex; flex-wrap: wrap; gap: 0; margin: .6rem 0;
  border-bottom: 1px solid var(--linie);
}
/* Pe panou, cifrele sunt un rezumat urmat de propria lui legenda: linia de
   jos ar taia legenda de cifrele pe care le explica. */
.audit-cifre--rezumat { border-bottom: 0; padding-bottom: 0; }
.audit-cifra { min-width: 0; padding: .7rem 1.8rem .7rem 0; }
.audit-cifra + .audit-cifra { padding-left: 1.8rem; border-left: 1px solid var(--linie-fina); }
.audit-cifra__valoare {
  font-family: var(--fata-titlu); font-size: 2.5rem; font-weight: var(--g-tare);
  line-height: 1.05; color: var(--sigiliu); font-variant-numeric: tabular-nums;
}
.audit-cifra__eticheta { font-size: var(--t-xs); color: var(--culoare-text-slab); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) {
  .audit-cifre { display: grid; grid-template-columns: repeat(3, 1fr); }
  .audit-cifra { padding: .6rem .7rem .6rem 0; }
  .audit-cifra + .audit-cifra { padding-left: .7rem; }
  .audit-cifra__valoare { font-size: 1.9rem; }
}

.cronologie { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.cronologie li { display: flex; gap: .7rem; padding: .35rem 0; border-bottom: 1px dashed var(--culoare-linie); }
.cronologie li:last-child { border-bottom: none; }
.cronologie__moment { color: var(--culoare-text-slab); flex: none; width: 10.5rem; font-variant-numeric: tabular-nums; }
.cronologie__ce { flex: 1; }

/* --------------------------------------------------------------- coduri */
/* `.cod-mare` si `.amprenta` se definesc O SINGURA DATA, in blocul DOVADA de
   mai jos. Aici stateau doua definitii din care nu se aplica NICIO proprietate
   — toate cele treisprezece erau rescrise acolo, cu alte culori si alte
   marimi. Cine citea regulile astea credea ca amprenta e gri neutru si codul
   e o pastila in cerneala; in pagina sunt amandoua in verdele de sigiliu. */
.link-copiabil {
  display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap;
}
.link-copiabil input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t-xs);
}

/* -------------------------------------------------------------- diverse */
.grila-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.separator { height: 1px; background: var(--culoare-linie); margin: 1rem 0; border: 0; }
.text-slab { color: var(--culoare-text-slab); }
.text-mic { font-size: var(--t-sm); }
/* Un titlu care trebuie sa arate ca o ETICHETA, nu ca un titlu.
   „Cuprins" era <h2 class="text-mic">: Lora, 700, strans la 14px — adica un
   titlu de sectiune turtit, care nu mai citea nici ca titlu, nici ca eticheta.
   Aici capata tratamentul de eticheta marunta, acelasi ca h4. */
.titlu-marunt {
  font-family: var(--fata-corp);
  font-size: var(--t-xs); font-weight: var(--g-semi);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cerneala-slab);
  margin: 0 0 var(--s-2);
}
.nowrap { white-space: nowrap; }

.subsol { border-top: 1px solid var(--culoare-linie); background: var(--culoare-card); padding: 1.5rem 0; font-size: var(--t-sm); color: var(--culoare-text-slab); }
.subsol__nota { max-width: 44rem; }
.etichetă-test { color: var(--culoare-atentie); font-weight: var(--g-semi); }

/* ------------------------------------------------------------- evaluator */
/* Antetul evaluatorului: o linie groasă sus, ca la capul unui formular oficial.
   Avea un gradient decorativ la 135°, unghiul-semnătură al oricărui panou generat. */
.antet-evaluator {
  background: var(--hartie-inalta); border: 1px solid var(--linie);
  border-top: 3px solid var(--cerneala); border-radius: var(--raza);
  padding: var(--s-6); margin-bottom: var(--s-4);
}
.antet-evaluator h1 { margin-bottom: .25rem; }
.antet-evaluator dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .75rem 0 0; font-size: var(--t-md); }
.antet-evaluator dt { color: var(--culoare-text-slab); }
.antet-evaluator dd { margin: 0; font-weight: var(--g-normal); }

/* Termenul se citeste ca forma, nu doar ca text (R8). */
/* Insigna de stare, nu titlu: forma de pastila, culoarea si numarul tabular
   spun deja ce e. La 700 concura cu numele partajarii de langa ea. */
.contor-fereastra {
  /* `width: fit-content` nu e de prisos pe langa `inline-block`.
     Pe ecranul evaluatorului pastila e chiar elementul <dd> dintr-o lista in
     grila; un element de grila e „blocificat", deci `inline-block` devine
     `block` si pastila se intindea pe toata coloana — 794px pentru „valabil
     inca 13 zile". `fit-content` o strange inapoi la textul ei, in ambele
     asezari. */
  display: inline-block; width: fit-content;
  font-weight: var(--g-semi); font-size: var(--t-sm);
  color: var(--sigiliu); background: var(--sigiliu-slab);
  border: 1px solid var(--linie); border-radius: var(--raza-pastila); padding: .2rem .7rem;
  font-variant-numeric: tabular-nums;
}
.contor-fereastra--urgent { color: var(--atentie); background: var(--atentie-slab); border-color: var(--atentie); }

/* --------------------------------------------------------- diagnosticare */
.verificare { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--culoare-linie); }
.verificare:last-child { border-bottom: none; }
.verificare__semn { flex: none; width: 1.4rem; font-weight: var(--g-semi); }
.verificare--bine .verificare__semn { color: var(--culoare-bine); }
.verificare--atentie .verificare__semn { color: var(--culoare-atentie); }
.verificare--eroare .verificare__semn { color: var(--culoare-eroare); }
.verificare__nume { font-weight: var(--g-semi); font-size: var(--t-md); }
.verificare__valoare { font-size: var(--t-sm); color: var(--culoare-text-slab); }
.verificare__sfat { font-size: var(--t-sm); color: var(--culoare-atentie); margin-top: .15rem; }

@media (max-width: 40rem) {
  /* ANTETUL NU MAI OCUPĂ UN SFERT DIN ECRAN.
     Avea 208px din 812 — 26%, permanent, prin `position: sticky`. Istoric, aici
     au stat două leacuri care nu mai sunt: navigația cu derulare laterală
     (scoasă — se RUPE pe rânduri, vezi mai jos) și antetul „lipicios doar cât
     să nu se piardă orientarea". Azi antetul e STATIC pe telefon (blocul de
     46rem, mai jos), iar orientarea o ține antetul de secțiune, lipicios el.
     Blocul acesta mai păstrează doar înghesuirea: spații mai mici, insigna
     ascunsă, titlurile coborâte o treaptă. */
  .antet-site__interior { gap: var(--s-3); padding-top: var(--s-2); padding-bottom: 0; }
  .marca__text small { display: none; }
  .utilizator { margin-left: auto; font-size: var(--t-xs); }
  .utilizator .insigna { display: none; }

  /* Navigatia se RUPE pe randuri, nu se deruleaza lateral.
     Era o fasie cu derulare: 498px de continut intr-un cadru de 335, deci
     „Export" si „Panou de test" existau, dar nu se vedeau — singurul indiciu
     era un „Ex" taiat la marginea din dreapta. Pentru un public cu incredere
     digitala mica, navigatie ascunsa in spatele unui glisaj lateral inseamna
     navigatie inexistenta: nimeni nu trage de un antet ca sa vada daca mai e
     ceva acolo. Doua randuri vizibile bat un rand pe jumatate ascuns. */
  .navigatie {
    width: 100%; margin-left: 0; order: 3; gap: 0 var(--s-2);
    flex-wrap: wrap;
  }
  /* Regula pentru bara de derulare a plecat odata cu derularea. */
  .navigatie a { white-space: nowrap; flex: none; }

  .card { padding: var(--s-4); }
  .cronologie li { flex-direction: column; gap: 0; }
  .cronologie__moment { width: auto; font-size: var(--t-xs); }
  h1 { font-size: var(--t-xl); }
  h2 { font-size: var(--t-lg); }
}

@media print {
  .antet-site, .subsol, .navigatie, .randuri-butoane, .bara-ceas, .sari-la-continut { display: none !important; }
  body { background: var(--hartie-inalta); font-size: 11pt; }
  .card { border: none; box-shadow: none; padding: 0; }
  .sectiune { break-inside: avoid; }
}

/* ------------------------------------------------------- confirmare */
/* Pagina de confirmare de pe server (fara JavaScript) si dialogul din
   pagina (cu JavaScript) arata la fel, deliberat: acelasi titlu, acelasi
   text, acelasi buton. Utilizatorul nu trebuie sa invete doua interfete
   pentru aceeasi decizie. */
.confirmare__detalii {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem;
  margin: 1rem 0; padding: .9rem 1rem;
  background: var(--culoare-fundal); border-radius: var(--raza-mica);
  font-size: var(--t-md);
}
.confirmare__detalii dt { color: var(--culoare-text-slab); }
.confirmare__detalii dd { margin: 0; font-weight: var(--g-normal); }

.dialog {
  border: 1px solid var(--culoare-linie); border-radius: var(--raza);
  padding: 0; max-width: 30rem; width: calc(100vw - 2rem);
  color: var(--culoare-text); background: var(--culoare-card);
  box-shadow: 0 10px 40px rgba(20, 30, 50, .22);
}
.dialog::backdrop { background: rgba(20, 30, 50, .45); }
.dialog__corp { padding: 1.25rem; margin: 0; }
.dialog__titlu { font-size: var(--t-lg); margin-bottom: .5rem; }
.dialog__text { color: var(--culoare-text-slab); margin-bottom: 1.1rem; }
.dialog__actiuni { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Tinte confortabile: decizia se ia cel mai des pe telefon, cu degetul mare. */
.dialog__actiuni .buton { min-height: 2.75rem; flex: 1 1 9rem; justify-content: center; }

kbd {
  font: inherit; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--culoare-fundal); border: 1px solid var(--culoare-linie);
  border-radius: var(--raza-mica); padding: .05em .35em; white-space: nowrap;
}

/* Avertisment de atenționare, mai blând decât cel al componentelor declarative:
   acolo încărcarea e oprită, aici e permisă dar cere grijă. Diferența trebuie
   să se vadă, altfel utilizatorul le tratează la fel și le ignoră pe amândouă. */
.avertisment-permanent--usor {
  background: var(--culoare-accent-slab);
  border-color: var(--linie);
  color: var(--cerneala);
}
.avertisment-permanent--usor strong { color: var(--culoare-accent-inchis); }

/* Modelele descărcabile din blocurile de avertisment. Legăturile stau pe rând
   propriu, cu țintă confortabilă: se apasă cu degetul, pe telefon. */
.randuri-modele {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem;
}
.randuri-modele a {
  /* 2,75rem, ca toate celelalte ținte: sunt butoane de descărcare, nu
     linkuri într-o frază. Măsurat: aveau 36px, adică 8 sub prag, și apar
     de cinci ori pe pagina portofoliului. */
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .3rem .7rem; border-radius: var(--raza-control);
  background: var(--culoare-card); border: 1px solid currentColor;
  font-size: var(--t-sm); font-weight: var(--g-normal); text-decoration: none;
}
.randuri-modele a::before { content: "↓"; margin-right: .35rem; }
/* Varianta trebuie sa stea DUPA baza: aceeasi specificitate, decide ordinea.
   Scrisa deasupra, `display: block` era anulat de `display: flex` din baza. */
.randuri-modele--bloc { display: block; margin-top: .4rem; }

/* --------------------------------------------------- adăugarea documentelor */
/* Acțiunea principală a produsului. Trebuie să arate ca un buton, nu ca o
   notă de subsol — până acum folosea aceeași clasă ca textul de ajutor de
   deasupra ei, cu 22px înălțime. */
.adauga { margin-top: .6rem; }
.adauga__buton {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .55rem 1.1rem;
  background: var(--culoare-accent); color: var(--hartie);
  border-radius: var(--raza-control); font-weight: var(--g-semi); font-size: var(--t-md);
  cursor: pointer; list-style: none; user-select: none;
}
.adauga__buton::-webkit-details-marker { display: none; }
.adauga__buton::before { content: "+"; font-size: 1.15em; line-height: 1; }
.adauga__buton:hover { background: var(--culoare-accent-inchis); }
.adauga[open] > .adauga__buton { border-radius: var(--raza-control) var(--raza-control) 0 0; }
.adauga[open] > .adauga__buton::before { content: "×"; }
.adauga__corp {
  border: 1px solid var(--culoare-accent);
  border-radius: 0 var(--raza-control) var(--raza-control) var(--raza-control); padding: 1rem; margin-top: -1px;
  background: var(--culoare-card);
}

/* Butonul care își spune că lucrează. Fără el, o încărcare de 20 MB pe 4G
   arată ca o pagină moartă, iar utilizatorul apasă din nou sau închide. */
.buton[aria-busy="true"] { opacity: .7; cursor: progress; }



/* =====================================================================
   DOVADA — singurul loc unde produsul își permite o personalitate
   =====================================================================
   Amprenta, codul de verificare și starea „blocată" sunt lucrul pe care acest
   produs îl face și un folder partajat nu. Merită să arate ca ceva, nu ca încă
   un text gri. Verdele de sigiliu apare NUMAI aici — de aceea înseamnă ceva
   când apare.
   ===================================================================== */

.amprenta,
.cod-mare,
code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.amprenta {
  font-size: var(--t-xs); word-break: break-all; color: var(--cerneala-slab);
  letter-spacing: .01em;
}

/* Codul de verificare tipărit pe hârtie: se citește cu ochiul, cifră cu cifră,
   de un inspector care îl transcrie. Spațiat, mare, cu chenar — ca o ștampilă. */
.cod-mare {
  font-size: var(--t-xl); letter-spacing: .14em; font-weight: var(--g-tare);
  color: var(--sigiliu); background: var(--sigiliu-slab);
  border: 1px solid var(--sigiliu);
  padding: var(--s-2) var(--s-4); border-radius: var(--raza); display: inline-block;
}

/* =====================================================================
   Insigne: majuscule mici, chenar subțire. Erau pastile pline de culoare,
   care concurau cu acțiunile.
   ===================================================================== */
.insigna {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: var(--t-xs); font-weight: var(--g-semi);
  padding: .1rem var(--s-2); border-radius: var(--raza-mica);
  border: 1px solid currentColor; background: transparent;
  letter-spacing: .02em;
}
.insigna--activ    { color: var(--bine); background: var(--bine-slab); }
.insigna--expirat  { color: var(--cerneala-slab); background: var(--hartie-adanca); }
.insigna--revocat  { color: var(--eroare); background: var(--eroare-slab); }
.insigna--atentie  { color: var(--atentie); background: var(--atentie-slab); }
/* „Verificat" si „blocat" statuu mai SUS, inaintea regulii de baza, deci
   `background: transparent` de acolo le stergea fondul verde: insigna unei
   versiuni blocate se desena goala, ca una neutra. Aceeasi specificitate,
   regula de jos castiga — de asta ordinea conteaza. */
.insigna--verificat,
.insigna--blocat   { color: var(--sigiliu); background: var(--sigiliu-slab); }

/* Antetul de tabel: majuscule mici, linie groasă dedesubt. Ca într-un opis.
   Are DEJA trei semnale — majuscule, spatiere intre litere si cerneala stinsa.
   Al patrulea, 700, nu mai adauga nimic si face capul de tabel sa concureze cu
   titlul sectiunii de deasupra lui. */
.tabel th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cerneala-slab); font-weight: var(--g-semi);
  border-bottom: 2px solid var(--cerneala);
}
.tabel td { border-bottom: 1px solid var(--linie-fina); }

/* Mișcarea: scurtă, fără elasticitate, doar acolo unde comunică o schimbare
   de stare. Și se oprește complet dacă sistemul o cere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .sectiune > summary::before { transition: none; }
}

/* ------------------------------------------------- cronologia pe zile */
.zi { border-bottom: 1px solid var(--linie-fina); }
.zi:last-of-type { border-bottom: none; }
.zi__antet {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; min-height: 2.75rem;
  cursor: pointer; list-style: none; font-size: var(--t-sm);
}
.zi__antet::-webkit-details-marker { display: none; }
.zi__antet::before {
  content: "▸"; color: var(--cerneala-slab); flex: none;
  transition: transform .12s cubic-bezier(.22,1,.36,1);
}
.zi[open] > .zi__antet::before { transform: rotate(90deg); }
.zi__data { font-weight: var(--g-normal); color: var(--cerneala-slab); font-variant-numeric: tabular-nums; }
.zi__rezumat { color: var(--cerneala-slab); margin-left: auto; text-align: right; }
.zi .cronologie { padding-bottom: var(--s-3); }
/* Deschiderile de documente sunt cele mai multe și cele mai puțin interesante
   una câte una: rămân vizibile, dar nu concurează cu evenimentele rare. */
.cronologie--marunt .cronologie__ce strong { font-weight: var(--g-normal); }
.cronologie--marunt { color: var(--cerneala-slab); }

/* Propoziția care răspunde la întrebarea pentru care s-a deschis ecranul. */
.raspuns {
  font-size: var(--t-lg); line-height: 1.5; max-width: 60ch;
  margin: 0; color: var(--cerneala);
}
.audit-rezumat { font-size: var(--t-sm); margin: var(--s-2) 0 0; }

/* Starea partajării: aliniată la stânga pe telefon, la dreapta pe ecran lat.
   Alinierea la dreapta era scrisă inline și, într-o coloană îngustă, arunca
   insigna în mijlocul nimicului. */
.stare-partajare { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
@media (min-width: 40rem) { .stare-partajare { align-items: flex-end; } }

/* Evaluatorul: cine, cât a parcurs, apoi acțiunea. Butonul de revocare stătea
   între nume și bara de progres, adică fix în drumul citirii. */
/* Rand, nu card — acelasi motiv ca la documente: pe prima pagina erau
   carduri in cardul „Cine are acces", si toate aveau aceeasi greutate. */
.audit-evaluator {
  padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-fina);
}
.audit-evaluator:last-child { border-bottom: none; padding-bottom: var(--s-2); }
.audit-evaluator__antet { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
.audit-evaluator__cine { flex: 1; min-width: 12rem; }
.audit-evaluator__antet form { order: 3; width: 100%; }
@media (min-width: 40rem) {
  .audit-evaluator__antet form { order: 0; width: auto; margin-left: auto; }
}

/* Prima deschidere: un început, nu un inventar. */
.card--start { border-color: var(--cerneala); border-top-width: 3px; }
.start { margin: var(--s-4) 0 var(--s-3); padding-left: 0; list-style: none; counter-reset: pas; }
.start li {
  counter-increment: pas; position: relative;
  padding: var(--s-2) 0 var(--s-2) 2.5rem; border-bottom: 1px solid var(--linie-fina);
}
.start li:last-child { border-bottom: none; }
.start li::before {
  content: counter(pas); position: absolute; left: 0; top: var(--s-2);
  width: 1.75rem; height: 1.75rem; border-radius: var(--raza-mica);
  background: var(--cerneala); color: var(--hartie);
  display: grid; place-items: center;
  font-weight: var(--g-tare); font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- erori pe câmp */
/* Mesajul stă LÂNGĂ câmpul greșit, nu doar în capul paginii. Pe formularul de
   finalizare, care are peste douăzeci de câmpuri și se întinde pe câteva
   ecrane, „Codul numeric personal nu este valid" afișat sus nu spunea nimănui
   unde să se uite. */
.camp__eroare {
  display: block; margin: var(--s-1) 0;
  font-size: var(--t-sm); font-weight: var(--g-semi); color: var(--eroare);
}
.camp__eroare::before { content: "▲ "; }
[aria-invalid="true"] {
  border-color: var(--eroare);
  /* Culoarea singură nu ajunge: cine nu distinge roșul trebuie să vadă tot că
     acel câmp e cel greșit. Chenarul mai gros o spune fără culoare. */
  border-width: 2px;
}
[aria-invalid="true"]:focus-visible { outline-color: var(--eroare); }
/* Ținta ancorei: câmpul greșit nu trebuie să ajungă lipit de antetul lipicios. */
[id^="camp-"] { scroll-margin-top: 6rem; }

/* Documentele din fișa de evaluare: mai strânse decât în editor — inspectorul
   le parcurge, nu le administrează. */
.lista-documente--fisa { margin: 0 0 var(--s-3); }
.lista-documente--fisa .document { padding: var(--s-2) var(--s-3); }
.vazut { color: var(--sigiliu); font-weight: var(--g-normal); }

/* =====================================================================
   Ghidul de conformitate — raspunsul permanent la „am tot ce trebuie?"
   Indicatorii raman neutri (D-054): punct, nu rosu; bifa, nu confetti.
   ===================================================================== */
.lista-conformitate { list-style: none; margin: 0; padding: 0; }
.lista-conformitate__rand {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--linie-fina);
  font-size: var(--t-md);
}
.lista-conformitate__rand:last-child { border-bottom: none; }
/* Semnul ✓ / ○ era la 700, deci mai greu decat randul pe care il insoteste —
   si apare de sapte ori pe acelasi ecran. Un indicator de stare se citeste din
   FORMA si din CULOARE, nu din grosime: bifa verde spune „gata", cerculetul
   stins spune „inca nu". Grosimea nu adauga nimic si fura atentia de la text. */
.lista-conformitate__semn {
  flex: none; width: 1.2rem; text-align: center;
  font-weight: var(--g-normal); color: var(--cerneala-slab);
}
.e-indeplinit .lista-conformitate__semn { color: var(--bine); }
/* Starea a treia: neindeplinita SI blocanta. Semnul trece pe chihlimbar, iar
   randul poarta insigna „obligatorie" (pusa din sablon). Randurile doar
   recomandate raman cu cercul stins — trei stari care se deosebesc din forma
   si culoare, nu din citirea detaliului. */
.lista-conformitate__rand--obligatoriu .lista-conformitate__semn { color: var(--atentie); }
.e-indeplinit { color: var(--cerneala-slab); }
/* „Rezolvă" e linkul pe care îl apasă cineva ca să repare exact lucrul care
   îl oprește din depunere. Avea 22px înălțime — jumătate din prag. */
.lista-conformitate__link {
  margin-left: auto; flex: none; font-size: var(--t-sm);
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 var(--s-2);
}

/* R3: markerul de creta galbena — EXACT un rand pe pagina, pasul urmator.
   Daca ar marca totul, n-ar marca nimic. */
.lista-conformitate__rand--urmator {
  background: var(--creta-galbena); border: 1px solid var(--linie);
  border-radius: var(--raza-mica); padding: .55rem .8rem; margin: .3rem -.8rem 0;
  border-bottom: 1px solid var(--linie);
}
.lista-conformitate__rand--urmator .lista-conformitate__semn { color: var(--cerneala); }
/* Era la .72rem, adica 11,52px — SUB podeaua de 13px pe care foaia asta si-o
   pune singura mai sus („publicul are varsta medie mare, iar metadatele de
   10px nu se citeau"). Regula proprie, incalcata exact pe randul cel mai
   important din panou. Si 700 nu era nevoie: majusculele plus spatierea intre
   litere spun deja ca e o eticheta. */
.pas-urmator-eticheta {
  display: block; font-size: var(--t-xs); font-weight: var(--g-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--cerneala);
  margin-bottom: .15rem;
}

/* =====================================================================
   Turul de bun venit. Cardul static e stilul normal; dialogul de mai jos
   apare doar cu JavaScript. Tinta luminata primeste conturul sigiliului.
   ===================================================================== */
.tur__pasi { margin: 0 0 var(--s-4); padding-left: 1.4rem; }
.tur__pasi li { margin-bottom: var(--s-3); }
.tur__actiuni { margin: 0; }

/* NEMODAL, jos in dreapta: pagina ramane vie si vizibila, iar panoul sta ca
   un ghid pe margine, nu ca un perete peste continut. Varianta modala acoperea
   cu val exact pagina pe care o descria, iar tinta luminata ramanea sub val —
   dialogul modal traieste in stratul de sus, deasupra ORICARUI element al
   paginii, oricat i-ai ridica z-index-ul. */
.tur-dialog {
  position: fixed; right: 1.25rem; bottom: 1.25rem; left: auto; top: auto;
  margin: 0; z-index: 60;
  border: 1px solid var(--linie); border-top: 4px solid var(--sigiliu);
  border-radius: var(--raza);
  padding: 1.4rem 1.4rem 1.1rem;
  max-width: 26rem; width: calc(100vw - 2.5rem);
  font-size: var(--t-md); line-height: 1.55;
  background: var(--hartie-inalta); color: var(--cerneala);
  box-shadow: 0 12px 40px oklch(28% 0.05 170 / 0.25);
}
@media (max-width: 46rem) {
  /* pe telefon: foaie lipita de marginea de jos, pe toata latimea */
  .tur-dialog { right: .6rem; left: .6rem; bottom: .6rem; max-width: none; width: auto; }
}
/* LOC DE DERULARE SUB ULTIMUL CARD, cat tine turul.
   Panoul e `position: fixed`, deci in afara fluxului: ultimul element al
   paginii nu are unde sa urce deasupra lui, fiindca documentul se termina.
   Masurat: pasul 5 lasa 72px din `.incheiere` sub panou. Cat turul e deschis,
   corpul primeste in coada exact inaltimea panoului (pusa din JavaScript in
   `--tur-spatiu`), deci si ultima tinta poate iesi la vedere. */
body.tur-deschis { padding-bottom: calc(var(--tur-spatiu, 0px) + var(--s-8)); }
.tur-dialog__pas { min-height: 5.5rem; }
.tur-dialog__subsol {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap;
}
.tur-dialog__contor {
  font-size: var(--t-xs); color: var(--cerneala-slab);
  text-transform: uppercase; letter-spacing: .05em;
}
.tur-dialog__butoane { display: flex; gap: var(--s-2); flex-wrap: wrap; }
/* Tinta pasului: contur verde cu un halou de verde pal in jur, ca sa se vada
   si pe hartia paginii, si peste carduri. */
.tur-tinta {
  outline: 3px solid var(--sigiliu); outline-offset: 3px;
  border-radius: var(--raza-mica);
  box-shadow: 0 0 0 8px oklch(94.5% 0.018 165 / 0.9);
}
/* Aici a stat o regula pentru tintele din antetul verde-inchis, unde verdele de
   sigiliu ar fi fost invizibil. A ramas fara obiect cand pasii au incetat sa mai
   lumineze linkuri de navigatie: tintele sunt acum carduri din corpul paginii.
   Se scoate, ca sa nu para ca turul mai atinge antetul. */

/* Starea cozii de incarcare: sub buton, cu rol de status pentru cititoare. */
.coada-stare {
  margin: var(--s-3) 0 0; font-size: var(--t-sm);
  border-left: none; padding: var(--s-2) var(--s-3);
  background: var(--hartie-adanca); border-radius: var(--raza);
}
/* Bara fisierului curent, sub starea cozii. `accent-color` coloreaza bara
   nativa in verdele de sigiliu, fara sa o redesenam — o bara de progres e un
   control standard si trebuie sa arate ca unul. */
.progres-incarcare {
  display: block; width: 100%; max-width: 24rem; height: .5rem;
  margin-top: var(--s-2); accent-color: var(--sigiliu);
}
/* `display: block` de mai sus bate regula `[hidden] { display: none }` a
   browserului — orice declaratie de autor invinge foaia user-agent, indiferent
   de specificitate. Fara randul acesta, scriptul punea `hidden` degeaba: bara
   aparea goala inainte de primul octet si ramanea plina, inghetata, deasupra
   raportului de fisiere picate. */
.progres-incarcare[hidden] { display: none; }

/* Codul QR de la inrolarea celui de-al doilea factor: pe carton alb, cu
   chenar portant — se scaneaza de pe ecran, contrastul e al lui, nu al temei. */
.cod-qr { margin: .6rem 0; }
.cod-qr svg { display: block; border: 1px solid var(--linie); border-radius: var(--raza-mica); }

/* =====================================================================
   ARHITECTURA NOUA (analiza „De la acordeon la sarcini"):
   lista plata cu navigare laterala + cutia „De aranjat" + poarta unica
   de incarcare. Acordeonul de sectiuni a disparut — ansamblul se VEDE.
   ===================================================================== */

/* grila editorului: navigarea lipicioasa + continutul */
/* Coloana de navigare e redusa la litere (vezi blocul NAVIGAREA LATERALA de
   mai jos): 4,5rem in loc de 13rem, adica noua rem intorsi in pagina. */
/* Editorul e o coloana singura.
   Aici statea o bara de navigare cu literele A–E. A fost scoasa: la un salt
   catre secțiunea B evidentierea ramanea pe A (ancora aseaza secțiunea la 80px
   de sus, pragul de decizie era la 82 — doi pixeli decideau raspunsul), si
   lua 15rem pentru cinci litere si cinci cifre. Titlurile de secțiune din
   pagina sunt oricum mari si caramizii; ele fac navigarea. */
.editor-sectiuni { display: block; }

/* sectiunile plate */
.sectiune-plata { margin-bottom: 1.6rem; scroll-margin-top: 5rem; }
/* Antetul de secțiune ramane lipit sus cat timp derulezi prin secțiune.
   Motivul: componentele sunt lungi, iar dupa doua ecrane de documente nu se mai
   stie in ce secțiune esti — literele si titlul au ramas departe, sus.
   Se lipeste SUB antetul site-ului, care are 62px si sta la randul lui lipit.
   Are nevoie de fond opac: fara el, continutul s-ar vedea prin literele lui.
   `z-index` sub cel al antetului site-ului (40), ca sa treaca pe sub el, si
   peste continut. Marginile negative si umplutura la loc: fondul acopera si
   spatiul lateral, ca sa nu se vada text pe sub margini. */
.sectiune-plata__antet {
  position: sticky; top: var(--antet-inaltime, 62px); z-index: 2;
  background: var(--hartie);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--catalog);
  padding: var(--s-3) var(--s-2) var(--s-3);
  margin: 0 calc(var(--s-2) * -1) var(--s-4);
}
.sectiune-plata__antet h2 {
  margin: 0; flex: 1; min-width: 0;
  color: var(--catalog); font-size: var(--t-xl);
}
/* Sub antetele lipicioase, nu sub marginea ferestrei: pe desktop stau
   suprapuse antetul site-ului (62px) si cel de sectiune (~52px), deci o
   saritura la ancora cu doar 5rem lasa inceputul componentei sub ele.
   Mobilul are alta suma (antetul de sectiune singur, pana la ~125px pe
   sectiunea B) si primeste valoarea lui in blocul de 46rem. */
.componenta { scroll-margin-top: calc(var(--antet-inaltime, 62px) + 4.5rem); }
/* Cele doua cai de adaugare, una langa alta la capatul componentei. */
.componenta__actiuni {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3);
}
.componenta__actiuni .adauga { margin-top: 0; flex: 0 0 auto; }
/* Cand formularul de link se deschide, iese pe randul lui, pe toata latimea.
   Altfel ramane element de flex langa buton si se strange: masurat la 375px,
   formularul primea 146px, iar butonul lui „Adauga linkul" cobora pe doua
   randuri la 112px. `flex-basis` pe un rand cu `wrap`, nu margine — o margine
   s-ar aduna la latime si ar impinge pagina in lateral (lectie veche a foii). */
.componenta__actiuni .adauga[open] { flex: 1 0 100%; }

.componenta__adauga {
  margin-left: auto; flex: none; font-weight: var(--g-normal); font-size: var(--t-sm);
  color: var(--sigiliu); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .5rem;
}
.componenta__adauga:hover { text-decoration: underline; }
.componenta__ajutor-rand { font-size: var(--t-sm); color: var(--cerneala-slab); margin: .2rem 0 .4rem; max-width: 65ch; }
.componenta__exemple { margin: 0 0 .5rem; }
.cip-exemplu {
  display: inline-block; font-size: var(--t-xs); color: var(--cerneala-slab);
  border: 1px dashed var(--linie); border-radius: var(--raza-pastila); padding: .12rem .6rem;
  margin: 0 .3rem .3rem 0; background: var(--hartie);
}

/* cutia „De aranjat" + triajul */
.card--triaj { border-color: var(--sigiliu); }
.lista-triaj { list-style: none; margin: 0; padding: 0; }
.triaj { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px dashed var(--linie-fina); }
.triaj:last-child { border-bottom: none; }
.triaj__forma { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.triaj__titlu input { width: 100%; max-width: 34rem; font-weight: var(--g-semi); }
.triaj__campuri { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.triaj__camp { display: flex; flex-direction: column; gap: .15rem; }
.triaj__camp select, .triaj__camp input { min-height: 2.75rem; }
/* COLOANELE AU LATIME, NU SE IAU DUPA TEXT.
   Lista de componente se dimensiona dupa continut, iar continutul difera de la
   rand la rand: unul are eticheta „Componenta (propusă)" si o propunere lunga,
   altul doar „Componenta". Masurat: „Luna" statea la x=757 pe primul rand si
   la x=689 pe al doilea — fiecare rand cu alta grila. Cu latimi fixate pe
   coloane, randurile se aliniaza intre ele si ochiul coboara pe verticala. */
.triaj__campuri > .triaj__camp:first-child { flex: 1 1 16rem; max-width: 26rem; }
.triaj__campuri > .triaj__camp:first-child select { width: 100%; }
/* Latimea coloanei o da COLOANA, nu eticheta: „Anul dobândirii (găsit în
   nume)" e mai lat decat campul si, lasat liber, intindea coloana doar pe
   randurile cu an ghicit — 191px intr-un rand, 124 in celalalt. Eticheta
   se rupe pe doua randuri; campurile stau aliniate jos (`align-items:
   flex-end` pe container), deci randul ramane drept. */
.triaj__camp--an { flex: none; width: 8rem; }
.triaj__camp--an .text-mic { white-space: normal; }
.triaj__camp--an input { width: 7rem; }
.triaj__sterge { flex: none; }

/* zona mare de adaugare (pagina „Adauga documente") */
.zona-adauga {
  border: 2px dashed var(--linie); border-radius: var(--raza);
  background: var(--hartie); padding: 1.6rem 1.2rem; text-align: center;
}
.zona-adauga__eticheta { display: block; margin-bottom: .8rem; cursor: pointer; }
.zona-adauga__eticheta strong { font-family: var(--fata-titlu); font-size: var(--t-xl); display: block; margin-bottom: .25rem; }
.zona-adauga__eticheta .text-slab { display: block; font-size: var(--t-sm); }
.zona-adauga input[type="file"] { margin: 0 auto; max-width: 100%; }
/* Fișiere trase deasupra zonei. Nu doar culoare: și chenarul devine continuu,
   ca semnalul să ajungă și la cine nu distinge nuanțele de verde. */
.zona-adauga--peste {
  border-style: solid;
  border-color: var(--sigiliu);
  background: var(--sigiliu-slab);
}
.zona-adauga__anunt { display: block; margin-top: var(--s-3); font-size: var(--t-sm); font-weight: var(--g-normal); }

/* Panza de semnat.
   Avea `width="600"` in marcaj si NICIO regula de stil, deci se desena la 600px
   pe orice ecran. Pe un telefon de 375px iesea din pagina cu peste 200px, iar
   pasul semnaturii e obligatoriu — nu se poate sari peste el. Ironia: pe
   telefon se semneaza cu degetul, adica exact acolo unde panza trebuie sa
   incapa cel mai bine.
   Suprafata de desen ramane 600x200 (atributele din marcaj); se schimba doar
   marimea afisata, iar `semnatura.js` inmulteste deja coordonatele cu
   `panza.width / r.width`, deci trasatura ramane exacta.
   `touch-action: none` impiedica browserul sa deruleze pagina cand degetul
   trage peste panza. */
#panza-semnatura {
  display: block; width: 100%; max-width: 600px; height: auto;
  aspect-ratio: 3 / 1; touch-action: none;
  border: 1px solid var(--linie); border-radius: var(--raza-mica);
  background: var(--hartie-inalta);
}

/* wizardul de blocare: bara de pasi + randul de jos */
.fz-pasi { display: flex; gap: .35rem; flex-wrap: wrap; margin: .6rem 0 0; padding: 0; list-style: none; font-size: var(--t-xs); }
.fz-pasi li { border: 1px solid var(--linie-fina); border-radius: var(--raza-pastila); padding: .2rem .65rem; color: var(--cerneala-slab); background: var(--hartie-inalta); }
.fz-pasi li.e-facut { border-color: var(--sigiliu); color: var(--sigiliu); }
.fz-pasi li.e-acum { background: var(--sigiliu); border-color: var(--sigiliu); color: var(--creta); font-weight: var(--g-tare); }
.fz-jos { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linie-fina); padding-top: .9rem; margin-top: 1.1rem; }

/* =====================================================================
   Ecranul evaluatorului pe trei coloane (U02 §3.4): opis · vizor · fisa.
   Sub 1100px, coloanele devin sectiuni cu taburi de salt.
   ===================================================================== */
.ev-taburi { display: none; gap: .4rem; margin: 0 0 .8rem; }
.ev-taburi a { flex: 1; text-align: center; text-decoration: none; font-weight: var(--g-semi);
  border: 1px solid var(--linie); border-radius: var(--raza-control); padding: .5rem; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--cerneala); }
/* A treia coloana avea 13rem, adica 176px de continut — mai putin decat cere
   propriul ei buton principal, „Verdictul si semnarea", care iesea 174x66px,
   adica pe doua randuri. La 15rem eticheta incape pe un rand, iar vizorul din
   mijloc ramane peste 650px la 1280px. */
.ev-grila { display: grid; grid-template-columns: 19rem minmax(0,1fr) 15rem; gap: 1rem; align-items: start; }
.ev-col { background: var(--hartie-inalta); border: 1px solid var(--linie); border-radius: var(--raza); padding: 1rem; }
.ev-opis { position: sticky; top: 4.2rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.ev-fisa { position: sticky; top: 4.2rem; }
.ev-col__antet { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.ev-col h2 { font-size: var(--t-lg); margin: 0; }
.ev-sectiune { margin-bottom: .9rem; }
/* Avea cinci semnale deodata pe cel mai mic text din pagina: 13px, majuscule,
   spatiere, cerneala stinsa SI 700. Ultimul nu mai adauga nimic. La fel ca la
   `.tabel th` si `.editor-salt__titlu`. */
.ev-sectiune__titlu { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cerneala-slab); font-weight: var(--g-semi); border-bottom: 2px solid var(--cerneala);
  padding-bottom: .25rem; margin-bottom: .4rem; }
.ev-comp { margin-bottom: .55rem; }
/* Numele componentei NU se mai taie cu trei puncte. Inspectorul scaneaza
   coloana asta ca sa gaseasca unde e ce cauta; „Activitate metodica, stiint…"
   nu-i spune daca acolo sunt publicatiile. Doua randuri sunt mai ieftine decat
   o cautare gresita. Bifa urca la primul rand, ca sa nu pluteasca la mijloc. */
.ev-comp__rand { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--t-sm); }
.ev-comp__nume { flex: 1; min-width: 0; line-height: 1.35; }
.ev-comp__numar { color: var(--cerneala-slab); font-variant-numeric: tabular-nums; }
.ev-bifa { display: inline-flex; align-items: center; gap: .25rem; color: var(--sigiliu); font-weight: var(--g-semi); }

/* Cele trei stari din fisa (verificat / cu observatie / nu se aplica) erau
   imbracate in `.insigna` — clasa pastilei de STARE, nu a unui control.
   Trei urmari: tinta masurata 37,8px (sub angajamentul de 44), aceeasi haina
   pentru „ce am ales" si pentru „ce raporteaza sistemul", si stiluri scrise in
   atribut. Acum e un control propriu. */
.ev-stare { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.ev-stare__optiune {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 var(--s-3);
  border: 1px solid var(--linie); border-radius: var(--raza-control);
  font-size: var(--t-sm); font-weight: var(--g-normal); color: var(--cerneala);
  background: var(--hartie-inalta); cursor: pointer;
}
.ev-stare__optiune:hover { border-color: var(--sigiliu); }
/* Starea aleasa: fond si contur, nu doar bulina. Cine se uita de la un metru
   trebuie sa vada ce a bifat, fara sa caute punctul din cerc.
   Clasa vine din server (`--aleasa`), nu din `:has()`. `:has()` lipseste pe
   browserele mai vechi de 2022, adica exact pe dispozitivele publicului
   acestui produs; acolo starea aleasa n-ar fi fost marcata deloc. `:has()`
   ramane pe langa, pentru raspunsul imediat la apasare, inainte ca formularul
   sa se trimita. */
.ev-stare__optiune--aleasa,
.ev-stare__optiune:has(input:checked) {
  background: var(--sigiliu-slab); border-color: var(--sigiliu); color: var(--sigiliu);
  font-weight: var(--g-semi);
}
.ev-stare__optiune:has(input:focus-visible) { outline: 3px solid var(--sigiliu); outline-offset: 2px; }
.ev-stare__optiune:has(input:disabled) { cursor: default; opacity: .55; }
.ev-stare__optiune input { margin: 0; }
.ev-lista { list-style: none; margin: .15rem 0 0 1.5rem; padding: 0; }
.ev-doc { padding: .2rem 0; font-size: var(--t-sm); }
.ev-doc__link { text-decoration: none; color: var(--cerneala); }
a.ev-doc__link:hover { text-decoration: underline; }
.ev-doc.e-activ { background: var(--creta-galbena); border-radius: var(--raza-mica); padding: .25rem .4rem; margin-left: -.4rem; }
.ev-doc__meta { display: block; font-size: var(--t-xs); color: var(--cerneala-slab); }
.ev-doc .e-vazut { color: var(--sigiliu); }
.ev-vizor__antet { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; margin-bottom: .6rem; flex-wrap: wrap; }
.ev-vizor__cadru { width: 100%; height: calc(100vh - 14rem); min-height: 24rem; border: 1px solid var(--linie-fina); border-radius: var(--raza-mica); background: #fff; }
.ev-vizor__gol { padding: 3rem 1rem; text-align: center; color: var(--cerneala-slab); }
.ev-progres__cifra { font-family: var(--fata-titlu); font-size: 2.2rem; font-weight: var(--g-tare); color: var(--sigiliu); line-height: 1; }
/* Butonul acesta se vede DOAR fara JavaScript — adica exact la utilizatorul cu
   dispozitivul cel mai vechi si cel mai putin sigur pe deget. Avea 30px, cand
   angajamentul proiectului e 44. Ramane doar umplutura mai stransa: „mic"
   inseamna mai ingust, nu mai jos. */
.ev-bifa__fallback { padding: .1rem .7rem; }
/* cu JS, checkboxul preia rolul; fallback-ul ramane pentru fara-JS */
.js .ev-bifa__fallback { display: none; }
@media (max-width: 1100px) {
  .ev-taburi { display: flex; }
  .ev-grila { display: block; }
  .ev-col { position: static; max-height: none; margin-bottom: 1rem; scroll-margin-top: 4.5rem; }
  .ev-vizor__cadru { height: 70vh; }
}

/* =====================================================================
   Reparații din auditul advers (25.08.2026)
   ===================================================================== */

/* Bifa evaluatorului: eticheta dă zona de atingere de 44px; caseta rămâne
   de 1,35rem, dar se apasă oriunde în pătratul din jurul ei. */
.ev-bifa__caseta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -.6rem -.35rem; cursor: pointer;
  border-radius: var(--raza-mica);
}
.ev-bifa__caseta:hover { background: var(--hartie-adanca); }
/* Fără JavaScript caseta e un control mort: se ascunde, rămâne butonul.
   (Simetric cu `.js .ev-bifa__fallback { display:none }`.) */
html:not(.js) .ev-bifa__caseta { display: none; }
.ev-salvat {
  background: var(--sigiliu-slab); border: 1px solid var(--linie);
  border-radius: var(--raza); padding: .5rem .8rem; margin: 0 0 .8rem;
  font-size: var(--t-sm); color: var(--sigiliu); font-weight: var(--g-semi);
}
.ev-comp { scroll-margin-top: 5rem; }

/* Separatorul dintre rândurile de triaj rămâne mai discret decât conturul
   unui control: e o despărțire ÎN interiorul unui card, nu marginea lui.
   (Aici stătea și `.document { border-color: --linie }`, din vremea când
   documentul era un card cu chenar. Documentul e acum un rând cu linie
   fină dedesubt — regula veche i-ar fi înnegrit separatorul pe furiș.) */
:root { --linie-medie: oklch(72% 0.014 140); }
.ev-vizor__cadru { border-color: var(--linie); }
.triaj { border-bottom-color: var(--linie-medie); }

/* Pe mobil denumirea ramane langa litera: se rezolva in blocul editorului,
   la pragul de 860px. Aici statea a doua declaratie a aceleiasi reguli. */
/* Numele din antet duce la Contul meu — singura cale spre profil. */
a.utilizator__nume { color: var(--creta); text-decoration: none; border-bottom: 1px dotted var(--creta-stinsa);
  display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 0; }
a.utilizator__nume:hover { border-bottom-style: solid; }

/* Istoricul: cine a făcut ce, la o privire. Culoarea distinge actorul —
   dumneavoastră, evaluatorul, sistemul — nu decorează. */
.istoric { list-style: none; margin: 0; padding: 0; }
.istoric__rand {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--linie-fina); font-size: var(--t-md);
}
.istoric__rand:last-child { border-bottom: none; }
/* Coloana de semne se repeta pana la cateva sute de ori pe o pagina de
   istoric. Era la 700 — cea mai rara greutate din sistem, cheltuita pe cel mai
   des element al paginii. Si amesteca emoji (ochi, lacat, imprimanta) cu semne
   text: emoji se deseneaza colorat si de alta marime, deci coloana nu se mai
   alinia. Acum toate semnele vin din aceeasi familie geometrica. */
.istoric__semn {
  /* 400, nu 600. Semnul apare o data pe rand, iar o pagina de istoric are
     cateva sute de randuri: masurat, 147 pe portofoliul demo. Orice greutate
     pusa aici se inmulteste cu numarul de randuri si ajunge sa fie ea insasi
     zgomotul paginii. Forma si coloana de latime fixa fac deja toata treaba. */
  flex: none; width: 1.6rem; text-align: center; font-weight: var(--g-normal);
  color: var(--cerneala-slab);
}
.istoric__rand--eu .istoric__semn { color: var(--sigiliu); }
/* Portocaliul e pentru SEMNAL, nu pentru actor — vezi comentariul din
   `istoric.php`. Randurile obisnuite ale evaluatorului raman in cerneala
   stinsa, ca tot restul istoricului. */
.istoric__rand--semnal .istoric__semn { color: var(--atentie); }
.istoric__text { flex: 1; min-width: 0; }
.istoric__cand {
  flex: none; font-size: var(--t-xs); color: var(--cerneala-slab);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 640px) {
  .istoric__rand { flex-wrap: wrap; }
  .istoric__cand { width: 100%; padding-left: 2.3rem; }
}

/* ===================================================================
   VERIFICAREA DATELOR ELEVILOR (CF-34)

   Trei căi, una sub alta, fiecare cu explicația ei alături. Nu alăturate pe
   orizontală: alegerea cere citit, nu comparat dintr-o privire.

   Toate trei arată a butoane. Ordinea și greutatea spun care e cea sigură —
   prima, plină; celelalte, conturate. Un buton de consecință făcut să semene
   cu text simplu ar fi și tipar întunecat, și problemă de accesibilitate.
   =================================================================== */
.decizie__nume {
  font-family: var(--fata-titlu);
  font-size: var(--t-lg);
  margin: 0 0 var(--s-3);
  overflow-wrap: anywhere;   /* nume lungi de fișier, fără a lăți cardul */
}
.decizie__semne {
  margin: 0 0 var(--s-6);
  padding-left: 1.15rem;
  max-width: 62ch;
}
.decizie__semne li { margin-bottom: var(--s-2); line-height: 1.55; }
.decizie__intrebare {
  font-family: var(--fata-titlu);
  font-size: var(--t-md);
  margin: 0 0 var(--s-2);
}
.decizie__cale {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) 1fr;
  gap: var(--s-2) var(--s-6);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--linie);
}
.decizie__explic {
  font-size: var(--t-sm);
  color: var(--culoare-text-slab);
  max-width: 58ch;
  line-height: 1.55;
}
/* Câmpul de fișier: controlul nativ, cel pe care utilizatorul îl recunoaște
   din orice altă pagină. Fără etichetă care să îl dubleze. */
.decizie__fisier {
  font-size: var(--t-sm);
  max-width: 100%;
  padding: var(--s-2) 0;
}
.decizie__inlocuire { display: grid; gap: var(--s-2); justify-items: start; }

@media (max-width: 46rem) {
  .decizie__cale { grid-template-columns: 1fr; gap: var(--s-2); }
  .decizie__cale > .buton,
  .decizie__inlocuire { justify-self: stretch; }
}

/* Informarea despre analiza fișierelor: prezentă pe pagina unde se aplică, dar
   pliată. Deschisă, ar fi împins zona de încărcare sub marginea ecranului pe
   telefon — iar 53% din trafic e mobil. */
.informare-analiza { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--culoare-text-slab); }
.informare-analiza > summary {
  cursor: pointer; padding: var(--s-2) 0; min-height: 2.75rem;
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--sigiliu); font-weight: var(--g-semi);
  list-style: none;   /* triunghiul implicit dispare oricum la display:flex */
}
.informare-analiza > summary::-webkit-details-marker { display: none; }
/* Semnul propriu: trebuie să se vadă că rândul se deschide. Fără el, arăta a
   titlu mort — nimeni nu apasă pe un titlu. */
.informare-analiza > summary::before {
  content: "+"; font-size: 1.1em; line-height: 1; width: 1em; text-align: center;
}
.informare-analiza[open] > summary::before { content: "−"; }
.informare-analiza > p { max-width: 65ch; margin: 0 0 var(--s-3); line-height: 1.55; }

/* Ascuns acolo unde nu există dispozitiv de indicare precis (telefon, tabletă). */
@media (hover: none) and (pointer: coarse) {
  .doar-cu-maus { display: none; }
}

/* ===================================================================
   PROVENIENȚA MATERIALULUI (art. 12 și art. 9 alin. (1))
   Trei variante scurte, ca butoane radio într-un grup cu nume — nu listă
   derulantă: pe telefon, o listă ascunde două din trei variante și mai
   cere un apăsat. Toată zona etichetei e țintă de atingere.
   =================================================================== */
/* Fără clasa `camp` pe fieldset: `.camp > label` are specificitate 0,2,0 și
   ar învinge `.provenienta__optiune` (0,1,0), transformând fiecare opțiune
   într-un bloc cu butonul deasupra textului. Aceeași coliziune de cascadă
   care spărsese și pagina de verificare a datelor. */
.provenienta { border: 0; margin: 0 0 var(--s-6); padding: 0; }
.provenienta > legend {
  padding: 0; font-weight: var(--g-semi); font-size: var(--t-md); color: var(--culoare-text);
}
.provenienta__optiune {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3); margin-top: var(--s-2);
  min-height: 2.75rem;
  border: 1px solid var(--linie); border-radius: var(--raza-mica);
  cursor: pointer;
}
.provenienta__optiune:hover { background: var(--sigiliu-slab); }
.provenienta__optiune input { margin-top: .2rem; flex: none; width: 1.15rem; height: 1.15rem; }
.provenienta__optiune > span { display: grid; gap: .1rem; }
.provenienta__optiune:has(input:checked) { border-color: var(--sigiliu); background: var(--sigiliu-slab); }
/* Fără :has(), varianta aleasă se distinge prin butonul radio în sine —
   nimic nu se pierde, doar chenarul nu se colorează. */
.provenienta__optiune:focus-within { outline: 2px solid var(--sigiliu); outline-offset: 2px; }
/* Proveniența, acolo unde e citită: în opis și în lista evaluatorului.
   Se scrie doar când materialul NU e propriu, deci fiecare apariție spune ceva. */
.provenienta__nota { color: var(--culoare-text); font-style: italic; }
.ev-doc__provenienta { display: block; font-size: var(--t-xs); font-style: italic; color: var(--culoare-text); }
/* Materialul elaborat care nu spune încă al cui este. Întrebare, nu alarmă:
   nu s-a greșit nimic, doar nu s-a răspuns încă. */
.eticheta-link--intrebare {
  background: var(--culoare-atentie-slab); color: var(--culoare-atentie);
  text-decoration: none;
}
.eticheta-link--intrebare:hover { text-decoration: underline; }


/* ===================================================================
   REGULI CARE LIPSEAU
   Clase scrise in sabloane fara nicio regula in foaia de stil. CSS nu da
   eroare pentru asa ceva: elementul se afiseaza pur si simplu nestilat, iar
   defectul se vede abia intr-o captura de ecran a utilizatorului. Gasite de
   `verificari/css.php`.
   =================================================================== */

/* Tabel mai lat decat ecranul. Fara asta, deruleaza PAGINA pe orizontala —
   pe telefon, antetul si continutul o iau in lateral impreuna. */
.tabel-derulabil { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Rand de butoane. Era folosit in doua locuri: intr-unul cu o margine scrisa
   direct in atribut, ca sa compenseze lipsa regulii, in celalalt fara nimic. */
.actiuni { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Camp cu bifa: eticheta INCONJOARA caseta, deci nu are voie sa fie `block`.
   `.camp > label` (specificitate 0,2,0) o facea bloc, iar caseta ajungea
   deasupra textului. Regula de aici are aceeasi specificitate si e mai jos,
   deci castiga — aceeasi capcana ca la `.provenienta__optiune`. */
.camp--bifa > label {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 2.75rem; font-weight: var(--g-normal); font-size: var(--t-md);
  margin-bottom: 0; cursor: pointer;
}
.camp--bifa input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; }

/* Secretul celui de-al doilea factor: se citeste cifra cu cifra si se tasteaza
   intr-o alta aplicatie, deci monospatiat si cu spatiu intre grupuri. */
.cod-secret {
  font-family: var(--fata-mono); font-size: var(--t-lg); letter-spacing: .08em;
  background: var(--hartie); border: 1px solid var(--linie); border-radius: var(--raza-mica);
  padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; user-select: all; overflow-wrap: anywhere;
}

/* Pasii de inrolare: numerotati, cu aer intre ei — se urmaresc cu telefonul in mana. */
.lista-pasi { margin: 0 0 var(--s-4); padding-left: 1.4rem; }
.lista-pasi > li { margin-bottom: var(--s-4); line-height: 1.6; }

/* Codurile de rezerva: se tiparesc si se bifeaza pe hartie. Monospatiate, in
   coloane, ca sa se citeasca fara sa se piarda randul. */
.lista-coduri-rezerva {
  list-style: none; margin: var(--s-3) 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2);
}
.lista-coduri-rezerva code {
  display: block; font-family: var(--fata-mono); font-size: var(--t-md);
  padding: var(--s-2) var(--s-3); background: var(--hartie);
  border: 1px solid var(--linie); border-radius: var(--raza-mica); text-align: center;
}

/* Luna e optionala si mai ingusta decat anul: nu merita aceeasi latime. */
.triaj__camp--luna { width: 9rem; flex: none; }
.triaj__camp--luna select { width: 100%; }

/* „…sau adaugati un link" nu e actiunea principala. Butonul de adaugare e plin
   si colorat; varianta discreta ramane buton, dar nu concureaza cu el. */
/* „Adauga un link" e a treia treapta: text, fara contur. Sta langa „Adauga un
   document", care e conturat, si nu concureaza cu el. */
.adauga__buton--discret {
  background: transparent; color: var(--cerneala-slab);
  border: 1px solid transparent; font-weight: var(--g-normal);
}
.adauga__buton--discret:hover, .adauga__buton--discret:focus-visible {
  background: var(--hartie-adanca); color: var(--cerneala);
}
.adauga[open] > .adauga__buton--discret { background: var(--hartie-adanca); color: var(--cerneala); }

/* Cele trei cai de pe pagina de decizie. Distanta dintre ele venea pana acum
   doar din marginile fiecareia; containerul isi pierduse regula la o rescriere. */
.decizie__cai { display: grid; gap: 0; }

/* Coloana de continut a editorului. Pista are deja `minmax(0, 1fr)`, dar un
   element de grila are implicit `min-width: auto`, adica „cel putin cat cel mai
   lat copil". Un nume de fisier foarte lung sau un tabel il pot lati peste
   pista si impinge pagina in lateral. `min-width: 0` este perechea acelui
   `minmax(0, ...)`, nu o podoaba. */
.editor-continut { min-width: 0; }


/* ===================================================================
   OPISUL — structura cerută de art. 6 alin. (4)
   Secțiunea grupează; cronologia lucrează înăuntrul ei. Ierarhia vizuală
   trebuie să spună, fără să fie citită, ce e antet de secțiune, ce e
   componentă, ce e titlu de document, ce e descriere și ce e dată.
   =================================================================== */
.opis-cuprins > ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.opis-cuprins li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--linie-fina);
}
.opis-cuprins li:last-child { border-bottom: none; }
.opis-cuprins a { display: flex; align-items: baseline; gap: var(--s-3); flex: 1;
                  min-height: 2.75rem; text-decoration: none; color: inherit; }
.opis-cuprins a:hover span:last-child { text-decoration: underline; }
.opis-cuprins__litera {
  font-family: var(--fata-titlu); font-size: var(--t-lg); font-weight: var(--g-tare);
  color: var(--catalog); min-width: 1.4rem;
}
.opis-cuprins__numar { color: var(--culoare-text-slab); font-size: var(--t-sm); white-space: nowrap; }

/* Antetul de secțiune: cel mai vizibil lucru de pe pagină, fiindcă e primul
   nivel al structurii legale. */
/* Titlul de sectiune din opis e un `h2` copil direct de `.card`, deci prinde
   si regula generala `.card > h2` de mai sus: un `::after` cu o dunga verde de
   42x3px si o spatiere proprie. Rezultatul erau DOUA linii suprapuse pe acelasi
   titlu — dunga verde de sigiliu asezata peste chenarul caramiziu de catalog —
   plus o spatiere care nu era cea scrisa aici: `.card > h2` are specificitate
   (0,1,1) si invingea (0,1,0). Se anuleaza dunga si se urca specificitatea
   distantelor la acelasi nivel. */
.card > h2.opis-sectiune__titlu::after { content: none; }
.card > h2.opis-sectiune__titlu { padding-bottom: var(--s-3); margin-bottom: var(--s-4); }
.opis-sectiune__titlu {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--catalog);
  font-family: var(--fata-titlu); font-size: var(--t-xl); color: var(--catalog);
}
.opis-sectiune__litera {
  font-size: var(--t-2xl); font-weight: var(--g-tare); line-height: 1;
  min-width: 1.6rem; text-align: center;
}

.opis-tabel { width: 100%; }
.opis-tabel__nr   { width: 3rem;  text-align: right; color: var(--culoare-text-slab);
                    font-variant-numeric: tabular-nums; vertical-align: top; }
.opis-tabel__data { width: 9.5rem; color: var(--culoare-text-slab); font-size: var(--t-sm);
                    font-variant-numeric: tabular-nums; vertical-align: top; }
.opis-tabel td    { vertical-align: top; padding-top: var(--s-3); padding-bottom: var(--s-3); }

/* TREI GROSIMI DE LINIE, TREI ROLURI — nu doua linii care arata la fel.
   In opis, capul de tabel sta la vreo 50px sub titlul de secțiune. Titlul are
   o linie de 2px caramizie (--catalog, 0,29 luminozitate), capul de tabel avea
   2px in cerneala (0,26). Aceeasi grosime, aproape aceeasi inchidere, una sub
   alta: nu se mai vedea care desparte SECȚIUNI si care desparte doar capul de
   tabel de randuri. Feedback direct: „separarea dintre secțiuni e prea
   asemanatoare, vezi bordurile".
   Acum:
     secțiunea    2px caramiziu  — singurul nivel pe care legea il cere grupat
     capul de tabel 1px --linie  — eticheta unei coloane, nu o despartire mare
     randul        1px --linie-fina
   Regula generala `.tabel th` ramane cu linia groasa: acolo nu are ce sa
   concureze, iar „linie groasa sub cap de tabel, ca intr-un opis pe hartie" e
   o intentie a foii. Aici, in opisul propriu-zis, rolul acela il joaca deja
   titlul de secțiune. */
.opis-tabel th { border-bottom: 1px solid var(--linie); }

/* Randul pe care esti. Opisul e o lista de citit, nu de apasat — 24 de randuri
   pe cinci coloane, cu ochiul plimbat de la data la titlu. Evidentierea e
   ajutor de citire, ca degetul pe rand. Cursorul ramane cel obisnuit: randul
   nu duce nicaieri. */
.opis-tabel tbody tr:not(.opis-rand-componenta):hover td { background: var(--hartie-adanca); }
/* Randul-antet de componenta din vederea de lucru NU e un document: nu se
   evidentiaza, si se desparte mai apasat de randurile de sub el, ca sa se vada
   ca deschide un grup, nu ca face parte din el. */
.opis-rand-componenta td { border-bottom-color: var(--linie); }

/* Cele patru feluri de text dintr-un rând.
   Randul de deasupra titlului („A3 STUDII") e o eticheta de clasificare. Avea
   DEJA trei semnale care o deosebesc de titlu — majuscule, spatiere intre
   litere si 13px in loc de 15. Al patrulea, greutatea 600, nu adauga nimic si
   face ca fiecare rand din opis sa aiba DOUA lucruri ingrosate: clasificarea
   si titlul. Pe 24 de randuri, 48 de accente, deci niciun accent.
   Culoarea: era verdele de sigiliu, pe care foaia asta il declara rezervat
   DOVEZII. Un cod de componenta nu e dovada, e structura — deci codul poarta
   caramiziul de catalog, acelasi cu antetul de sectiune de care apartine, iar
   denumirea ramane in cerneala stinsa. */
.opis-componenta {
  display: block; font-size: var(--t-xs); color: var(--cerneala-slab);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem;
}
.opis-componenta__cod { color: var(--catalog); }
.opis-titlu     { display: block; font-weight: var(--g-semi); line-height: 1.4; }
.opis-provenienta { display: block; font-size: var(--t-sm); font-style: italic; margin-top: .15rem; }
.opis-descriere { display: block; font-size: var(--t-sm); color: var(--culoare-text-slab);
                  margin-top: .15rem; max-width: 70ch; }

@media (max-width: 46rem) {
  /* Pe telefon, data trece sub titlu: o coloană de 9,5rem lăsa titlului
     mai puțin de jumătate din lățime. */
  .opis-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }  /* vezi .doar-pentru-citit */
  .opis-tabel, .opis-tabel tbody, .opis-tabel tr, .opis-tabel td { display: block; width: auto; }
  .opis-tabel tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--linie-fina); }
  .opis-tabel__nr { display: inline; padding: 0; }
  .opis-tabel__nr::after { content: "."; }
  .opis-tabel__data { display: inline; padding: 0 0 0 var(--s-2); }
  .opis-sectiune__titlu { font-size: var(--t-lg); }
}

/* ===================================================================
   IERARHIA DIN EDITOR — după feedbackul unui utilizator de demo:
   „aș folosi o culoare diferită pentru titlurile secțiunilor (…) e o pagină
   încărcată și trebuie optimizată vizual — ca să se vadă clar care sunt
   instrucțiuni, care sunt titluri de documente, descrieri, date. Și
   indentarea ar ajuta."

   Patru niveluri, fiecare cu semnul lui, în aceeași limbă ca opisul:
     SECȚIUNEA    roșu de catalog, literă mare, linie groasă dedesubt
     COMPONENTA   verde de sigiliu, indentată sub secțiune
     DOCUMENTUL   text obișnuit, îngroșat
     ÎNDRUMAREA   retrasă, cu bară la stânga, ca să nu fie luată drept conținut
   =================================================================== */

/* --- 1. Secțiunea: nivelul cerut de art. 6 alin. (1) ---
   Culoarea de catalog, marimea si spatierea stau ACUM in definitia de baza a
   lui `.sectiune-plata__antet`, nu aici. Al doilea strat facea ca jumatate din
   prima definitie sa fie cod mort: cine o citea credea ca linia de sub antet e
   neagra si stransa, cand de fapt e caramizie si larga. */
/* Litera de secțiune: la fel în editor și în opis — literă și linie, fără
   bloc colorat. Editorul avea o insignă plină de 28px, opisul avea doar
   litera: două tratamente pentru același lucru. Iar blocul plin și colorat
   era, dintre toate, ce făcea antetul să pară o alarmă.
   Regula reala e sus, la `.sectiune__litera`. Aici statea al doilea strat,
   care desfacea insigna proprietate cu proprietate. */

/* --- 2. Componenta: indentată, ca subordonarea să se vadă fără să fie citită --- */
.sectiune-plata > .componenta { margin-left: var(--s-6); }

/* --- 3. Îndrumarea: retrasă și marcată, nu amestecată cu documentele ---
   Purta o dungă de 2px pe stânga — exact tiparul „accent lateral" care nu
   spune nimic (o muchie colorată nu e nici chenar, nici fond, nici semn).
   Îndrumarea se deosebește acum prin SUPRAFAȚĂ: un fond abia coborât, ca o
   hârtie pusă sub text, care se vede și periferic, nu doar citit. */
.componenta__corp > .text-mic.text-slab:first-child {
  background: var(--hartie-adanca);
  border-radius: var(--raza-mica);
  padding: var(--s-2) var(--s-3);
  margin: var(--s-3) 0;
  max-width: 68ch;
}

/* --- 4. Rândul de document: titlu, apoi datele, apoi descrierea --- */
.document__meta { font-variant-numeric: tabular-nums; }

@media (max-width: 46rem) {
  .sectiune-plata > .componenta { margin-left: 0; }
}

/* ===================================================================
   NAVIGAREA LATERALĂ — de ce nu mai e redusă la litere
   Aici statea un strat care ascundea denumirile si lasa doar „A B C D E",
   pus dupa feedbackul unui utilizator de demo („aș renunța la meniul din
   stânga… sau aș lăsa doar literele"). Motivul de atunci era corect: la
   4,5rem eticheta se taia oricum („Managementul cl…"), deci nu-si facea
   treaba.

   Numai ca raspunsul la o eticheta taiata nu e sa ascunzi eticheta, ci sa-i
   dai latime. Rezultatul lasase o coloana din care nu se intelegea nimic —
   feedbackul urmator a spus-o direct: „am bara din stânga, dar nu mă ajută
   cu nimic să înțeleg unde sunt, numerele de asemenea mă încurcă dacă nu
   știu ce sunt".

   Regulile reale sunt acum toate in blocul editorului, mai sus, intr-un
   singur loc: 15rem cu denumiri intregi pe ecran larg, litera singura sub
   1000px, fasie orizontala cu denumiri sub 860px.
   =================================================================== */

/* Rândul de sub câmpul de titlu din triaj („încărcat acum 11 ore · 19 B") curgea
   pe aceeași linie cu câmpul și se rupea în două: „încărcat acum 11" lângă
   câmp, „ore · 19 B" dedesubt. Câmpul ia toată lățimea, nota stă pe rândul ei. */
.triaj__titlu > input[type="text"] { display: block; width: 100%; }
.triaj__titlu > span { display: block; margin-top: .25rem; }

/* Comutatorul dintre cele două vederi ale opisului. Două linkuri, nu un buton
   care salvează ceva: vederea nu se ține minte și nu atinge opisul tipărit. */
/* Comutator, deci CONTROL: aceeasi forma ca butoanele si campurile, nu
   pastila. */
.opis-vedere { display: inline-flex; margin-top: var(--s-4); border: 1px solid var(--linie); border-radius: var(--raza-control); overflow: hidden; }
.opis-vedere a {
  padding: var(--s-2) var(--s-4); min-height: 2.75rem; display: inline-flex; align-items: center;
  font-size: var(--t-sm); text-decoration: none; color: var(--sigiliu); background: var(--hartie-inalta);
}
.opis-vedere a + a { border-left: 1px solid var(--linie); }
.opis-vedere a:hover { background: var(--sigiliu-slab); }
.opis-vedere a[aria-current] { background: var(--sigiliu); color: var(--creta); font-weight: var(--g-semi); }

/* Antetul de componentă din vederea de lucru. */
.opis-rand-componenta td {
  background: var(--hartie); padding-top: var(--s-3); padding-bottom: var(--s-3);
  font-size: var(--t-sm); font-weight: var(--g-semi); color: var(--sigiliu);
}
.opis-sub-componenta { padding-left: var(--s-4); }

/* Amprenta din antetul evaluatorului: acelasi tratament ca pe ecranul de
   versiune al profesorului — eticheta marunta, apoi forma scurta a codului.
   Inainte, cele 64 de caractere curgeau in mijlocul unei fraze si se rupeau
   pe doua randuri fix prin mijlocul codului. */
.ev-amprenta { margin-top: var(--s-3); }

/* ===================================================================
   TEXTELE EDITABILE DIN ADMINISTRARE
   Un formular per text: o greșeală la unul nu le trimite pe toate înapoi,
   iar după salvare pagina se întoarce exact la textul atins.
   =================================================================== */
/* Ascuns pentru ochi, prezent pentru cititoarele de ecran. Nu `display:none`
   si nici `visibility:hidden`: acelea il ascund si de ele. */
.doar-pentru-citit {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Sarituri catre grupuri, in capul ecranului de texte. */
.sarituri-texte { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sarituri-texte a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 var(--s-3);
  border: 1px solid var(--linie); border-radius: var(--raza-control);
  font-size: var(--t-sm); color: var(--cerneala); text-decoration: none;
}
.sarituri-texte a:hover { background: var(--hartie-adanca); border-color: var(--sigiliu); }
.sarituri-texte__numar { color: var(--cerneala-slab); font-variant-numeric: tabular-nums; }

/* Numele zonei, deasupra primului grup din ea.
   Nu e un al treilea titlu: e o eticheta mica, cu majuscule ratate, care spune
   unde a ajuns cine deruleaza. Titlul care conteaza ramane numele grupului. */
.text-editabil__zona {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs); font-weight: var(--g-semi);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cerneala-slab);
}

.text-editabil { padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-fina); }
.text-editabil:last-child { border-bottom: none; }
.text-editabil__antet { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); flex-wrap: wrap; }
.text-editabil__eticheta { font-weight: var(--g-normal); color: var(--cerneala-slab); font-size: var(--t-sm); }
.text-editabil__camp { width: 100%; max-width: 70ch; font-size: var(--t-md); line-height: 1.5; }
.text-editabil__actiuni { display: flex; gap: var(--s-3); margin-top: var(--s-2); flex-wrap: wrap; }
.text-editabil__continut { max-width: 70ch; margin: 0; color: var(--culoare-text); }
.text-editabil--blocat { background: var(--atentie-slab); border-radius: var(--raza-mica);
                         padding: var(--s-4); border-bottom: none; margin-bottom: var(--s-3); }
.text-editabil__original { margin-top: var(--s-3); font-size: var(--t-sm); }
.text-editabil__original > summary { cursor: pointer; color: var(--sigiliu); min-height: 2.75rem;
                                     display: flex; align-items: center; }
.text-editabil__original p { max-width: 70ch; color: var(--culoare-text-slab); margin: 0 0 var(--s-2); }

/* ===================================================================
   ANTETE CARE NU-ȘI STRÂNG TITLUL
   Măsurat pe telefon (375px): antetul de secțiune avea 335px, din care
   insigna lua 32 și contorul 74, iar titlului îi rămâneau 209 — destul cât
   „Evoluția în cariera didactică și dezvoltarea profesională" să urce la
   patru rânduri. Antetul nu se rupea, deci nu avea cum să cedeze lățime.

   Pe ecrane înguste contorul trece pe rândul lui, sub titlu, aliniat după
   insignă. Titlul primește atunci ~293px în loc de 209.
   =================================================================== */
/*  sta acum in definitiile proprii ale celor trei antete.
   Aici a ramas, o vreme, o lista de selectori cu virgula la capat si FARA
   bloc — pentru ca al treilea selector, , fusese scos cand
   regula lui s-a topit in definitia de baza. Consecinta nu e cosmetica:
   browserul citeste  drept al treilea selector din lista, prelude-ul
   devine invalid si ARUNCA TOT blocul de mai jos. Adica tot pragul pentru
   telefon al antetelor de sectiune si al titlurilor din opis nu se aplica.
   Verificatorul propriu nu l-a prins: parserul lui e mai ingaduitor decat un
   browser. S-a adaugat o verificare pentru asta (css.php, nr. 9). */

@media (max-width: 46rem) {
  /* SCHIMB DE ROLURI PE TELEFON.
     Antetul site-ului, lipicios, ocupa 208px din 812 — 26% din ecran, permanent:
     sigla, numele si navigatia pe doua randuri. Chrome, nu context. Pe telefon
     el DERULEAZA cu pagina (cine vrea meniul urca — gestul standard), iar
     lipicios ramane antetul de sectiune: un singur rand care spune exact unde
     esti in cele cinci sectiuni. Inainte era pe dos: cadrul statea, orientarea
     pleca. */
  .antet-site { position: static; }
  /* Antetul de sectiune, subtiat: pe 375px, cu titlul legal pe trei randuri
     plus contorul pe randul lui, bara lipita ajungea la 136px — 17% din ecran.
     Titlul coboara o treapta, litera doua; textul integral ramane acelasi,
     doar ca incape in mai putine randuri. Masurat dupa: ~95px. */
  .sectiune-plata__antet { top: 0; row-gap: var(--s-2); }
  .sectiune-plata__antet h2 { flex: 1 1 calc(100% - 3rem); font-size: var(--t-lg); }
  .sectiune__litera { font-size: var(--t-xl); }
  /* antetul lipicios de sectiune are aici pana la ~125px (titlul legal al
     sectiunii B pe doua randuri + contorul pe randul lui) */
  .componenta { scroll-margin-top: 8.5rem; }
  /* PADDING, nu margin: cu `flex-basis: 100%`, o margine se ADUNĂ la lățime și
     împinge pagina în lateral. Măsurat: 24px de derulare orizontală, exact
     cât marginea. Padding-ul intră în cutie. */
  .sectiune__numar { margin-left: 0; padding-left: calc(32px + var(--s-3)); flex-basis: 100%; }

  .opis-sectiune__titlu { row-gap: var(--s-2); }
  /* Contorul pe rândul lui, ca la antetul de secțiune. `flex-wrap` singur nu
     ajungea: linkul se strângea, iar contorul rămânea alături. Măsurat pe
     375px — titlul avea 174px din 301 și urca la trei rânduri. Cu
     `flex-basis: 100%` primește toată lățimea. */
  .opis-cuprins li { flex-wrap: wrap; row-gap: .15rem; }
  .opis-cuprins a { flex-basis: 100%; }
  .opis-cuprins__numar {
    margin-left: 0; flex-basis: 100%;
    padding-left: calc(1.4rem + var(--s-3));
  }
}

/* ===================================================================
   TABELE DE DATE PE TELEFON — un singur tipar, peste tot
   Sub 46rem, un tabel cu mai mult de trei coloane nu mai încape: la
   /versiuni cele șapte coloane făceau 674px într-un derulor de 301, iar
   „Amprentă" — codul pe care profesorul îl citește comisiei — rămânea
   în afara ecranului.

   `tabel--stivuit` desface fiecare rând într-o fișă, cu numele coloanei
   scris lângă valoare. Numele vine din `data-eticheta` pe celulă, deci
   marcajul rămâne un tabel adevărat pentru cititoarele de ecran și pentru
   tipărire. Aceeași soluție ca la opis, ca să nu existe două feluri de a
   arăta un tabel îngust.
   =================================================================== */
@media (max-width: 46rem) {
  .tabel--stivuit thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);   /* vezi .doar-pentru-citit */
  }
  /* `td` NU intră aici: primește `flex` mai jos, iar un `block` pus acum ar fi
     doar o declarație moartă. */
  .tabel--stivuit,
  .tabel--stivuit tbody,
  .tabel--stivuit tr { display: block; width: auto; }

  .tabel--stivuit tr {
    border: 1px solid var(--linie);
    border-radius: var(--raza-mica);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--hartie-inalta);
  }
  /* `flex-wrap: wrap` e o plasa, nu decor. Celula are eticheta ::before de 96px
     fix, iar tot ce urmeaza imparte restul. Cu UN copil e corect. Cu doi —
     titlu plus descriere — cei ~147px ramasi se impart intre ei si ori coboara
     pe patru-cinci randuri, ori ies din celula (masurat: 58px in afara).
     Marcajul trebuie sa aiba un singur copil; daca totusi scapa unul, `wrap` il
     trimite pe randul urmator in loc sa-l striveasca. */
  .tabel--stivuit td {
    display: flex; flex-wrap: wrap; width: auto; gap: var(--s-3); align-items: baseline;
    border: 0; padding: var(--s-1) 0;
  }
  .tabel--stivuit td[data-eticheta]::before {
    content: attr(data-eticheta);
    /* 6rem, nu 8,5: măsurat pe /versiuni la 375px, eticheta de 8,5rem lăsa
       valorii 119px, iar „Examen de acordare a gradului didactic II" urca la
       patru rânduri. La 6rem valoarea primește 159px și coboară la două.
       Cea mai lungă etichetă („Blocată la") încape în 6rem fără să se rupă. */
    flex: none; min-width: 6rem;
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--culoare-text-slab);
  }
  /* Celula fără etichetă ține acțiunea rândului: stă singură, jos. */
  .tabel--stivuit td:not([data-eticheta]) { padding-top: var(--s-3); }
  .tabel--stivuit td:not([data-eticheta]) a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}