/*
 * Portalul de client — stil propriu, complet separat de wp-admin.
 *
 * Fisier nou, nu o extindere a lui admin.css: portalul nu ruleaza niciodata in
 * wp-admin, iar admin.css nu se incarca niciodata in portal. Doua fisiere care
 * nu se intalnesc nu-si pot strica unul altuia regulile.
 *
 * Vocabularul de culoare e cel din CLAUDE.md §9.1 — aceleasi valori, ca ce
 * inseamna un verde sa fie acelasi lucru in ambele interfete.
 *
 * ==========================================================================
 * FUNDATIA COMUNA A INTERFETELOR NOI — decis pe 16 august 2026
 * ==========================================================================
 *
 * Blocul de tokeni de mai jos si dimensiunile tactile NU sunt „ale portalului
 * de client". Sunt baza pe care o mosteneste si interfata de TEHNICIAN, care
 * urmeaza si care va fi folosita predominant pe telefon.
 *
 * De aceea dimensionarea porneste de la deget, nu de la mouse: `--vks-tap`
 * e inaltimea minima a oricarui lucru care se apasa, iar `--vks-input-font` e
 * marimea minima care NU declanseaza marirea automata a paginii pe iOS.
 *
 * Cine adauga un buton nou foloseste tokenii, nu valori proprii. O valoare
 * scrisa de mana intr-un loc devine, la a treia repetare, un al doilea sistem.
 */

:root {
    --vks-text: #1f2328;
    --vks-muted: #6b7280;
    --vks-line: #d8dbdf;
    --vks-bg: #f6f7f8;
    --vks-panel: #ffffff;
    --vks-brand: #1f2328;

    /*
     * VOCABULARUL DE CULOARE — culoarea spune CE AI DE FACUT, nu cat de grava e
     * situatia. Definitia completa, cu motivele, sta in `VKS\Support\Culoare`;
     * aici e doar forma CSS a acelorasi valori.
     *
     *   verde      in regula, activ, valabil
     *   portocaliu deschis, cere urmarire, dar nu pe loc
     *   rosu       necesita ACTIUNE IMEDIATA
     *   maro       pierdere consumata — nimic de facut
     *   albastru   informativ, neutru, terminal FARA pierdere
     *   --vks-muted (mai sus)  absenta datelor, nu e in uz, inchis fara consecinta
     */
    --vks-green: #16a34a;
    --vks-orange: #a16207;
    --vks-red: #dc2626;
    /*
     * Albastrul, ridicat de la #2563eb la #1d4ed8 la `VKS_VERSION` 2.10.154, ca
     * intoarcerile „← …" sa treaca 4,5:1 pe fundalul paginii: #2563eb dadea 4,29:1
     * pe `--vks-page`, #1d4ed8 da 5,56:1. Decizia lui Gabriel: se ridica TOKENUL,
     * nu doar intoarcerile, iar `Culoare::ALBASTRU` din PHP ia aceeasi valoare.
     *
     * Cifrele de contrast din comentariile de mai jos sunt recalculate pe #1d4ed8
     * la `VKS_VERSION` 2.10.156. Unde mai apare #2563eb sau `#0b1e47`, e istorie
     * datata, nu o cifra de azi.
     */
    --vks-blue: #1d4ed8;

    /*
     * Maroul e culoare NOUA in vocabular, adaugata pe 19 august 2026 — dar nu e
     * o nuanta noua pe ecran: e exact culoarea textului din `.vks-flash-error`,
     * folosita in proiect de la construirea portalului.
     *
     * Declarat AICI, ca token cu nume, tocmai fiindca movul `#7c3aed` — scos in
     * acelasi pas — fusese folosit deliberat in doua locuri si declarat in
     * niciunul. O culoare cu inteles fara nume nu se mai gaseste peste trei luni.
     */
    --vks-brown: #7f1d1d;

    /*
     * 44px e pragul din Apple HIG; Material cere 48. Se alege 44 ca MINIM
     * absolut, nu ca tinta: butoanele principale primesc mai mult.
     *
     * Masurat pe 16 august 2026, inainte: butonul din liste avea 28px,
     * cel de stergere a unei poze 21px — iar acela e si ireversibil.
     */
    --vks-tap: 44px;

    /*
     * 16px, nu 15: sub pragul asta, iOS Safari MARESTE pagina la fiecare
     * atingere a unui camp. Se aplica DOAR controalelor de formular — restul
     * textului ramane la 15px, unde e mai bine proportionat.
     */
    --vks-input-font: 16px;

    /*
     * Fundalul PAGINII — gri rece, distinct de `--vks-bg`.
     *
     * Token propriu, nu literal repetat: culoarea e folosita de **doua** foi
     * (aici si `administrator.css`), iar §9.1 regula 1 spune ca o valoare
     * scrisa de mana intr-un loc devine, la a treia repetare, un al doilea
     * sistem. `--vks-bg` (#f6f7f8) ramane ce era — fundalul BUTOANELOR neutre
     * din wp-admin refolosit; schimbat, ar fi miscat si acelea.
     */
    --vks-page: #e8eaec;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/*
 * ==========================================================================
 * ⚠️ `hidden` SE RESPECTA — garda, adaugata pe 20 septembrie 2026
 * ==========================================================================
 *
 * `[hidden] { display: none }` traieste in foaia BROWSERULUI, iar originea
 * autorului bate originea agentului utilizator — indiferent de specificitate.
 * Deci ORICE regula de-a noastra care declara `display` pe acelasi element
 * ANULEAZA atributul, iar elementul ramane vizibil cu `hidden` in marcaj.
 *
 * ## Cazul care a produs-o, masurat
 *
 * Pe `/tehnician/vizita/2/`, sub cartela unui aparat cu probleme, scria:
 *
 *     „Niciun aparat cu probleme. Toate cele 2 raman Functional corect."
 *
 * PHP scrisese `hidden` corect — exista cartele, deci textul de gol n-avea ce
 * cauta acolo. `.vks-note { display: block }`, cu 340 de linii mai jos, il
 * anula. Doua afirmatii care se contrazic, pe ecranul de teren.
 *
 * ## De ce n-a prins-o nicio proba
 *
 * `hidden` E in marcaj. Fiecare proba care randa ecranul l-a gasit acolo si a
 * raportat „ascuns" — §3.4, a treia axa: „randat" nu inseamna „afisat". Acolo
 * cauza masurata era JavaScript-ul care schimba DOM-ul; aici o regula CSS care
 * anuleaza un atribut, fara ca nimic sa se schimbe intre randare si ecran.
 *
 * ⚠️ Iar ramura care m-a oprit din cautare era un `else` care nu enumera:
 * *„pe server e ascuns — daca se vede, il descopera JS-ul"*. CSS-ul nu era in
 * lista, deci n-a fost masurat.
 *
 * ## Raza, masurata inainte de a scrie regula
 *
 *     elemente cu atributul `hidden` in cele 144 de view-uri : 2
 *     dintre ele, cu `display` declarat de o foaie de-a noastra: 1
 *
 * Deci azi repara un singur loc. Regula ramane scrisa pe PROPRIETATE — „nimic
 * cu `hidden` nu se vede" — fiindca a treia clasa care declara `display` pe un
 * purtator de `hidden` nu produce niciun semnal: nici eroare, nici proba rosie.
 *
 * ## ⚠️ Limita, declarata: NU si in foile de wp-admin
 *
 * `admin.css` si `matrice.css` se incarca in wp-admin, unde jQuery `.show()`
 * scrie `display` in linie — iar `!important` de aici l-ar bate. Nu se pune
 * acolo fara o masuratoare proprie despre ce foloseste nucleul. Cele doua
 * elemente masurate traiesc amandoua pe ecranul de tehnician, care incarca
 * foaia asta.
 */
[hidden] {
    display: none !important;
}

/**
 * ==========================================================================
 * TEXTURA DE FUNDAL — tabla perforata, comuna celor TREI interfete
 * ==========================================================================
 *
 * Mutata aici pe 22 august 2026, din `administrator.css`, la cererea
 * utilizatorului: **cele trei interfete sunt acelasi produs.** Un client care
 * vede portalul si apoi primeste un document trebuie sa recunoasca aceeasi mana.
 *
 * ## De ce AICI si nu in trei locuri
 *
 * `portal.css` e fundatia comuna (§2.4): tokenii, dimensionarea tactila, si de
 * acum textura. Scrisa in fiecare foaie, ar fi fost trei valori care se
 * desincronizeaza la prima ajustare. `administrator.css` **si-a pierdut** regula
 * `body` odata cu mutarea — nu ramane comentata, ci stearsa.
 *
 * ## ⚠️ Intensitatea e la limita de JOS, deliberat
 *
 * Continutul sta pe cartele albe, deci textura se vede doar pe margini si intre
 * sectiuni. **Nu se intareste „ca sa se vada mai bine": daca se vede, e prea
 * tare.** Mai puternica, ar concura cu tabelele de cifre citite ore intregi.
 *
 * ## De ce tabla PERFORATA, si nu striata
 *
 * Tabla striata a fost incercata in patru forme si abandonata: **nu se poate
 * face din CSS.** Depinde de relief real — lumina cazuta pe metal bombat — iar
 * CSS-ul are doar gradiente si forme. Doua `repeating-linear-gradient`
 * incrucisate dau o retea de romburi; unul singur da dungi plate; formele
 * desenate raman desen.
 *
 * De fiecare data codul a randat **exact** ce i s-a cerut. Nepotrivirea era
 * intre cerere si ce **produce** cererea. Tabla perforata e in schimb geometrie
 * simpla — puncte pe o retea patrata — deci CSS o reproduce fidel.
 *
 * ## Unde NU ajunge, verificat prin randare
 *
 *   - **wp-admin** — foaia nu se incarca acolo deloc;
 *   - **cele patru documente de tipar** — sigilate, isi randeaza propriul
 *     document fara nicio foaie externa (§2.4);
 *   - **la tiparire**, oriunde — blocul `@media print` de mai jos scrie
 *     `body { background: #fff }` cu SCURTATURA, care reseteaza si
 *     `background-image`. Fara scurtatura, textura ar fi ajuns pe hartie;
 *   - **ecranul de autentificare** — `LoginBranding` scrie `body.login`
 *     (0-1-1, mai specific) tot cu scurtatura, deci ramane plat.
 *
 * Ultimele doua nu se deduc din locul regulii: „foaia se incarca acolo" si
 * „textura se vede acolo" sunt doua afirmatii diferite, iar a doua conteaza.
 */
body {
    background: var(--vks-page);
    background-image:
        radial-gradient(circle at 3px 3px, rgba(70, 85, 100, .13) 1.4px, transparent 1.5px);
    background-size: 12px 12px;
    color: var(--vks-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--vks-blue);
}

/*
 * Numarul de telefon — TINTA de apasare, nu doar un link
 * ---------------------------------------------------------------------------
 * Adaugata pe 23 octombrie 2026. Masurat inainte, cu motorul de layout, pe
 * fisa lucrarii la 390px:
 *
 *     inaltime 19px   lungime 67,9px   culoare #2563eb   decor underline
 *
 * Deci ARATA ca un link si nu se poate APASA sigur: 19px fata de `--vks-tap`,
 * pragul tactil al proiectului. Omul e pe teren, cu o mana pe telefon.
 *
 * `inline-flex` ca `min-height` sa aiba obiect — pe un element in linie n-ar
 * face nimic (§2.4, forma a sasea: o declaratie care castiga pe un element
 * care n-o poate folosi arata exact ca una care functioneaza). Precedentul e
 * `.vks-portal-who a`, cu aceleasi trei declaratii si acelasi motiv.
 *
 * ⚠️ IN AFARA oricarui `@media`, ca butoanele: §9.4 cere ca ambele forme ale
 * unui ecran sa se purteze la fel, iar o tinta tactila pusa doar sub prag ar
 * fi fost a doua regula despre acelasi lucru.
 */
.vks-tel {
    align-items: center;
    display: inline-flex;
    min-height: var(--vks-tap);
}

.vks-portal-bar {
    background: var(--vks-brand);
    color: #fff;
    padding: 14px 0;
}

.vks-portal-bar a {
    color: #fff;
}

.vks-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.vks-portal-bar .vks-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vks-portal-brand {
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
}

.vks-portal-who {
    font-size: 13px;
    opacity: .85;
}

.vks-portal-main {
    padding: 28px 0 60px;
}

.vks-panel {
    background: var(--vks-panel);
    border: 1px solid var(--vks-line);
    border-radius: 6px;
    padding: 22px 24px;
    margin: 0 0 18px;
}

.vks-panel h1 {
    font-size: 22px;
    margin: 0 0 6px;
}

.vks-panel h2 {
    font-size: 17px;
    margin: 0 0 8px;
}

.vks-muted {
    color: var(--vks-muted);
}

.vks-portal-foot {
    border-top: 1px solid var(--vks-line);
    padding: 18px 0 40px;
    font-size: 13px;
    color: var(--vks-muted);
}

/*
 * Bulinele de stare.
 *
 * ⚠️ Cei cinci MODIFICATORI — `-ok`, `-warn`, `-bad`, `-info`, `-none` — au fost
 * STERSI la `VKS_VERSION` 2.10.6, auditul 6 din 5 septembrie 2026.
 *
 * Erau mecanismul de DINAINTEA lui `Support\Culoare`. Masurat: bulina se
 * randeaza azi peste tot cu culoarea pe element —
 *
 *     <span class="vks-dot" style="color:var(--vks-green);">
 *
 * — in 33 de fisiere PHP, iar niciunul nu mai foloseste vreun sufix. Cele cinci
 * clase ramasesera in foaie, colorand nimic.
 *
 * De ce culoarea a plecat pe element: §9.1 cere ca fiecare culoare cu inteles sa
 * aiba UN singur exemplar, in `Culoare::`. O a doua lista in CSS ar fi fost a
 * doua definitie a acelorasi cinci intelesuri — iar cele doua se desincronizeaza
 * la prima schimbare de nuanta.
 *
 * `.vks-dot` insasi RAMANE: ea da grosimea, nu culoarea.
 */
.vks-dot {
    font-weight: bold;
}

/*
 * Insignele — aceleasi patru intelesuri ca bulinele, aceleasi sufixe. Un al
 * doilea set de nume pentru aceleasi culori ar fi fost inca un loc unde se pot
 * desincroniza.
 *
 * Fundal deschis, text in culoarea plina: la contrast mic, un fundal saturat cu
 * text alb devine ilizibil pe ecrane slabe, iar portalul se deschide de pe
 * telefoane, in sali de fitness, la lumina de sus.
 */
.vks-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.vks-badge-ok {
    background: #dcfce7;
    color: var(--vks-green);
}

.vks-badge-warn {
    background: #fef3c7;
    color: var(--vks-orange);
}

.vks-badge-bad {
    background: #fee2e2;
    color: var(--vks-red);
}

.vks-badge-info {
    background: #dbeafe;
    color: var(--vks-blue);
}

.vks-badge-none {
    background: #eceef0;
    color: var(--vks-muted);
}

/*
 * ⚠️ A CINCEA insigna, fara buline pereche — 21 septembrie 2026.
 *
 * Comentariul de deasupra spune „aceleasi sufixe ca bulinele". Ramane adevarat
 * pentru primele patru; asta n-are buline, fiindca marou nu e o stare de rand
 * de lista, e verdictul unui aparat SCOS DIN UZ.
 *
 * `--vks-brown` = pierdere consumata, nimic de facut (§9.1). Ceruta pe fisa de
 * aparat a tehnicianului, unde „Casat" se randa ca al treilea cuvant dintr-o
 * linie gri de 13px — adica in culoarea ABSENTEI de date, nu a pierderii.
 *
 * Fundalul palid NU e vocabular: §9.1 spune explicit ca perechile de
 * lizibilitate nu poarta inteles. Intelesul sta pe TEXT, din token, iar fundalul
 * e ales ca sa se poata citi — 8,1:1, calculat, nu apreciat.
 */
.vks-badge-pierdut {
    background: #f3e3e0;
    color: var(--vks-brown);
}

/*
 * Cartonasele de pe pagina de pornire — DOUA grupe (cozi sus, inventar jos),
 * fiecare in propriul `.vks-cards` (felia „ordinea cartelelor", pct. 2).
 *
 * GRILA de patru coloane egale, nu flex-wrap: randul e MEREU de patru (4+4, nu
 * 5+3), toate opt au aceeasi latime, iar `align-items: stretch` (implicit la grid)
 * le creste pe toate cat cea mai inalta din rand — inaltimea vine din ASEZARE, nu
 * din text (pct. 3). Doua grupe SEPARATE, nu una de opt: la pragul unde incap doar
 * trei pe rand, a patra n-are cum sa cada peste grupa cealalta.
 *
 * Ambele grupe sunt blocuri pe toata latimea lui `.vks-wrap`, deci cele patru
 * coloane + spatiile umplu exact latimea panoului cu numele firmei (pct. 3).
 *
 * ⚠️ Pragul e cel UNIC al proiectului, 782px — regula „un singur prag peste
 * tot" (santinela `test-prag-unic-782`, plus suitele care citesc pragul portalului
 * presupunand ca e unul). SUB prag, grila trece la O COLOANA — UNA pe rand, ca la
 * 2.10.128 si inainte (felia „cartelele pe telefon"). Pragul 4->2 de la 2.10.129
 * era o presupunere nemasurata pe telefon; masurat, sub 782 fusese dintotdeauna una
 * pe rand. Regula `grid-template-columns: 1fr` sta in blocul
 * `@media (max-width: 782px)` de la finalul fisierului, NU intr-un @media propriu:
 * un al doilea prag ar fi spart invariantul.
 *
 * ⚠️ MASURAT (`scratchpad/masoara-prag-cartele.php`): „Proforme de semnat ③ și
 * închise" tine pe ≤2 randuri doar peste 210px/cartela, adica peste ~922px
 * viewport. Deci intre 782 si 922 (tableta in peisaj) textul ei trece pe 3 randuri
 * si cartela iese mai inalta. DECIZIA lui Gabriel: se pastreaza pragul unic 782, cu
 * consecinta asta asumata — pragul masurat (922) ar fi cerut un al doilea @media.
 */
.vks-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 18px;
}

