/* ==========================================================================
TraumaScore — foaia de stil.
Scrisă după machetă (docs/mockup_traumascore.png): fundal LUMINOS, bară
ALBĂ, Zima Blue pentru text și accente, auriu pentru acțiunea principală.
Prima formă avea totul invers (bară și erou închise) — de aici rescrierea.
Toate culorile stau în variabile. Nicio culoare scrisă direct într-o
regulă: altfel se despart la prima schimbare.
========================================================================== */
:root {
/* ---- culorile ----
ZIMA BLUE, din 01.09.2026 (hotararea utilizatorului: „terminam cu
albastrul acela inchis navy").
ATENTIE, si e o MASURATOARE, nu un moft: nuanta marcii (#5bc2e7 - hexul
oficial) da cu albul doar 2,04 - sub pragul de 4,5 - si tot 2,04 ca
text pe alb. Bleumarinul de dinainte dadea 13,07 in ambele sensuri.
Deci Zima NU poate tine singura toate rolurile.
DIN 01.09.2026 NU MAI EXISTA NICIO TREAPTA INCHISA DE ZIMA. Cerut
explicit: „sa nu mai apara aceasta nuanta, pe nicaieri" - era
#0c4053, un teal aproape bleumarin, care se vedea pe butoane si pe
bara de lucru. Rolurile lui s-au impartit:
- umpluturi, chenare, glife -> --zima-umplere
- scris -> --text (cerneala obisnuita)
- bara de lucru -> chiar --zima-umplere (panou.css),
cu ierarhia facuta din marime,
nu din opacitate
Ce a ramas:
--zima nuanta marcii: accente, decor, BANDA deschisa.
NICIODATA sub text alb (2,04) si nici ca glifa pe
cerc palid (1,84).
--zima-umplere butoane, glife, chenare, titluri-accent. Alb pe ea
4,81; ea pe alb 4,81; pe cercul palid 4,33.
--zima-text acelasi ton, cu numele rolului de legatura.
--zima-palid / --zima-chenar fundaluri si chenare foarte deschise. */
--zima: #5bc2e7;
--zima-umplere: #177b9f;
--zima-text: #177b9f;
--zima-palid: #f8fcfe;
--zima-chenar: #e6f6fb;
/* CULORILE CELOR TREI DRUMURI, luate din desenul adus de medic
(public/img/arta-tech.svg) si COBORATE pana trec pragul.
Cerute la 01.09.2026: „vreau culori diferite la ele ca in
nextsvg_refined_v4_tech, nu maro(2)" - doua din trei pastile ieseau
aurii, fiindca clasa era scrisa in marcaj, nu luata din date.
Desenul e insa VIU: masurat, cyanul lui da 2,38 cu albul, verdele 2,17,
portocaliul 2,36 - toate sub pragul de 4,5 pentru o glifa alba pe
pastila plina. Fiecare s-a cobarat in HSL, cu nuanta si saturatia
neatinse, pana la prima treapta care trece:
verde H166: L43 -> L29, 2,17 -> 4,53
magenta H303: trece de la prima incercare, 4,68
Cyanul nu si-a primit jeton propriu: coborat, iese #0d8099, adica
practic --zima-umplere (#177b9f, 4,82). O a doua nuanta aproape
identica ar fi fost o paleta mai bogata degeaba. */
/* PALETA CARDURILOR DE PRET - luata din desenele aduse de medic
(`arta-tech.svg`, `arta-manual.svg`), nu inventata. Prima formă a
fost coborâtă până trecea 4,5 cu albul și a ieșit noroioasă
(„cele mai urâte culori pe care puteai să le alegi") — pe drept:
4,5 e pragul TEXTULUI, iar aici e o iconiță, adică obiect grafic,
unde pragul e 3. Cu pragul potrivit, culorile chiar din desen se
pot folosi. Măsurat cu albul: foc 3,48 · cyan 3,57 · magenta 4,68.
Capătul închis al gradientului e tot peste prag, deci umbrirea nu
poate scoate glifa din contrast. */
--foc-umplere: #ff4200;
--foc-adanc: #d63700;
--cyan-umplere: #0e93b8;
--cyan-adanc: #0b7590;
--magenta-umplere: #d000c5;
--magenta-adanc: #a3009b;
/* Aurul are DOUA jetoane, si e o masuratoare, nu un moft: aurul
marcii (#d08b2c) duce text alb la contrast 2,82 - sub pragul de
4,5 - iar macheta insasi are aceeasi slabiciune (aurul ei da
3,15-3,52 cu alb). Deci: --auriu ramane accentul SUBTIRE (chenare,
pastile, stele), iar --auriu-umplere e fundalul pe care sta alb.
Cea mai apropiata nuanta de aurul marcii care CHIAR trece pragul,
cautata pe deltaE: #a66800, alb pe ea 4,56. */
/* „FARA MARO" (medicul, 02.09.2026). Numele raman `--auriu-*` - sunt
folosite in ~30 de locuri - dar VALORILE vin de-acum din ilustratia
paginii (`public/img/arta-tech.svg`), scoase din fisier si cantarite:
rozul-carmin #d50045 e din paleta ei, duce text ALB peste prag (5,36)
si - cerut de medic - sta DEPARTE de movul barei: 78 grade de nuanta,
fata de 33 cat avea magenta pe care o incercasem intai (#b800c9).
Tonurile inchise, cele care se vedeau ca maro (#a66800, #8f5900), sunt
acum magenta, respectiv portocaliul ilustratiei inchis pana trece. */
--auriu: #d50045; /* carminul din ilustratie: 5,36 pe alb */
--auriu-umplere: #d50045; /* alb pe el: 5,36 */
--auriu-inchis: #b8003b; /* hover, mai inchis */
--auriu-deschis: #ff7098;
--auriu-palid: #fff1f5;
--auriu-chenar: #fbd5e0;
--alb: #ffffff;
/* Coala e ALBĂ. S-a încercat, la cererea medicului, una ușor colorată
(#eef1f6), ca albul cardurilor să însemne ceva — a văzut-o și a cerut
înapoi albul („fă tot backgroundul body alb"). Ierarhia o poartă mai
departe benzile deschise (`--fundal-slab`) și umbrele cardurilor. */
--fundal: #ffffff;
--fundal-slab: #f7f9fc;
/* GOLUL DE LA COADA PAGINII, deasupra subsolului (02.09.2026, medicul:
„spatiul acesta nu are niciun sens"). Masurat inainte, de la ultimul
text pana la cardul subsolului: intrebari 159,6 · despre 179 ·
experti 147,5 · barem 106,4 · calcul 101,9 - cinci pagini, cinci
valori. De-acum toate il citesc de aici. */
--gol-final: clamp(16px, 1.8vw, 24px);
/* Tonul eroului, MASURAT in macheta (#f4f2f1 in coltul din stanga-sus):
acolo eroul nu e alb, e o singura suprafata calda care vine din chiar
fotografia din dreapta. Alb, ar fi doua suprafete cu o cusatura intre
ele. */
/* Eroul avea un crem al lui (#f4f2f1) — singura suprafață CALDĂ dintr-o
pagină altfel rece („același bg color ca restul paginii, nu crem",
01.09.2026). Jetonul rămâne, ca eroul să-și poată lua altă coală
într-o zi; azi e chiar coala paginii. */
--erou-fundal: #ffffff;
--erou-poza-margine: #d2cac3;
--chenar: #e6eaf1;
--chenar-tare: #cfd7e4;
--text: #16213a;
--text-mediu: #46536e;
/* Masurat pe randare, pe fundalul CEL MAI GREU dintre cele pe care
chiar sta. Doua trepte, fiecare ceruta de o masuratoare:
#6b7891 -> 4,45 pe alb, sub prag;
#697191 -> 4,80 pe alb si 4,55 pe fundalul slab, dar 4,01 pe
ecranele de cont, care au peste fundal un voal
bleumarin de 7% (radial-gradient) - pe care aritmetica
facuta pe culoarea PLATA nu-l vedea deloc.
Tonul e pastrat (aceleasi diferente intre canale), a scazut doar
luminozitatea: alb 5,48 | slab 5,19 | cont 4,58. */
--text-stins: #606888;
--pe-zima: #ffffff;
--pe-zima-stins: rgba(255, 255, 255, .74);
--bine: #0f7a4a;
--bine-fundal: #e8f6ee;
/* Atentia ramane CALDA (altfel „in pregatire" ar arata ca marca), dar
pe portocaliul ilustratiei inchis pana trece: 6,43 pe crem, 6,80 pe
alb, 5,35 pe chenar. Masurat. */
--atentie: #a83000;
--atentie-fundal: #fdf3dd;
--rau: #a52834;
--rau-fundal: #fdecee;
/* ---- forme ---- */
--raza: 10px;
--raza-mare: 16px;
--raza-mica: 8px;
/* Umbrele sunt DISCRETE, în două straturi: una de contact, foarte
apropiată, și una difuză. O umbră singură, mare, face cardurile să
pară decupate. */
--umbra-1: 0 1px 2px rgba(23, 48, 90, .05);
--umbra-2: 0 1px 2px rgba(23, 48, 90, .05), 0 6px 20px rgba(23, 48, 90, .06);
--umbra-3: 0 2px 4px rgba(23, 48, 90, .06), 0 14px 40px rgba(23, 48, 90, .09);
/* ---- litera ----
Titlurile au SERIFĂ, ca în machetă: dă tonul așezat pe care îl cere
un act normativ. Se folosesc familii care există pe sistem — fără
Google Fonts (datele vizitatorilor nu pleacă la un terț). */
--f-titlu: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
"Times New Roman", serif;
--f-text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
"Noto Sans", sans-serif;
/* OGLINDA, luata din macheta prin masuratoare.
In macheta, jgheabul din stanga e 38px dintr-un panou de 735 = 5,2%,
iar butonul din bara se opreste la 13px de marginea din dreapta -
adica marginile sunt SUBTIRI si proportionale, nu o oglinda ingusta
centrata. Asta explica de ce pe un ecran lat nimic nu semana: cu o
oglinda de 1180px centrata in 1890, butonul ramanea la 386px de
marginea unde ajungea fotografia. */
--jgheab: clamp(18px, 5.2vw, 96px);
/* --lat e latimea CONTINUTULUI, nu a cutiei. Pusa pe cutie, jgheabul o
manca: masurat, la 1890px continutul se INGUSTA de la 1275 la 1248 si
titlul trecea pe trei randuri. */
--lat: 1360px;
}
* { box-sizing: border-box; }
/* LITERA DE BAZA = cea pe care o dadea „A+” din panoul de accesibilitate
(18px, in loc de cei 16px ai browserului) - cerut de medic la 02.09.2026:
„fontul la pagini e prea mic; implicit cat e la A+”. Merge curat fiindca
foile sunt pe rem (stil.css 99 la 1, panou.css 37 la 0, masurat). A+ a
urcat la 20px, ca butonul sa mai insemne ceva (accesibilitate.css). */
/* 16px, nu 18 (medicul, 02.09.2026: „mai redu font size-ul peste tot cu
2px"). Un singur loc: foile sunt pe REM (116/121 in stil.css, 49/49 in
panou.css, 26/26 in faq.css - masurat), deci textul de corp scade cu
exact 2 px, iar restul proportional. */
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
margin: 0;
font-family: var(--f-text);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--fundal);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--zima-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
font-family: var(--f-titlu);
color: var(--text);
line-height: 1.2;
margin: 0 0 .5em;
font-weight: 700;
letter-spacing: -.005em;
}
/* Masurat: cu poza devenita card, coloana de text are 546px la orice
latime peste 1180. Titlul "Calcul punctaj traumatologic," cere 603px la
40px si 530px la 35 - de aceea plafonul e 2,2rem, iar panta de 2,8vw il
strange sub 1180, unde coloana se ingusteaza. Asa ramane pe DOUA
randuri peste tot. */
h1 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* COLOANA CASEI - SINGURUL LOC in care se hotaraste latimea.
Formula, scrisa o data: latimea continutului = min(fereastra - 2*jgheab, --lat).
Cine vrea coloana casei pune `.invelis`; nimeni nu-si mai scrie
max-width sau padding lateral propriu, fiindca doua reguli pentru
aceeasi muchie diverg tacut - asa au ajuns cartela barei si cardurile
sa fie la 20 px una de alta (masurat 02.09.2026, pe /calcul).
`.faq-wrap` e AICI, nu in faq.css: acolo cele trei declaratii erau
copiate cuvant cu cuvant, printr-o variabila-intermediar `--faq-max`,
deci a doua sursa pentru aceeasi regula. */
.invelis,
.faq-wrap {
max-width: calc(var(--lat) + 2 * var(--jgheab));
margin: 0 auto; padding: 0 var(--jgheab);
}
/* ULTIMA SECTIUNE a unei pagini isi tine cei 62 px de jos degeaba: sub ea
nu mai vine nimic in afara subsolului, care isi are respiratia lui.
Benzile (`.sectiune-slab`, `.banda`) NU se ating - acolo padding-ul e
inaltimea benzii colorate, nu aer. */
main > .sectiune:last-child:not(.sectiune-slab):not(.banda) {
padding-bottom: var(--gol-final);
}
.stins { color: var(--text-stins); }
.mediu { color: var(--text-mediu); }
.mic { font-size: .875rem; }
.centru { text-align: center; }
.ascuns-vizual {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* ========================================================== ICONIȚE ==== */
/* Desene de LINIE, subțiri, cu capete rotunde — ca în machetă. Culoarea
vine din `currentColor`, deci o iconiță se colorează odată cu textul
lângă care stă și nu are nevoie de o variantă pe fiecare fundal. */
.ico {
width: 1.25em; height: 1.25em;
flex: 0 0 auto;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
vertical-align: -.22em;
}
.ico-mare { width: 1.6em; height: 1.6em; }
/* pastila rotundă în care stă o iconiță */
.ico-cerc {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; flex: 0 0 56px;
}
.ico-cerc .ico { width: 26px; height: 26px; }
.ico-cerc-zima { background: var(--zima-umplere); color: var(--pe-zima); }
.ico-cerc-auriu { background: var(--auriu-umplere); color: var(--alb); }
.ico-cerc-foc {
background: linear-gradient(140deg, var(--foc-umplere), var(--foc-adanc));
color: var(--alb);
}
.ico-cerc-cyan {
background: linear-gradient(140deg, var(--cyan-umplere), var(--cyan-adanc));
color: var(--alb);
}
.ico-cerc-magenta {
background: linear-gradient(140deg, var(--magenta-umplere), var(--magenta-adanc));
color: var(--alb);
}
/* Semnul din banda de garantii, dupa macheta `card x.png`: cerc PALID cu
glifa albastra. Masurat pe machetă: cercul e albastru foarte deschis,
glifa un albastru mediu. Zima curat NU merge ca glifa - pe cercul palid
da 1,84, sub pragul de 3; --zima-umplere da 4,33. */
.ico-cerc-garantie {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; flex: 0 0 56px;
background: var(--zima-chenar);
color: var(--zima-umplere);
margin: 0 auto 16px;
}
.ico-cerc-garantie .ico { width: 24px; height: 24px; stroke-width: 1.9; }
.ico-plac {
width: 38px; height: 38px; border-radius: 10px;
display: grid; place-items: center; flex: 0 0 38px;
background: var(--zima-palid); color: var(--text);
}
.ico-plac .ico { width: 19px; height: 19px; }
/* In erou cercurile sunt mai mici decat pe cardurile de pret (56):
acolo se lupta fiecare pixel de inaltime cu linia de plutire. Semnele
si tentele sunt cele de pe carduri (02.09.2026). */
.insemne .ico-cerc { width: 30px; height: 30px; flex: 0 0 30px; }
.insemne .ico-cerc .ico { width: 15px; height: 15px; }
/* ============================================================ BARA ==== */
/* Forma adusa de medic (02.09.2026): bara e o CARTELA plutitoare, cu
dunga movului sus, iar legaturile primesc o linie care creste sub ele.
Culorile stau in jetoane proprii, incuiate in `.bara`. */
.bara {
--nav-mov: #7c3aed;
--nav-mov-inchis: #6530c8;
--nav-text: #0b1f44;
--nav-text-secundar: #52617a;
--nav-border: #e7e8ef;
--nav-fundal: rgba(255, 255, 255, .97);
/* LIPITA de marginea de sus (medicul, 02.09.2026: „sa nu existe
spatiul, apare urat la derulare"). Fundalul barei e OPAC, nu
transparent: altfel continutul s-ar vedea trecand pe sub fasiile
laterale ramase, la derulare. */
background: var(--nav-fundal);
/* 4, nu 8, dedesubt - si randul la 74, nu 88: cu forma adusa bara
iesea de 100 px fata de ~75 inainte (masurat), si toata pagina
cobora cu 25. Medicul: „s-a modificat foarte mult size-ul paginii”.
Acum: 74 + linia de 3 + chenarul de 1 + 4 = 82. */
/* Pe orizontala, jgheabul CASEI, nu 18 px scrisi de mana: cartela barei
si coloana de continut trebuie sa aiba aceleasi muchii la orice
latime. Cu 18 px fix, muchia barei nu putea sa urmeze jgheabul care
creste cu fereastra - masurat, ramanea in urma cu 20 px la 1650 si cu
53 la 1366. Vezi si `.bara > .invelis` mai jos. */
padding: 0 var(--jgheab) 4px;
/* LIPICIOASA, ca pana acum: forma adusa o punea `relative`, adica bara
ar fi ramas in urma la derulare. Aia e purtare, nu infatisare. */
position: sticky; top: 0; z-index: 1000;
}
.bara > .invelis {
/* CARTELA BAREI E CHIAR COLOANA CASEI, nu o latime scrisa de mana.
Pana la 02.09.2026 aici scria `1400px`, iar jgheabul barei era 18 px
fix - adica latimea se hotara in DOUA locuri si cele doua muchii nu
aveau cum sa coincida. Masurat pe randare, cartela iesea in afara
coloanei de continut cu 20 px de fiecare parte la 1650 si la 2560, cu
56,9 la 1440 si cu 53,0 la 1366 - cu cat fereastra e mai stramta, cu
atat mai rau, fiindca jgheabul creste iar 18-le nu (medicul:
„width la carduri depaseste bara").
Acum: jgheabul il poarta `.bara` (mai sus), iar cartela ia `--lat`,
deci muchia ei = muchia cardurilor de dedesubt la ORICE latime -
masurat 0,0 px decalaj la 1000/1200/1366/1440/1650/1920/2560.
`padding-inline: 0` ramane: jgheabul e deja pe `.bara`, iar randul
isi poarta singur padding-ul de 22. */
max-width: var(--lat);
margin: 0 auto;
padding-inline: 0;
background: var(--nav-fundal);
border: 1px solid rgba(124, 58, 237, .16);
border-top: 3px solid var(--nav-mov);
/* colturile de sus drepte: cartela e lipita de muchie */
border-radius: 0 0 16px 16px;
box-shadow: 0 12px 35px rgba(15, 31, 68, .08),
0 2px 8px rgba(15, 31, 68, .04);
}
.bara-rand {
display: flex; align-items: center; gap: 28px;
min-height: 74px; /* ca inainte */
padding: 0 22px;
/* PLASA, nu o schimbare de infatisare. Randul cere 1194,5 px (masurat pe
un clon pus pe `max-content`), deci cartela trebuie sa aiba cel putin
1197. De cand cartela urmeaza coloana casei, cea mai stramta cartela
din zona meniului de birou e 1208,9 px (la fereastra 1366) - incape,
dar cu 11,9 px de rezerva. Fara `wrap`, o rezerva pierduta inseamna
butonul „Inregistrare" IESIT din cartela, tacut (masurat: 6,5 px la
1190, 96,5 la 1100, fara ca pagina sa capete derulare). Cu `wrap`,
meniul trece pe al doilea rand INAUNTRUL cartelei.
Probat ca e inert azi: la cartela >= 1197 randul are aceeasi inaltime
(74) si aceleasi pozitii cu si fara regula asta. */
flex-wrap: wrap;
}
.marca {
display: flex; align-items: center; gap: 12px;
min-width: max-content;
padding-right: 30px; margin-right: 5px;
border-right: 1px solid var(--nav-border);
color: var(--nav-text); text-decoration: none;
}
.marca:hover { text-decoration: none; }
.marca img { width: 48px; height: 48px; object-fit: contain; }
.marca > span { display: flex; flex-direction: column; justify-content: center; }
.marca-nume {
/* litera de titlu a casei, nu una scrisa de mana */
font-family: var(--f-titlu);
/* litera de la inceput (1,28rem), pastrata la cererea medicului -
forma adusa o urcase la 1,55 */
font-size: 1.28rem; font-weight: 700; line-height: 1.1;
letter-spacing: -.02em; color: var(--nav-text);
}
.marca-sub {
margin-top: 6px;
font-size: .68rem; font-weight: 500; line-height: 1;
letter-spacing: .04em; text-transform: uppercase;
color: var(--nav-text-secundar);
}
.meniu {
flex: 1;
display: flex; align-items: center; justify-content: flex-end;
gap: 28px;
}
/* `>` in loc de `:not(.buton)`: butoanele stau in `.meniu-actiuni`, deci
nu sunt copii DIRECTI ai meniului si nu mai pot fi atinse din gresala.
(Regula veche exista tocmai fiindca fara ea „Inregistrare" iesea cu
text gri pe auriu, contrast 2,72 - masurat atunci.) */
.meniu > a {
position: relative;
display: inline-flex; align-items: center;
min-height: 48px; padding: 3px 0;
color: var(--nav-text); text-decoration: none;
font-size: .925rem; font-weight: 600; line-height: 1.2; /* ca la inceput */
white-space: nowrap;
transition: color .2s ease, transform .2s ease;
}
/* linia care creste sub legatura */
.meniu > a::after {
content: "";
position: absolute; left: 50%; bottom: 4px;
width: 0; height: 2px;
background: var(--nav-mov); border-radius: 999px;
transform: translateX(-50%);
transition: width .22s ease;
}
.meniu > a:hover { color: var(--nav-mov); text-decoration: none; }
.meniu > a:hover::after { width: 100%; }
/* pagina curenta: merge si cu class="activ", si cu aria-current="page" */
.meniu > a.activ,
.meniu > a[aria-current="page"] { color: var(--nav-mov); font-weight: 700; }
.meniu > a.activ::after,
.meniu > a[aria-current="page"]::after { width: 100%; height: 3px; }
.meniu-actiuni { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.meniu-actiuni .buton {
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 0 16px; border-radius: 10px;
/* `text-decoration` nu se repeta aici: o stinge deja `.buton`, si
tot acolo se stinge si la :hover. Repetata doar in starea de
baza, regula generala `a:hover` s-ar fi intors peste butoane. */
font-size: .88rem; font-weight: 700;
transition: background-color .2s ease, border-color .2s ease,
color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.meniu-actiuni .buton-contur {
color: var(--nav-mov); background: var(--alb);
border: 1px solid rgba(124, 58, 237, .55);
box-shadow: 0 2px 5px rgba(124, 58, 237, .05);
}
.meniu-actiuni .buton-contur:hover {
color: var(--alb); background: var(--nav-mov); border-color: var(--nav-mov);
box-shadow: 0 7px 18px rgba(124, 58, 237, .20);
transform: translateY(-1px);
}
.meniu-actiuni form { margin: 0; }
.meniu-actiuni form .buton {
color: var(--alb);
background: linear-gradient(135deg, #8651e6 0%, #6d39ca 100%);
border: 1px solid transparent;
box-shadow: 0 5px 14px rgba(105, 55, 200, .20);
}
.meniu-actiuni form .buton:hover {
background: linear-gradient(135deg, #7541d6 0%, #5e2eb7 100%);
box-shadow: 0 8px 20px rgba(105, 55, 200, .28);
transform: translateY(-1px);
}
.meniu-actiuni .ico { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; }
.meniu a:focus-visible,
.meniu-actiuni .buton:focus-visible {
outline: 3px solid rgba(124, 58, 237, .24);
outline-offset: 4px;
}
/* meniul pe telefon: se deschide fără JavaScript, cu o casetă de bifat */
.meniu-buton { display: none; }
#meniu-comutator { display: none; }
/* PRAGUL SE MASOARA PE FEREASTRA REALA, nu se socoteste pe hartie
(socoteala a dat 1468, randarea altceva). Forma noua are marca mai lata
- sigla de 48 plus despartitorul - si jgheaburi de 28, deci meniul cere
mai mult decat inainte, chiar si dupa ce litera a fost pusa la loc.
MASURAT, cu meniul de birou fortat: la 1440 si la 1366 incape exact
(0 px in afara randului), la 1340 iese cu 26, la 1280 cu 86, la 1200
cu 166. Deci pragul e intre 1340 si 1366 - pus la 1365.
CE COSTA ALINIEREA (02.09.2026, masurat, nu socotit pe hartie): de cand
cartela urmeaza coloana casei, ea nu mai e min(fereastra - 36, 1400) ci
min(fereastra - 2*jgheab, --lat), deci se stramteaza odata cu jgheabul.
Randul are nevoie de 1194,5 px (masurat pe un clon pus pe `max-content`),
adica de o cartela de cel putin 1197 - sub ea, butonul „Inregistrare"
iese din cartela, TACUT (6,5 px la 1190, 96,5 la 1100, fara ca pagina sa
capete derulare). Cea mai stramta cartela din zona meniului de birou e
la fereastra de 1366: 1208,9 px, adica 11,9 px rezerva.
Deci INCAPE - dar la limita. Latimea la care cartela ar ajunge la 1197 e
o fereastra de ~1354, adica DEDESUBTUL pragului asta, unde meniul e deja
pe buton. Pragul de 1365 e chiar paza rezervei; cine il coboara trebuie
sa masoare din nou. Plasa, daca rezerva se pierde totusi (o legatura in
plus in meniu): `flex-wrap: wrap` pe `.bara-rand`. */
@media (max-width: 1365px) {
.meniu-buton {
display: grid; place-items: center; margin-left: auto;
width: 42px; height: 42px; border-radius: var(--raza-mica);
border: 1px solid var(--chenar-tare); background: var(--alb);
color: var(--text); cursor: pointer;
}
.meniu {
display: none; margin-left: 0; flex: 0 0 100%;
flex-direction: column; align-items: stretch; gap: 2px;
padding: 10px 0 16px; width: 100%;
border-top: 1px solid var(--chenar);
}
/* Combinatorul ~ merge doar intre FRATI: caseta e frate cu
.bara-rand, nu cu .meniu, care e inauntrul lui. Fara veriga
din mijloc, meniul de telefon nu s-ar deschide niciodata. */
#meniu-comutator:checked ~ .bara-rand .meniu { display: flex; }
.meniu > a { min-height: 44px; padding: 4px; }
.meniu > a::after { left: 4px; bottom: 2px; transform: none; }
.meniu-actiuni { margin: 10px 0 0; flex-direction: column; align-items: stretch; }
.meniu-actiuni .buton { justify-content: center; }
/* `flex-wrap: wrap` nu se mai repeta aici: e de-acum in regula de baza a
randului, ca plasa la orice latime. Repetat, ar fi ramas viu si daca
cineva schimba baza pe `nowrap` - adica exact felul in care doua
reguli pentru acelasi lucru diverg tacut. */
.bara-rand { min-height: 72px; padding: 0 18px; }
.marca { padding-right: 20px; }
}
@media (max-width: 900px) {
/* Pe telefon cartela se desprinde de muchia de sus (10 px sus si jos),
dar pe ORIZONTALA ramane jgheabul casei - altfel bara ar fi din nou
mai lata decat continutul, aici cu 2 x (jgheab - 10) px. */
.bara { padding: 10px var(--jgheab); }
.bara > .invelis { border-radius: 14px; }
.bara-rand { min-height: 72px; padding: 0 16px; }
.marca { border-right: 0; padding-right: 0; margin-right: auto; }
.marca img { width: 42px; height: 42px; }
.marca-sub { font-size: .59rem; }
}
/* ========================================================= BUTOANE ==== */
.buton {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 12px 22px;
border-radius: var(--raza);
font-family: var(--f-text);
font-size: .95rem; font-weight: 600; line-height: 1.2;
border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.buton:hover { text-decoration: none; }
.buton .ico { width: 1.05em; height: 1.05em; }
.buton-zima { background: var(--zima-umplere); color: var(--pe-zima); box-shadow: var(--umbra-1); }
.buton-zima:hover { background: var(--zima-text); }
.buton-auriu { background: var(--auriu-umplere); color: var(--alb); box-shadow: var(--umbra-1); }
.buton-auriu:hover { background: var(--auriu-inchis); }
.buton-alb { background: var(--alb); color: var(--text); border-color: var(--chenar-tare); }
.buton-alb:hover { border-color: var(--text); }
.buton-contur { background: transparent; color: var(--text); border-color: var(--text); }
.buton-contur:hover { background: var(--zima-palid); }
.buton-gol { background: transparent; color: var(--pe-zima); border-color: rgba(255,255,255,.4); }
.buton-gol:hover { background: rgba(255,255,255,.12); }
.buton-mic { padding: 8px 15px; font-size: .875rem; border-radius: var(--raza-mica); }
.buton-lat { width: 100%; }
.buton:disabled, .buton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* butonul rotund cu săgeată, din colțul cardurilor */
.buton-rotund {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center; flex: 0 0 46px;
border: 1.5px solid currentColor; background: transparent;
transition: background-color .15s, color .15s;
}
.buton-rotund .ico { width: 20px; height: 20px; }
.buton-rotund-zima { color: var(--text); }
.buton-rotund-zima:hover { background: var(--zima-umplere); color: var(--alb); }
.buton-rotund-auriu { color: var(--auriu-umplere); }
.buton-rotund-auriu:hover { background: var(--auriu-umplere); color: var(--alb); }
:focus-visible { outline: 2px solid var(--zima-text); outline-offset: 2px; }
/* ============================================================ EROU ==== */
/* ============================================================== EROU ===
Reconstruit din COTELE machetei, nu din impresie. Masurat pe imagine,
raportat la latimea panoului ei (735px) si a continutului (684px):
bara 54px = 7,4% din latime
eroul 346px = 50,6% din latimea continutului
fotografia 323px = 47,2% din continut, lipita de marginea dreapta
jgheabul stanga 38px = 5,2%
statuia incepe la 17px sub bara = 4,9% din inaltimea eroului
Ritmul vertical, tot masurat (procente din inaltimea eroului):
padding sus 10,4% | pastila -> titlu 6,1%
titlu -> paragraf 4,6% | paragraf -> insemne 9,0%
insemne -> butoane 9,8% | padding jos 11,0%
Adica blocul de text ocupa 78% si respira egal sus si jos.
======================================================================== */
.erou { background: var(--erou-fundal); }
.erou-continut {
position: relative;
display: grid;
/* 53 / 47, exact raportul din macheta. Fotografia se termina pe linia
din dreapta a continutului - adica acolo unde se termina si butonul
"Inregistrare" si cardurile de dedesubt. In macheta diferenta dintre
cele doua e de 13px dintr-un panou de 735, adica nevazuta. */
grid-template-columns: 53fr 47fr;
align-items: center;
gap: clamp(24px, 3.4vw, 56px);
/* 10,5% din inaltimea eroului, sus si jos - eroul e centrat, nu impins. */
padding-block: clamp(30px, 3.5vw, 62px);
}
/* DESENUL EROULUI, ca FUNDAL AL INTREGII BENZI.
E fisierul utilizatorului (`nextsvg_refined_v4_tech.svg`), copiat octet
cu octet, cu culorile lui.
Cerut in trei pasi, 01.09.2026, si fiecare pas a schimbat asezarea:
1. „sa fie incadrat in chenarul stabilit, nu sa mearga cu marginea
complet spre dreapta" - deci NU pana in muchia ferestrei;
2. „sa nu fie ca un card" - fara chenar, fara umbra, fara colturi;
3. „marginea din STANGA sa ajunga pana la «Calcul»" - adica pana sub
titlu. Asa devine cu adevarat un FUNDAL: textul sta PE el.
De aceea desenul nu mai e un element in coloana din dreapta, ci
fundalul containerului. `content-box` il face sa inceapa exact la
marginea din stanga a textului si sa se opreasca in chenarul paginii -
nicaieri altundeva n-ar cadea pe aceleasi doua linii.
Textul ramane citibil fiindca partea din STANGA a desenului e coala lui
aproape alba; masurat pe pixeli, nu presupus (vezi voalul de mai jos). */
.erou { background: var(--erou-fundal); }
.erou-continut {
/* Voalul de deasupra desenului. NU e ales din ochi: s-au citit PIXELII
desenului sub fiecare rand de text si s-a cautat alfa MINIMA care
trece pragul, pe benzi de 5% din latime. Cerinta masurata: 0,74 pe
primii 40%, 0,10 la 40%, ZERO dupa 45% - iar textul se termina la
51%. Voalul urmeaza chiar forma asta: tare cat tine textul, stins
pana la 58%, iar de acolo incolo desenul se vede nevoalat.
Sub text ramane vazut, dar palit - asta si INSEAMNA un fundal:
scris peste desenul nevoalat, paragraful da 1,47.
VOALUL E ALB, nu cremul de dinainte (#f4f2f1): eroul statea pe crem,
deci voalul se potrivea cu el. De cand coala e alba, cremul se vedea
ca o fasie mai inchisa langa restul paginii (semnalat 01.09.2026:
„sa se integreze perfect fara diferenta de culoare cu backgroundul").
Alfele NU s-au atins - sunt masurate pe pixelii desenului; albul e
mai deschis decat cremul, deci textul de deasupra castiga contrast,
nu pierde. */
background:
linear-gradient(90deg,
rgba(255, 255, 255, .82) 0%,
rgba(255, 255, 255, .82) 40%,
rgba(255, 255, 255, .22) 49%,
rgba(255, 255, 255, 0) 58%),
url("../img/arta-tech.svg") right center / cover no-repeat;
background-origin: content-box;
background-clip: content-box;
}
/* Coloana din dreapta nu mai desenează nimic: doar tine locul, ca textul
sa nu se intinda peste partea incarcata a desenului. */
.erou-poza {
align-self: stretch;
min-height: clamp(240px, min(28vw, 46vh), 460px);
}
.eticheta {
display: inline-flex; align-items: center; gap: 7px;
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; color: var(--text);
background: var(--zima-palid); border: 1px solid var(--zima-chenar);
border-radius: 999px; padding: 7px 16px;
/* Toate spatiile de mai jos sunt COTE din macheta, exprimate in vw ca
sa cada exact pe valoarea masurata la 1440px (latimea pe care pare
desenata macheta): pastila->titlu 40px, titlu->paragraf 30,
paragraf->insemne 59, insemne->butoane 64. Erau 16/14/18/0 - de-aia
macheta parea calma si a noastra inghesuita. */
margin-bottom: clamp(16px, 2.8vw, 40px);
}
/* In macheta titlul are pasul de rand 39px la un panou de 735, adica
~68px la 1440. La noi nu incape atat: titlul e cu 26% mai lung
("Calcul punctaj traumatologic," fata de "Calculul traumatologic,") si
ar trece pe trei randuri. Masurat pe randare: coloana de text are
650px la 1440, iar primul rand cere 15,08px de latime pentru fiecare
px de litera - deci plafonul e 42,5px (2,65rem), la care iese 640. */
.erou h1 {
font-size: clamp(1.95rem, 2.95vw, 2.65rem);
line-height: 1.11;
margin-bottom: clamp(12px, 2.1vw, 30px);
}
.erou-descriere {
font-size: clamp(1rem, 1.25vw, 1.12rem);
line-height: 1.62;
color: var(--text-mediu); max-width: 34em;
margin-bottom: clamp(22px, 4.1vw, 59px);
}
/* cele trei însemne de sub descriere */
.insemne {
display: flex; flex-wrap: wrap; gap: 0;
/* Alb aproape plin peste tonul cald al eroului: banda se ridica de pe
suprafata, dar fara chenar tare - ca in macheta. */
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: var(--raza-mare);
padding: 4px;
margin-bottom: clamp(24px, 4.4vw, 64px);
box-shadow: var(--umbra-1);
}
/* `flex: 1 1 0` - nu `1 1 175px`: cele trei ies EXACT egale, indiferent
cat de lung e textul din ele. Cu o baza in pixeli, chipul cu textul mai
lung fura latime de la vecini si simetria se pierde. */
.insemn {
display: flex; align-items: center; gap: 8px;
padding: 8px 11px; flex: 1 1 0; min-width: 0;
}
/* Fara linii intre chipuri: in macheta nu exista, iar trei linii
verticale intr-o banda de 60px o fac sa arate ca un tabel. */
.insemn-titlu {
font-weight: 600; font-size: .82rem; line-height: 1.25;
color: var(--text); display: block;
}
.insemn-sub {
font-size: .715rem; line-height: 1.25;
color: var(--text-stins); display: block;
}
.erou-butoane { display: flex; gap: 13px; flex-wrap: wrap; }
@media (max-width: 900px) {
/* O singura coloana: textul sus, cardul cu poza dedesubt. Padding-ul
orizontal vine de la .invelis (jgheabul), nu se rescrie aici. */
.erou-continut { grid-template-columns: 1fr; gap: 24px; }
/* `min-height` IMPREUNA cu `aspect-ratio` face latimea sa fie dedusa din
inaltime - masurat la 390px: cardul iesea 390 lat intr-o coloana de
349 si pagina depasea cu 20px. Aici inaltimea se deduce din latime. */
/* Pe o coloana, marginile negative n-au ce anula si ar scoate
desenul din jgheab: se dau inapoi. */
.erou-poza {
min-height: 0; width: 100%; aspect-ratio: 3 / 2;
margin-block: 0; margin-left: 0; border-radius: var(--raza-mare);
}
.insemn + .insemn { border-top: 1px solid var(--chenar); }
}
@media (max-width: 1140px) {
/* Pragul e MASURAT, nu ales: cele trei chipuri incap fiecare pe un rand
de la 1140 in sus si se rup intre 1120 si 1101. Sub prag se stivuiesc:
trei etichete rupte in doua se citesc mai rau decat trei randuri
intregi. */
.insemne { flex-direction: column; }
.insemn { flex: 1 1 auto; }
}
/* ========================================================== SECȚIUNI == */
.sectiune { padding: 62px 0; }
.sectiune-slab { background: var(--fundal-slab); }
/* CUSATURA EROU -> prima sectiune. Cele doua respiratii se ADUNAU:
eroul isi are 50px de padding jos, iar sectiunea urmatoare inca 62 -
deci de la ultima cerneala a eroului pana la titlu erau 112px, in timp
ce de la titlu la cardurile pe care le anunta erau 34. Titlul plutea
sus si statea lipit jos (semnalat 01.09.2026: „putem sa mai urcam cu
Doua moduri de a obtine fisa"). Masurat la 1440: 112 -> 73px, adica
titlul urca 39px, iar raportul fata de golul de dedesubt devine ~2:1 -
destul cat sa se vada ca e o sectiune noua, nu atat cat sa se rupa de
cardurile ei. Regula atinge DOAR cusatura de dupa erou. */
.erou + .sectiune { padding-top: clamp(10px, 1.6vw, 24px); }
.sectiune-titlu { text-align: center; margin-bottom: 34px; }
/* `h1` ori `h2`: rangul e al PAGINII (pagina de experți își ia titlul de
rang întâi, §142), forma e a secțiunii. */
.sectiune-titlu h1,
.sectiune-titlu h2 { margin-bottom: 12px; }
/* linia aurie de sub titlurile centrale, ca în machetă */
.sectiune-titlu h1::after,
.sectiune-titlu h2::after {
content: ""; display: block; width: 56px; height: 3px;
background: var(--auriu); border-radius: 2px; margin: 14px auto 0;
}
.sectiune-titlu p { color: var(--text-stins); max-width: 620px; margin: 0 auto; }
/* Varianta la stanga (/experti): titlul si paragraful pornesc de pe
aceeasi linie. `margin: 0 auto` centra paragraful in cutia lui, deci
randul de sub titlu iesea retras cu 70 px — masurat. */
.sectiune-titlu-stanga { text-align: left; max-width: 780px; }
.sectiune-titlu-stanga p { margin-inline: 0; max-width: none; }
.sectiune-titlu-stanga h1::after,
.sectiune-titlu-stanga h2::after { margin-inline: 0; }
@media (max-width: 700px) { .sectiune { padding: 44px 0; } }
.grila { display: grid; gap: 22px; }
.grila-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grila-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grila-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cele patru se sparg 2+2, niciodata 3+1: un singur element orfan pe
randul al doilea se citeste ca o greseala de asezare. Masurat la 820px,
unde auto-fit dadea chiar 3+1. */
@media (max-width: 1040px) { .grila-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grila-4 { grid-template-columns: 1fr; } }
/* ========================================================= CARDURI ==== */
.card {
background: var(--alb);
border: 1px solid var(--chenar);
border-radius: var(--raza-mare);
box-shadow: var(--umbra-1);
padding: 24px 26px;
}
.card-cap {
display: flex; align-items: baseline; gap: 14px;
margin-bottom: 16px; flex-wrap: wrap;
}
.card-cap h2, .card-cap h3 { margin: 0; }
.card-cap > .stins:last-child { margin-left: auto; }
/* ================================================ CARDURILE DE DRUM ====
Cele doua carduri mari de pe prima pagina, refacute 01.09.2026 dupa
macheta adusa de utilizator (F:\PJ\style).
Ce s-a luat de acolo: cardul e INTREG o legatura, desenul sta SUS pe
toata latimea, titlul e greu (900) cu urmarire stransa, iar umbra e
perechea joasa+difuza care da adancimea.
Ce s-a castigat pe drum: cardul fiind chiar un , dispare ocolisul
de dinainte - o legatura intinsa cu ::after peste card - care se
stransese odata la 44x44 exact cand mausul trecea peste el, fiindca
un `transform` pe il facea bloc-container. Acum nu mai e nimic de
intins: e legatura.
======================================================================= */
.card-drum {
display: flex; flex-direction: column;
/* Ancora desenului, care sangereaza din coltul din dreapta-sus. Fara ea
el se aseaza fata de alt stramos si iese cu totul din card. */
position: relative;
background: var(--alb);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
border: 1px solid var(--chenar);
box-shadow:
rgba(12, 64, 83, .18) 0 26px 50px -22px,
rgba(0, 0, 0, .16) 0 16px 30px -24px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-drum:hover {
/* Cardul E o legatura, deci regula generala `a:hover` ii sublinia TOT
textul dinauntru - titlu, descriere, cele trei randuri cu bifa si
pretul. Semnalat de medic la 01.09.2026. Ridicarea si umbra sunt
raspunsul la maus; sublinierea e pentru legaturi de text. */
text-decoration: none;
transform: translateY(-3px);
border-color: var(--zima);
box-shadow:
rgba(12, 64, 83, .26) 0 38px 66px -22px,
rgba(0, 0, 0, .22) 0 22px 40px -26px;
}
.card-drum:focus-visible { outline: 2px solid var(--zima-text); outline-offset: 3px; }
/* CARDUL DE DRUM, dupa macheta adusa de medic (01.09.2026, a sasea
trecere - „refa intocmai").
Desenul NU e o banda deasupra continutului: SANGEREAZA din coltul din
dreapta-sus si se stinge in jos si spre stanga, iar eticheta si titlul
curg peste el. Cifrele sunt masurate pe macheta (card 710 lat):
confettiul tine ~60% din latime si ~24% din inaltime, placheta rotunda
are 86px (12,1% din latime), iar coloana de text incepe la 18,6%. */
.card-drum .arta {
position: absolute; top: 0; right: 0; z-index: 0;
display: block; width: 60%; height: auto;
/* Ridicat cu 13,54%: desenul are GOL in capul lui - masurat pe cutia lui
de cerneala, prima forma incepe la y=86 din 635. Fara ridicare, el
porneste vizibil mai jos decat marginea cardului. Procentul din
`translate` se socoteste pe ELEMENT, nu pe parinte - de aceea nu merge
cu `top`. */
transform: translateY(-13.54%);
opacity: .9;
filter: contrast(1.12) saturate(1.12);
/* Se stinge in DOUA directii, si capetele sunt MASURATE pe randurile
de text, nu alese: primul rand al descrierii ajunge la 95% din latimea
cardului, la y=95, deci desenul trebuie sa fie stins pana acolo -
altfel cuvintele cad peste el (semnalat 01.09.2026). Deasupra lui,
textul nu trece de 28% (eticheta 21%, titlul 28%), deci desenul are
tot coltul liber. `intersect` inmulteste cele doua masti. */
-webkit-mask-image:
linear-gradient(to bottom, #000 0%, #000 20%, transparent 48%),
linear-gradient(to left, #000 52%, transparent 100%);
mask-image:
linear-gradient(to bottom, #000 0%, #000 20%, transparent 48%),
linear-gradient(to left, #000 52%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.card-drum__corp {
position: relative; z-index: 1; /* peste desen */
padding: 26px 24px 20px;
display: flex; flex-direction: column;
flex: 1 1 auto;
}
.card-drum__eticheta {
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.card-drum__eticheta-zima { background: var(--zima-chenar); color: var(--text); }
.card-drum__eticheta-auriu { background: var(--atentie-fundal); color: var(--atentie); }
.card-drum__titlu {
margin: 0 0 8px;
font-size: 1.12rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em;
color: var(--text);
}
.card-drum__desc { margin: 0 0 14px; font-size: .93rem; line-height: 1.5; color: var(--text-mediu); }
.card-drum__corp .bife { margin-bottom: 16px; }
/* Subsolul ia tot randul (dupa placheta si text) si are LINIE deasupra,
ca in macheta. `margin-top: auto` il tine lipit de fundul cardului. */
.card-drum__jos {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: auto; padding-top: 16px;
border-top: 1px solid var(--chenar);
}
.card-drum__pret { font-size: .84rem; color: var(--text-stins); }
.card-drum__pret strong { color: var(--text); font-size: 1rem; }
.card-drum__mergi {
display: inline-flex; align-items: center; gap: 7px;
font-size: .9rem; font-weight: 700; color: var(--zima-text);
}
.card-drum__mergi .ico { transition: transform .18s ease; }
.card-drum:hover .card-drum__mergi .ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.card-drum, .card-drum .ico { transition: none; }
.card-drum:hover { transform: none; }
}
/* lista cu bifă */
.bife { list-style: none; margin: 0; padding: 0; }
.bife li {
display: flex; align-items: flex-start; gap: 9px;
font-size: .9rem; color: var(--text-mediu); margin-bottom: 7px;
}
.bife li:last-child { margin-bottom: 0; }
/* PROZA DIN CARDURI, aliniata pe amandoua marginile (medicul, 02.09.2026:
„pune si tu in carduri textul justify"). Selectorii sunt NUMITI unul cate
unul, nu prinsi cu `.card > p`: acela ar fi batut si textele CENTRATE, care
au clasa lor cu specificitate mai mica. `hyphens` lucreaza fiindca pagina
declara lang="ro". */
.card-drum__desc,
.card .citat,
.pret-card .stins.mic,
/* Fara justify: coloana marcii are ~280 px, adica sub 40 de semne pe rand, iar alinierea pe amandoua marginile face rauri albe vizibile (masurat pe randare dupa ce coloana s-a ingustat la §143). Justify-ul ramane la textul lung din paginile de temei. */
.subsol-nota p { hyphens: auto; }
/* Semnele se citesc dintr-o privire, deci sunt mai apasate decat restul
iconitelor (1,6): grosimea e a semnului, nu a randului - textul ramane
cum era. Masurat pe alb: verdele 5,38, rosul 7,11. */
.bife .ico {
color: var(--bine); width: 1.05em; height: 1.05em; margin-top: .15em;
stroke-width: 2.6;
}
/* rândul cu meseriile care folosesc platforma */
/* CINE FOLOSEȘTE — 01.09.2026.
Medicul, de trei ori. Întâi „bara parcă iese din stilul paginii": era
singura secțiune fără nicio formă, cu mărimile scrise inline în marcaj.
Apoi „nu repeta stilul, ceva diferit" — o pusesem pe ACELAȘI card alb cu
umbră ca banda de garanții de dedesubt, deci ieșeau două carduri gemene,
unul peste altul.
A treia formă e cea de acum, și e altă FAMILIE, nu altă nuanță: banda de
dedesubt e un card alb cu umbră; asta e o fâșie plată, ținută de două
linii subțiri. Nu se pot compara, deci nu se repetă.
NU are pastile, și e o măsurătoare, nu un gust: pe coala deschisă
(#f7f9fc) o pastilă albă dă 1,05 față de fundal iar chenarul casei 1,14
— adică forma pur și simplu nu se vede, iar singurul fel de-a o face
vizibilă ar fi o culoare care nu e în paletă. Textul duce oricum tot
înțelesul, la 16:1. */
.meserii-titlu {
text-align: center; margin: 0 0 18px;
font-size: .78rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-stins);
}
.meserii {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 14px clamp(18px, 3vw, 44px);
border-top: 1px solid var(--chenar);
border-bottom: 1px solid var(--chenar);
padding: 20px 0;
}
/* Sub o anumită lățime cele cinci nu mai încap pe un rând ORICÂT s-ar
strânge golul — măsurat: textele lor fac 708px, iar învelișul mănâncă
133, deci pragul e 841px + goluri. Lăsate în seama lui `flex-wrap`,
între 841 și ~960px rup 4+1, adică una singură atârnă pe rândul al
doilea. Grila taie exact unde trebuie: 3+2, apoi 2+2+1, apoi una sub
alta — rupturi hotărâte, nu rămășițe. */
@media (max-width: 1000px) {
.meserii {
display: grid; grid-template-columns: repeat(3, auto);
justify-content: center; justify-items: start;
}
}
@media (max-width: 700px) { .meserii { grid-template-columns: repeat(2, auto); } }
@media (max-width: 460px) { .meserii { grid-template-columns: auto; } }
.meserie {
display: flex; align-items: center; gap: 10px;
font-size: .92rem; font-weight: 600; color: var(--text);
}
/* Glifa mai mare decât era (19px → 22px) și în albastrul casei. Mărimea nu
e cosmetică: la 19px cele trei siluete de om nu se deosebeau între ele.
Desenele au fost și ele schimbate — cinci FORME, nu cinci posturi ale
aceluiași om. */
.meserie .ico {
width: 22px; height: 22px; flex: 0 0 22px;
color: var(--zima-umplere);
}
/* ========================================== BANDA DE GARANTII ========
Refacuta 01.09.2026 dupa macheta adusa de utilizator (`card x.png`).
E INVERSA fata de tot ce a fost inainte: nu o banda colorata cu scris pe
ea, ci un CARD ALB pe o coala foarte deschisa, cu accente albastre.
Culorile sunt cele MASURATE pe macheta: coala #f7f9fc (chiar
`--fundal-slab`), cercul albastru foarte deschis, glifa si liniuta
albastre, scrisul inchis, despartitoare subtiri.
Asa dispare si ultima suprafata inchisa de pe prima pagina. */
.banda {
background: var(--fundal-slab);
padding: 56px 0;
}
.banda .invelis > .grila {
background: var(--alb);
border-radius: 24px;
padding: 40px clamp(16px, 2vw, 32px);
box-shadow:
rgba(23, 123, 159, .10) 0 24px 48px -20px,
rgba(0, 0, 0, .08) 0 8px 20px -14px;
gap: 0;
}
.banda-item {
display: block;
text-align: center;
padding: 4px clamp(12px, 2vw, 28px);
}
/* Despartitoarele subtiri dintre cele patru, ca in macheta. Pe prima nu
se pune - altfel ar atarna una in gol la marginea cardului. */
.banda-item + .banda-item { border-left: 1px solid var(--chenar); }
.banda h3 {
color: var(--text); font-size: 1.02rem; font-weight: 700;
margin: 0 0 12px; line-height: 1.25;
}
/* Liniuta scurta de sub titlu. E DECOR - nu poarta nicio informatie, de
aceea are voie sa fie in nuanta marcii (2,04 fata de alb), care ca text
n-ar trece. Ce spune cardul sta in titlul de deasupra. */
.banda h3::after {
content: ''; display: block; width: 38px; height: 3px; border-radius: 2px;
background: var(--zima); margin: 12px auto 0;
}
.banda p {
color: var(--text-mediu); font-size: .88rem; line-height: 1.5;
margin: 0; max-width: 26ch; margin-inline: auto;
}
/* ============================================= EXEMPLU ȘI RECOMANDARE = */
.foaie {
background: var(--alb); border: 1px solid var(--chenar);
border-radius: var(--raza); box-shadow: var(--umbra-2);
padding: 18px 20px; font-size: .78rem;
}
.foaie-cap {
display: flex; align-items: center; gap: 9px;
padding-bottom: 11px; margin-bottom: 12px;
border-bottom: 1px solid var(--chenar);
}
.foaie-cap img { width: 26px; }
.foaie table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.foaie th {
text-align: left; font-weight: 600; color: var(--text-stins);
font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
padding: 5px 6px; border-bottom: 1px solid var(--chenar);
}
.foaie td { padding: 5px 6px; border-bottom: 1px solid var(--chenar); }
.foaie tr:last-child td { border-bottom: 0; font-weight: 700; color: var(--text); }
/* Proza aliniata pe amandoua marginile, cerut de medic. `hyphens: auto`
e OBLIGATORIU aici: coloana e ingusta, iar fara despartire in silabe
justify-ul face rauri albe - se vedea in captura adusa. */
.citat { font-size: 1.02rem; color: var(--text-mediu); font-style: italic;
text-align: justify; hyphens: auto; }
.stele { color: var(--auriu-inchis); letter-spacing: .08em; }
/* ========================================================== SUBSOL ==== */
/* Subsolul, in limbajul machetei `card x.png` (01.09.2026): coala
deschisa, card ALB cu colturi mari si umbra moale, accente albastre.
Inainte era o banda inchisa cu sapte legaturi insirate pe un rand.
Asa dispare si ultima suprafata inchisa a paginilor publice. */
.subsol {
background: var(--fundal-slab);
padding: 56px 0 34px;
font-size: .88rem;
color: var(--text-mediu);
margin-top: 0;
}
.subsol-card {
background: var(--alb);
border-radius: 24px;
padding: 34px clamp(20px, 3vw, 40px) 30px;
box-shadow:
rgba(23, 123, 159, .10) 0 24px 48px -20px,
rgba(0, 0, 0, .08) 0 8px 20px -14px;
}
.subsol-sus {
display: flex; flex-wrap: wrap; gap: 32px 48px;
align-items: flex-start;
/* Cand cele doua blocuri incap pe acelasi rand, asta le tine la capete
(ca `margin-left: auto` de dinainte); cand se rup pe doua randuri,
coloanele pornesc de la STANGA, nu impinse in dreapta peste un gol.
§143: la 1387 px blocul marcii cerea 620, coloanele 816 si nu incapeau
— masurat — iar coltul din stanga-jos ramanea o cutie goala. */
justify-content: space-between;
}
.subsol-marca { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
.subsol-marca img { display: block; width: 44px; height: auto; }
.subsol-marca strong {
display: block; color: var(--text);
font-family: var(--f-titlu); font-size: 1.05rem; line-height: 1.2;
}
.subsol-marca span {
display: block; font-size: .74rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-stins); margin-top: 3px;
}
/* Legaturile pe COLOANE cu titlu, nu insirate pe un rand: sapte legaturi
una langa alta nu se pot citi ca grupuri. */
/* `margin-left: auto` a iesit: pe randul comun il face `space-between`, iar
cand blocurile se rup, el impingea coloanele in dreapta si lasa coltul
din stanga-jos gol (masurat la 1280: porneau de la 344 in loc de 105). */
.subsol-coloane {
display: flex; flex-wrap: wrap; gap: 26px 38px; flex: 1 1 auto;
justify-content: flex-start;
}
/* Coloana „Consumatori" cerea 244 px, fiindca legatura catre SAL nu se
rupea: singura ei linie tinea tot randul de subsol pe doua etaje.
Plafonata, textul curge pe doua randuri si cele patru coloane stau
langa marca pana pe la 1200 px. */
.subsol-coloane > div { max-width: 184px; }
.subsol-coloane > div { display: flex; flex-direction: column; gap: 8px; }
.subsol-coloane h3 {
margin: 0 0 4px; font-size: .74rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-stins);
}
.subsol-coloane a { color: var(--text-mediu); font-size: .88rem; }
.subsol-coloane a:hover { color: var(--zima-text); text-decoration: underline; }
/* Nota care conteaza: platforma nu e un calculator oficial. Sta SUB MARCA,
in aceeasi coloana - nu intr-o banda proprie sub legaturi, care facea
subsolul sa arate ca doua subsoluri unul sub altul (medicul, 02.09.2026:
„ce rost are sa dublam foot"). */
.subsol-marca-bloc {
/* 620 era prea lat ca sa mai incapa coloanele alaturi: masurat, ele cer
816 px, iar randul are 1195. Cu 480 raman 667 — deci intra amandoua
pe un rand pana pe la 1330 px de fereastra. */
flex: 0 1 340px; min-width: 0; max-width: 380px;
display: flex; flex-direction: column; gap: 18px;
}
.subsol-nota {
display: flex; gap: 14px; align-items: flex-start;
}
.subsol-nota .ico-cerc-garantie { margin: 0; width: 44px; height: 44px; flex: 0 0 44px; }
.subsol-nota .ico-cerc-garantie .ico { width: 20px; height: 20px; }
.subsol-nota-text { min-width: 0; }
.subsol-nota p { margin: 0; line-height: 1.55; }
.subsol-nota strong { color: var(--text); }
/* Temeiul legal, imediat sub nota: mai mic si mai stins, ca sa se citeasca
drept trimitere, nu drept a doua fraza. Selector de DOUA clase - altfel
`.subsol-nota p { margin: 0 }` i-ar bate marginea de sus. */
.subsol-nota .subsol-temei {
margin-top: 8px; font-size: .8rem; color: var(--text-stins);
}
.subsol-nota .subsol-temei a { color: var(--zima-text); }
.subsol-nota .subsol-temei a:hover { text-decoration: underline; }
.subsol-jos {
margin-top: 22px; text-align: center;
font-size: .8rem; color: var(--text-stins);
}
.subsol-jos p { margin: 0 0 4px; }
.subsol-jos a { color: var(--zima-text); }
.subsol-jos a:hover { text-decoration: underline; }
.subsol-jos strong { color: var(--text-mediu); font-weight: 600; }
/* ========================================================= PASTILE ==== */
.pastila {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.p-lt { background: var(--zima-umplere); color: var(--alb); }
.p-cp { background: var(--zima-palid); color: var(--text); border: 1px solid var(--zima-chenar); }
.p-cpp { background: var(--atentie-fundal); color: var(--atentie); border: 1px solid #f0d9b8; }
.p-bine { background: var(--bine-fundal); color: var(--bine); }
.p-atentie { background: var(--atentie-fundal); color: var(--atentie); }
.p-rau { background: var(--rau-fundal); color: var(--rau); }
/* ======================================================== FORMULARE == */
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; color: var(--text); }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=number], select, textarea {
width: 100%; padding: 10px 13px; min-height: 44px;
border: 1px solid var(--chenar-tare); border-radius: var(--raza);
font-family: inherit; font-size: .95rem; color: var(--text);
background: var(--alb);
}
input:focus, select:focus, textarea:focus {
border-color: var(--zima-text);
box-shadow: 0 0 0 3px rgba(36, 67, 122, .12);
outline: none;
}
.rand { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.rand > * { flex: 1 1 190px; }
.rand > .ingust { flex: 0 0 auto; }
/* CASETELE DE ALEGERE (LT / CP / CPP).
O leziune poate avea 25 de pozitii - „Oase carpiene" chiar are. Pana la
01.09.2026 caseta BIFATA arata exact ca una nebifata: nu exista NICIO
regula de stare bifata, deci singurul semn era casuta nativa, de 13px.
Pe o lista lunga, omul nu mai stia ce a ales. Nu era o chestiune de
frumusete, ci de folosinta. */
.alegere {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px; border: 1px solid var(--chenar);
border-radius: var(--raza); margin-bottom: 8px; cursor: pointer;
background: var(--alb);
transition: border-color .14s, background-color .14s, box-shadow .14s;
}
.alegere:hover { border-color: var(--zima); box-shadow: var(--umbra-2); }
/* STAREA BIFATA. Tenta singura NU ajunge - masurat, --zima-palid da 1,03
fata de coala alba, adica nimic. Ce se vede e DUNGA din stanga
(--zima-umplere, 4,81 pe alb) plus chenarul (4,66 pe tenta). Dunga se
deseneaza cu box-shadow interior, ca sa nu miste nimic in asezare. */
.alegere:has(:checked) {
border-color: var(--zima-umplere);
background: var(--zima-palid);
box-shadow: inset 3px 0 0 var(--zima-umplere);
}
.alegere:has(:focus-visible) {
outline: 2px solid var(--zima-text); outline-offset: 2px;
}
.alegere input {
margin-top: 3px; flex: 0 0 auto; width: auto; min-height: 0;
/* plasa pentru browserele fara `:has()`: chiar casuta nativa se coloreaza,
deci bifarea ramane vizibila si acolo unde regula de mai sus nu prinde */
accent-color: var(--zima-umplere);
}
.alegere-text { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: .92rem; }
/* Regula scrisă în locul unui scor — stă sub numele leziunii, nu în
pastilă. Vezi `Barem::punctajECifra()` pentru CINE hotărăște. */
.alegere-regula {
display: inline-block; margin-top: 3px;
font-size: .84rem; color: var(--text-mediu); font-style: italic;
}
.alegere-punctaj {
/* `0 1 auto` + plafon, nu `0 0 auto`: pastila are voie să se strângă
înaintea numelui leziunii. E plasa pentru ziua în care un fel NOU de
punctaj ar produce iar un șir lung — numele rămâne citibil, în loc să
fie strivit la zero. */
flex: 0 1 auto; max-width: 40%; text-align: right;
font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
background: var(--fundal-slab); border-radius: var(--raza-mica);
padding: 2px 8px; font-size: .9rem;
}
.alegere:has(:checked) .alegere-punctaj { background: var(--alb); }
.alegere.nu-se-poate { opacity: .6; cursor: default; background: var(--fundal-slab); }
.alegere.nu-se-poate:hover { border-color: var(--chenar); box-shadow: none; }
.alegere label { margin: 0; font-weight: 400; }
/* CAPUL PANOULUI DE LEZIUNE: intoarcerea, langa titlu.
Pana la 01.09.2026 singura cale inapoi era cuvantul „inapoi", pierdut in
randul de metadate, cu litera mica si aceeasi culoare ca restul. Cine
deschidea o leziune si se razgandea n-avea ce apasa. */
.lez-cap { display: flex; gap: 14px; align-items: flex-start; }
.lez-cap-text { flex: 1 1 auto; min-width: 0; }
.lez-cap-text h2 { margin: 0; }
.lez-cap .buton { flex: 0 0 auto; margin-top: 4px; }
/* Randul de la piciorul panoului: adaugarea si renuntarea.
Renuntarea e SECUNDARA (buton alb), ca sa nu concureze cu actiunea
principala - dar e un buton, nu o legatura pierduta in text. */
.lez-actiuni { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
/* CARAREA din capul panoului de cautare: unde esti, fiecare treapta la un
singur clic. Fara ea, cu o leziune deschisa trebuiau DOUA clicuri pana la
lista capitolelor - semnalat de medic. */
.calc-carare {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
margin: 0 0 14px; font-size: .84rem; color: var(--text-stins);
}
.calc-carare a { color: var(--zima-text); }
.calc-carare .ico { width: 13px; height: 13px; flex: 0 0 auto; opacity: .55; }
.calc-carare [aria-current] { color: var(--text); font-weight: 600; }
/* SCARA CLINICA de sub o pozitie cu interval larg.
Sta INAFARA etichetei `.alegere` - inauntru, un clic pe select ar bifa
leziunea. Indentarea o leaga vizual de pozitia de deasupra, iar dunga din
stanga spune ca e o alegere in plus, nu una noua. */
.gradare-camp {
margin: -4px 0 12px 30px; padding: 10px 13px;
/* dunga e MARCAJUL blocului, deci trebuie sa se vada: masurat,
--zima da 2,04 pe coala alba, sub pragul de 3 al unui obiect
grafic; --zima-umplere da 4,81. */
border-left: 3px solid var(--zima-umplere); background: var(--zima-palid);
border-radius: 0 var(--raza) var(--raza) 0;
}
.gradare-eticheta {
display: block; margin: 0 0 6px; font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--zima-text);
}
.gradare-select {
width: 100%; max-width: 640px; padding: 8px 10px; font-size: .9rem;
/* aceeasi conventie ca la celelalte campuri ale aplicatiei
(--chenar-tare): un singur camp mai apasat decat toate ar fi
tot o nepotrivire. */
border: 1px solid var(--chenar-tare); border-radius: var(--raza);
background: var(--alb); color: var(--text);
}
.gradare-select:focus { outline: 2px solid var(--zima); outline-offset: 1px; }
.gradare-nota { margin: 7px 0 0; }
/* ========================================================== TABELE ==== */
.tabel-invelis { overflow-x: auto; }
table.date { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* Pe telefon, un tabel nu se poate strange sub latimea lui minima: la
360 px, tabelele cu salariul minim de pe /despre lateau pagina cu 33 px
(masurat; defect vechi). Aici tabelul devine o cutie care DERULEAZA pe
orizontala, in loc sa impinga toata pagina. Peste 700 px nu se schimba
nimic - regula nici nu se aplica. */
@media (max-width: 700px) {
table.date { display: block; overflow-x: auto; }
}
table.date th, table.date td {
padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--chenar);
}
table.date th {
font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-stins); font-weight: 600;
}
table.date td.cifra, table.date th.cifra { text-align: right; font-variant-numeric: tabular-nums; }
table.date tr:last-child td { border-bottom: 0; }
/* ---- lista experților evaluatori ---- */
.tabel-experti { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel-experti th, .tabel-experti td {
padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--chenar);
vertical-align: baseline;
}
.tabel-experti thead th {
font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-stins); font-weight: 600;
border-bottom: 1px solid var(--chenar-tare);
}
.tabel-experti tbody tr:hover { background: var(--fundal-slab); }
.tabel-experti tbody tr:last-child td { border-bottom: 0; }
.tabel-experti .cifra { text-align: right; font-variant-numeric: tabular-nums; }
/* Un numar de telefon nu se rupe intre cifre: rupt, se citeste gresit. */
.nu-rupe { white-space: nowrap; }
/* rândul de căutare */
.cauta-rand { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cauta-rand input[type="search"] {
flex: 1 1 280px; min-width: 0; height: 42px;
padding: 0 14px; font: inherit; font-size: .95rem;
color: var(--text); background: var(--alb);
border: 1px solid var(--chenar-tare); border-radius: var(--raza-mica);
}
.cauta-rand input[type="search"]:focus-visible {
border-color: var(--zima-text);
outline: 2px solid var(--zima-text); outline-offset: 1px;
}
/* ce se arată când o listă e goală */
.stare-goala {
border: 1px dashed var(--chenar-tare); border-radius: var(--raza);
padding: 26px 20px; text-align: center; color: var(--text-stins);
background: var(--fundal-slab);
}
/* =========================================================== LISTE ==== */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { border-bottom: 1px solid var(--chenar); }
.lista li:last-child { border-bottom: 0; }
.lista a { display: block; padding: 11px 4px; text-decoration: none; color: var(--text); }
.lista a:hover { background: var(--fundal-slab); text-decoration: none; }
/* FAM-C-01 (§398): capul de CONCEPT din lista familiei — „Parenchim cerebral",
„Meninge și spații intracraniene". Nu e o intrare de ales: n-are legătură,
n-are chenar de despărțire și nu se aprinde la trecerea mausului. */
.lista li.lista-titlu { border-bottom: 0; padding: 12px 4px 4px; }
.lista li.lista-titlu:first-child { padding-top: 4px; }
/* ======================================================== REZULTAT ==== */
.total { text-align: center; padding: 8px 0 16px; }
.total-cifra {
font-family: var(--f-titlu); font-size: 3.2rem; font-weight: 700;
color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}
.total-unitate { font-size: 1rem; color: var(--text-stins); margin-left: 7px; }
.total-interval { color: var(--text-stins); font-size: .9rem; margin-top: 8px; }
.bani {
background: var(--auriu-palid); border: 1px solid var(--auriu-chenar);
border-radius: var(--raza); padding: 16px 18px;
}
.bani-cifra {
font-family: var(--f-titlu); font-size: 1.75rem; font-weight: 700;
color: var(--atentie); font-variant-numeric: tabular-nums;
}
.nota {
border-left: 3px solid var(--chenar-tare); padding: 10px 0 10px 14px;
color: var(--text-stins); font-size: .88rem; margin: 14px 0;
text-align: justify; hyphens: auto;
}
.nota-atentie {
border-left-color: var(--atentie); background: var(--atentie-fundal);
padding: 13px 16px; border-radius: 0 var(--raza) var(--raza) 0; color: var(--atentie);
}
.nota-rau {
border-left-color: var(--rau); background: var(--rau-fundal);
padding: 13px 16px; border-radius: 0 var(--raza) var(--raza) 0; color: var(--rau);
}
.pasi { margin: 7px 0 0; padding-left: 20px; color: var(--text-stins); font-size: .85rem; }
/* ========================================================= PANOURI ==== */
.stat {
background: var(--alb); border: 1px solid var(--chenar);
border-radius: var(--raza-mare); padding: 18px 20px; box-shadow: var(--umbra-1);
}
.stat-eticheta { font-size: .78rem; color: var(--text-stins); margin-bottom: 5px; }
.stat-cifra {
font-family: var(--f-titlu); font-size: 2rem; font-weight: 700;
color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: .8rem; color: var(--text-stins); margin-top: 4px; }
.stat-sus { color: var(--bine); font-weight: 600; }
.stat-jos { color: var(--rau); font-weight: 600; }
.panou-grila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
.cu-lateral { display: grid; gap: 22px; }
@media (min-width: 940px) { .cu-lateral { grid-template-columns: 230px minmax(0, 1fr); align-items: start; } }
.lateral {
background: var(--alb); border: 1px solid var(--chenar);
border-radius: var(--raza-mare); padding: 12px; box-shadow: var(--umbra-1);
}
.lateral a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--raza-mica);
color: var(--text-mediu); text-decoration: none; font-size: .92rem;
}
.lateral a:hover { background: var(--fundal-slab); color: var(--text); text-decoration: none; }
.lateral a.activ { background: var(--zima-umplere); color: var(--pe-zima); font-weight: 600; }
.lateral .ico { width: 1.1em; height: 1.1em; }
.lateral-titlu {
font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
color: var(--text-stins); padding: 14px 12px 6px; font-weight: 600;
}
.bare { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.bare-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bare-bara {
background: linear-gradient(180deg, var(--zima), var(--zima-umplere));
border-radius: 4px 4px 0 0; min-height: 3px;
}
.bare-eticheta { font-size: .66rem; color: var(--text-stins); text-align: center; margin-top: 5px; }
/* ======================================================== DOUĂ COLOANE = */
.grila-2-1 { display: grid; gap: 22px; }
@media (min-width: 960px) { .grila-2-1 { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; } }
/* ================================================== ECRANE DE CONT ==== */
/* FARA FUNDAL PROPRIU (§184, 08.09.2026, semnalat de medic pe /login cu
captura: „lasa backgroundul de la body"). Invelisul isi vopsea o coloana
de 1320 px (`--fundal-slab` + o aureola) PESTE gradientul machetei de pe
body — masurat pe pagina randata: rgb(247,249,252) intre 185 si 1505 px la
1690, cu gradientul ramas la margini, ca o hartie lipita pe perete. Fundalul
e al paginii (body, nou.css); ecranele de cont stau pe el, ca toate celelalte. */
.cont-ecran {
min-height: calc(100vh - 74px);
display: grid; place-items: center; padding: 44px 20px;
}
.cont-cutie { width: 100%; max-width: 430px; }
.cont-cutie .card { padding: 28px 30px; box-shadow: var(--umbra-2); }
.cont-titlu { text-align: center; margin-bottom: 22px; }
.cont-titlu img { width: 52px; margin-bottom: 12px; }
.cont-titlu h1 { font-size: 1.5rem; margin-bottom: 5px; }
.cont-titlu p { color: var(--text-stins); font-size: .9rem; margin: 0; }
.cont-camp { margin-bottom: 16px; }
.cont-jos { margin-top: 18px; text-align: center; font-size: .9rem; color: var(--text-stins); }
.erori {
background: var(--rau-fundal); border-left: 3px solid var(--rau);
padding: 11px 14px; border-radius: 0 var(--raza) var(--raza) 0; margin-bottom: 16px;
}
.erori ul { margin: 0; padding-left: 18px; color: var(--rau); font-size: .875rem; }
.eroare-camp { color: var(--rau); font-size: .82rem; margin-top: 5px; }
.reusit {
background: var(--bine-fundal); border-left: 3px solid var(--bine);
padding: 11px 14px; border-radius: 0 var(--raza) var(--raza) 0;
margin-bottom: 16px; color: var(--bine); font-size: .9rem;
}
/* ========================================================= MIȘCARE ==== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ========================================================== TIPAR ===== */
@media print {
.bara, .subsol, .buton, .fara-tipar, .erou-poza { display: none !important; }
body { background: #fff; }
.card { box-shadow: none; border-color: #bbb; page-break-inside: avoid; }
}
/* ====================================================== CALCULATOR ====
Ecranul de calcul: doua carduri alaturate, cel din stanga cu cazul in
lucru, cel din dreapta cu alegerea leziunii. GRILA de aici e MOARTA:
macheta (`.calculator-grid`, nou.css) ii bate toate cele patru
declaratii, fiind foaia care se incarca dupa — 50/50 in loc de 57/43,
stivuire sub 1080 in loc de 1000. Nu s-a sters fiindca
`UrmaCautariiTest` cauta `calc-grila` in zona vie: se scoate odata
cu ancora aceea, nu inaintea ei.
======================================================================== */
.calc-grila {
display: grid;
grid-template-columns: 57fr 43fr;
gap: clamp(16px, 1.8vw, 26px);
align-items: start;
}
@media (max-width: 1000px) { .calc-grila { grid-template-columns: 1fr; } }
/* ---- antetul unui card: pastila cu semn, titlu, insigna ---- */
.calc-cap {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 18px;
}
.calc-cap-text { flex: 1 1 auto; min-width: 0; }
.calc-cap-text h2 { margin: 0 0 2px; font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.calc-cap-text p { margin: 0; }
.ico-plac-zima {
background: var(--zima-palid); color: var(--text);
border: 1px solid var(--zima-chenar);
}
.ico-plac-albastru {
background: var(--zima-palid); color: var(--zima-text);
border: 1px solid var(--zima-chenar);
}
/* pastila PLINA, pentru cardul de actiune */
.ico-plac-plin { background: var(--zima-umplere); color: var(--pe-zima); }
.ico-plac-zima, .ico-plac-albastru, .ico-plac-plin {
width: 42px; height: 42px; flex: 0 0 42px;
border-radius: 12px; display: grid; place-items: center;
}
.ico-plac-zima .ico, .ico-plac-albastru .ico, .ico-plac-plin .ico {
width: 21px; height: 21px;
}
/* insigna cu totalul, in coltul cardului */
.calc-insigna {
flex: 0 0 auto; text-align: right; line-height: 1.35;
background: var(--zima-palid); border: 1px solid var(--zima-chenar);
border-radius: var(--raza); padding: 8px 14px;
font-size: .82rem; color: var(--text);
}
.calc-insigna strong { font-size: .95rem; }
.calc-insigna .stins { display: block; font-size: .76rem; }
/* ---- starea goala: indemn, fara desen ----
A avut o ilustratie, apoi un desen abstract. Amandoua au fost scoase:
aici omul are nevoie sa AFLE unde sa caute, iar o podoaba doar impinge
indemnul mai jos. A ramas textul si sageata catre bara de cautare. */
.calc-gol {
padding: clamp(16px, 2.2vw, 28px) 0 clamp(10px, 1.4vw, 18px);
border-top: 1px solid var(--chenar);
}
.calc-gol h3 { font-size: 1.15rem; margin-bottom: 8px; }
.calc-gol p { max-width: 46ch; margin: 0; }
.calc-gol-sageata {
width: 54px; height: 54px; margin-top: 14px;
color: var(--zima-text); opacity: .55;
}
@media (max-width: 620px) {
/* Pe ecran ingust bara de cautare trece SUB caz, deci sageata
arata in jos, nu la dreapta. (`flex-direction` a plecat odata cu
desenul: nu mai e nimic de asezat pe doua coloane.) */
.calc-gol-sageata { transform: rotate(70deg); }
}
/* ---- caseta de lamurire din piciorul cardului ---- */
.calc-lamurire {
display: flex; gap: 12px; align-items: flex-start;
background: var(--fundal-slab); border-radius: var(--raza);
padding: 14px 16px;
}
.calc-lamurire strong { color: var(--text); display: block; margin-bottom: 3px; }
.calc-lamurire p { margin: 0; }
/* ---- cota gratuita ---- */
.calc-cota {
display: flex; gap: 9px; align-items: flex-start;
background: var(--bine-fundal); color: var(--bine);
border-radius: var(--raza); padding: 10px 13px;
font-size: .85rem; margin-bottom: 16px;
}
.calc-cota .ico { width: 17px; height: 17px; margin-top: 1px; }
.calc-cota-plina { background: var(--atentie-fundal); color: var(--atentie); }
.calc-cota a { color: inherit; text-decoration: underline; }
/* ---- campul de cautare, cu lupa ---- */
.calc-cauta { margin-bottom: 16px; }
.calc-cauta label {
display: block; font-weight: 600; font-size: .85rem;
color: var(--text); margin-bottom: 7px;
}
.calc-cauta-camp { position: relative; }
.calc-cauta-camp .ico {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--text-stins); pointer-events: none;
}
.calc-cauta-camp input {
width: 100%; height: 46px; padding: 0 14px 0 40px;
font: inherit; font-size: .95rem; color: var(--text);
background: var(--alb); border: 1px solid var(--chenar-tare);
border-radius: var(--raza);
}
.calc-cauta-camp input:focus-visible {
border-color: var(--zima-text);
outline: 2px solid var(--zima-text); outline-offset: 1px;
}
/* Cautarea rapida de pe pagina baremului (02.09.2026). Campul e CHIAR cel
de la /calcul (`calc-cauta-camp`); aici se adauga doar asezarea pe rand,
cu butoanele langa el. */
.barem-cauta {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.barem-cauta .barem-cauta-camp { flex: 1 1 320px; min-width: 0; }
.barem-gasite { margin-bottom: clamp(14px, 1.6vw, 20px); }
.barem-gasite .rand-nume small { display: block; font-size: .78rem; margin-top: 2px; }
/* ---- lista capitolelor ---- */
.randuri { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* `min-width: 0` pe randuri, nu doar pe numele dinauntru: un copil de grila
are, implicit, `min-width: auto`, adica nu se strange sub latimea lui de
continut - oricat ar fi de darnic `.rand-nume` cu `min-width: 0`, randul
INTREG refuza sa se stranga. Masurat la 360 px pe /barem: pagina se latea
cu 43 px peste ecran; cu regula asta, 0. (Defect vechi, dovedit cu
schimbarile zilei puse deoparte.) */
.randuri > li { min-width: 0; }
.randuri a {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; text-decoration: none; color: var(--text);
background: var(--alb); border: 1px solid var(--chenar);
border-radius: var(--raza);
transition: border-color .14s, background-color .14s;
}
.randuri a:hover {
text-decoration: none;
border-color: var(--chenar-tare); background: var(--fundal-slab);
}
.rand-ico {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
display: grid; place-items: center;
}
.rand-ico .ico { width: 18px; height: 18px; }
.rand-nume { flex: 1 1 auto; min-width: 0; font-size: .93rem; }
.rand-eticheta {
flex: 0 0 auto; font-size: .76rem; color: var(--text-stins);
background: var(--fundal-slab); border-radius: 999px; padding: 3px 10px;
white-space: nowrap;
}
.rand-sageata { width: 16px; height: 16px; color: var(--text-stins); flex: 0 0 auto; }
/* Culorile capitolelor. Fiecare e o TENTA a culorii, nu culoarea plina:
19 pastile pline ar face lista sa tipe. Valorile stau in jetoane
(config/capitole.php numeste doar cheia), ca sa se schimbe cu tema. */
.tenta-zima { background: color-mix(in srgb, var(--zima-umplere) 10%, transparent); color: var(--text); }
.tenta-albastru { background: color-mix(in srgb, #2f6fd0 12%, transparent); color: #2f6fd0; }
.tenta-indigo { background: color-mix(in srgb, #5a4fcf 12%, transparent); color: #4a3fb8; }
.tenta-verde { background: var(--bine-fundal); color: var(--bine); }
.tenta-rosu { background: var(--rau-fundal); color: var(--rau); }
.tenta-chihlimbar{ background: var(--atentie-fundal); color: var(--atentie); }
.tenta-roz { background: color-mix(in srgb, #c2417d 12%, transparent); color: #a83468; }
/* Nota din buton („maxim 3 LT"): se citeste ca o precizare, nu ca a doua
comanda. Cifra vine din CalculController::LEZIUNI_FARA_CONT, nu scrisa
de mana - altfel s-ar despartii de gardul de pe server la prima
schimbare. */
.buton-nota {
font-size: .78em; font-weight: 500; opacity: .82;
padding-left: 8px; margin-left: 2px;
border-left: 1px solid currentColor;
}
/* Citarea de sub fiecare rand al fisei: „anexa, pag. 1, tabel 1, poz. 2".
Sta STINSA si pe rand propriu - e dovada, nu continut: cine vrea o
citeste, cine nu, nu se impiedica de ea. */
.citare {
display: block; font-size: .72rem; color: var(--text-stins);
font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* ---------------------------------------------------------------------
PUNCTELE UNDE ACTUL SE CONTRAZICE (/despre)
Fiecare punct e o notă de sine stătătoare: pagina din anexă ca
etichetă, dedesubt fraza care spune ce anume nu se leagă. Fără bulină
de listă — sunt paragrafe, nu o enumerare de cuvinte.
--------------------------------------------------------------------- */
.lista-deschise { list-style: none; margin: 14px 0 0; padding: 0;
display: grid; gap: 12px; }
.lista-deschise li { padding: 12px 14px; border-radius: var(--raza);
background: var(--fundal-slab); border: 1px solid var(--chenar); }
.lista-deschise p { margin: 6px 0 0; font-size: .93rem; line-height: 1.55;
color: var(--text-mediu);
text-align: justify; text-justify: inter-word; hyphens: auto; }
/* DOUA COLOANE pe ecran larg. Lista era prinsa de regula de latime de
citire (`.pagina-text .card > ul { max-width: 72ch }`), buna pentru proza
curgatoare - dar astea sunt cutii independente, iar jumatate din card
ramanea goala. Latita la toata coala, randul ar fi ajuns ~1200px: de-aia
nu se ridica plafonul, ci se pun doua coloane, fiecare tot pe ~72ch. */
/* DOUA COLOANE — scoase la §143: erau ocolisul plafonului de 72ch, iar
acela nu mai exista. In coloana de citit fiecare cutie umple randul,
deci nu mai are ce jumatate sa ramana goala. */
.deschis-pagina { display: inline-block; font-size: .74rem;
font-weight: 600; letter-spacing: .02em; padding: 3px 9px;
border-radius: 999px; background: var(--zima-palid);
color: var(--text); font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------------
RASFOIREA BAREMULUI (/barem)
Doua carduri pe acelasi rand: capitolele (lista lunga, care da tonul
inaltimii) si tabelele speciale. Randurile lor sunt tiparul comun
`.randuri` — acelasi pe care il foloseste si calculul; nu se
dubleaza stilul, ca sa nu se desparta la prima schimbare.
--------------------------------------------------------------------- */
.barem-pagina { padding-top: clamp(20px, 2.4vw, 34px);
padding-bottom: var(--gol-final); }
.barem-antet {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: clamp(14px, 1.6vw, 22px);
}
.barem-antet h1 {
margin: 0; font-family: var(--f-titlu);
font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15;
}
.barem-insigna {
display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
background: var(--zima-palid); border: 1px solid var(--zima-chenar);
border-radius: var(--raza); padding: 8px 14px;
font-size: .84rem; color: var(--text); white-space: nowrap;
}
.barem-insigna .ico { width: 17px; height: 17px; }
/* 44/56: coloana capitolelor are nume scurte, cea a tabelelor are
titluri de doua randuri — masurat pe continutul real, nu impartit
pe din doua. */
.barem-grila {
display: grid; grid-template-columns: 44fr 56fr;
gap: clamp(16px, 1.6vw, 24px); align-items: start;
}
@media (max-width: 1000px) { .barem-grila { grid-template-columns: 1fr; } }
/* Un copil de grila are `min-width: auto`, adica nu se strange sub
latimea LUI minima de continut - iar randurile au o pastila cu
`white-space: nowrap`. Masurat la 390px: cardul iesea 355,9 intr-o
coloana de 349,5, adica peste marginea paginii. */
.barem-grila > *, .calc-grila > * { min-width: 0; }
.barem-temei { margin: clamp(14px, 1.6vw, 22px) 0 0; }
/* ---------------------------------------------------------------------
PAGINILE DE TEMEI (Contact, Confidențialitate, Accesibilitate)
Text lung, de citit, nu de răsfoit: o singură coloană, măsura de rând
ținută sub ~78 de semne, carduri unul sub altul. Nu au grafică proprie
— ce contează acolo e să se poată citi.
--------------------------------------------------------------------- */
/* PAGINILE DE TEXT (Despre, Contact, Confidentialitate, Accesibilitate),
aduse 01.09.2026 in limbajul machetei `card x.png`: carduri cu colturi
mari si umbra moale.
COALA E ALBA, ca pe restul sitului (02.09.2026, medicul: „aici avem un
background diferit"). Pana azi `main:has(> .pagina-text)` tenta pagina
INTREAGA cu #f7f9fc - masurat, singurele patru pagini publice care o
faceau. Limbajul casei e coala ALBA cu BENZI tentate: prima pagina are
`.sectiune-slab` si `.banda`, subsolul e si el o banda. O pagina intreaga
tentata iesea din tipar.
Odata cu tenta, cardurile isi primesc inapoi chenarul casei: pe tenta se
desprindeau si fara el, pe alb nu. */
/* COLOANA DE CITIT (§143, 05.09.2026 — medicul: „jumatati de pagina").
Pana azi cardurile se intindeau pe toata coala (1275 px la 1440), iar
textul din ele era plafonat la 72ch (621 px): masurat, 84 de blocuri de
text lasau intre 585 si 663 px de card GOL la dreapta. Plafonul era pus
pe COPIL, deci cutia ramanea lata degeaba.
Acum masura o tine CHIAR coloana: cardul se termina acolo unde se
termina randul, iar golul ramas e simetric si vine din asezare, nu din
ceva neispravit. Cuprinsul lateral (§143) sta in jgheabul din stanga,
deci latimea aceea se si foloseste. */
.pagina-text {
padding-top: clamp(24px, 3vw, 44px);
padding-bottom: var(--gol-final);
--coloana-citit: 760px;
--cuprins-lat: 248px;
}
.pagina-text > * { max-width: var(--coloana-citit); margin-inline: auto; }
/* Saltul dintr-o legatura de cuprins trebuie sa lase titlul sub bara
lipita de sus (82 px), nu sub ea. */
.pagina-text [id] { scroll-margin-top: 100px; }
/* ---------------------------------------------------------------------
CUPRINSUL LATERAL
Pe ecran ingust e o banda de pastile care se deruleaza pe orizontala:
un rand, nu 14. De la 1300 px trece in jgheabul din stanga, unde se
lipeste de ecran — jgheabul acela exista oricum, fiindca randul de text
nu are voie sa creasca odata cu fereastra.
--------------------------------------------------------------------- */
.pagina-cuprins { margin-bottom: clamp(14px, 1.6vw, 22px); }
.cuprins-titlu {
margin: 0 0 8px; font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--text-stins);
}
.pagina-cuprins ol {
list-style: none; margin: 0; padding: 0 0 4px;
display: flex; gap: 8px; overflow-x: auto;
}
.pagina-cuprins li { flex: 0 0 auto; }
.pagina-cuprins a {
display: block; padding: 7px 13px; border-radius: 999px;
background: var(--fundal-slab); border: 1px solid var(--chenar);
font-size: .86rem; line-height: 1.35; color: var(--text-mediu);
text-decoration: none; white-space: nowrap;
}
/* Sublinierea ramane stinsa si la trecerea mausului: raspunsul il da
fundalul, nu o linie care ar aparea peste 12 pastile deodata. */
.pagina-cuprins a:hover {
text-decoration: none;
border-color: var(--zima-chenar); background: var(--zima-palid);
color: var(--text);
}
@media (min-width: 1300px) {
/* Cuprinsul ȘI coloana se centreaza IMPREUNA, nu coloana singura: altfel
stanga ar fi plina si dreapta ar ramane o banda goala de ~340 px —
adica tocmai ce se repara aici. */
.pagina-text:has(> .pagina-cuprins) {
display: grid; align-items: start; justify-content: center;
grid-template-columns: var(--cuprins-lat) minmax(0, var(--coloana-citit));
}
/* `min-width: 0` NU e o precautie: un copil de grila are minimul „auto",
adica nu se strange sub latimea lui de continut — iar in ghid o captura
iesita din coloana o LARGEA inapoi (masurat: cardul iesea 1092 intr-o
pista de 760, si pagina depasea cu 109 px). */
.pagina-text:has(> .pagina-cuprins) > * {
grid-column: 2; max-width: none; min-width: 0;
/* `margin-inline: auto` (centrarea din afara grilei) OPRESTE intinderea
pe pista: cu ea, cardul se masoara dupa continut — masurat, iesea
1092 px intr-o pista de 760, tocmai din pricina capturii dinauntru,
si pagina depasea cu 109 px. */
margin-inline: 0;
}
.pagina-text > .pagina-cuprins {
/* `1 / -1` NU merge aici: `-1` inseamna capatul grilei DECLARATE, iar
randurile paginii sunt implicite — cuprinsul ramanea in randul intai
si i-l INALTA cat el, adica un gol de ~300 px intre antet si primul
card (masurat, si se vedea din prima privire). Se intinde peste
randuri cu `span`. */
grid-column: 1; grid-row: 1 / span 100;
align-self: start; position: sticky; top: 100px;
width: auto; margin: 0;
padding-right: clamp(14px, 1.8vw, 30px);
}
.pagina-cuprins ol {
display: block; overflow: visible;
border-left: 1px solid var(--chenar); padding: 2px 0 2px 14px;
}
.pagina-cuprins li + li { margin-top: 2px; }
.pagina-cuprins a {
white-space: normal; padding: 5px 8px; border: 0; background: none;
border-radius: 8px; font-size: .84rem;
}
.pagina-cuprins a:hover { background: var(--zima-palid); }
}
.pagina-text .card {
margin-bottom: clamp(16px, 1.8vw, 24px);
border-radius: 24px;
padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.6vw, 34px);
box-shadow:
rgba(23, 123, 159, .10) 0 24px 48px -20px,
rgba(0, 0, 0, .08) 0 8px 20px -14px;
}
/* In grila cu doua coloane cardurile isi impart randul: aceeasi inaltime,
marginea de jos o da grila. */
.pagina-text .grila-doua > .card { margin-bottom: 0; height: 100%; }
/* Doua carduri alaturate nu incap in coloana de citit (ar iesi ~340 px
fiecare, cat o coloana de ziar): pe paginile de text se stivuiesc. */
.pagina-text .grila-doua { grid-template-columns: 1fr; }
/* ...dar golul de DUPA grila trebuie sa-l puna cineva. Pana la 02.09.2026
nu-l punea nimeni: masurat pe /despre, cardul „Ce NU este" se termina la
615,2 si „Regulile aplicate" incepea la 615,2 - lipite, iar cu umbra care
coboara ~28 px se citeau ca SUPRAPUSE (asa le-a si vazut medicul). Golul
e chiar cel dintre doua carduri, luat din aceeasi valoare. */
.pagina-text .grila-doua { margin-bottom: clamp(16px, 1.8vw, 24px); }
/* ...iar ULTIMUL bloc nu-si mai poarta marginea: sub el nu mai vine
nimic din pagina, doar subsolul, care isi are respiratia lui. Fara
regula asta cele trei pagini de text ies cu 104 px acolo unde
restul au 80 - masurat. */
.pagina-text > .card:last-child,
.pagina-text > .grila-doua:last-child { margin-bottom: 0; }
/* Plafonul de 72ch a IESIT de pe copii: masura o tine coloana (mai sus).
Lasat aici, ar fi taiat randul a doua oara — nota mica dintr-un card ar
fi ramas iar cu 110 px goi la dreapta, fiindca 72ch se socoteste pe
litera ei, nu pe a paragrafului de deasupra. */
.pagina-antet { margin-bottom: clamp(14px, 1.6vw, 22px); }
.pagina-antet h1 {
margin: 0 0 6px; font-family: var(--f-titlu);
font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15;
}
.pagina-antet p { margin: 0; }
/* PROZA paginilor de citit se aliniaza pe amandoua marginile (medicul,
02.09.2026: „la texte sa folosim justify"). E sigur aici fiindca randul
e plafonat la 72ch, iar pagina declara lang="ro", deci despartirea in
silabe lucreaza si nu se fac rauri albe. NU se pune pe titluri, pe
etichete si pe tabele. */
.pagina-text .card > p,
.pagina-text .card > .lista-simpla li,
.pagina-antet p { text-align: justify; hyphens: auto; }
.pagina-text h2 { margin: 0 0 10px; font-size: 1.16rem; }
.pagina-text h3 { margin: 18px 0 8px; font-size: 1rem; }
/* LISTA DE DATE (Contact: denumire, CUI, sediu). Fara stil propriu se
randa cu implicitul browserului — eticheta pe un rand, valoarea pe
urmatorul, retrasa cu 40 px — adica exact aerul nelalocul lui pe care
il reclama medicul. Doua coloane, cu rand despartitor: se citeste ca o
fisa, nu ca o insiruire. */
.pagina-text dl.date {
display: grid; grid-template-columns: minmax(150px, 32%) 1fr;
gap: 0 20px; margin: 6px 0 0; align-items: baseline;
}
.pagina-text dl.date dt {
padding: 9px 0; color: var(--text-stins); font-size: .88rem;
border-top: 1px solid var(--chenar);
}
.pagina-text dl.date dd {
margin: 0; padding: 9px 0; color: var(--text); font-weight: 600;
border-top: 1px solid var(--chenar); min-width: 0; overflow-wrap: anywhere;
}
.pagina-text dl.date > dt:first-of-type,
.pagina-text dl.date > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 560px) {
.pagina-text dl.date { grid-template-columns: 1fr; gap: 0; }
.pagina-text dl.date dt { padding-bottom: 0; }
.pagina-text dl.date dd { padding-top: 2px; border-top: 0; }
}
.lista-simpla { margin: 0; padding-left: 20px; }
.lista-simpla li { margin-bottom: 8px; line-height: 1.6; }
/* Tabelul de cookie-uri: se poate derula pe orizontala DOAR el, nu
pagina — un tabel lat nu are voie sa impinga tot continutul. */
.pagina-text .tabel { width: 100%; border-collapse: collapse;
margin-top: 10px; font-size: .92rem; display: block; overflow-x: auto; }
.pagina-text .tabel th, .pagina-text .tabel td {
text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--chenar);
vertical-align: top;
}
.pagina-text .tabel th { font-size: .8rem; text-transform: uppercase;
letter-spacing: .04em; color: var(--text-stins); }
.pagina-text .tabel code { font-size: .86em; }
.grila-doua {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.6vw, 22px); align-items: start;
}
.grila-doua > * { min-width: 0; }
@media (max-width: 860px) { .grila-doua { grid-template-columns: 1fr; } }
kbd {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: .85em; padding: 2px 6px; border-radius: 5px;
background: var(--fundal-slab); border: 1px solid var(--chenar);
}
/* Operatorul, in randul de jos al subsolului. */
.deschis-cine { margin-top: 6px !important; font-size: .82rem;
color: var(--text-stins); font-style: italic; }
/* ===================================== FIȘA: cererea și comanda ======= */
.fisa-gata { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.fisa-gata-cifra { text-align: center; padding: 6px 18px 6px 0; }
.fisa-gata-cifra strong {
display: block; font-family: var(--f-titlu); font-size: 2.4rem;
line-height: 1; color: var(--text);
}
.fisa-gata-cifra span { font-size: .8rem; color: var(--text-stins); }
/* Randul de sub cifra (167): cu leziuni in caz ramanea o cifra singura,
care se citeste ca un plafon - tocmai fiindca estimarea gratuita ARE
unul, si e chiar 3. Fisa nu are. */
.fisa-gata-cifra small {
display: block; margin-top: 3px; font-size: .68rem;
letter-spacing: .04em; text-transform: uppercase;
color: var(--bine); font-weight: 700;
}
.fisa-gata .bife { flex: 1 1 260px; }
.fisa-pret {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--chenar);
}
.fisa-pret > div:first-child { flex: 1 1 auto; }
.fisa-pret-cifra {
font-family: var(--f-titlu); font-size: 1.6rem; font-weight: 700;
color: var(--text); margin-right: 8px;
}
/* §339: rândul mic stă SUB buton (cerut de medic); cifra mare rămâne singură
în stânga. */
.fisa-pret-actiune {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
max-width: 300px;
}
.fisa-pret-mic {
font-size: .8rem; line-height: 1.4; color: var(--text-stins); text-align: right;
}
.comanda-stare {
display: inline-block; padding: 4px 12px; border-radius: 999px;
font-size: .8rem; font-weight: 600;
}
.comanda-asteapta { background: var(--atentie-fundal); color: var(--atentie);
border: 1px solid #f0d9b8; }
.comanda-platita { background: #e9f6ee; color: #10592f; border: 1px solid #cfe8d9; }
.comanda-anulata { background: var(--fundal-slab); color: var(--text-stins);
border: 1px solid var(--chenar); }
.comanda-rezumat {
background: var(--zima-palid); border: 1px solid var(--zima-chenar);
border-radius: var(--raza-mare); padding: 18px 20px; margin-bottom: 18px;
}
.comanda-total {
display: flex; align-items: baseline; gap: 10px;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--zima-chenar);
}
.comanda-total strong {
font-family: var(--f-titlu); font-size: 1.8rem; color: var(--text);
}
/* ================================================ PREȚURILE, public === */
/* §160: regula de ritm a prețurilor a plecat în foaia nouă (`--ritm`).
Aici stătea `#preturi { padding-top: 0 }` — un SELECTOR DE ID, deci bătea
`.pricing-section` din foaia nouă chiar dacă aceea se încarcă a doua:
banda prețurilor rămânea, tăcut, fără cele 88px de sus ale machetei.
Ritmul se dă acum dintr-un singur loc, pentru toate secțiunile. */
.preturi-grila { display: grid; gap: 18px; }
@media (min-width: 920px) {
.preturi-grila { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
.pret-card {
background: var(--alb); border: 1px solid var(--chenar);
border-radius: var(--raza-mare); box-shadow: var(--umbra-1);
padding: 22px;
display: flex; flex-direction: column; gap: 14px;
/* Acelasi raspuns la maus ca la cardurile „Doua moduri de a obtine
fisa" (cerut 01.09.2026: „exact comportamentul de hover"). Regula
e SCRISA aici, nu impartita cu `.card-drum`: acelea sunt legaturi
intregi, astea sunt carduri cu buton inauntru, deci n-au aceleasi
stari (`:focus-visible` al cardului ar fi fals aici). */
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pret-card:hover {
transform: translateY(-3px);
border-color: var(--zima);
box-shadow:
rgba(12, 64, 83, .26) 0 38px 66px -22px,
rgba(0, 0, 0, .22) 0 22px 40px -26px;
}
/* Cel din mijloc isi pastreaza chenarul marcii si la hover - altfel ar
pierde tocmai semnul ca e cel recomandat. */
/* Cardul din mijloc — fișa manuală, singura care se poate cumpăra AZI.
Pana la 01.09.2026 se desprindea printr-un chenar de 2px in cerneala
marcii; medicul a cerut sa arate ca vecinii („la cardul din mijloc sa
[aiba acelasi] border, sa arate toate la fel"). Semnul lui e de-acum
BUTONUL PLIN - singurul dintre cele trei - nu chenarul. */
/* BUTONUL IA CULOAREA ICONITEI (cerut 01.09.2026: „icon culoare = buton
culoare"). Nu nuanta pastilei, ci varianta ei ADANCA - si e o
masuratoare, nu o preferinta: pastila e obiect grafic, unde pragul e 3,
pe cand litera unui buton cere 4,5. Umplerile trec 3 dar pica la 4,5
(foc 3,48 · cyan 3,57), iar adancurile trec amandoua pragurile:
foc #d63700 = 4,77 · cyan #0b7590 = 5,30 · magenta #a3009b = 6,93,
aceleasi cifre ca text pe alb si ca alb pe ele. Aceeasi culoare, doar
destul de adanca pentru cuvinte. */
.buton-t-foc { --t: var(--foc-adanc); }
.buton-t-cyan { --t: var(--cyan-adanc); }
.buton-t-magenta { --t: var(--magenta-adanc); }
.buton-t-foc, .buton-t-cyan, .buton-t-magenta {
background: var(--alb); color: var(--t);
border: 1px solid var(--t);
}
.buton-t-foc:hover, .buton-t-cyan:hover, .buton-t-magenta:hover {
background: color-mix(in srgb, var(--t) 8%, var(--alb));
color: var(--t);
}
/* Plin: cardul care se poate cumpara AZI. E singurul semn care il
deosebeste, de cand chenarul lui a devenit ca al vecinilor. */
.buton-t-plin {
background: var(--t); color: var(--alb); border-color: var(--t);
}
.buton-t-plin:hover {
background: color-mix(in srgb, var(--t) 86%, #000);
color: var(--alb);
}
.pret-card-cap { display: flex; gap: 12px; align-items: flex-start; }
.pret-card-cap h3 { margin: 0; font-size: 1.02rem; }
.pret-card-suma { padding: 4px 0 2px; }
.pret-card-suma strong {
display: block; font-family: var(--f-titlu); font-size: 1.9rem;
line-height: 1.1; color: var(--text);
}
.pret-card-suma .stins { font-size: .82rem; }
.pret-card .bife { flex: 1 1 auto; }
.pret-nu { color: var(--text-stins); }
/* ROSU doar pe SEMN, nu pe rand: randul spune ce nu primesti, semnul o
arata. Colorat tot randul, cardul ar tipa la fiecare lipsa. */
.pret-nu .ico { color: var(--rau); }
.pret-card-jos { margin-top: 2px; }
.preturi-nota {
text-align: center; font-size: .85rem;
margin: 22px auto 0; max-width: 640px;
}
/* Vorba de lamurire cand un rezultat a venit printr-un sinonim: omul a
scris «patela» si vede «Fracturi rotula». Fara ea, pagina arata a
defect. Sta lipita de rezultate, nu ca alerta - e o explicatie, nu o
problema. */
.calc-punte {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 6px;
padding: 6px 10px;
background: var(--zima-palid);
border-radius: 8px;
}
.calc-punte .ico { width: 1em; height: 1em; flex: 0 0 auto; }
/* ============================== CLASE CARE LIPSEAU DIN FOAIE ==========
Gasite 01.09.2026, cu o maturare mecanica: clase scrise in marcaj fara
nicio regula in foaie. CSS-ul nu da NICIO eroare pentru asa ceva -
pagina doar arata prost, si nimeni nu stie de ce.
Cea mai vizibila: `.buton-plin`, butonul „Autentificare" de pe pagina
de logare, care se randa cu butonul implicit al browserului - gri, pe
cea mai importanta pagina a aplicatiei.
======================================================================= */
.buton-plin { background: var(--zima-umplere); color: var(--alb); box-shadow: var(--umbra-1); }
.buton-plin:hover { background: var(--zima-umplere); }
.titlu-pagina {
margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
line-height: 1.18; letter-spacing: -0.02em; color: var(--text);
}
/* legatura de intoarcere, in capul paginilor de sine statatoare */
.inapoi {
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 14px; font-size: .88rem; font-weight: 600;
color: var(--zima-text);
}
.inapoi:hover { text-decoration: underline; }
.inapoi .ico { width: 1em; height: 1em; }
.form-group { margin-bottom: 16px; }
.form-group > label {
display: block; margin-bottom: 6px;
font-size: .88rem; font-weight: 600; color: var(--text);
}
.form-group input[type="text"], .form-group input[type="email"],
.form-group input[type="date"], .form-group input[type="number"],
.form-group select, .form-group textarea { width: 100%; }
/* Steluta campului obligatoriu. Culoarea e cea de alerta, nu aurul:
masurat, aurul marcii da 2,94 pe alb - sub prag. */
.req { color: var(--rau); font-weight: 700; }
.eroare { margin: 6px 0 0; font-size: .84rem; color: var(--rau); }
/* desenul abstract, la latimea intreaga a unei pagini de text */
.arta-lata {
display: block; width: 100%; height: auto; aspect-ratio: 16 / 6;
object-fit: cover; /* 900x635 taiat, nu deformat */
border-radius: var(--raza-mare); border: 1px solid var(--zima-chenar);
}
/* ================================================ BANDA DE DRUM ======
Spune pe ce drum esti: estimarea gratuita sau fisa platita. Cele doua
folosesc ACELASI ecran, si pana la 01.09.2026 se deosebeau doar prin ce
LIPSEA de pe el (cifrele) - adica prin nimic vizibil. Omul apasa pe
cardul fisei si ateriza pe ceva ce arata identic cu calculatorul gratuit.
======================================================================= */
.drum-banda {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 16px; margin-bottom: 18px;
border-radius: var(--raza); border: 1px solid transparent;
font-size: .9rem; line-height: 1.5;
}
.drum-banda__semn {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
}
.drum-banda__semn .ico { width: 17px; height: 17px; }
.drum-banda__text { min-width: 0; color: var(--text-mediu); }
.drum-banda__text strong { color: var(--text); }
.drum-banda-fisa {
background: var(--zima-palid); border-color: var(--zima-chenar);
}
.drum-banda-fisa .drum-banda__semn { background: var(--zima-umplere); color: var(--alb); }
.drum-banda-liber {
background: var(--fundal-slab); border-color: var(--chenar);
}
.drum-banda-liber .drum-banda__semn { background: var(--chenar); color: var(--text-mediu); }
/* Coloana de text a eroului. `min-width: 0` nu e decor: intr-o grila,
un copil nu se lasa mai ingust decat continutul lui, iar titlul lung
ar impinge desenul afara din banda. */
.erou-text { min-width: 0; }
/* Legaturile din NOTE stau pe fundal colorat, nu pe alb: `--zima-text`
(4,85 pe alb) cade acolo la 4,36 - masurat pe pagina Expertilor, intr-o
nota chihlimbarie. Treapta inchisa trece pe toate fundalurile de nota,
iar sublinierea o face vizibila si fara culoare. */
.nota a { color: var(--text); text-decoration: underline; }
/* DIFERENTIEREA celor doua carduri (cerut 01.09.2026: „aici chiar trebuie
sa avem niste culori diferite").
Desenele sunt fisierele utilizatorului, NEATINSE - deosebirea se face la
AFISARE, printr-o rotire de nuanta pe al doilea. Asa raman doua
compozitii diferite (prima fara linii de conexiune, cum ii place lui),
in doua familii de culoare: prima calda, a doua rece, spre Zima.
E o transformare de afisare, nu o rescriere: se da inapoi stergand o
linie, iar fisierul sursa ramane exact al lui. */
/* Fiecare card isi are setul lui de culori: altfel cele doua desene,
care sunt aceeasi familie de confetti, se citesc ca acelasi cap pus de
doua ori. Rotirea e pe NUANTA, deci pastreaza lumina si saturatia
desenului - nu-l reface, il muta. */
.card-drum-cald .arta { filter: hue-rotate(-55deg) contrast(1.12) saturate(1.12); }
.card-drum-rece .arta { filter: hue-rotate(155deg) contrast(1.12) saturate(1.12); }
@media (prefers-reduced-motion: reduce) { .card-drum { transition: none; } }
/* ================================================ CAZUL ÎN LUCRU =====
Rândul unei leziuni puse în caz. Până la 01.09.2026 stilul era scris
inline în marcaj; a ieșit de acolo odată cu semnalarea de
multiplicitate, care are nevoie de o a doua stare. */
.caz-leziune {
border: 1px solid var(--chenar); border-radius: var(--raza);
padding: 12px 14px; margin-bottom: 10px;
}
/* PĂLIT, nu blocat: leziunea intră în calcul, dar se vede că e de privit
încă o dată. Semnul e purtat de TEXT (pastila „de verificat" plus
motivul scris), nu doar de culoare — pălirea singură n-ar spune nimic
cuiva care n-o vede. */
.caz-leziune-palit {
border-color: var(--auriu-chenar);
background: color-mix(in srgb, var(--auriu-chenar) 34%, var(--alb));
}
.caz-leziune-motiv {
margin: 6px 0 0; font-size: .86rem; line-height: 1.45;
color: var(--auriu-inchis);
}
/* RÂNDUL DE ÎNCADRAT (02.09.2026): leziunea a intrat în caz cu cuvintele
omului; întrebarea din anexă („sub / peste 10 cm²") se pune aici, în rând.
Chenar și tentă din albastrul casei, nu din auriu: nu e o atenționare, e
pasul următor. */
.caz-leziune-noua {
border-color: var(--zima-umplere);
background: var(--zima-palid);
}
.incadrare-butoane {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.incadrare-butoane .buton { white-space: normal; text-align: left; }
.incadrare-arie {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px;
}
.incadrare-arie input {
width: 84px; padding: 4px 6px; font: inherit;
border: 1px solid var(--chenar); border-radius: 6px; background: var(--alb);
}
/* GRUPURILE DE ÎNCADRARE (LT / CP / CPP) din rândul cazului.
e HTML curat — fără JavaScript, deci merge și cu scripturile
oprite. LT stă mereu deschis; CP și CPP se strâng când sunt multe: din
236 de leziuni, 43 au între 11 și 20 de intrări, iar cea mai mare are 16
consecințe permanente — desfășurate toate, ar fi un zid. */
.incadrare-grup { margin-top: 12px; border-top: 1px solid var(--chenar); padding-top: 10px; }
.incadrare-grup > summary {
cursor: pointer; font-weight: 600; font-size: .95rem;
display: flex; align-items: center; gap: 8px; list-style: none;
}
.incadrare-grup > summary::-webkit-details-marker { display: none; }
.incadrare-grup > summary::before {
content: "B8"; color: var(--text-stins); transition: transform .15s;
}
.incadrare-grup[open] > summary::before { transform: rotate(90deg); }
.incadrare-grup > summary:hover { color: var(--zima-text); }
/* TABELUL ALES CHIAR ÎN FORMULAR (§188, 08.09.2026). Medicul: „trebuie să
deschizi consecința în altă fereastră… eficientizează". Stă lângă
`.gradare-camp` — sub rândul lui, în afara etichetei — deci poartă
ACELEAȘI semne: dunga din stânga și tenta palidă. Strâns, fiindcă lista
poate avea 38 de rânduri (consecințele cerebrale). */
.tabel-inline {
margin: -4px 0 12px 30px; padding: 10px 13px;
border-left: 3px solid var(--zima-umplere); background: var(--zima-palid);
border-radius: 0 var(--raza) var(--raza) 0;
}
.tabel-inline > summary {
cursor: pointer; font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--zima-text);
display: flex; align-items: center; gap: 8px; list-style: none;
}
.tabel-inline > summary::-webkit-details-marker { display: none; }
.tabel-inline > summary::before {
content: "B8"; transition: transform .15s;
}
.tabel-inline[open] > summary::before { transform: rotate(90deg); }
/* Doar ETICHETA e cu majuscule, ca la `.gradare-eticheta`. Titlul tabelului
e o frază („Consecințe posttraumatice permanente în cazul leziunilor
cerebrale") — strigată, se citește greu. */
.tabel-inline > summary .stins { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Rândurile tabelului sunt etichete albe pe tenta blocului: fără fundal
propriu s-ar topi în ea. */
.tabel-inline .alegere { background: var(--alb); }
/* Lista poate fi lungă: deschisă, cea a consecințelor cerebrale măsoară
8.239 px (38 de rânduri + 48 de trepte). Fără plafon, formularul de sub
ea — butonul „Adaugă în caz" — ajunge la opt ecrane distanță. Cu el,
lista derulează în ea, iar pagina rămâne la îndemână. NU se pune
`overscroll-behavior`: derularea trebuie să treacă mai departe la pagină
când lista s-a terminat. */
.tabel-inline-corp { margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.tabel-inline-corp h3 { font-size: .95rem; }
/* CEREREA FIȘEI, ÎN ANTETUL CAZULUI (§188). Antetul e un rând flex: butonul
stă lângă pastilă și nu se strânge, iar pe ecran îngust trece pe rândul
următor odată cu ea. */
.caz-cap-final {
display: flex; gap: 12px; align-items: center;
flex-wrap: wrap; justify-content: flex-end;
}
.caz-cere-fisa { flex: 0 0 auto; white-space: nowrap; }
.caz-leziune-noua .alegere { background: var(--alb); }
.caz-leziune-noua .lez-actiuni { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
/* §339 TERMENUL GENERAL: definiția și îndemnul din cardul acuzei. Textul e mai
plin decât notele stinse ale cardului — e chiar ce trebuie citit. */
.caz-definitie { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--text-mediu); }
.caz-sursa { margin: 4px 0 0; }
.caz-indemn { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.caz-indemn a { white-space: nowrap; }
/* REGIUNEA ANATOMICA (04.09.2026): fraza numeste un nivel mare pe care anexa
nu-l cunoaste („membre inferioare"), deci in loc de o propunere din alt
capitol se arata ce se poate alege la nivelul acela. */
.calc-regiune {
border: 1px solid var(--zima-chenar);
border-left: 3px solid var(--zima);
border-radius: 8px;
padding: 12px 14px;
margin: 10px 0 14px;
background: var(--zima-palid);
}
.calc-regiune-cap { margin: 0 0 10px; }
.calc-regiune-titlu { margin: 12px 0 4px; font-weight: 600; font-size: .95rem; }
.calc-regiune-titlu:first-of-type { margin-top: 0; }
.calc-regiune .lista-strans li { padding: 3px 0; }
.calc-regiune .lista-strans { margin: 0; }
/* CITIREA UNUI TEXT MEDICAL (04.09.2026). Lista frazelor citite din act:
fiecare cu ce a gasit baremul, iar cele EXCLUSE de act marcate anume — nu
sterse, fiindca medicul le poate consemna in caz cu zero puncte. */
/* .nota-bine si .link-buton lipseau din foaie, desi le foloseam in markup —
chiar clasa de defect pe care o tot reparam (o clasa scrisa in markup nu
dovedeste ca exista un stil pentru ea). Culorile vin din jetoanele existente
`--bine` / `--bine-fundal`, ca surorile ei `.nota-atentie` si `.nota-rau`. */
.nota-bine {
border-left-color: var(--bine); background: var(--bine-fundal);
padding: 13px 16px; border-radius: 0 var(--raza) var(--raza) 0; color: var(--bine);
}
.link-buton {
background: none; border: 0; padding: 0; margin: 0; font: inherit;
color: inherit; text-decoration: underline; cursor: pointer;
}
.link-buton:hover { text-decoration: none; }
/* Randul de actiuni de sub caseta: butonul de citire, cel de ciorna si nota
care spune cat tine ciorna. Se rupe pe ecran ingust. */
.citire-actiuni {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
margin-top: 16px;
}
.citire-actiuni .stins { flex: 1 1 16ch; }
.citire-lista { list-style: none; margin: 0; padding: 0; }
.citire-rand {
border: 1px solid var(--chenar);
border-left: 3px solid var(--zima);
border-radius: var(--raza);
padding: 12px 14px;
margin-bottom: 10px;
background: var(--fundal);
}
.citire-rand-negat { border-left-color: var(--atentie); background: var(--fundal-slab); }
.citire-fraza { margin: 0 0 8px; line-height: 1.55; }
.citire-rand-negat .citire-fraza { color: var(--text-stins); }
/* Fraza care nu numeste nicio leziune: se vede ca a fost citita, dar nu cere
nimic de la om. Fara ea, o lista de 300 de rânduri ar parea 300 de decizii. */
.citire-rand-gol { border-left-color: var(--chenar); opacity: .72; }
.citire-rand-gol .citire-fraza { color: var(--text-stins); }
/* Coloana paginii de citire: mai lata decat cea de citit obisnuita (1000 in
loc de 900), fiindca fiecare frazǎ isi poarta lista de leziuni alaturi.
Latimea sta AICI, nu in `style=` pe vedere — regula casei (SimetrieTest). */
.invelis-citire { padding: 28px 20px 48px; max-width: 1000px; }
/* LEZIUNILE PROPUSE, grupate (04.09.2026, §117): aceeasi leziune descrisa la
examen, la CT, in diagnostice si in epicriza sta o data, cu frazele ei
dedesubt. Numarul de sus era de FRAZE, nu de leziuni. */
.citire-subtitlu { margin: 26px 0 8px; font-size: 1.05rem; }
.citire-grupuri { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.citire-grup {
/* min-width: 0 — copilul de grila nu se lasa altfel mai ingust decat
continutul lui, iar o fraza lunga fara spatii ar impinge coloana. */
min-width: 0;
border: 1px solid var(--chenar);
border-left: 3px solid var(--zima);
border-radius: var(--raza);
padding: 12px 14px;
background: var(--fundal);
}
.citire-grup-cap { margin: 0 0 6px; font-weight: 600; }
.citire-grup .lista-strans { margin: 0; }
.citire-grup .lista-strans li { margin: 2px 0; overflow-wrap: anywhere; }
.citire-grup p.mic { margin: 8px 0 0; }
/* Fraza din grup duce la randul ei din lista de jos, unde stau ceilalti
candidati — altfel panoul grupat ar fi o fundatura. */
.citire-spre-fraza { color: inherit; text-decoration: none; }
.citire-spre-fraza:hover { text-decoration: underline; }
.citire-rand:target { border-left-color: var(--zima); box-shadow: 0 0 0 2px var(--zima-palid); }
/* Starea de asteptare a analizei AI (§121): furnizorul tine 7-40 s, iar o
pagina care pare moarta se reincarca — adica a doua comanda. */
.citire-asteapta { flex-basis: 100%; margin: 8px 0 0;
background: var(--auriu-palid); border-left: 3px solid var(--auriu);
border-radius: 8px; padding: 12px 14px; }
.citire-asteapta[hidden] { display: none; }
.citire-asteapta-text { margin: 0 0 8px; }
/* BARA (§127): merge spre o estimare facuta din marimea textului si se
opreste la 95% — un progres care ajunge la 100% si sta acolo minte. */
.citire-bara { height: 8px; border-radius: 999px; overflow: hidden;
background: var(--chenar); }
.citire-bara-umplut { height: 100%; width: 0; border-radius: 999px;
background: var(--auriu-inchis); transition: width .25s linear; }
.citire-asteapta-cifre { margin: 6px 0 0; }
.citire-form { margin: 0; } /* nu `display: contents`: schimba asezarea; aici e doar carligul scriptului de asteptare */
/* CE PLEACA LA AI (§122): textul pseudonimizat, cu marcajele la vedere, si
propunerile motorului — validarea omului inainte de plata. */
.citire-plecare { margin-top: 8px; }
.citire-plecare-text { white-space: pre-wrap; word-break: break-word; font: inherit; line-height: 1.55;
background: var(--fundal-slab); border: 1px solid var(--chenar); border-radius: 10px;
padding: 14px 16px; max-height: 60vh; overflow: auto; margin: 0; }
.citire-plecare-text mark.pseudonim { background: var(--auriu-palid); color: var(--auriu-inchis);
padding: 0 4px; border-radius: 4px; font-weight: 600; }
.citire-plecare-bloc { margin-top: 10px; }
.citire-plecare-bloc summary { cursor: pointer; }
.citire-plecare-bloc[open] summary { margin-bottom: 8px; }
/* ====================================== GHID: CAPTURI ==== */
/* Imaginile ghidului sunt CAPTURI ale ecranelor adevarate, deci au nevoie de
o rama care sa spuna „asta e o poza a aplicatiei, nu o parte din pagina".
Chenarul si umbra fac chiar asta; fara ele, o captura de calculator lipita
intr-o pagina de calculator se citeste ca o a doua interfata, vie. */
.captura { margin: 16px 0 0; }
/* CAPTURILE IES DIN COLOANA DE CITIT (§143). Textul are nevoie de rand
scurt, o poza de ecran are nevoie de latime — la 692 px, printscreenul
unei pagini de 1200 devine ilizibil. Cardul e centrat pe coala, deci
iesirea se face simetric: `50%` o duce in mijlocul cardului, iar
`translateX(-50%)` o intinde in amandoua partile.
Se opreste la jgheabul paginii, deci nu poate impinge nimic pe orizontala. */
@media (min-width: 900px) {
.pagina-text .card > .captura,
.pagina-text .card > .grila:has(> .captura) {
/* Latimea maxima nu e „coala minus jgheaburi": cu cuprinsul alaturi,
coloana e mutata la dreapta cu jumatate din latimea lui, deci
iesirea simetrica se poate intinde doar cat spatiul din DREAPTA.
Cei 20 px in minus sunt bara de derulare, pe care `100vw` o numara
si ea. */
width: min(1180px,
calc(100vw - 2 * var(--jgheab) - var(--cuprins-ocupat, 0px) - 20px));
margin-left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 1300px) {
.pagina-text:has(> .pagina-cuprins) { --cuprins-ocupat: var(--cuprins-lat); }
}
.captura img {
display: block; width: 100%; height: auto;
border: 1px solid var(--chenar-tare); border-radius: 12px;
box-shadow: 0 8px 24px rgba(22, 33, 58, .08);
background: var(--alb);
}
/* Capturile inguste (un singur card) nu se intind pe toata coloana: intinse,
pixelii lor se vad. Latimea e chiar cea a imaginii, plafonata la coloana. */
.captura-ingusta img { max-width: 760px; margin-inline: auto; }
.captura figcaption {
margin: 8px 2px 0; font-size: .86rem; color: var(--text-stins);
line-height: 1.5;
}
.captura figcaption strong { color: var(--text-mediu); }