.vks-card {
    position: relative;
    background: var(--vks-panel);
    border: 1px solid var(--vks-line);
    border-radius: 6px;
    padding: 18px 22px;
    min-width: 150px;
    text-decoration: none;
    color: var(--vks-text);
    display: block;
}

/*
 * ==========================================================================
 * `:hover` DOAR UNDE EXISTA CURSOR — felia „ATINGEREA", 10 noiembrie 2026
 * ==========================================================================
 *
 * Cele cinci reguli de `:hover` din foaie stau fiecare sub
 * `@media (hover: hover)`: pe un ecran tactil nu exista cursor, deci starea de
 * trecere n-are ce descrie — confirmarea atingerii e treaba lui `:active`.
 *
 * Fiecare regula e invelita PE LOC, nu mutata intr-un bloc comun: ordinea in
 * fisier decide la specificitate egala (`.vks-button-primary:active` trebuie sa
 * ramana DUPA `:hover`-ul lui, altfel apasarea cu mouse-ul n-ar mai schimba
 * nimic). Un `@media` nu adauga specificitate si nu muta regula — schimba doar
 * CAND se aplica. Declaratiile sunt neatinse, octet cu octet.
 *
 * ⚠️ Scris `(hover: hover)`, cu spatiu dupa doua puncte: lipit, `(hover:hover)`
 * ar contine sirul `:hover`, iar numaratoarea din `test-tema-tactila.php` l-ar
 * lua drept selector.
 *
 * ⚠️ NEMASURAT aici: ce face un telefon real cu `:hover` fara garda — se poate
 * vedea doar pe dispozitiv.
 */
@media (hover: hover) {

    .vks-card:hover {
        border-color: var(--vks-blue);
    }
}

.vks-card-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.vks-card-label {
    display: block;
    color: var(--vks-muted);
    font-size: 13px;
}

/*
 * Cartonașul de COADĂ — felia „cartelele și ieșirea sesizării", pct. 2–4.
 *
 * Numește AMÂNDOUĂ listele, pe trei zone de culoare (§9.1): numele domeniului și
 * „și" NEUTRE, partea activă PORTOCALIE (cere urmărire), „închise" ALBASTRU
 * (terminal, informativ). Bulina stă IMEDIAT DUPĂ partea portocalie — cifra atinge
 * cuvintele pe care le numără — nu în colț. Numără doar activele; la zero nu se
 * randează (PHP), deci dispare, iar eticheta rămâne „active și închise".
 */
.vks-card-label-coada {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--vks-text);
    line-height: 1.5;
}

.vks-zona-neutra {
    color: var(--vks-text);
}

.vks-zona-activa {
    color: var(--vks-orange);
}

.vks-zona-inchis {
    color: var(--vks-blue);
}

/*
 * Bulina numără activele, imediat după partea portocalie. Rezervă lățimea de
 * DOUĂ cifre (felia „ordinea cartelelor", adaos): măsurat, „3" = 22px natural,
 * „12" = 27px — `min-width: 28px` le face IDENTICE, deci cifra a doua nu mișcă
 * nimic. Mai mult de două cifre nu apar (numărul de active al unui client).
 * Lățirea cartelei e oricum imposibilă — `.vks-cards` e `repeat(N, 1fr)`, deci
 * lățimea coloanei nu depinde de conținut; rezerva apără doar poziția inline a
 * lui „și închise" de pe primul rând.
 */
.vks-card-bulina {
    display: inline-block;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    margin-left: 3px;
    box-sizing: border-box;
    border-radius: 11px;
    background: var(--vks-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
}

/*
 * Ecranul de START: toate opt cartelele CENTRATE, iar eticheta de INVENTAR scrisă
 * ca pe cele cu bulină — literă mare la început (din text), bold, aceeași mărime
 * de font (felia „ecranul de start", pct. 1).
 *
 * ⚠️ SCOPATE la `.vks-cards` — containerul folosit DOAR de `portal.home`.
 * `.vks-card`, `.vks-card-label` și `.vks-card-number` sunt moștenite și de
 * interfața de TEHNICIAN, care încarcă aceeași foaie dar NU are `.vks-cards`
 * (cartelele ei stau direct, fără container). O regulă pe clasa de bază le-ar fi
 * atins și pe acelea — exact ce felia nu cere.
 */
/*
 * Toate opt la aceeasi INALTIME (felia „ordinea cartelelor", pct. 3). Grila
 * intinde cele patru dintr-un rand la cea mai inalta, dar cele doua grupe sunt
 * randari separate (pct. 2), deci randul de jos nu stie de al de sus: masurat pe
 * home-ul real, cozile ies 89px, inventarul 97px — 8px diferenta. `min-height` le
 * aduce pe toate opt la aceeasi inaltime, din ASEZARE, nu din text.
 *
 * ⚠️ 104px = cea mai inalta masurata (97) + marja, ca variatia de font sa nu lase
 * continutul inventarului sa depaseasca (§9.4, pixel absolut vs relatie).
 * `flex` + `justify-content: center` aseaza cifra si cuvantul pe mijlocul
 * cartelei — pe verticala acum, nu doar pe orizontala.
 */
.vks-cards .vks-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 104px;
}

.vks-cards .vks-card-label {
    color: var(--vks-text);
    font-size: 17px;
    font-weight: 600;
}

/*
 * Pagina publica de la scanarea unei etichete, pentru cine nu e client.
 *
 * Centrata si scurta: cine o vede tine telefonul in mana, langa un aparat, si
 * are nevoie de UN singur lucru — numarul de telefon.
 */
.vks-qr-public {
    max-width: 480px;
    margin: 8vh auto 0;
    text-align: center;
}

.vks-qr-brand {
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 18px;
}

.vks-breadcrumb {
    margin: 0 0 14px;
    font-size: 14px;
}

/*
 * Tabelele. Ambalajul cu derulare proprie e obligatoriu: pe telefon, un tabel
 * de patru coloane nu incape, iar fara el ar fi derulat pagina intreaga pe
 * orizontala, cu tot cu antet.
 */
.vks-table-scroll {
    overflow-x: auto;
    margin: 14px 0 0;
}

.vks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.vks-table th,
.vks-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vks-line);
    vertical-align: top;
}

.vks-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--vks-muted);
    border-bottom-width: 2px;
    white-space: nowrap;
}

.vks-table tr:last-child td {
    border-bottom: none;
}

/*
 * Cautarea si sortarea listei de aparate — felia inchiderii, pct. 6.
 *
 * Caseta de cautare merge la ORICE latime. Inaltimea si marimea textului vin din
 * tokenii tactili: sub 16px, iOS Safari mareste pagina la fiecare atingere (§4.1).
 */
.vks-portal-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 12px 0 0;
}

.vks-portal-search input[type="search"] {
    flex: 1 1 200px;
    min-height: var(--vks-tap);
    font-size: var(--vks-input-font);
    padding: 0 10px;
    border: 1px solid var(--vks-line);
    border-radius: 6px;
    box-sizing: border-box;
}

.vks-sort {
    white-space: nowrap;
}

/*
 * ⚠️ Aici stateau regulile `.vks-sort-mobile` — banda „Ordoneaza dupa" care aparea
 * doar sub 782px. Niciun view n-o mai purta de la 8 noiembrie 2026 (toate listele
 * folosesc `.vks-sort-band`, de mai jos); sterse pe 9 noiembrie 2026, la felia
 * clientului (pct. 24), impreuna cu perechea lor din blocul de sub 782px.
 * `.vks-sort-mobile-eticheta` ramane — e inca folosita.
 */
.vks-sort-mobile-eticheta {
    font-weight: 600;
    color: var(--vks-muted);
}

/*
 * Banda de sortare VIZIBILĂ MEREU — pentru listele pe CARTELE (sesizări), care
 * n-au capete de coloană de apăsat la nicio lățime. Spre deosebire de
 * `.vks-sort-mobile` (ștearsă pe 9 noiembrie 2026), care apărea doar sub 782px
 * fiindcă acolo sortarea unui tabel trăia în capete. Felia pct. 6.
 *
 * ⚠️ De la 8 noiembrie 2026 o poartă TOATE listele portalului, și cele pe tabel:
 * săgețile au ieșit din capul tabelului și stau aici, la orice lățime (decizia
 * lui Gabriel).
 */
.vks-sort-band {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin: 12px 0 0;
}

/*
 * ⚠️ Rândul cu buton se aliniază la MIJLOC — 22 septembrie 2026
 *
 * Semnalat pe `/portal/vizite/`: butonul „Deschide" părea coborât față de textul
 * rândului. Măsurat într-un motor de layout real (Chrome headless, prin
 * `scratchpad/randeaza-in-chrome.php`), pe toate cele șase rânduri:
 *
 *     butonul sus in celula     10,5px   = chiar padding-ul, deci e LIPIT de varf
 *     eticheta lui, fata de textul randului    +12,6px
 *
 * Deci nu butonul e coborât — e **eticheta** lui. Un `inline-flex` fără
 * `vertical-align` propriu stă pe linia de bază a celulei (§2.4, forma a șasea),
 * iar cu `min-height: var(--vks-tap)` și `align-items: center` linia lui de bază
 * ajunge la ~26px sub propriul vârf. Butonul fiind cel mai înalt din linie, el
 * ocupă tot; ce rămâne desincronizat e textul din el față de textul vecinilor,
 * care stau la `vertical-align: top`.
 *
 * ## De ce se mută CELULELE, nu butonul
 *
 * `vertical-align` pe buton nu schimbă nimic: fiind cel mai înalt element al
 * liniei, el rămâne lipit de vârf indiferent de valoare — s-ar muta doar strutul
 * din jur. Singurul lucru care aliniază cele două texte e coborârea **textului
 * vecin**, adică alinierea celulelor rândului.
 *
 * Nici înălțimea butonului nu e negociabilă: `--vks-tap` e ținta tactilă de 44px
 * din §9.4.
 *
 * ## De ce `:has()`, și nu pe toate celulele
 *
 * `vertical-align: top` e corect pentru rândurile obișnuite, unde o celulă poate
 * avea mai multe linii iar vecinele trebuie să înceapă de sus. Se mută deci doar
 * rândurile care **chiar** poartă un buton — cheiate pe ce CONȚINE rândul, nu pe
 * poziția sau numele celulei (§3.4: proprietate, nu formă). Măsurat prin randare,
 * pe toate cele 21 de rute ale celor două interfețe: forma apare pe **3 ecrane**
 * — `/portal/echipamente/`, `/portal/piese/`, `/portal/vizite/` — cu 10 butoane
 * în total, iar reparația le ia pe toate trei deodată.
 *
 * Dependența e declarată: pe un browser fără `:has()` regula nu se aplică și
 * rămâne decalajul de azi — nu un defect nou. Aceeași degradare ca la
 * `.vks-table-scroll:has(> .vks-admin-list)` din `administrator.css`.
 *
 * ## Sub 782px n-are obiect, și nici nu trebuie să aibă
 *
 * Acolo celulele devin `display: block` (blocul de telefon de la finalul
 * fișierului), deci nu mai sunt celule de tabel și `vertical-align` nu se mai
 * aplică nimănui. Butonul primește `width: 100%` și stă pe rândul lui, sub
 * etichetă. Verificat prin randare la 390px: decalajul nu există acolo, nici
 * înainte, nici după — §9.4, ambele forme.
 *
 * ## ⚠️ EXTINS pe 23 octombrie 2026: și `.vks-tel`, și `th`
 *
 * Două completări, amândouă măsurate — nu o a doua regulă: invariantul e
 * identic (*un rând care poartă o țintă tactilă de `--vks-tap` își aliniază
 * celulele la mijloc*), iar două exemplare s-ar fi despărțit la a treia țintă.
 *
 * **1. `.vks-tel`** — telefonul din fișa lucrării a devenit țintă tactilă la
 * felia de față, deci a căpătat exact forma de aici.
 *
 * **2. `th`** — și ăsta e golul care a costat. Selectorul cerea doar `td`,
 * fiindcă pe cele trei ecrane ale lui 22 septembrie rândurile de corp au
 * **numai** `td` (măsurat: 10 din 10). Fișa lucrării e un tabel cap-valoare:
 * eticheta e `<th>`, deci rămânea la `vertical-align: top` și **nimic nu se
 * alinia**.
 *
 * Măsurat în Chrome la 1200px, text cu text, prin `Range`:
 *
 *     rindul „Telefon", decalaj eticheta -> numar    12,0px
 *     martorii din acelasi tabel, maximul              4,0px
 *
 * Adăugarea lui `th` **nu atinge** cele trei ecrane vechi — nu au `th` în
 * corp — iar aia s-a verificat prin remăsurare, nu dedus din numărătoare.
 *
 * ⚠️ Întrebarea se pune numai **peste 782px**. Sub prag celulele sunt
 * `display: block`, iar „decalajul dintre vârfurile textelor" devine chiar
 * înălțimea stivuirii — măsurat, 154px pe un rând **fără** nicio țintă. Deci
 * o măsurătoare făcută acolo nu răspunde la întrebarea asta, oricât ar arăta
 * a cifră.
 */
.vks-table tr:has(.vks-button) th,
.vks-table tr:has(.vks-button) td,
.vks-table tr:has(.vks-tel) th,
.vks-table tr:has(.vks-tel) td {
    vertical-align: middle;
}

/*
 * Codurile, monospatiate — ca la nota de facturare (§8.11, punctul 17): cifrele
 * se aliniaza pe coloana si nu se confunda intre randuri.
 */
.vks-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

.vks-note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--vks-muted);
}

/*
 * Butoanele. `inline-flex` + `min-height`, nu padding calculat: inaltimea e
 * garantata indiferent de marimea textului dinauntru, iar textul ramane
 * centrat pe verticala.
 */
.vks-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vks-tap);
    padding: 8px 16px;
    border: 1px solid var(--vks-line);
    border-radius: 4px;
    background: var(--vks-panel);
    color: var(--vks-blue);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

/* `:hover` doar unde exista cursor — motivul, langa `.vks-card:hover`. */
@media (hover: hover) {

    .vks-button:hover {
        border-color: var(--vks-blue);
    }
}

/*
 * ==========================================================================
 * APASAREA ADANCESTE CATRE ACCENT — 22 august 2026
 * ==========================================================================
 *
 * Pe un ecran tactil nu exista hover: umplerea nu se declanseaza, ceea ce e
 * corect. Ramanea insa ca butonul sa nu confirme deloc ATINGEREA — iar fara
 * raspuns vizual, omul apasa a doua oara.
 *
 * Masurat inainte de a scrie, in tot `assets/`: 5 reguli de `:hover`, ZERO de
 * `:active`, zero de `:focus`. Nu era o scapare intr-un loc, era o stare care
 * lipsea peste tot.
 *
 * O SINGURA idee pentru ambele variante: butonul neutru se UMPLE cu accentul,
 * cel principal — deja umplut — coboara. Doua reguli gandite separat s-ar fi
 * desincronizat la prima schimbare de accent; asa, amandoua pornesc din
 * `--vks-blue`.
 *
 * ## De ce culoare, si nu umbra sau deplasare
 *
 * Deplasarea de 1px muta tinta sub deget exact in clipa apasarii — pe tactil se
 * poate citi ca ratare, iar pe o lista de butoane arata agitat.
 *
 * Umbra ar fi fost vocabular NOU: proiectul n-are nicio umbra declarata
 * nicaieri. Una introdusa pentru o stare de 100ms ar fi cerut apoi umbre si in
 * alta parte, pentru consecventa — cea mai proasta rentabilitate posibila.
 *
 * ## Fara `transition`, deliberat
 *
 * `.vks-button` n-are niciuna — masurat, nu presupus. Confirmarea unei atingeri
 * trebuie sa incapa in durata atingerii; o tranzitie ar intarzia-o exact acolo
 * unde conteaza. Nu se adauga una „ca sa fie complet".
 *
 * ## Cifrele sunt masurate, nu alese din ochi
 *
 * Pragul vine din §2.4, de la umplerea butonului de navigare: ΔL* 8,2 s-a
 * dovedit la limita perceptiei, 21,2 s-a citit clar. Niciun ΔE n-a prezis
 * perceptia, deci ΔL* se foloseste ca PODEA, nu ca tinta.
 *
 *   neutru     #ffffff -> #1d4ed8    ΔL* 61,0    text alb, contrast  6,70:1
 *   principal  #1d4ed8 -> #091741    ΔL* 29,5    text alb, contrast 17,31:1
 *
 * Pe tokenul de azi, #1d4ed8, recalculate la `VKS_VERSION` 2.10.156; `#091741`
 * e `color-mix(in srgb, #000 70%, var(--vks-blue))`.
 *
 * Al doilea prag conteaza si fata de HOVER, nu doar fata de repaus: pe butonul
 * de navigare principal, umplerea de hover ajunge la #102b77, iar apasarea
 * trebuie sa se vada si peste ea. ΔL* de acolo pana la #091741 e 11,1 — peste
 * podea, deci apasarea unui buton deja survolat ramane vizibila.
 *
 * ## Ce ramane NEMASURAT
 *
 * Daca `:active` se declanseaza pe `<a>` la atingere in Safari pe iOS. Se poate
 * verifica doar pe dispozitiv real, iar sistemul e pe `.local` — deci sta in
 * aceeasi lista cu restul lucrurilor care asteapta vkn.ro (§5.1). Pe `<button>`
 * si `<input type=submit>` starea e neconditionata, deci scrierile din portal si
 * de la tehnician sunt acoperite oricum.
 */
.vks-button:active {
    background: var(--vks-blue);
    border-color: var(--vks-blue);
    color: #fff;
}

/*
 * ==========================================================================
 * ATINGEREA — `:active` pe TOT ce se apasa, nu doar pe butoane
 * 10 noiembrie 2026, felia „ATINGEREA"
 * ==========================================================================
 *
 * Masurat inainte, cu motorul de layout, pe 17 ecrane de portal la 390px:
 * `:active` exista DOAR pe cele patru variante de buton. Cartelele de pe ecranul
 * de start, intoarcerile „← Inapoi…", codurile si cifrele din tabele, legaturile
 * din paragrafe, din liste si din notele de stare, sortarea, marca si „Iesi din
 * cont" nu raspundeau deloc la atingere.
 *
 * Dupa, acelasi recensamant pe 31 de ecrane (clientul 91, pe legaturi, 390px):
 * singurul element apasabil fara nicio regula `:active` e campul NATIV de fisier,
 * lasat deliberat pe forma browserului (ce arata el la apasare: NEMASURAT).
 *
 * ⚠️ NU sub `@media (hover: hover)`: apasarea exista si pe tactil — acolo e chiar
 * singura confirmare. Pe iOS Safari starea se aprinde abia daca pagina are un
 * ascultator de `touchstart` — il pune `portal.js`.
 *
 * ## Familia LEGATURILOR — o singura regula
 *
 * Multimea e cea a tintelor tactile din blocul de sub 782px (aceleasi selectoare,
 * aceeasi masuratoare), plus „Iesi din cont" si butonul „Scoate" al pozelor,
 * care arata ca o legatura. `:not(.vks-button)` e obligatoriu: un buton dintr-o
 * celula s-ar fi potrivit si aici, la specificitate MAI MARE (0-2-2 fata de
 * 0-2-0), iar apasarea lui ar fi pierdut umplerea albastra.
 *
 * Fond `--vks-line` si text `--vks-text`, tokeni existenti, nicio nuanta noua:
 *
 *     text pe fond, apasat          11,37:1   (pragul e 4,5)
 *     fondul fata de panou          ΔL* 12,7  (podeaua din §2.4 e ~8)
 *     textul, albastru -> inchis    ΔL* 25,5
 *
 * Pe #2563eb, albastrul ramas pe `--vks-line` ar fi avut 3,72:1 — sub prag. De
 * aceea s-a schimbat si culoarea, nu doar fondul. Pe #1d4ed8 ar avea 4,82:1,
 * peste prag (recalculat la `VKS_VERSION` 2.10.156); regula a ramas neatinsa.
 */
.vks-portal-brand:active,
.vks-portal-who a:active,
.vks-breadcrumb a:active,
.vks-sort:active,
.vks-table td a:not(.vks-button):active,
.vks-panel p a:not(.vks-button):active,
.vks-panel li a:not(.vks-button):active,
.vks-status-note a:not(.vks-button):active,
.vks-file-remove:active {
    background: var(--vks-line);
    color: var(--vks-text);
}

/*
 * Familia CARTELELOR — chenarul se inchide, fondul se stinge abia vizibil.
 *
 * Fondul nu poate cobori mai mult: textele din cartela sunt portocalii, albastre
 * si gri, iar pe `--vks-page` portocaliul ar avea 4,08:1. Pe `--vks-bg`:
 *
 *     portocaliu 4,59   albastru 6,25   gri 4,51   text 14,73     (pragul 4,5)
 *
 * Deci semnalul il poarta CHENARUL: `--vks-brand`, nu albastrul — albastru e
 * deja la trecerea cursorului, iar apasarea trebuie sa se vada si peste ea.
 *
 *     chenar, repaus -> apasat      ΔL* 73,8
 *     chenar, cursor -> apasat      ΔL* 25,5
 *
 * Albastrul de aici si chenarul de la cursor sunt recalculate pe #1d4ed8 la
 * `VKS_VERSION` 2.10.156.
 *
 * `a.vks-card`, nu `.vks-card`: in Chrome si Firefox `:active` se potriveste si
 * pe STRAMOSII elementului apasat (NEMASURAT aici — un browser fara cursor real
 * nu poate fi pus in starea asta), iar o cartela-`div` cu butoane in ea s-ar fi
 * colorat la fiecare buton. Pe legatura, intrebarea nu se pune.
 */
a.vks-card:active {
    background: var(--vks-bg);
    border-color: var(--vks-brand);
    color: var(--vks-text);
}

/*
 * Fotografiile-legatura (sesizari, fisa aparatului): n-au text, deci semnalul e
 * CHENARUL pozei, ca la cartele — `--vks-line` -> `--vks-brand`, ΔL* 73,8.
 * Pe legatura `:active`, pe poza culoarea: `<a>` e in linie, fondul lui nu s-ar
 * vedea in spatele imaginii.
 */
.vks-report-photos a:active img {
    border-color: var(--vks-brand);
}

/*
 * Selectul din formulare: chenarul se aprinde in accent, fondul se umple ca la
 * legaturi. Text pe fond 11,37:1.
 */
.vks-form select:active {
    background: var(--vks-line);
    border-color: var(--vks-blue);
    color: var(--vks-text);
}

/*
 * INELUL DE FOCALIZARE, declarat.
 *
 * Masurat inainte: `outline` nu apare NICAIERI in `assets/`. Inelul nativ
 * functiona deci, dar din intamplare — nimeni nu-l atinsese inca. Un lucru care
 * merge din intamplare nu e o decizie: prima regula care ar fi scris `outline`
 * pe altceva l-ar fi putut stinge tacut, iar navigarea la tastatura ar fi
 * incetat sa arate unde esti, fara nicio eroare.
 *
 * `--vks-brand`, nu `--vks-blue`: butonul principal E albastru, deci un inel
 * albastru ar fi fost invizibil exact pe butonul cel mai apasat. Aceeasi capcana
 * ca alb-pe-alb la hover (§9.2, forma a cincea), intrata pe alta usa.
 *
 * `:focus-visible`, nu `:focus`: altfel inelul apare si la clic de mouse, unde
 * nimeni nu-l cere.
 *
 * O singura regula, pe clasa de BAZA. Masurat pe 11 ecrane din cele trei
 * interfete: toate cele 3 aparitii ale lui `.vks-button-primary` poarta si
 * `.vks-button`, deci modificatorul e acoperit fara regula proprie — contra-proba
 * fiind aceeasi ca la `min-height` (§2.4), pe care modificatorul o mosteneste.
 *
 * ## Extins la TOT ce se poate focaliza — 22 august 2026
 *
 * Prima forma acoperea doar butoanele. **Un inel care apare pe butoane si
 * dispare pe campuri e mai rau decat niciunul**: cine navigheaza cu tastatura
 * pierde firul exact acolo unde scrie date. Acelasi rationament ca „un mecanism
 * aplicat pe jumatate e mai greu de observat decat unul absent" (§9.2).
 *
 * ## Concureaza inelul cu chenarul campului? Masurat: NU
 *
 * | | contrast fata de inel |
 * |---|---|
 * | chenarul campului, `--vks-line` `#d8dbdf` | **11,37:1** |
 * | panoul alb | 15,80:1 |
 * | fundalul interfetei `#e8eaec` | 13,10:1 |
 *
 * Pragul WCAG 1.4.11 pentru conturul unei componente e 3:1. Inelul e de aproape
 * patru ori peste el fata de chenar, si sta oricum la 2px distanta de acesta —
 * deci se citeste ca inel, nu ca bordura ingrosata.
 *
 * ## Ce acopera, numarat — nu presupus
 *
 * Masurat prin randare pe sapte ecrane din cele trei interfete: **126 de
 * elemente focalizabile** — 55 linkuri, 16 butoane, 16 campuri text, 13
 * selectoare, 10 zone de text, 5 butoane de trimitere, plus data, numar,
 * e-mail, URL, fisier, bifa, cautare si un `summary`.
 *
 * `summary` e in lista fiindca sectiunile pliabile din fisa clientului sunt
 * chiar el; lipsa lui ar fi lasat o gaura intr-un loc in care se apasa des.
 */
.vks-button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--vks-brand);
    outline-offset: 2px;
}

/*
 * Inelul butonului PRINCIPAL e negru — `VKS_VERSION` 2.10.154, decizia lui Gabriel.
 *
 * Pe albastrul ridicat (#1d4ed8), inelul de brand (#1f2328) avea 2,36:1 fata de
 * buton, sub pragul de 3:1 pentru contururi (WCAG 1.4.11); pe #2563eb avea 3,05:1.
 * Negrul da 3,13:1 pe buton si 17,41:1 pe fundalul paginii. Celelalte inele raman
 * pe `--vks-brand`. Aceeasi specificitate ca regula de deasupra, deci castiga ordinea.
 */
.vks-button-primary:focus-visible {
    outline-color: #000000;
}

/*
 * Documentul de vizita — exemplarul clientului.
 *
 * Gandit pentru hartie ALB-NEGRU: verdictul e cuvant, nu culoare (§8.19 pct.
 * 16). Culoarea ramane pe ecran, ca ajutor, dar nu poarta singura informatia.
 */
.vks-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--vks-text);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/*
 * Codurile, fiecare pe randul lui, cu eticheta in cuvinte la stanga — pe acelasi
 * document pot aparea numere cu structura aproape identica (§8.11 pct. 17).
 */
.vks-doc-refs {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 12px;
    font-size: 13px;
}

.vks-doc-refs span:nth-child(odd) {
    color: var(--vks-muted);
}

.vks-doc-meta {
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 14px;
}

.vks-doc-meta th {
    text-align: left;
    padding: 4px 16px 4px 0;
    color: var(--vks-muted);
    font-weight: normal;
    vertical-align: top;
    white-space: nowrap;
}

.vks-doc-meta td {
    padding: 4px 0;
}

.vks-document h2 {
    font-size: 15px;
    margin: 22px 0 8px;
}

/*
 * ==========================================================================
 * MATRICEA punctelor de control — al doilea tabel al documentului de vizită
 * ==========================================================================
 *
 * Opt coloane de bifă plus aparatul. Ce le face să încapă:
 *
 *   - `table-layout: fixed` plus lățime mică pe antet — altfel fiecare coloană
 *     ar fi cât eticheta ei, iar „Curățare și dezinfectare" ar cere singură
 *     jumătate din pagină;
 *   - `writing-mode: vertical-rl` pe antet — rotit, textul crește pe verticală,
 *     unde e loc. `rotate(180deg)` îl întoarce ca să se citească de jos în sus,
 *     sensul obișnuit pentru etichete de coloană;
 *   - `height` fixă pe antet, ca toate opt să se alinieze indiferent de lungimea
 *     textului. Fără ea, antetul ar fi cât cel mai lung, iar restul ar pluti.
 *
 * ⚠️ Regulile astea sunt geamăna celor din `maintenance_visits/print.php`, care
 * își poartă stilul în `<style>` propriu fiindcă e un document sigilat, servit
 * fără foaia portalului. Aici documentul E în portal, deci stilul stă unde stau
 * și celelalte clase ale lui — `.vks-doc-head`, `.vks-doc-meta`,
 * `.vks-doc-signatures`. Două locuri, fiindcă sunt două documente cu învelișuri
 * diferite; ce e comun sunt DECIZIILE, scrise în amândouă.
 *
 * ## ⚠️ La text ROTIT, lungimea consumă ÎNĂLȚIME, nu lățime
 *
 * Semnalat de utilizator la testarea vizuală (F3) pe documentul intern, apoi
 * verificat și aici: „aici e și mai rău, denumirile se taie". Cele două
 * documente s-au reparat în ACEEAȘI rundă — separat, s-ar fi desincronizat la
 * prima ajustare.
 *
 * Măsurătoarea a corectat diagnosticul: la `writing-mode: vertical-rl`
 * lungimea textului consumă **înălțimea** antetului, iar numărul de rânduri
 * consumă **lățimea**. „Curățare interioară" ieșea peste chenar fiindcă cerea
 * 129px de înălțime iar alocarea era 96 — **nu** fiindcă i-ar fi furat lățime
 * coloana vecină. Două defecte pe axe diferite, independente.
 *
 * Ieșeau **șase din opt**, nu două; pe celelalte patru depășirea era mai mică
 * și nu se vedea cu ochiul. Cifrele pe fiecare etichetă stau în docblock-ul
 * geamăn din `maintenance_visits/print.php` — un singur loc, ca să nu ajungă
 * două liste de numere care se pot despărți.
 *
 * ## Lățimea utilă e ALTA aici, și tot încape
 *
 * Documentul clientului n-are `max-width` propriu: pe hârtie îl mărginesc
 * `@page { margin: 14mm }` și `.vks-wrap { padding: 0 20px }`, iar `.vks-panel`
 * trece pe `padding: 0` la tipărire. Rămân **~648px**, față de **673** pe cel
 * intern — nu 736, cum scria aici până pe 4 septembrie 2026.
 *
 * 736 e lățimea documentului intern pe ECRAN (`max-width: 800px` minus
 * `padding: 0 32px`). Pe hârtie el primește `padding: 0 !important` și
 * `max-width: none !important`, deci cutia e chiar cea a lui `@page`:
 * 210mm − 2×16mm = 673px. Cifra descria alt strat decât propoziția din jurul ei.
 *
 * 254px (coloana „Aparat") + 264px (bifele, cu cele lungi pe două rânduri) =
 * **518px**. Încape pe amândouă, deci aceeași formă poate sta în ambele locuri.
 */
.vks-doc-matrix {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

/*
 * ⚠️ TOKENUL ERA `--vks-border`, CARE NU EXISTĂ NICĂIERI.
 *
 * Găsit de utilizator la verificarea vizuală din 25 august 2026: exemplarul
 * clientului n-avea **nicio** linie de tabel, iar la tipărire ieșea complet alb.
 *
 * Cauza nu e o culoare greșită, e un mod de eșec al lui `var()`: o declarație
 * care cheamă un token nedeclarat e validă la **parsare** și eșuează abia la
 * **calcul** — iar atunci proprietatea nu cade pe regula anterioară, ci pe
 * valoarea ei INIȚIALĂ. Pentru scurtătura `border`, inițiala e
 * `border-style: none`. Deci nu un chenar palid: **niciun chenar**.
 *
 * E același mod de eșec cu cel notat în §5.1 pentru `color-mix` pe butoane,
 * unde `background` cădea pe `transparent` și dădea alb pe alb. Acolo a fost
 * prevenit; aici se produsese deja.
 *
 * Măsurat: `--vks-border` apărea **exact o dată** în tot proiectul — chiar
 * aici — și nu era declarat în niciuna dintre cele trei foi. Singura victimă,
 * dar totală.
 *
 * `--vks-line` e tokenul casei pentru chenare, folosit și de `.vks-table td`.
 * Nu se declară unul nou pentru o singură folosire.
 */
.vks-doc-matrix th,
.vks-doc-matrix td {
    border: 1px solid var(--vks-line);
    padding: 4px 2px;
    text-align: center;
    vertical-align: middle;
}

/*
 * Prima coloană — codul aparatului — e PLAFONATĂ și CENTRATĂ.
 *
 * `width: auto` o lăsa să ia tot ce rămâne, iar codul, aliniat la stânga
 * într-o coloană largă, rupea vizual rândul: între cod și bifele lui rămânea o
 * bandă goală, iar ochiul pierdea legătura.
 *
 * 254px e cât cere codul cel mai lung din bază — `VKN-ADFT BW4TG
 * SRL-FERAP-000001`, 31 de caractere monospațiate. Nu o cifră rotundă aleasă
 * din ochi: sub ea codul s-ar rupe, peste ea revine banda goală.
 *
 * ⚠️ `table-layout: fixed` **redistribuie** spațiul rămas peste celelalte
 * coloane, deci plafonarea nu lasă gol la capătul tabelului: cele opt coloane
 * de bifă primesc ≈49px fiecare pe hârtia de aici — de ajuns pentru două
 * rânduri rotite (~34px).
 *
 * Centrarea NU ajunge pe telefon: blocul de sub 782px pune `text-align: left`
 * pe toate celulele, fiindcă acolo tabelul e listă de cartele.
 */
.vks-doc-matrix th:first-child,
.vks-doc-matrix td:first-child {
    width: 254px;
    text-align: center;
    padding: 4px 8px;
}

/*
 * ⚠️ `line-height: 0` PE CELULĂ — de aici venea textul care ieșea sub chenar.
 *
 * Găsit de utilizator la Ctrl+P pe 25 august 2026, imediat după ce chenarele au
 * început să existe: coada literelor „j" și „g" era tăiată în două de linia de
 * jos. Pe documentul intern, aceeași cauză într-un grad mai blând — text
 * tangent la linie, cu spațiu mare deasupra.
 *
 * Cauza, măsurată: celula are `vertical-align: middle`, dar spanul e
 * `inline-block` fără `vertical-align` propriu — deci **`baseline`**. Un
 * `inline-block` se așază cu baza lui pe linia de bază a rândului, iar sub ea
 * cutia de linie mai păstrează coborâtorii stâlpului (`line-height: normal`,
 * nedeclarat nicăieri). Centrarea centrează CUTIA, iar spanul atârnă în josul
 * ei.
 *
 * `line-height: 0` desființează stâlpul: cutia de linie devine exact cât
 * spanul. Spanul își recapătă înălțimea de rând în regula de dedesubt.
 *
 * Chenarele l-au scos la iveală, nu l-au produs: până atunci nu exista nimic cu
 * care să compari poziția textului. Defectul era acolo de la pasul 27.
 *
 * ⚠️ Regulile astea sunt geamăna celor din `maintenance_visits/print.php` și
 * s-au reparat în aceeași rundă. Separat, s-ar fi desincronizat la prima
 * ajustare — iar aici asta ar însemna două exemplare ale aceleiași vizite care
 * arată altfel pe hârtie.
 */
.vks-doc-matrix thead th {
    background: var(--vks-bg);
    font-weight: 600;
    width: 26px;
    line-height: 0;
}

/*
 * Cele trei declarații care decid ruperea — toate trei sunt necesare.
 *
 * `height` e cât poate curge textul înainte să se rupă; fixă, ca toate
 * cele opt să se alinieze. Valoarea, și de ce e 96 și nu 84, sunt mai jos.
 *
 * `white-space: normal` e ce PERMITE ruperea. Cu `nowrap`, cele șase etichete
 * lungi treceau peste chenar în loc să se rupă — defectul F3.
 *
 * `max-width: 2.6em` limitează la **două rânduri rotite**. Fără el, o etichetă
 * foarte lungă ar putea trece pe trei, iar coloana ar crește neanunțat.
 *
 * Ruperea se face la ultimul spațiu — „Lubrifiere / reglaje", nu în mijlocul
 * unui cuvânt. Etichetele de un singur cuvânt rămân pe un rând, n-au unde.
 */
/*
 * `vertical-align: middle` PE SPAN, pe lângă cel de pe celulă — sunt două
 * lucruri diferite: cel de pe celulă așază conținutul în rând, ăsta așază
 * spanul în cutia lui de linie. Cu `line-height: 0` deasupra, al doilea n-ar
 * mai avea ce să miște; rămâne fiindcă declară intenția, iar dacă cineva scoate
 * vreodată `line-height: 0`, defectul nu revine întreg.
 *
 * `line-height: 1.15` redă spanului înălțimea de rând pe care celula tocmai a
 * desființat-o. Fără el, cele două rânduri rotite s-ar suprapune, iar antetul
 * primei coloane — text orizontal obișnuit — ar dispărea.
 *
 * ## De ce înălțimea a urcat de la 84px la 96px
 *
 * Aici depășirea a fost **vizibilă**: coada literelor tăiată de chenar. Deci
 * textul chiar iese din cutie, nu doar atârnă în ea.
 *
 * Estimasem „funcționare" la 74px, cu o lățime medie de caracter de 0,52× din
 * corp. Depășirea spune că factorul real e cel puțin 84 / (11 × 13) = **0,587**
 * — estimarea era optimistă, iar cei 84px n-aveau marjă deloc. La 96px aceeași
 * bucată cere ~84px și rămâne o marjă reală de ~12px.
 *
 * Marimea textului e **13px și la tipărire**: `body { font-size: 12px }` din
 * `@media print` nu bate `.vks-doc-matrix { font-size: 13px }` — clasa e mai
 * specifică decât elementul. Prima mea măsurătoare raportase 12px, citind
 * regulile în ordine în loc de specificitate.
 */
.vks-doc-matrix thead th span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.15;
    height: 96px;
    max-width: 2.6em;
}

/*
 * Antetul primei coloane NU se rotește — are lățime, nu are nevoie.
 *
 * ⚠️ `max-width` se anulează EXPLICIT. Moștenit de la regula de deasupra, cei
 * 2.6em s-ar fi aplicat aici pe **orizontală** — adică ~34px pentru cuvântul
 * „Aparat", care s-ar fi rupt în „Apa / rat".
 *
 * Regula de deasupra e scrisă pentru text rotit, unde `max-width` numără
 * RÂNDURI. Aici textul e orizontal, deci aceeași declarație înseamnă cu totul
 * altceva — o proprietate al cărei înțeles depinde de `writing-mode` nu se
 * moștenește peste o schimbare de `writing-mode`.
 */
.vks-doc-matrix thead th:first-child span {
    writing-mode: horizontal-tb;
    transform: none;
    height: auto;
    max-width: none;
}

.vks-doc-mark {
    font-weight: 700;
}

/*
 * Liniuța „nu se aplică" e GRI, nu roșie: absența unui punct de control nu e o
 * pierdere și nu cere nimic de la nimeni (§9.1).
 */
.vks-doc-na {
    color: var(--vks-muted);
}

/*
 * ==========================================================================
 * REGISTRUL grupat pe tip — D12, 20 septembrie 2026
 * ==========================================================================
 *
 * Geamanul regulilor din `maintenance_visits/print.php`. Doua foi, fiindca cele
 * doua documente n-au nicio foaie comuna: exemplarul intern isi scrie stilul
 * inline, sigilat, ca sa ramana identic cand pleaca la client (§ documentele
 * sigilate isi poarta stilul deliberat).
 *
 * ⚠️ Cele doua exemplare se pot desparti. E o duplicare ASUMATA, cu acelasi
 * motiv ca restul blocului `.vks-doc-*` de deasupra — care e deja duplicat, de
 * la felia Vizitelor. Ce nu se poate duplica e AGREGAREA: `registruPeTip()` are
 * un singur exemplar, in Service, si il cheama amandoua documentele.
 */

/*
 * Numele tipului se aliniaza la STANGA, nu centrat.
 *
 * Codul aparatului era centrat fiindca e un sir de lungime fixa. Un nume are
 * lungimi foarte diferite, iar centrat ar da un zigzag pe care ochiul nu-l mai
 * poate parcurge pe verticala.
 */
.vks-doc-registru td:first-child {
    text-align: left;
}

/*
 * Coloana „Buc." e ingusta si fixa: `table-layout: fixed` imparte restul peste
 * coloanele de bifa, iar fara o latime declarata cifra ar fi primit aceeasi
 * cota ca un punct de control.
 */
.vks-doc-registru th:nth-child(2),
.vks-doc-registru td:nth-child(2) {
    width: 36px;
    text-align: center;
}

/*
 * `n/k` — al patrulea semn.
 *
 * ⚠️ NU e gri ca liniuta. Liniuta spune „n-avea ce verifica" — o absenta
 * legitima, deci se retrage vizual. `n/k` spune „s-a verificat pe unele, pe
 * altele nu" — exact lucrul despre care s-ar pune intrebari la o disputa, deci
 * sta in culoarea normala a documentului.
 */
.vks-doc-partial {
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    white-space: nowrap;
}

/*
 * `×` — NEBIFAT la niciun exemplar. Al patrulea semn, 21 septembrie 2026.
 *
 * ⚠️ Aici nu era nicio clasa, fiindca starea asta nu avea niciun semn: celula
 * ramanea GOALA. Gasit pe telefon, pe `VIZ-2026-000001` — sapte din opt celule
 * goale, iar legenda le explica intr-o propozitie pe care nimic de pe rand n-o
 * chema. §9.2: absenta unui semn nu se citeste ca semn.
 *
 * Culoarea e cea NORMALA a documentului, nu grila liniutei: liniuta spune
 * „n-avea ce verifica" si se retrage; `×` spune „se aplica si n-a fost bifat" —
 * exact lucrul despre care s-ar pune intrebari la o disputa (§9.1).
 *
 * Nici rosu, nici ingrosat: nu cere nimic nimanui, consemneaza.
 */
.vks-doc-lipsa {
    color: var(--vks-text);
}

.vks-doc-signatures {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.vks-doc-signatures > div {
    flex: 1 1 240px;
    font-size: 13px;
}

/*
 * Pozele și pânza de semnătură de pe FIȘA LUCRĂRII din portal — felia clientului,
 * pct. 5.
 *
 * Clasele erau stilate DOAR de `<style>`-ul raportului de intervenție. Fișa
 * lucrării le poartă și ea, fără foaia raportului, deci se randau la mărimea
 * naturală: măsurat la 390px, o poză de 1800×2400 și două semnături de 600×160 —
 * pagina ieșea din ecran cu 1447px.
 *
 * Valorile sunt EXACT cele din `reports/intervention.php`, iar acolo `<style>`-ul
 * vine după foaia asta, la aceeași specificitate: raportul arată la fel ca azi.
 */
.vks-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.vks-photo {
    width: 220px;
}

.vks-photo img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

.vks-doc-sign-pad {
    display: block;
    height: 60px;
}

.vks-doc-sign-pad img {
    max-height: 60px;
    max-width: 100%;
}

.vks-signature {
    border-bottom: 1px solid var(--vks-text);
    height: 90px;
    display: flex;
    align-items: flex-end;
    margin: 6px 0 6px;
}

.vks-signature img {
    max-width: 100%;
    max-height: 88px;
}

.vks-button-primary {
    background: var(--vks-blue);
    border-color: var(--vks-blue);
    color: #fff;
    padding: 10px 22px;
    font-size: var(--vks-input-font);
}

/* `:hover` doar unde exista cursor — motivul, langa `.vks-card:hover`. */
@media (hover: hover) {

    /*
     * Cursorul COBOARA accentul cu 35% negru — `VKS_VERSION` 2.10.155.
     *
     * Aici sta, pana la 2.10.154, `#1d4ed8` scris direct. Cand tokenul a urcat la
     * aceeasi valoare, cursorul a devenit identic cu repausul. Derivat, nu se mai
     * poate intampla: masurat in Chrome la 1280 px, ΔL* 14,1 fata de repaus si
     * text alb 11,19:1. `color` se declara si aici — §9.2, forma a cincea.
     */
    .vks-button-primary:hover {
        background: color-mix(in srgb, #000 35%, var(--vks-blue));
        border-color: color-mix(in srgb, #000 35%, var(--vks-blue));
        color: #fff;
    }
}

/*
 * Varianta principala e deja umpluta cu accentul, deci apasarea o COBOARA.
 *
 * Compusa din `--vks-blue`, nu scrisa ca `#0b1e47`: accentul are o singura
 * definitie, iar culoarea de apasare trebuie sa se miste odata cu el. O valoare
 * scrisa de mana ar fi ramas albastra dupa o schimbare de marca.
 *
 * `color` se declara aici desi pare mostenit — §9.2, forma a cincea: cine
 * schimba FUNDALUL declara si CULOAREA, ca o regula noua sa nu poata rupe
 * perechea la alta specificitate.
 *
 * Regula sta DUPA `.vks-button:active`, cu aceeasi specificitate (0-2-0): la
 * egalitate castiga ultima, deci butonul principal apasat ia culoarea de aici,
 * nu albastrul de la varianta neutra.
 */
/**
 * ⚠️ Valoare LITERALA, nu `color-mix()` — schimbat pe 22 august 2026.
 *
 * `#0b1e47` **este** `color-mix(in srgb, #000 70%, var(--vks-blue))`, calculat
 * o data. Aceeasi valoare o scriu si documentele sigilate, care n-au tokeni.
 *
 * ## De ce nu se calculeaza
 *
 * Era singura stare de buton CALCULATA din toata foaia — vecina ei, `:hover`,
 * scrie `#1d4ed8` literal. Iar forma calculata are un mod de esec pe care cea
 * literala nu-l are:
 *
 * O declaratie care contine `var()` e **valida la parsare** si esueaza abia la
 * calcul. Cand esueaza, proprietatea **nu cade pe regula anterioara** — trece pe
 * valoarea ei INITIALA, adica `background: transparent`. Pe un buton cu text
 * alb, asta inseamna **alb pe alb**, adica butonul dispare la apasare.
 *
 * Nu s-a masurat niciodata producandu-se — un raport de asa ceva s-a dovedit
 * artefact al unui browser anume. Se scrie literal fiindca **elimina clasa de
 * esec**, nu fiindca ar repara un defect observat.
 *
 * Legatura cu tokenul nu se pierde: e numita aici, ca la documente.
 *
 * ⚠️ Paragraful de deasupra e FAPT DATAT — din nou derivat la 2.10.155.
 *
 * Literalul n-a mai urmat tokenul: cand `--vks-blue` a urcat la #1d4ed8, `#0b1e47`
 * a ramas amestecul albastrului VECHI. Decizia lui Gabriel: starile de cursor si
 * de apasare se deriva din `--vks-blue`, iar suita pica daca una e scrisa direct.
 *
 * Modul de esec de mai sus — un token nedeclarat lasa fundalul transparent — il
 * prinde `test-chenare-si-semnaturi.php`: „niciun token chemat nu e nedeclarat".
 * Masurat in Chrome la 1280 px: text alb 17,31:1, ΔL* 29,5 fata de repaus si
 * 15,4 fata de cursor.
 */
.vks-button-primary:active {
    background: color-mix(in srgb, #000 70%, var(--vks-blue));
    border-color: color-mix(in srgb, #000 70%, var(--vks-blue));
    color: #fff;
}

/*
 * Butoanele-pereche dintre lista ACTIVĂ și cea ÎNCHISĂ — felia pct. 4.
 *
 * CONTURATE pe fundal alb, cu culoarea lor: spre ACTIV = portocaliu (e ceva de
 * urmărit), spre ÎNCHIS = albastru (informativ, fără pierdere). Roșul și verdele
 * sunt respinse: roșul ar însemna „acum", verdele „totul e în regulă" — niciunul
 * nu descrie o navigare (§9.1).
 *
 * De ce CONTUR, nu plin: butonul de ACȚIUNE („Anunță o piesă", „Semnalează un
 * aparat") rămâne plin (`.vks-button-primary`), iar perechea trebuie să se
 * deosebească de el, nu să concureze cu el. Pe telefon conturul păstrează
 * suprafața de apăsare (`min-height: var(--vks-tap)` de pe `.vks-button`), pe
 * care o legătură simplă ar pierde-o.
 *
 * ⚠️ Până la felia asta erau PLINE. `background` ȘI `color` se declară pe FIECARE
 * stare (§9.2, forma a cincea): în repaus, text colorat pe alb; la hover se UMPLE
 * cu culoarea lui și textul devine alb — deci niciodată alb-pe-alb, iar atingerea
 * are răspuns. Vin după `.vks-button:hover`/`:active` în fișier, deci câștigă la
 * specificitate egală.
 */
.vks-button-spre-activ {
    background: #fff;
    border-color: var(--vks-orange);
    color: var(--vks-orange);
}

/* `:hover` doar unde exista cursor — motivul, langa `.vks-card:hover`. */
@media (hover: hover) {

    .vks-button-spre-activ:hover {
        background: var(--vks-orange);
        border-color: var(--vks-orange);
        color: #fff;
    }
}

.vks-button-spre-activ:active {
    background: #713f12;
    border-color: #713f12;
    color: #fff;
}

.vks-button-spre-inchis {
    background: #fff;
    border-color: var(--vks-blue);
    color: var(--vks-blue);
}

/* `:hover` doar unde exista cursor — motivul, langa `.vks-card:hover`. */
@media (hover: hover) {

    .vks-button-spre-inchis:hover {
        background: var(--vks-blue);
        border-color: var(--vks-blue);
        color: #fff;
    }
}

/*
 * Apasarea COBOARA accentul cu 35% negru, ca sa se deosebeasca de cursor, care e
 * chiar `--vks-blue` — `VKS_VERSION` 2.10.155. Pana atunci era `#1d4ed8` scris
 * direct, adica, dupa ridicarea tokenului, aceeasi culoare ca la cursor. Masurat
 * in Chrome la 1280 px: text alb 11,19:1, ΔL* 14,1 fata de cursor.
 */
.vks-button-spre-inchis:active {
    background: color-mix(in srgb, #000 35%, var(--vks-blue));
    border-color: color-mix(in srgb, #000 35%, var(--vks-blue));
    color: #fff;
}

/*
 * Rândul de butoane de sub titlul listei — acțiunea plină și perechea conturată.
 *
 * Flex cu `gap`, nu doar spațiu între `<a>`-uri: pe telefon butoanele se stivuiesc
 * și se atingeau (măsurat la piese și sesizări). `gap` dă spațiu la orice lățime,
 * iar `min-height`-ul de pe fiecare buton păstrează suprafața de apăsare.
 */
.vks-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/*
 * Mesajul de dupa o scriere. Randat in layout, o singura data, ca `Flash` in
 * wp-admin — un ecran nou nu trebuie sa faca nimic ca mesajele lui sa apara.
 *
 * Culoarea sta pe TEXT si pe o bara laterala, nu pe o bulina de langa el (§9.2,
 * forma a patra): un mesaj a carui singura culoare e pe decor se citeste ca text
 * obisnuit.
 */
.vks-flash {
    border: 1px solid var(--vks-line);
    border-left-width: 4px;
    border-radius: 4px;
    background: var(--vks-panel);
    padding: 12px 16px;
    margin: 0 0 18px;

    /*
     * ⚠️ `pre-wrap`, ca structura unui mesaj de refuz sa nu dispara — 26 sept 2026.
     *
     * Masurat atunci, pe randare: `admin.css` are `.notice p{white-space:pre-wrap}`,
     * pusa chiar pentru mesajul de conflict al lucrarilor, deci in wp-admin liniile
     * noi se pastreaza. Aici nu exista nicio regula de spatiu alb, iar implicitul
     * CSS colapseaza secventele de spatii albe, liniile noi incluse.
     *
     * Consecinta, pe ecranul de teren: refuzul constatarii per aparat pune DOUA
     * texte in acelasi mesaj — ce scrie acum in vizita si ce a scris omul. Lipite
     * intr-un paragraf, granita dintre ele dispare, adica exact informatia pentru
     * care mesajul exista.
     *
     * Deci cerinta „refuzul e identic din wp-admin si din interfata de tehnician"
     * nu se onora doar cu acelasi TEXT: se onora cu aceeasi randare.
     *
     * Regula e pe `.vks-flash`, nu pe o clasa noua: banda vine din layout, comuna
     * portalului si tehnicianului, iar o clasa in plus acolo ar fi atins doua
     * layout-uri pentru ceva ce e adevarat despre amandoua. Mesajele pe un singur
     * rand raman neschimbate — `pre-wrap` nu face nimic fara linii noi.
     */
    white-space: pre-wrap;
}

.vks-flash-success {
    border-left-color: var(--vks-green);
    color: #14532d;
}

.vks-flash-error {
    border-left-color: var(--vks-red);
    color: #7f1d1d;
}

/*
 * Avertisment in pagina. Aceeasi regula: culoarea pe textul insusi, plus bara
 * laterala, ca sa nu mosteneasca greutatea vizuala a vecinilor.
 */
.vks-warn {
    border-left: 4px solid var(--vks-orange);
    background: #fffbeb;
    color: #78350f;
    padding: 10px 14px;
    margin: 14px 0;
}

/* Formularele portalului. */
.vks-form p {
    margin: 0 0 16px;
    max-width: 560px;
}

.vks-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

/*
 * Controalele de formular: 16px OBLIGATORIU si inaltime de deget.
 *
 * `font: inherit` mostenea 15px de la body — sub pragul de 16, iar iOS Safari
 * marea pagina la fiecare atingere a unui camp. Se scrie explicit, nu se
 * mosteneste, tocmai ca o schimbare a marimii textului din pagina sa nu
 * readuca defectul tacut.
 *
 * `input[type="file"]` intra si el in lista: pe telefon e cel mai apasat camp
 * de pe formularul de sesizare.
 *
 * ==========================================================================
 * !! LISTA DE TIPURI A DEVENIT O PROPRIETATE — 20 septembrie 2026
 * ==========================================================================
 *
 * Aici scria o lista: `input[type="text"], input[type="file"], select, textarea`.
 * Corecta pentru portal, unde masurat exista exact `text` si `file`.
 *
 * Ecranul de vizita al tehnicianului a adus `input[type="time"]` — ora sosirii
 * si a plecarii — iar lista NU-l continea. Consecinta nu e cosmetica: fara
 * `font-size: 16px`, iOS Safari MARESTE pagina la fiecare atingere a campului,
 * exact defectul pe care blocul asta a fost scris sa-l inchida.
 *
 * O lista de tipuri se desincronizeaza la primul camp nou, tacut — chiar tiparul
 * pe care proiectul il scoate peste tot. `administrator.css` are aceeasi lista
 * scrisa de mana si ii lipseste tot `time`; ramane asa, e alta foaie si alta
 * felie.
 *
 * Deci criteriul devine o PROPRIETATE: **orice `input` in care omul tasteaza**.
 * Se exclud cele patru care nu sunt campuri de tastat:
 *
 *     checkbox, radio   se apasa, nu se scrie in ele; matricea le stileaza singura
 *     hidden            n-are ce stil sa primeasca
 *     submit, button    sunt butoane, au `.vks-button`
 *
 * Asa, un `date`, un `email` sau un `number` adaugat maine intra singur, fara
 * ca nimeni sa-si aminteasca de randurile astea.
 *
 * !! Masurat inainte de schimbare, pe cele 3 view-uri care foloseau atunci
 * `.vks-form`: tipurile prezente sunt `text`, `file`, `hidden`, `submit`. Deci
 * pentru portal multimea atinsa ramane IDENTICA — `hidden` si `submit` erau excluse
 * si inainte, prin absenta din lista, si sunt excluse si acum, prin `:not()`.
 *
 * Azi (9 noiembrie 2026) `.vks-form` sta in 8 view-uri: 3 de portal
 * (`defect-report-new`, `defect-report-edit`, `component-new`), 4 de tehnician
 * (`visit`, `workorder`, `workorder-new`, `equipment-new`) si partialul
 * `tehnician-filtru-incheiate`.
 */
.vks-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.vks-form select,
.vks-form textarea {
    width: 100%;
    min-height: var(--vks-tap);
    padding: 10px 12px;
    border: 1px solid var(--vks-line);
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--vks-input-font);
    background: var(--vks-panel);
    color: var(--vks-text);
}

.vks-form textarea {
    resize: vertical;
    min-height: calc(var(--vks-tap) * 2);
}

/*
 * Lista fotografiilor alese, inaintea trimiterii.
 *
 * Exista fiindca `<input type="file" multiple>` inlocuieste lista la fiecare
 * alegere noua, in loc s-o extinda — iar fara zona asta pierderea ramanea
 * TACUTA. Acumularea o face portal.js; aici se vede rezultatul.
 */
.vks-file-items {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.vks-file-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--vks-line);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    background: var(--vks-panel);
}

/*
 * Butonul de scoatere/stergere. Avea 21px inaltime si e IREVERSIBIL — cea mai
 * mica tinta de pe tot portalul era si cea mai periculoasa.
 *
 * Ramane fara chenar, ca sa nu concureze vizual cu actiunile principale, dar
 * primeste suprafata de apasat prin padding.
 */
.vks-file-remove {
    display: inline-flex;
    align-items: center;
    min-height: var(--vks-tap);
    background: none;
    border: none;
    color: var(--vks-red);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    padding: 0 10px;
    text-decoration: underline;
}

/*
 * Avertismentul de limita: culoarea pe TEXT, nu pe un decor de langa el
 * (§9.2, forma a patra).
 */
.vks-file-warn {
    color: var(--vks-orange);
    font-size: 13px;
    margin: 6px 0 0;
}

/*
 * Sesizarile: fiecare e o cartela, nu un rand de tabel.
 *
 * Un tabel ar fi obligat descrierea clientului si raspunsul nostru sa incapa
 * intr-o celula — adica taiate cu „...", exact partea pentru care exista
 * ecranul. Aici amandoua se citesc intregi.
 */
.vks-report {
    border: 1px solid var(--vks-line);
    border-radius: 6px;
    padding: 16px 18px;
    margin: 16px 0 0;
}

.vks-report-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.vks-report-eq {
    margin: 0 0 8px;
}

.vks-report-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

/*
 * Celula unei fotografii pe ecranul de editare: poza plus butonul de stergere,
 * dedesubt. Butonul sta LANGA obiectul pe care il sterge — nu intr-o lista de
 * actiuni de altundeva (§9.2, forma a treia).
 */
.vks-photo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vks-photo-cell form {
    margin: 0;
}

.vks-report-photos img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--vks-line);
    border-radius: 4px;
    display: block;
}

/*
 * Blocul de stare al unei sesizari — acelasi mecanism pentru TOATE cele trei
 * stari, nu unul singur tratat special.
 *
 * Masurat pe 16 august 2026, semnalat de utilizator: insignele erau colorate
 * corect, dar textele de dedesubt purtau `.vks-note`, adica gri de ajutor.
 * Doar raspunsul nostru avea bloc propriu. Culoarea exista — pe DECOR, nu pe
 * mesaj (§9.2, forma a patra).
 *
 * ## Unde sta culoarea, si de ce nu peste tot
 *
 * Pe **eticheta stare**, care e `<strong>` si numeste starea. Textul explicativ
 * ramane in culoarea normala a paginii: `#16a34a` pe alb are contrast ~3,4:1,
 * sub pragul pentru text obisnuit, dar suficient pentru text ingrosat. Asa
 * culoarea din §9.1 e chiar cea folosita, nu o nuanta inventata ca sa se poata
 * citi.
 *
 * Bara laterala poarta aceeasi culoare, exacta, si e cea care se vede din coltul
 * ochiului.
 */
.vks-status-note {
    border-left: 4px solid var(--vks-line);
    background: var(--vks-panel);
    padding: 10px 14px;
    margin: 12px 0 0;
}

.vks-status-note strong {
    display: block;
    margin-bottom: 4px;
}

.vks-status-note p {
    margin: 0;
}

.vks-status-note--info {
    border-left-color: var(--vks-blue);
}

.vks-status-note--info strong {
    color: var(--vks-blue);
}

.vks-status-note--ok {
    border-left-color: var(--vks-green);
}

.vks-status-note--ok strong {
    color: var(--vks-green);
}

.vks-status-note--warn {
    border-left-color: var(--vks-orange);
}

.vks-status-note--warn strong {
    color: var(--vks-orange);
}

/*
 * ⚠️ REGULILE `.vks-label*` AU PLECAT DE AICI — 13 octombrie 2026
 *
 * Aici scria: *„Eticheta piesei — 60 mm latime, acelasi sablon ca la echipament
 * (§8.3)"*, urmata de sapte reguli. Odata cu formatul de 24mm, geometria are un
 * exemplar unic in `Support\Eticheta`, iar o foaie STATICA nu-l poate citi: scrise
 * aici, cele doua numere ar fi fost al doilea loc, desincronizat tacut de primul.
 *
 * Regulile traiesc acum in `resources/views/portal/component-label.php`, care le
 * EMITE din constanta — ca celelalte doua ecrane de eticheta, amandoua cu
 * `<style>` propriu in pagina. Suita le CITESTE ca proprietate, nu ca text de CSS.
 *
 * ⚠️ Mutarea e izolata, masurat: `class="vks-label` apare in exact trei view-uri,
 * iar celelalte doua sunt in wp-admin si nu incarca foaia asta. Nimic din restul
 * portalului sau din interfata de tehnician nu folosea clasele.
 */

/*
 * Tiparirea. Portalul nu ruleaza in wp-admin, deci nu exista #wpwrap de
 * colapsat — dar bara, subsolul si navigarea trebuie sa dispara, altfel apar pe
 * exemplarul dat clientului.
 */
@media print {

    .vks-portal-bar,
    .vks-portal-foot,
    .vks-no-print {
        display: none !important;
    }

    /* ⚠️ Regula de tiparire a etichetei a plecat si ea — vezi nota de mai sus. */

    body {
        background: #fff;
        font-size: 12px;
    }

    .vks-portal-main {
        padding: 0;
    }

    .vks-panel {
        border: none;
        padding: 0;
        margin: 0;
    }

    .vks-table-scroll {
        overflow: visible;
    }

    /* Un rand de aparat nu se rupe la jumatate intre pagini. */
    .vks-table tr,
    .vks-doc-signatures {
        break-inside: avoid;
    }

    /*
     * Grila matricei se ÎNCHIDE pe hârtie.
     *
     * `--vks-line` (`#d8dbdf`) e potrivit pe ecran, unde stă pe fundal alb de
     * panou și are lângă el restul interfeței. Pe hârtie e la limita
     * vizibilului, iar matricea se citește **pe coloană** — „a rămas ceva
     * nefăcut la șuruburi?" — deci grila nu e decor, e ce face citirea posibilă.
     *
     * `#bbb` e exact valoarea documentului INTERN, confirmată pe hârtie la
     * verificarea vizuală. Cele două exemplare ale aceleiași vizite ies acum
     * identic.
     *
     * ⚠️ FUNDALUL gri al antetului NU se tipărește, și rămâne așa deliberat.
     * Măsurat: `print-color-adjust` nu-l are **niciunul** dintre cele două
     * documente, deci nici pe cel intern nu se tipărește — iar acolo structura
     * o duc chenarele. E consecvent cu §8.19 pct. 16, unde banda de ciornă a
     * fost lăsată fără fundal tocmai fiindcă „la imprimantă alb-negru un fundal
     * închis face textul ilizibil". Un document proiectat pentru hârtie
     * alb-negru nu se sprijină pe fundaluri.
     */
    .vks-doc-matrix th,
    .vks-doc-matrix td {
        border-color: #bbb;
    }

    @page {
        margin: 14mm;
    }
}

/*
 * ==========================================================================
 * ECRANE INGUSTE — `screen and`, nu doar `max-width`
 * ==========================================================================
 *
 * Prefixul `screen` e obligatoriu, nu decorativ: fara el, regulile de mai jos
 * s-ar aplica SI la tiparire daca hartia are sub 782 de pixeli CSS — iar
 * transformarea tabelelor in cartele ar fi ajuns pe documentul de vizita dat
 * clientului. Media de tiparire se trateaza separat, mai jos.
 */
@media screen and (max-width: 782px) {

    /*
     * Ecranul de start: sub prag, cartelele trec la UNA pe rand (o singura
     * coloana) — felia „cartelele pe telefon". La 2.10.128 si inainte, sub 782
     * era una pe rand; pragul 4->2 de la 2.10.129 era o presupunere nemasurata
     * pe telefon. `.vks-card { flex: 1 1 100% }` de mai jos ramane: inert pentru
     * grid, dar cartelele de TEHNICIAN (fara `.vks-cards`) se sprijina pe el.
     */
    .vks-cards {
        grid-template-columns: 1fr;
    }

    .vks-panel {
        padding: 18px 16px;
    }

    .vks-card {
        flex: 1 1 100%;
    }

    /*
     * TABELELE DEVIN CARTELE, cate un rand pe ecran.
     *
     * Ambalajul cu derulare orizontala rezolva depasirea cadrului, dar nu si
     * lizibilitatea: sapte coloane pe 335px utili inseamna mult glisat cu
     * degetul ca sa citesti UN rand. Sub 782px, fiecare rand devine o cartela,
     * iar antetul tabelului se muta in eticheta fiecarei celule.
     *
     * Eticheta vine din `data-label`, scris in view langa continut. Alternativa
     * — o lista de nume de coloane in CSS — s-ar fi desincronizat de tabel la
     * prima coloana adaugata, tacut.
     *
     * `.vks-doc-meta` e EXCLUS: e deja o lista cap-valoare, iar transformarea
     * i-ar fi dublat etichetele.
     */
    .vks-table-scroll {
        overflow-x: visible;
    }

    .vks-table,
    .vks-table tbody,
    .vks-table tr,
    .vks-table td,
    .vks-doc-matrix,
    .vks-doc-matrix tbody,
    .vks-doc-matrix tr,
    .vks-doc-matrix td {
        display: block;
        width: 100%;
    }

    .vks-table thead,
    .vks-doc-matrix thead {
        display: none;
    }

    /*
     * MATRICEA devine si ea cartela, ca pe exemplarul intern.
     *
     * Masurat: noua coloane pe 285px utili inseamna 8x26px de bifa plus codul
     * aparatului, care singur cere ~248px. Nu incape. Iar sub 782px
     * `.vks-table-scroll` trece pe `overflow-x: visible`, deci tabelul n-ar fi
     * fost nici macar derulabil — ar fi impins PAGINA pe orizontala.
     *
     * Ce se pierde, declarat: pe hartie matricea se citeste PE COLOANA („a ramas
     * ceva nefacut la suruburi?"). Ca lista de cartele, comparatia intre aparate
     * dispare. E acceptabil fiindca pe telefon nu se citea nici asa: alternativa
     * nu era tabelul, era glisatul.
     *
     * `@media screen` conteaza aici la fel de mult ca peste tot: fara el,
     * documentul tiparit al clientului ar iesi pe hartie ca lista de cartele.
     */
    .vks-doc-matrix td {
        text-align: left;
        border: none;
        border-bottom: 1px solid var(--vks-line);
        padding: 4px 0;
    }

    .vks-doc-matrix td:last-child {
        border-bottom: none;
    }

    .vks-doc-matrix td:first-child {
        font-weight: 600;
    }

    /*
     * ==================================================================
     * O CARTELA NU POATE MOSTENI LATIMEA DIN FORMA DE TABEL
     * ==================================================================
     *
     * Gasit de utilizator pe telefon, pe documentul semnat: titlul cartelei
     * („Vulkan Chest Press (Presa pentru piept)") si linia de sub el treceau
     * peste marginea din dreapta a cartelei.
     *
     * ## Cauza e SPECIFICITATEA, nu o regula lipsa
     *
     * Blocul asta declara deja `width: 100%` pe `.vks-doc-matrix td` — dar la
     * **0-1-1**. Regulile de latime fixa din foaia de baza sunt la **0-2-1**:
     *
     *     .vks-doc-matrix td:first-child        width: 254px   0-2-1   CASTIGA
     *     .vks-doc-registru td:nth-child(2)     width:  36px   0-2-1   CASTIGA
     *     .vks-doc-matrix td (@media)           width: 100%    0-1-1   pierde
     *
     * Un `@media` **nu adauga specificitate** — schimba doar cand se aplica
     * regula. Deci celula-titlu ramanea 254px intr-o cartela care are 212px
     * utili la 312px viewport: 42px peste margine, cu tot cu `border-bottom`.
     * De aici „linia scurta" si textul care iese — acelasi defect, doua fete.
     *
     * A doua jumatate, din aceeasi cauza: `text-align: center` de la 0-2-1
     * batea `text-align: left` de la 0-1-1, deci **cifra de la „Buc." si titlul
     * erau centrate** intr-o cartela in care tot restul e aliniat la stanga.
     *
     * E a treia oara cand o regula a documentului pierde tacut in fata unei
     * specificitati mai mari (§2.4, forma a sasea). Reparatia urca prin
     * **acelasi selector**, nu prin `!important`: ordinea in fisier decide la
     * specificitate egala, iar blocul asta e ultimul.
     */
    .vks-doc-matrix td:first-child,
    .vks-doc-registru td:nth-child(2) {
        width: auto;
        text-align: left;
        padding: 4px 0;
    }

    /*
     * ==================================================================
     * ANTETUL: cap si valoare se ASEAZA UNA SUB ALTA, ca in cartele
     * ==================================================================
     *
     * Gasit pe acelasi ecran: valorile din blocul de sus (Document, Data
     * vizitei, Interval, Semnat la) incepeau mai la stanga decat cele de la
     * Client si Locatie.
     *
     * Cauza: sunt DOUA mecanisme diferite pentru acelasi „cap: valoare" —
     * `.vks-doc-refs` e o grila `auto auto`, `.vks-doc-meta` e un tabel cu
     * `th { padding-right: 16px }`. Fiecare isi masoara singur coloana de
     * eticheta, din alte cuvinte si la alt corp de litera (13px fata de 14px),
     * deci valorile nu pot cadea la aceeasi distanta de margine.
     *
     * ⚠️ Pe ecran lat intrebarea nu exista: `.vks-doc-head` e `flex` cu
     * `space-between`, deci blocul de referinte sta la DREAPTA, iar tabelul de
     * fapte la stanga — nu impart nicio margine. Defectul apare abia cand
     * antetul se infasoara, adica pe telefon.
     *
     * Deci reparatia e tot aici, in blocul de telefon: amandoua se aseaza pe un
     * singur sir — eticheta, apoi valoarea — iar totul incepe la x = 0.
     * Alinierea devine exacta prin constructie, nu printr-o latime fixa pe care
     * cineva ar trebui s-o tina in doua locuri.
     *
     * Bonus masurat: o coloana de eticheta comuna ar fi cerut ~136px din cei
     * 240 utili, adica 57% din latime pentru etichete.
     */
    .vks-doc-refs {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vks-doc-refs span:nth-child(odd) {
        margin-top: 8px;
    }

    .vks-doc-refs span:first-child {
        margin-top: 0;
    }

    .vks-doc-meta,
    .vks-doc-meta tbody,
    .vks-doc-meta tr,
    .vks-doc-meta th,
    .vks-doc-meta td {
        display: block;
        width: 100%;
    }

    .vks-doc-meta th {
        padding: 8px 0 0;
    }

    .vks-doc-meta td {
        padding: 0;
    }

    .vks-table tr,
    .vks-doc-matrix tr {
        border: 1px solid var(--vks-line);
        border-radius: 6px;
        padding: 10px 14px;
        margin-bottom: 10px;
    }

    .vks-table td {
        border: none;
        padding: 5px 0;
    }

    .vks-table tr:last-child td {
        border: none;
    }

    /*
     * Eticheta coloanei, deasupra valorii. `attr()` e suportat pentru `content`
     * in toate browserele care conteaza.
     *
     * Celulele fara `data-label` — coloana de actiuni — nu primesc nimic:
     * butonul se explica singur.
     */
    .vks-table td[data-label]::before,
    .vks-doc-matrix td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--vks-muted);
        margin-bottom: 1px;
    }

    /*
     * Capul cartelei de matrice — codul aparatului — n-are nevoie de eticheta:
     * e chiar titlul cartelei. Aceeasi decizie ca pe exemplarul intern.
     */
    .vks-doc-matrix td:first-child::before {
        content: none;
    }

    /* Butonul de pe rand se intinde, ca sa fie usor de nimerit. */
    .vks-table td .vks-button {
        width: 100%;
        margin-top: 4px;
    }

    /* Antetul unei sesizari: butonul trece pe rand propriu. */
    .vks-report-head .vks-button {
        margin-left: 0 !important;
        width: 100%;
    }

    .vks-portal-bar .vks-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    /**
     * ⚠️ IEȘIREA din interfața de administrare, pe TELEFON — 4 octombrie 2026
     *
     * Gabi: pe telefon nu exista nicio cale, in niciun sens. Masurat, linkul
     * „Panoul WordPress" EXISTA — `administrator/layout.php:348`, conditionat pe
     * `Portal::areVoieInWpAdmin()`. Nu lipsea, si nu era ascuns de nimic.
     *
     * Ce lipsea e TINTA TACTILA: `.vks-portal-who` e `font-size: 13px` cu
     * `opacity: .85`, deci linkul masoara ~17px pe verticala — sub pragul de
     * `--vks-tap` (44px) pe care §9.4 il cere pentru tot ce se apasa cu degetul.
     *
     * Deci nu „nu exista", ci „nu se poate apasa". Un link de 16 caractere la
     * 13px, intr-o inshiruire `Nume · Panoul WordPress · Ieși din cont`, nici nu
     * arata ca un control.
     *
     * Se aplica TUTUROR linkurilor din bara, nu doar aceluia: „Ieși din cont" are
     * exact aceeasi problema, iar o regula care repara doar unul ar lasa celalalt
     * sub prag pe aceeasi linie. In portal si la tehnician bara are doar numele
     * si ieșirea — deci acolo repara ieșirea, ceea ce e tot ce trebuie.
     *
     * `inline-flex` ca `min-height` sa aiba obiect: pe un element in linie n-ar
     * face nimic (§2.4, forma a sasea — o declaratie care castiga pe un element
     * care n-o poate folosi arata exact ca una care functioneaza).
     */
    .vks-portal-who a {
        align-items: center;
        display: inline-flex;
        min-height: var(--vks-tap);
    }

    /*
     * TINTELE DE APASARE de cel putin 44px, DOAR sub 782px — felia clientului,
     * pct. 7. Multimea e cea MASURATA la inventarul din 9 noiembrie 2026 (pct. 22),
     * la 390px, pe toate ecranele portalului:
     *
     *     marca „VULKAN SERVICE"                 130x23
     *     intoarcerile „← Inapoi…"                h19
     *     sortarea din banda                      h23, latime de la 39
     *     codurile din tabele, cifra din locatii  h17 / 8x19
     *     legaturile din paragrafe si din liste   h18–h43
     *     „lista de proforme", in nota de stare   114x20 — documentul proformei
     *
     * `inline-flex` ca `min-height` sa aiba obiect pe un element in linie (§2.4,
     * forma a sasea); `min-width` fiindca cifra din locatii are 8px latime.
     * Desktopul ramane neschimbat — regulile stau numai aici.
     */
    .vks-portal-brand,
    .vks-breadcrumb a,
    .vks-sort,
    .vks-table td a:not(.vks-button),
    .vks-panel p a:not(.vks-button),
    .vks-panel li a:not(.vks-button),
    .vks-status-note a:not(.vks-button) {
        display: inline-flex;
        align-items: center;
        min-height: var(--vks-tap);
        min-width: var(--vks-tap);
    }

    /* Campurile proformei — tinta tactila, ca la pct. 7 (pct. 6 da corpul de 16px). */
    .vks-camp {
        min-height: var(--vks-tap);
    }

    /*
     * Cartelele ecranului de start: inaltimea DUPA CONTINUT pe telefon — felia
     * clientului, pct. 8. Cei 104px (vezi regula de baza) egaleaza randurile pe
     * desktop, unde stau cate patru; aici sta una pe rand, deci n-are ce egala.
     */
    .vks-cards .vks-card {
        min-height: 0;
    }
}

/*
 * Campurile de text ale proformei — „Numele tau" si motivul refuzului — primesc
 * 16px: sub 16px, iOS Safari mareste pagina la fiecare atingere (felia
 * clientului, pct. 6). Clasa proprie, nu `.vks-form`: aceea ar fi schimbat si
 * latimea, chenarul si inaltimea pe desktop.
 */
.vks-camp {
    font-size: var(--vks-input-font);
}