/* =====================================================================
   SSM Comisioane — foaie de stil unica. Directia „CONSOLA".

   Sursa: mockups/C-consola.html. Paleta, tipografia si valorile de
   contrast de acolo sunt luate ca atare — au fost deja verificate.

   Filozofia, pe scurt:
     · bara laterala e mereu intunecata, in ambele teme — e ancora vizuala;
     · zona de lucru urmeaza `prefers-color-scheme`;
     · rosul de brand (#AC2E31) e REZERVAT identitatii: logo, elementul
       activ din bara, actiunea principala, contorul din coada. Nu apare
       niciodata pe o stare de eroare;
     · starile negative primesc tratament de „stins" (ardezie), nu de
       alarma. Chihlimbarul marcheaza singura stare care mai cere ceva
       de la om: asteptarea;
     · banii sunt neutri: mono, tabular, culoarea o da statusul de pe
       acelasi rand, nu suma in sine;
     · fiecare stare are si o forma proprie de iconita, deci se distinge
       si fara culoare.

   ⚠️ Numele de clase sunt un CONTRACT cu vederile si cu JavaScript-ul.
   Se restileaza, nu se redenumesc.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. token-uri */

:root {
  color-scheme: dark;

  --bg:        #0A0A0C;
  --bg-work:   #0A0A0C;
  --panel:     #1C1C1E;
  --panel-2:   #232326;
  --panel-hi:  #2A2A2E;
  --line:      rgba(235,235,245,.13);
  --line-soft: rgba(235,235,245,.08);
  --fill:      rgba(118,118,128,.24);

  --txt:   #F2F2F7;
  --txt-2: rgba(235,235,245,.68);
  --txt-3: rgba(235,235,245,.48);

  --brand:    #AC2E31;
  --brand-2:  #932B32;
  --brand-lt: #F08A8E;

  --ok:      #3ECF8E;
  --ok-bg:   rgba(53,178,126,.13);
  --ok-bd:   rgba(53,178,126,.34);
  --paid-bg: #1D7A57;

  --warn:    #F0AA3C;
  --warn-bg: rgba(224,160,46,.13);
  --warn-bd: rgba(224,160,46,.34);

  --off:     #98A2AE;
  --off-bg:  rgba(150,162,177,.11);
  --off-bd:  rgba(150,162,177,.30);

  --info:    #5EA8F5;
  --info-bg: rgba(74,168,201,.13);
  --info-bd: rgba(74,168,201,.32);

  /* bara laterala: aceleasi valori in ambele teme */
  --side:       #16161A;
  --side-line:  rgba(235,235,245,.10);
  --side-txt:   #EBEBF0;
  --side-txt-2: rgba(235,235,245,.62);
  --side-txt-3: rgba(235,235,245,.44);
  --side-hover: #232329;
  --side-brand-lt: #E4666B;

  --r: 14px;        /* card */
  --r-ctl: 10px;    /* buton, camp, select */
  --r-pill: 980px;  /* insigna, pastila */
  --sh: none;   /* pe intuneric, cardul se desparte prin fundal, nu prin umbra */

  /* Stiva de sistem: pe Mac si iPhone se rezolva in San Francisco — exact
     fontul iOS — fara nicio cerere de retea. Vezi si layout.php si CSP. */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* ⚠️ DOUA fonturi pentru cifre, fiindca sunt DOUA nevoi diferite — le-am
     confundat pana pe 11 august 2026, si de acolo venea zeroul taiat pe sume.

     `--font-cifre` — SUMELE. Fontul aplicatiei, cu `tabular-nums`: cifrele
     primesc aceeasi latime, deci coloanele se citesc pe verticala, dar zeroul
     ramane rotund. Alinierea nu are nevoie de monospatiat, are nevoie de
     cifre tabulare.

     `--font-mono`  — CODURILE. Serie de factura, IBAN, cod de document, chei
     de configurare. Aici zeroul taiat e o FUNCTIE: deosebeste 0 de O cand omul
     compara caracter cu caracter cu SmartBill sau cu extrasul de banca. */
  --font-cifre: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
               'Segoe UI Mono', 'Roboto Mono', Consolas, monospace;

  --pad-x: 26px;
  --card-pad: 16px;
  --bara-lat: 232px;

  /* Inaltimile lucrurilor FIXATE pe marginea de jos, pe telefon.
     ⚠️ Stau aici, impreuna, fiindca trei locuri trebuie sa se potriveasca:
     bara de taburi, butonul flotant si bara de „versiune noua". Cand erau
     scrise ca numere separate, bara de versiune a ajuns exact peste butonul
     flotant de pe portofel — adica peste singura cale de a adauga un bon de pe
     telefon. Daca schimbi o inaltime, schimba constanta, nu locul de folosire. */
  --h-taburi:   76px;   /* bara de taburi de jos, cu aer */
  --h-versiune: 74px;   /* bara „versiune noua": ~64px reali, plus rezerva */
  --aer-jos:    12px;   /* ⚠️ ce nu trebuie sa lipseasca: fara el, ultimul rand
                           se termina exact pe muchia barei, adica sub ea */

  /* chevron pentru <select>; culoarea e scrisa in URI, deci se rescrie mai jos */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23838D9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* --- alias-uri pentru vechile nume de token-uri -------------------
     Vederile inca au `style="color:var(--text-2)"` si rude. Se sterg
     dupa ce toate vederile trec pe numele noi. */
  --fundal: var(--bg-work);
  --card: var(--panel);
  --card-2: var(--panel-2);
  --text: var(--txt);
  --text-2: var(--txt-2);
  --text-3: var(--txt-3);
  --linie: var(--line);
  --linie-tare: var(--line);
  --auriu: var(--txt);
  --albastru: var(--info);
  --albastru-inchis: var(--info);
  --verde: var(--ok);
  --portocaliu: var(--warn);
  --rosu: var(--off);
  --r-mic: 8px;
  --umbra: var(--sh);
  --umbra-mica: var(--sh);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* Gri-ul de fundal iOS: cardul alb se ridica de pe el fara chenar. */
    --bg:        #F2F2F7;
    --bg-work:   #F2F2F7;
    --panel:     #FFFFFF;
    --panel-2:   #F7F7FA;
    --panel-hi:  #F0F0F4;

    /* Separatoare, nu chenare: linii fine translucide, ca in iOS. */
    --line:      rgba(60,60,67,.16);
    --line-soft: rgba(60,60,67,.09);
    --fill:      rgba(118,118,128,.12);

    --txt:   #1C1C1E;
    --txt-2: rgba(60,60,67,.74);
    --txt-3: rgba(60,60,67,.54);

    --brand-lt: #8E2429;

    --ok:      #1D7A4C;
    --ok-bg:   rgba(18,115,79,.10);
    --ok-bd:   rgba(18,115,79,.28);
    --paid-bg: #12734F;

    --warn:    #8A5A06;
    --warn-bg: rgba(138,90,6,.10);
    --warn-bd: rgba(138,90,6,.26);

    --off:     #5A6673;
    --off-bg:  rgba(90,102,115,.09);
    --off-bd:  rgba(90,102,115,.26);

    --info:    #1D6FD0;
    --info-bg: rgba(28,110,136,.10);
    --info-bd: rgba(28,110,136,.26);

    --sh: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px -12px rgba(16,24,40,.20);

    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6975' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

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

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ⚠️ Fara `!important`, `.campuri { display:grid }` bate regula de browser
   `[hidden] { display:none }` (stilul autorului bate stilul agentului), iar
   grupurile de câmpuri ascunse din formularul de linie rămân vizibile. */
[hidden] { display: none !important; }

a { color: var(--brand-lt); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand-lt); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 19px; }
h2 { font-size: 13px; }
h3 { font-size: 12px; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 3px; padding: 1px 4px;
}

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

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

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

.zona {
  background: var(--bg-work);
  min-width: 0;
  display: flex; flex-direction: column;
}

.continut {
  flex: 1; min-width: 0;
  padding: var(--card-pad) var(--pad-x) 22px;
}
.invelis-simplu .continut { display: grid; place-items: center; }

.sari-continut {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brand); color: #fff;
  padding: 8px 12px; border-radius: var(--r-ctl); font-weight: 600;
}
.sari-continut:focus { left: 8px; top: 8px; text-decoration: none; }

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

.bara {
  background: var(--side);
  border-right: 1px solid var(--side-line);
  position: sticky; top: 0; align-self: start;
  height: 100vh; min-width: 0;
  z-index: 50;
}
.bara-interior {
  height: 100%; min-width: 0;
  display: flex; flex-direction: column;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--side-line);
  min-width: 0;
}
.marca:hover { text-decoration: none; background: var(--side-hover); }
.marca-punct { flex: none; display: block; }
.marca-punct img { height: 24px; width: auto; display: block; }
.marca-text {
  min-width: 0; display: block;
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; line-height: 1.1;
}
.marca-sufix {
  display: block; color: var(--side-txt-2);
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin-top: 2px;
}

.bara-navigare { flex: 1; overflow-y: auto; padding: 12px 8px; min-width: 0; }

.nav-eticheta {
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--side-txt-3);
  padding: 8px 8px 6px;
}
.nav { display: block; min-width: 0; }
.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-ctl);
  color: var(--side-txt); font-size: 12.5px; font-weight: 500;
  border-left: 2px solid transparent;
  min-width: 0;
}
.nav-link + .nav-link { margin-top: 1px; }
.nav-link:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.nav-link svg { width: 15px; height: 15px; color: #7B8592; }
.nav-link:hover svg { color: #B9C1CB; }
.nav-link.este-activ {
  background: linear-gradient(90deg, rgba(172,46,49,.24), rgba(172,46,49,.05));
  border-left-color: var(--brand);
  color: #fff; font-weight: 600;
}
.nav-link.este-activ svg { color: var(--side-brand-lt); }
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pastila {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  background: var(--brand); color: #fff;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.bara-dreapta {
  border-top: 1px solid var(--side-line);
  padding: 10px 12px 11px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  min-width: 0;
}
.eu-initiale {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
/* `display:contents` scoate cutia lui .eu, ca numele si rolurile sa devina
   direct elemente de flex: numele pe rândul butonului, rolurile pe rândul
   lor. Daca browserul nu-l suporta, cele doua rămân stivuite — tot corect. */
.eu { display: contents; }
.eu-nume {
  /* `flex-basis: 0`, nu `auto`: într-un rând care se împachetează, baza
     `auto` (lățimea întreagă a numelui) decide ruperea ÎNAINTE de micșorare,
     așa că „Ieși" sărea pe rândul următor de când a apărut „?" lângă el.
     Cu baza 0, numele ia ce rămâne și se taie cu „…". */
  display: block; flex: 1 1 0; min-width: 0;
  color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eu-rol {
  display: block; flex: 0 0 100%; order: 5;
  color: var(--side-txt-2); font-size: 9.5px;
  letter-spacing: .05em; line-height: 1.4; margin-top: -2px;
}
.bara-dreapta .buton {
  flex: none;
  background: transparent; color: var(--side-txt);
  border-color: var(--side-line);
}
.bara-dreapta .buton:hover { background: var(--side-hover); color: #fff; border-color: #333B45; }

/* Ghidul „?" — cerc lângă „Ieși", pe bara întunecată în ambele teme. */
.buton-ghid {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--side-txt);
  border: 1px solid var(--side-line);
  font-family: var(--font); font-size: 13.5px; font-weight: 800; line-height: 1;
}
.buton-ghid:hover { background: var(--side-hover); color: #fff; border-color: #333B45; }

/* ---------------------------------------------------------------- 5. banda de stare (subsol) */

.picior {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 6px var(--pad-x);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--txt-3); letter-spacing: .02em;
}
.picior b { color: var(--txt-2); font-weight: 500; }
.picior-sep { color: var(--line); }
.picior-umple { flex: 1; }
.picior-punct {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--txt-3);
}
.picior-punct.este-ok { background: var(--ok); }
.picior-punct.este-atentie { background: var(--warn); }
.picior-punct.este-stins { background: var(--off); }

/* ---------------------------------------------------------------- 6. capul paginii */

.cap-pagina {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  justify-content: space-between;
  margin: calc(var(--card-pad) * -1) calc(var(--pad-x) * -1) var(--card-pad);
  padding: 16px var(--pad-x) 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.cap-pagina h1 { font-size: 19px; }
.subtitlu {
  margin-top: 3px; color: var(--txt-3); font-size: 11.5px; letter-spacing: .03em;
  max-width: 70ch;
}
.subtitlu b { color: var(--txt-2); font-weight: 500; }

.actiuni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Titlul cedeaza latimea, uneltele si-o pastreaza pe a lor. */
.cap-pagina > :first-child { flex: 1 1 300px; min-width: 0; }
.cap-pagina > .actiuni { flex: 0 0 auto; }
.actiuni select { width: auto; min-width: 150px; }

/* ---------------------------------------------------------------- 7. panouri */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: var(--card-pad);
  margin-bottom: 12px;
  min-width: 0;
}
.card > :last-child { margin-bottom: 0; }

/* Capul de panou se lipeste de marginile cardului, ca in macheta. */
.card-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  padding: 9px var(--card-pad);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}
.card-cap h2, .card-cap h3 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt-2);
}
.card-cap .buton { margin: -2px 0; }

.contor {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--txt-3); letter-spacing: 0;
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
}

/* ---------------------------------------------------------------- 8. grile */

.grid { display: grid; gap: 12px; align-items: start; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------------------------------------------------------------- 9. casete de cifre */

.cifra {
  --acc: var(--txt-3);
  position: relative; overflow: hidden; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 11px 13px 12px;
}
.cifra::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--acc);
}
.cifra.aur        { --acc: var(--brand-lt); }
.cifra.verde      { --acc: var(--ok); }
.cifra.portocaliu { --acc: var(--warn); }
.cifra.info       { --acc: var(--info); }
.cifra.stins      { --acc: var(--off); }

.cifra-eticheta {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--txt-3);
}
.cifra-eticheta svg { width: 12px; height: 12px; color: var(--acc, var(--txt-3)); }
.cifra-valoare {
  margin-top: 7px;
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em;
  color: var(--txt);
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.cifra-valoare em {
  font-style: normal; font-size: 10.5px; font-weight: 500;
  color: var(--txt-3); letter-spacing: .08em;
}
.cifra-nota { margin-top: 5px; font-size: 11px; color: var(--txt-3); }
.cifra-nota b { color: var(--acc); font-weight: 600; }

/* ---------------------------------------------------------------- 10. butoane */

.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand-2); border-radius: var(--r-ctl);
  padding: 7px 13px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.buton:hover { background: var(--brand-2); color: #fff; text-decoration: none; }
.buton:disabled { opacity: .5; cursor: not-allowed; }
.buton svg { width: 14px; height: 14px; }

.buton-discret {
  background: transparent; color: var(--txt-2); border-color: var(--line);
}
.buton-discret:hover { background: var(--panel-hi); color: var(--txt); border-color: var(--txt-3); }

.buton-verde { background: var(--paid-bg); border-color: var(--paid-bg); color: #fff; }
.buton-verde:hover { filter: brightness(1.12); background: var(--paid-bg); }

/* Actiunea distructiva NU e rosie: rosul e al brandului. „Scoate din calcul"
   primeste tratamentul de stins, ca si starile negative. */
.buton-rosu {
  background: transparent; color: var(--off);
  border-color: var(--off-bd);
}
.buton-rosu:hover { background: var(--off-bg); color: var(--txt); border-color: var(--off); }

.buton-mic { padding: 4px 9px; font-size: 11.5px; }
.buton-mic svg { width: 12px; height: 12px; }

/* =====================================================================
   „SE LUCREAZA" — cercul care se invarte
   =====================================================================

   ⚠️ REGULA CARE CONTEAZA CEL MAI MULT: cercul apare DOAR daca operatiunea
   chiar dureaza. `app.js` il porneste dupa 350 ms; ce se termina mai repede
   nu-l vede niciodata. Un cerc care clipeste 80 ms e mai rau decat lipsa lui
   — ochiul prinde miscarea, nu si intelesul, si ramane senzatia ca a sarit
   ceva pe ecran.

   ⚠️ Butonul NU-SI PIERDE eticheta si nici latimea. Varianta veche scria
   `buton.textContent = 'Se lucreaza…'`, ceea ce stergea si iconita, si facea
   butonul sa sara la alta latime — pe un rand de tabel, tot randul tresarea.
   Aici cercul ia locul iconitei, iar textul ramane.
   ===================================================================== */

@keyframes rotire { to { transform: rotate(360deg); } }

.buton.se-lucreaza { pointer-events: none; }
.buton.se-lucreaza > svg { visibility: hidden; }   /* pastreaza locul iconitei */

.buton.se-lucreaza::before {
  content: ''; position: absolute;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: .9;
  animation: rotire .62s linear infinite;
}
/* Butonul are `display:inline-flex` cu `gap`, deci cercul se aseaza exact
   peste iconita ascunsa; fara iconita, sta la marginea din stanga a textului. */
.buton { position: relative; }
.buton.se-lucreaza:not(:has(> svg)) { padding-left: 30px; }
.buton.se-lucreaza:not(:has(> svg))::before { left: 11px; }
.buton-mic.se-lucreaza::before { width: 11px; height: 11px; }

/* ⚠️ Cine cere mai putina miscare tot trebuie sa afle ca se lucreaza — deci
   indicatorul NU dispare, doar inceteaza sa se invarta si pulseaza incet. */
@media (prefers-reduced-motion: reduce) {
  .buton.se-lucreaza::before {
    animation: none; border-top-color: currentColor; opacity: .45;
  }
}

/* Bara subtire din capul paginii, pentru trimiterile de formular — acolo nu
   exista un buton care sa astepte, fiindca pagina se reincarca. */
#bara-lucru {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  background: var(--brand); transform-origin: left;
  animation: bara-lucru 12s cubic-bezier(.1, .8, .2, 1) forwards;
}
@keyframes bara-lucru {
  0%   { transform: scaleX(0); }
  30%  { transform: scaleX(.55); }
  70%  { transform: scaleX(.82); }
  100% { transform: scaleX(.96); }   /* nu ajunge la capat: nu stim cat mai e */
}
@media (prefers-reduced-motion: reduce) {
  #bara-lucru { animation: none; transform: scaleX(.4); }
}

.buton-text {
  background: none; border: none; padding: 2px 4px; border-radius: 3px;
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  color: var(--brand-lt); cursor: pointer; white-space: nowrap;
}
.buton-text:hover { background: var(--panel-hi); text-decoration: underline; }
.buton-text.rosu { color: var(--off); }
.buton-text.rosu:hover { background: var(--off-bg); color: var(--txt); }

/* ---------------------------------------------------------------- 11. formulare */

label {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3);
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%;
  font-family: var(--font); font-size: 12.5px; color: var(--txt);
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 7px 10px;
  transition: border-color .12s, box-shadow .12s;
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 28px; cursor: pointer; font-weight: 500;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-lt);
  box-shadow: 0 0 0 2px rgba(172,46,49,.22);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  opacity: .6; cursor: not-allowed;
}
textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }

.camp { margin-bottom: 10px; min-width: 0; }
.camp-ajutor { font-size: 11px; color: var(--txt-3); margin-top: 4px; }

/* Data scrisa in litere, sub un `<input type="date">`.
   ⚠️ Formatul afisat de campul nativ vine de la SISTEM, nu de la noi: pe un
   Mac setat pe engleza, „03/09" e 9 martie pentru browser si 3 septembrie
   pentru om. Randul asta scoate ambiguitatea fara sa inlocuiasca rotita
   nativa de pe telefon, care e mai buna decat orice am scrie noi.
   Ceva mai apasat decat `.camp-ajutor`: nu e o explicatie, e insasi valoarea
   pe care omul tocmai a ales-o. */
.data-litere {
  font-size: 12px;
  color: var(--txt-2);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Liste de raport din modale: dense, fara bullet-uri grase. */
.lista-simpla { margin: 6px 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
.lista-simpla .cod { font-size: 11px; color: var(--txt-3); }

/* Firma emitenta, cand tipul o fixeaza: se arata, nu se alege.
   Nu e un `input[readonly]`, fiindca nu e un camp — e un fapt. Un camp gri si
   neapasabil invita omul sa incerce sa-l schimbe si sa creada ca s-a stricat. */
.camp-eticheta {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3);
}
.firma-fixa {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--linie);
}
.firma-fixa strong { font-weight: 600; }
/* ⚠️ CUI-ul e `.cod`, deci monospatiat cu zeroul taiat — omul il compara
   caracter cu caracter cu ce vede in SmartBill (regula 29). */
.firma-fixa .cod { font-size: 11px; color: var(--txt-2); }
.campuri {
  display: grid; gap: 10px 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.numar {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; letter-spacing: -.01em;
}
input.numar { text-align: right; }

/* ---------------------------------------------------------------- 12. tabele */

.tabel-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-left: calc(var(--card-pad) * -1);
  margin-right: calc(var(--card-pad) * -1);
}
.card > .tabel-scroll:last-child { margin-bottom: calc(var(--card-pad) * -1); }

table.tabel { width: 100%; min-width: 460px; border-collapse: collapse; }
.tabel th {
  text-align: left; vertical-align: bottom;
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-3); background: var(--panel);
  padding: 7px var(--card-pad);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabel th.numar { text-align: right; }
/* Coloanele de cifre sunt aliniate la dreapta — spatiul din stanga poate fi mai mic. */
.tabel th.numar, .tabel td.numar { padding-left: 8px; }
.tabel td {
  padding: 7px var(--card-pad);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--txt); vertical-align: middle;
  white-space: nowrap;
}
/* Celulele simple rămân pe un rând (tabelul se deruleaza, nu se indeasa);
   cele compuse — nume + IBAN, denumire + observatii — au voie sa curga.
   `.lat` e portita pentru o coloana de text lung. */
.tabel td:has(div), .tabel td.lat { white-space: normal; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--panel-hi); }
.tabel tfoot td {
  padding: 8px var(--card-pad);
  font-weight: 600; color: var(--txt-2);
  border-top: 1px solid var(--line); border-bottom: 0;
  background: var(--panel-2);
}
.tabel a { color: var(--txt); font-weight: 500; }
.tabel a:hover { color: var(--brand-lt); }

/* ---------------------------------------------------------------- 13. text */

.principal { font-weight: 600; }
.secundar  { color: var(--txt-2); }
.mic       { font-size: 11px; }
.strans    { white-space: nowrap; }
.mono      { font-family: var(--font-cifre); font-variant-numeric: tabular-nums; }
.zero      { color: var(--txt-3); }
.taiat     { text-decoration: line-through; text-decoration-thickness: 1px; }
/* Banii nu au culoare proprie — statusul de pe acelasi rând o da. */
.aur       { color: var(--txt); font-weight: 500; }

/* ---------------------------------------------------------------- 14. insigne de status */

.insigna {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.5;
  padding: 2px 7px 2px 6px; border-radius: var(--r-pill);
  white-space: nowrap; vertical-align: middle;
  color: var(--txt-2); background: var(--panel-2); border: 1px solid var(--line);
}
.insigna svg { width: 11px; height: 11px; }
.insigna-ok       { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-bd); }
.insigna-asteapta { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.insigna-manager  { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.insigna-rea      { color: var(--off);  background: var(--off-bg);  border-color: var(--off-bd); }
/* Om fara acces in aplicatie: nu e o eroare, e o stare — deci chihlimbar,
   nu rosu. */
.insigna-atentie  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.insigna-aur      { color: #fff;        background: var(--paid-bg); border-color: var(--paid-bg); }

/* ---------------------------------------------------------------- 15. lista de verificari */

.verificari { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.verificare {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.45; color: var(--txt-2);
}
.verificare-semn {
  flex: none; width: 16px; height: 16px; border-radius: 3px; margin-top: 1px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--panel-2); color: var(--txt-3);
}
.verificare-semn svg { width: 11px; height: 11px; }
.verificare-nume { font-weight: 600; color: var(--txt); }
.verificare-mesaj { color: var(--txt-2); }
.v-ok           .verificare-semn { background: var(--ok-bg);   color: var(--ok); }
.v-atentie      .verificare-semn { background: var(--warn-bg); color: var(--warn); }
.v-eroare       .verificare-semn { background: var(--off-bg);  color: var(--off); }
.v-in_asteptare .verificare-semn { background: var(--info-bg); color: var(--info); }
.v-neaplicabil  .verificare-semn { background: var(--panel-2); color: var(--txt-3); }
.v-neaplicabil  { color: var(--txt-3); }
.v-neaplicabil .verificare-nume { color: var(--txt-3); font-weight: 500; }

/* ---------------------------------------------------------------- 16. banda de informatie */

.banda {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 12px; margin-bottom: 12px;
  border: 1px solid var(--info-bd); border-left: 3px solid var(--info);
  border-radius: var(--r); background: var(--info-bg);
  font-size: 12.5px; color: var(--txt-2);
}
.banda b { color: var(--txt); font-weight: 600; }
.banda a { font-weight: 600; }
/* font-size:0 face ca eventualele emoji rămase in marcaj sa nu se vada;
   iconita reala e SVG-ul dinauntru. */
.banda-icon { flex: none; font-size: 0; line-height: 0; margin-top: 1px; color: var(--info); }
.banda-icon svg { width: 15px; height: 15px; }

.banda-info    { border-color: var(--info-bd); border-left-color: var(--info); background: var(--info-bg); }
.banda-info    .banda-icon { color: var(--info); }
.banda-ok      { border-color: var(--ok-bd);   border-left-color: var(--ok);   background: var(--ok-bg); }
.banda-ok      .banda-icon { color: var(--ok); }
.banda-atentie { border-color: var(--warn-bd); border-left-color: var(--warn); background: var(--warn-bg); }
.banda-atentie .banda-icon { color: var(--warn); }
.banda-rea     { border-color: var(--off-bd);  border-left-color: var(--off);  background: var(--off-bg); }
.banda-rea     .banda-icon { color: var(--off); }
.banda-rea b   { color: var(--txt); }

/* ---------------------------------------------------------------- 17. stare goala */

.gol { text-align: center; padding: 34px 16px; color: var(--txt-3); }
.gol-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: 0 auto 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--panel-2); color: var(--txt-3);
  font-size: 0;
}
.gol-icon svg { width: 20px; height: 20px; }
.gol-titlu { font-weight: 600; color: var(--txt); margin-bottom: 3px; font-size: 13px; }

/* ---------------------------------------------------------------- 18. linia de comision */

.linie {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh);
  padding: 11px 13px; margin-bottom: 8px; min-width: 0;
}
.linie-cap {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; flex-wrap: wrap;
}
.linie-titlu { font-weight: 600; font-size: 13px; }
.linie-meta { color: var(--txt-3); font-size: 11.5px; margin-top: 2px; }
.linie-suma {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 500; color: var(--txt);
  white-space: nowrap; letter-spacing: -.01em;
}
.linie-formula {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--txt-2);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 3px; padding: 2px 6px;
}
.linie-jos {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.detaliu { margin-top: 8px; }
.detaliu summary {
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--brand-lt);
  list-style: none;
}
.detaliu summary::-webkit-details-marker { display: none; }
.detaliu summary::before {
  content: "▸"; display: inline-block; margin-right: 5px;
  transition: transform .12s; color: var(--txt-3);
}
.detaliu[open] summary::before { transform: rotate(90deg); }
.detaliu summary:hover { text-decoration: underline; }
.detaliu[open] summary { margin-bottom: 6px; }

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

.login-ecran { display: grid; place-items: center; width: 100%; padding: 16px 0; }
.login-card {
  width: 100%; max-width: 24rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh);
  padding: 22px 20px;
}
.login-marca { text-align: center; margin-bottom: 18px; }
/* Cercul poarta simbolul din logo. `font-size:0` inghite emoji-ul ramas
   in vedere, ca sa nu apara doua iconite. */
.cerc {
  width: 42px; height: 42px; margin: 0 auto 12px;
  border-radius: var(--r-pill);
  background: var(--brand) url("/assets/logo-ssm-simbol-alb.png") center / 22px auto no-repeat;
  font-size: 0; color: transparent;
}
.login-marca h1 { font-size: 17px; }
.login-marca p { color: var(--txt-3); font-size: 11.5px; margin-top: 4px; }
.login-card .buton { width: 100%; }
.login-card .banda { font-size: 12px; }

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

.modal-fond {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,6,9,.68);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.75);
}
.modal h2 {
  font-size: 14px; letter-spacing: -.01em; text-transform: none; margin-bottom: 4px;
}
.modal-sub { color: var(--txt-2); font-size: 12px; margin-bottom: 14px; }
.modal-corp { min-width: 0; }
.modal-picior { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

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

.notificare {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 4rem);
  z-index: 200; max-width: calc(100vw - 32px);
  background: var(--side); color: #fff;
  border: 1px solid var(--side-line); border-left: 3px solid var(--ok);
  border-radius: var(--r); padding: 9px 14px;
  font-size: 12.5px; font-weight: 500; text-align: center;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s;
}
.notificare.este-vizibil { transform: translate(-50%, 0); opacity: 1; }
.notificare.este-rea { border-left-color: #E0A02E; color: #FFE3AE; }

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

   Un singur bloc, construit din token-urile de mai sus. Regula de culoare a
   aplicatiei se pastreaza: starile negative sunt „stinse" (ardezie), nu rosii —
   rosul rămâne al brandului. Ca sa nu iasa totusi ca o problema arata mai
   blanda decat o atentionare (chihlimbar), insigna problemei e PLINA, iar cea
   de atentionare conturata: umplerea, nu nuanta, poarta gravitatea.

   A doua cale, valabila si fara culoare: fiecare stare are forma ei de iconita
   (cerc taiat / triunghi / cerc bifat / minus) si eticheta scrisa. */

/* Textul ia culoarea fundalului paginii, nu alb fix: `--off` e ardezie inchisa
   in tema deschisa si ardezie DESCHISA in cea intunecata, deci albul ar deveni
   ilizibil exact acolo. Asa, contrastul e bun in ambele teme. */
.insigna-problema { color: var(--bg); background: var(--off); border-color: var(--off); }

/* casetele de cifre din bara de verdict */
.diag-cifre { margin-bottom: 12px; }
.diag-cifre .cifra-valoare { font-size: 27px; }
/* Un zero nu are de ce sa strige la fel de tare ca un 6. */
.diag-cifre .cifra.este-zero { --acc: var(--line); }
.diag-cifre .cifra.este-zero .cifra-valoare { color: var(--txt-3); }

/* ⚠️ Fara flex aici. Randul contine text, <b> si <code> amestecate; cu
   `display:flex` fiecare bucata devine element de flex si fraza se rupe in
   coloane. Iconita se aliniaza ca text, nu ca element de flex. */
.diag-nota { margin: -4px 0 12px; max-width: 96ch; }
.diag-nota b { color: var(--txt-2); font-weight: 600; }
.diag-nota svg, .diag-subsol svg {
  display: inline-block; vertical-align: -2px;
  margin-right: 5px; color: var(--txt-3);
}

/* cuprinsul: o pastila per arie */
.diag-cuprins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.diag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--panel);
  color: var(--txt-2); font-size: 11.5px; font-weight: 600;
}
.diag-chip:hover { background: var(--panel-hi); color: var(--txt); text-decoration: none; }
.diag-chip svg { color: var(--txt-3); }
.diag-chip .diag-nr {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 500; color: var(--txt-3);
}
.diag-chip.este-problema { border-color: var(--off-bd); }
.diag-chip.este-problema svg { color: var(--off); }
.diag-chip.este-atentie  { border-color: var(--warn-bd); }
.diag-chip.este-atentie  svg { color: var(--warn); }
.diag-chip.este-ok svg { color: var(--ok); }

/* un rezultat */
.diag-lista { display: block; min-width: 0; }
.diag {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px 11px;
  margin-bottom: 8px; min-width: 0;
}
.diag:last-child { margin-bottom: 0; }
.diag-problema    { border-left-color: var(--off); }
.diag-atentie     { border-left-color: var(--warn); }
.diag-ok          { border-left-color: var(--ok);  background: var(--panel); }
.diag-neaplicabil { border-left-color: var(--line); background: var(--panel); }

.diag-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diag-titlu {
  flex: 1 1 12rem; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--txt); letter-spacing: 0;
}
.diag-ok .diag-titlu, .diag-neaplicabil .diag-titlu { font-weight: 500; color: var(--txt-2); }

.diag-mesaj {
  margin: 6px 0 0; max-width: 88ch;
  font-size: 12.5px; line-height: 1.5; color: var(--txt-2);
}
.diag-ok .diag-mesaj, .diag-neaplicabil .diag-mesaj { font-size: 12px; color: var(--txt-3); }

/* Remedierea e singurul text din pagina care cere o actiune. Nu are voie sa
   arate ca restul. */
.diag-remediere {
  margin-top: 8px; padding: 8px 10px; max-width: 88ch;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--txt-3);
  border-radius: 3px;
  font-size: 12px; line-height: 1.55; color: var(--txt);
}
.diag-problema .diag-remediere { border-left-color: var(--off); }
.diag-atentie  .diag-remediere { border-left-color: var(--warn); }
.diag-eticheta {
  display: block; margin-bottom: 3px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--txt-3);
}

.diag .detaliu { margin-top: 8px; }
.diag .detaliu summary { font-size: 11px; color: var(--txt-3); font-weight: 500; }
.diag .detaliu summary:hover { color: var(--txt-2); }

.diag-detalii {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px; margin: 0; font-size: 11.5px;
}
.diag-detalii dt { color: var(--txt-3); white-space: nowrap; }
.diag-detalii dd {
  margin: 0; min-width: 0; color: var(--txt-2);
  font-family: var(--font-mono); font-size: 11px;
  overflow-wrap: anywhere;
}

/* grupul restrans cu ce e in regula */
.diag-restul { margin-top: 10px; }
.diag-restul > summary { color: var(--txt-2); font-weight: 500; }
.diag-sectiune > .diag-lista + .diag-restul { border-top: 1px solid var(--line-soft); padding-top: 9px; }

.diag-actiuni-gol { justify-content: center; margin-top: -14px; padding-bottom: 4px; }
.diag-actiuni-gol .camp-ajutor { margin: 0; }

.diag-subsol { max-width: 96ch; margin-top: 14px; line-height: 1.6; }
.diag-subsol code { white-space: nowrap; }

/* Butonul de probe cat timp interogheaza SmartBill si BNR. */
.diag-lucreaza { opacity: .75; }

@media (max-width: 700px) {
  .diag-detalii { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .diag-detalii dt { margin-top: 5px; }

  /* Cifrele raman doua cate doua. Stivuite una sub alta ar impinge propozitia
     cu ce e de facut sub doua ecrane de derulare — adica exact ce nu trebuie sa
     se intample cu ecranul asta, pe telefon, in mijlocul unei probleme.
     `!important` bate regula generala de la .grid, care e tot `!important`. */
  .grid.diag-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .diag-cifre .cifra { padding: 9px 11px 10px; }
  .diag-cifre .cifra-valoare { font-size: 21px; margin-top: 4px; }
  .diag-cifre .cifra-nota { display: none; }
}

/* ---------------------------------------------------------------- 23. ecrane inguste */

@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 900px) {
  /* Bara laterala devine bara orizontala, derulabila — fara JavaScript. */
  .invelis { grid-template-columns: minmax(0, 1fr); }
  /* Pe o coloana, bara si zona devin doua RANDURI. Fara randuri explicite,
     `align-content: normal` imparte inaltimea ramasa intre ele, iar bara —
     care e `align-self: start` — lasa sub ea o banda goala cat jumatate de
     ecran pe paginile scurte (eroare, stari goale). Randul de sus ia exact
     inaltimea barei, restul ii revine zonei de lucru. */
  .invelis:not(.invelis-simplu) { grid-template-rows: auto minmax(0, 1fr); }
  .bara {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--side-line);
  }
  .bara-interior {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marca eu" "nav nav";
  }
  .marca { grid-area: marca; border-bottom: 0; padding: 10px 12px; }
  .marca-punct img { height: 22px; }
  .bara-dreapta {
    grid-area: eu; border-top: 0; padding: 8px 12px;
    justify-content: flex-end; flex-wrap: nowrap;
  }
  .eu-nume { flex: 0 1 auto; text-align: right; }
  .eu-rol { display: none; }
  .bara-navigare {
    grid-area: nav; padding: 0 8px 6px;
    border-top: 1px solid var(--side-line);
    overflow-x: auto; overflow-y: hidden;
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    scrollbar-width: none;
  }
  .bara-navigare::-webkit-scrollbar { display: none; }
  .nav-eticheta { display: none; }
  /* Grupurile si linkurile nu se micsoreaza — bara se deruleaza in schimb. */
  .bara-navigare > * { flex: none; }
  .nav { display: flex; flex-wrap: nowrap; gap: 4px; }
  .nav-link { flex: none; }
  .nav-link {
    border-left: 0; border-bottom: 2px solid transparent;
    border-radius: 0 0 var(--r-ctl) var(--r-ctl);
    white-space: nowrap; padding: 9px 10px;
  }
  .nav-link + .nav-link { margin-top: 0; }
  .nav-link.este-activ { border-left: 0; border-bottom-color: var(--brand); }
  .nav-text { overflow: visible; }

  /* Vederile inca au grile de doua coloane scrise in `style=` — pe telefon
     ar scoate pagina din ecran, deci le fortam pe o coloana. */
  .grid:not(.grid-2):not(.grid-4) { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 700px) {
  :root { --pad-x: 14px; }
  .grid, .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .cap-pagina { padding: 14px var(--pad-x) 12px; }
  .cap-pagina h1 { font-size: 17px; }
  .actiuni { width: 100%; }
  .actiuni > .buton, .actiuni > select { flex: 1 1 auto; }
  .cifra-valoare { font-size: 22px; }
}

@media (max-width: 430px) {
  .eu-initiale { display: none; }
  .marca-text { font-size: 11.5px; }
  .picior { font-size: 10px; gap: 6px; }
  .picior-umple ~ span { display: none; }
}

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

/* ---------------------------------------------------------------- 24. tipar */

@media print {
  .bara, .picior, .actiuni, .notificare, .modal-fond, .sari-continut { display: none !important; }
  body, .zona, .invelis { background: #fff; color: #000; }
  .invelis { display: block; }
  .card, .linie, .cifra, .diag { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .cap-pagina { border-color: #ccc; }
  /* Un diagnostic tiparit sau salvat ca PDF e felul in care ajunge la
     gazduire. Remedierile trebuie sa fie in el, nu doar pe ecran. */
  .diag-remediere { border-color: #999; }
}

/* ---------------------------------------------------------------- 22. administrarea conturilor */

/* Bifele de roluri din formularul de cont. Nu au atribut `name` — valoarea
   reala sta intr-un camp ascuns, vezi utilizatori.js. */
.bife { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 0; }
.bifa {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--txt);
  cursor: pointer; user-select: none;
}
.bifa input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* Un cont dezactivat ramane vizibil, dar se retrage din prim-plan: istoria lui
   de plati nu dispare, doar accesul. */
tr.este-stins td { opacity: .55; }
tr.este-stins td.principal { font-weight: 500; }

/* ---------------------------------------------------------------- 25. deconturi

   Macheta A („Portofel"): soldul sus, mare, apoi extrasul de cont. Piesele de
   aici sunt singurele elemente vizuale noi din modul — restul refoloseste
   cardurile, campurile si insignele care exista deja, ca sa nu para alta
   aplicatie lipita langa asta.
   ---------------------------------------------------------------- */

/* --- cardul de sold ---------------------------------------------------
   ⚠️ Singurul loc din aplicatie unde rosul de brand acopera o suprafata mare.
   E o exceptie asumata: soldul NU e o stare (starile raman ardezie si
   chihlimbar), e identitatea ecranului. Aceeasi regula ca la bara laterala. */
.sold-card {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--brand) 0%, #7E2126 100%);
  color: #fff; border-radius: 20px;
  padding: 20px var(--card-pad) 17px; margin: 0 var(--pad-x) 4px;
}
.sold-card::after {
  content: ''; position: absolute; right: -46px; top: -56px;
  width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.07);
}
.sold-et {
  font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  opacity: .82; font-weight: 650;
}
.sold-val {
  font-family: var(--font-cifre); font-size: 40px; font-weight: 600;
  letter-spacing: -.03em; margin: 7px 0 3px; font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.sold-val small { font-size: 19px; opacity: .72; margin-left: 5px; font-weight: 500; }
.sold-sub { font-size: 12.5px; opacity: .84; line-height: 1.45; position: relative; z-index: 1; }
.sold-tranzit {
  position: relative; z-index: 1; margin-top: 12px;
  display: flex; gap: 7px; align-items: flex-start;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-ctl); padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
}
.sold-tranzit svg { flex: none; margin-top: 1px; }
.sold-bara { display: flex; gap: 8px; margin-top: 15px; position: relative; z-index: 1; }
.sold-bara > * {
  flex: 1; text-align: center; background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--r-ctl);
  padding: 9px 0; font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer;
  text-decoration: none;
}
.sold-bara > *:hover { background: rgba(255,255,255,.24); }

/* --- titlurile de lista ----------------------------------------------- */
.titlu-lista {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px var(--pad-x) 7px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--txt-3);
}
.titlu-lista-nota {
  font-family: var(--font-cifre); letter-spacing: 0; text-transform: none; font-size: 12px;
}
.titlu-lista-at { color: var(--warn); }
.titlu-lista-ok { color: var(--ok); }

/* --- extrasul de cont --------------------------------------------------
   Un rand = o miscare din registru. Randurile legate de o cheltuiala sunt
   linkuri; restul, doar text. Aceeasi forma pentru amandoua. */
.lista-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin: 0 var(--pad-x);
}
.mis {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none;
}
.mis:last-child { border-bottom: 0; }
a.mis:hover { background: var(--panel-hi); }
.mis-ico {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center; background: var(--fill); color: var(--txt-2);
}
.mis-plus { background: var(--ok-bg); color: var(--ok); }
.mis-retur, .mis-tranzit-ico { background: var(--info-bg); color: var(--info); }
.mis-corectie { background: var(--warn-bg); color: var(--warn); }
.mis-inchis { background: var(--ok-bg); color: var(--ok); }
.mis-mij { flex: 1; min-width: 0; }
.mis-t {
  font-size: 14.5px; font-weight: 590; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mis-s {
  font-size: 12px; color: var(--txt-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mis-dr { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mis-anulata { opacity: .62; }
.mis-anulata .bani { text-decoration: line-through; }
.mis-anulata-text { color: var(--off); font-weight: 620; }
.mis-tranzit-text { color: var(--info); font-weight: 620; }
.mis-tranzit { background: var(--info-bg); }

.bani {
  font-family: var(--font-cifre); font-size: 15px; font-weight: 640;
  font-variant-numeric: tabular-nums; letter-spacing: -.012em; white-space: nowrap;
}
.bani-plus { color: var(--ok); }
.bani-taiat { color: var(--txt-3); text-decoration: line-through; }

/* --- starea unei cheltuieli, sub titlu -------------------------------- */
.stare-rand {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 var(--pad-x) 10px;
}
.stare-motiv { font-size: 13px; color: var(--txt-2); line-height: 1.5; }
.stare-la-decizie { color: var(--warn); font-weight: 620; }
.stare-aprobata, .stare-platita { color: var(--ok); font-weight: 620; }
.stare-respinsa, .stare-anulata { color: var(--off); font-weight: 620; }

/* --- bonul ------------------------------------------------------------- */
.bon-zona { display: flex; gap: 14px; align-items: center; }
.bon-zona.bon-lipsa { display: block; }
.bon-poza {
  width: 118px; height: 150px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center;
}
.bon-poza img { width: 100%; height: 100%; object-fit: cover; }
.bon-pdf { display: grid; place-items: center; gap: 4px; color: var(--txt-2); font-size: 12px; font-weight: 620; }
.bon-meta { font-size: 12.5px; color: var(--txt-2); line-height: 1.8; }
.bon-meta b { display: block; color: var(--txt); font-size: 14px; }
.bon-gol {
  text-align: center; padding: 22px 14px;
  border: 1px dashed var(--warn-bd); background: var(--warn-bg); border-radius: var(--r);
  color: var(--warn);
}
.bon-gol-t { font-size: 14.5px; font-weight: 660; margin-top: 8px; color: var(--txt); }
.bon-gol-s { font-size: 12.5px; color: var(--txt-2); margin: 5px auto 12px; max-width: 46ch; line-height: 1.55; }

/* --- firul cronologic --------------------------------------------------- */
.fir { padding: 2px 2px 0; }
.fir-rand { display: flex; gap: 12px; padding: 9px 0; position: relative; font-size: 13.5px; }
.fir-rand::before {
  content: ''; position: absolute; left: 5px; top: 22px; bottom: -2px;
  width: 1.5px; background: var(--line);
}
.fir-rand:last-child::before { display: none; }
.fir-pct {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 3px;
  background: transparent; box-shadow: 0 0 0 1.5px var(--txt-3);
}
.fir-rand.este-facut .fir-pct { background: var(--ok); box-shadow: 0 0 0 1.5px var(--ok); }
.fir-rand.este-atentie .fir-pct { background: var(--warn); box-shadow: 0 0 0 1.5px var(--warn); }
.fir-rand div { line-height: 1.45; }
.fir-rand i { display: block; font-style: normal; font-size: 12px; color: var(--txt-3); margin-top: 2px; }

/* --- perechi cheie/valoare ---------------------------------------------- */
.perechi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; font-size: 13.5px; }
.perechi dt { color: var(--txt-3); }
.perechi dd { text-align: right; font-weight: 560; }

.card-ingust { max-width: 56ch; }
.actiuni-final { margin-top: 14px; }
.subtitlu-card { margin: -4px 0 12px; }

/* --- butonul flotant ----------------------------------------------------
   Apare doar pe telefon: pe desktop, „Bon nou" e in capul paginii, unde se
   uita omul oricum. Pe telefon, degetul mare ajunge in coltul de jos. */
.fab { display: none; }

/* ---------------------------------------------------------------- 26. shell de telefon

   Sub 700px, navigarea trece intr-o bara de jos cu trei destinatii, ca in
   macheta A. Bara ramane INTUNECATA in ambele teme, ca bara laterala de pe
   desktop — e aceeasi ancora vizuala, doar mutata.
   ---------------------------------------------------------------- */

@media (max-width: 700px) {
  .sold-card { margin: 0 var(--pad-x) 6px; border-radius: 18px; }
  .sold-val { font-size: 36px; }
  .lista-card, .titlu-lista { margin-left: var(--pad-x); margin-right: var(--pad-x); }
  .bon-zona { flex-direction: column; align-items: stretch; }
  .bon-poza { width: 100%; height: 210px; }
  .perechi { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .perechi dd { text-align: left; margin-bottom: 8px; }

  /* Butonul flotant, deasupra barei de jos. */
  .fab {
    position: fixed; right: 16px; z-index: 40;
    bottom: calc(var(--h-taburi) + 8px + env(safe-area-inset-bottom, 0px));
    transition: bottom .22s cubic-bezier(.2,.8,.3,1);
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--brand); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(172,46,49,.42);
  }

  /* Pe ecranele de decont, bara de sus se strange: soldul e ancora, nu meniul. */
  body[data-vedere="portofel"] .bara-navigare,
  body[data-vedere="deconturi"] .bara-navigare,
  body[data-vedere="cheltuiala"] .bara-navigare,
  body[data-vedere="avans"] .bara-navigare { display: none; }

  /* Loc pentru bara de jos, ca ultimul rand sa nu stea sub ea.

     ⚠️ Aici era o lista de ecrane care trebuia sa fie ACEEASI cu $__eDecont din
     layout.php. Iesise deja din pas o data — lipseau `aprobari` si
     `decont-luna`, deci bara statea peste ultimul rand din coada de aprobat.
     De cand bara e pe toate ecranele, regula e neconditionata si nu mai exista
     nicio lista de tinut in pas. Ecranele fara bara (login, parola, instalare)
     n-au `.zona` cu continut sub ea, deci un pic de aer in plus nu strica. */
  .zona {
    padding-bottom: calc(var(--h-taburi) + env(safe-area-inset-bottom, 0px));
  }
}

.tabs-jos { display: none; }

@media (max-width: 700px) {
  .tabs-jos {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--side); border-top: 1px solid var(--side-line);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  .tab-jos {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--side-txt-3); font-size: 10px; font-weight: 650; text-decoration: none;
    position: relative; padding: 2px 0;
  }
  .tab-jos svg { width: 22px; height: 22px; flex: none; }
  .tab-jos.este-activ { color: var(--side-brand-lt); }
  .tab-jos .pastila { position: absolute; top: -2px; right: 22%; }

  /* Eticheta are voie sa treaca pe doua randuri, dar ICONURILE raman aliniate:
     `.tab-jos` se intinde pe toata inaltimea barei si isi aseaza continutul de
     sus in jos, deci un rand in plus creste in jos, nu impinge iconul. */
  .tab-text { line-height: 1.15; text-align: center; max-width: 100%; }

  /* Cu cinci taburi (manager si financiar) fiecare primeste ~75px pe un telefon
     de 375px, iar „Situatia mea" cere ~62px la 10px: intra, dar fara aer.
     Angajatii au patru taburi si nu ating regula asta. */
  .tabs-jos.cinci .tab-jos { font-size: 9.5px; }
}

/* Telefoanele mici (320-380px): cinci taburi inseamna ~64px fiecare, iar acolo
   „Situatia mea" chiar s-ar rupe in doua randuri. Se strange, nu se scurteaza —
   o eticheta prescurtata in bara si scrisa altfel in meniul lateral ar fi doua
   nume pentru acelasi ecran. */
@media (max-width: 380px) {
  .tabs-jos.cinci .tab-jos { font-size: 9px; letter-spacing: -.1px; }
}

@media (max-width: 700px) {
  /* Pe ecranele de decont, butonul flotant E actiunea principala. Cel din capul
     paginii ar fi al doilea buton pentru acelasi lucru, la doua degete distanta. */
  body[data-vedere="portofel"] .cap-pagina .actiuni,
  body[data-vedere="deconturi"] .cap-pagina .actiuni { display: none; }

  /* Banda de stare vorbeste despre COMISIOANE — fereastra de depunere, cursul
     BNR, SmartBill. Pe ecranele de decont nu spune nimic despre ce se vede, si
     in schimb sta exact sub butonul flotant. */
  body[data-vedere="portofel"] .picior,
  body[data-vedere="deconturi"] .picior,
  body[data-vedere="cheltuiala"] .picior,
  body[data-vedere="avans"] .picior { display: none; }
}

@media (max-width: 700px) {
  /* `.campuri` e o grila care se auto-potriveste de la 150px. Pe un ecran de
     375px asta inseamna doua coloane de ~165px: un <select> cu „Din avans —
     sold 439,80 lei" se taie la „sold 4". Pe telefon, un camp pe rand. */
  .campuri { grid-template-columns: minmax(0, 1fr); }
  .campuri .grid, .campuri .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }

  /* Butonul „Înapoi" din capul paginilor de decont: bara de jos face oricum
     navigarea, deci nu are nevoie de toata latimea. */
  body[data-vedere="cheltuiala"] .cap-pagina .actiuni,
  body[data-vedere="avans"] .cap-pagina .actiuni { width: auto; }
  body[data-vedere="cheltuiala"] .cap-pagina .actiuni > .buton,
  body[data-vedere="avans"] .cap-pagina .actiuni > .buton { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  /* În listele grupate pe stare, insigna repetă titlul grupei („ÎN APROBARE"
     → „Așteaptă decizia") și fură din lățime exact titlul cheltuielii, care
     e singurul lucru după care omul o recunoaște. Pe telefon rămâne grupa. */
  body[data-vedere="deconturi"] .mis-dr .insigna { display: none; }
}

/* ---------------------------------------------------------------- 27. coada de decizii

   Un card = o cerere. Bonul se vede LA DIMENSIUNE UTILA, nu ca miniatura: un
   click in plus inseamna, in practica, o aprobare pe incredere.
   ---------------------------------------------------------------- */

.card-decizie { padding: 0; overflow: hidden; }
.card-decizie.este-escaladat { border-color: var(--warn-bd); }
.card-decizie.este-escaladat::before {
  content: ''; display: block; height: 3px; background: var(--warn);
}
.decizie-corp { display: flex; gap: 0; align-items: stretch; }
.decizie-bon {
  width: 190px; flex: none; position: relative; background: var(--panel-2);
  border-right: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
}
.decizie-bon img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }
.decizie-bon-lupa {
  position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 11px; font-weight: 620; padding: 3px 9px; border-radius: 8px;
}
.decizie-bon-lipsa {
  display: grid; place-items: center; gap: 6px; color: var(--warn);
  background: var(--warn-bg); font-size: 12.5px; font-weight: 620; min-height: 150px;
}
.decizie-date { flex: 1; min-width: 0; padding: var(--card-pad); }
.card-decizie > .decizie-cap,
.card-decizie > .decizie-nota,
.card-decizie > .actiuni { padding-left: var(--card-pad); padding-right: var(--card-pad); }
.card-decizie > .decizie-cap { padding-top: var(--card-pad); }
.card-decizie > .actiuni { padding-bottom: var(--card-pad); }
.decizie-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.decizie-t { font-size: 17px; font-weight: 670; letter-spacing: -.018em; line-height: 1.25; }
.decizie-s { font-size: 12.5px; color: var(--txt-2); margin-top: 5px; line-height: 1.5; }
.decizie-suma {
  font-size: 19px; font-weight: 660; white-space: nowrap; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.decizie-motiv, .decizie-nota {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 11px;
  font-size: 12.5px; line-height: 1.5; border-radius: var(--r-ctl); padding: 8px 10px;
}
.decizie-motiv { background: var(--fill); color: var(--txt-2); }
.decizie-nota { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--txt); }
.decizie-motiv svg, .decizie-nota svg { flex: none; margin-top: 2px; }
.decizie-nota svg { color: var(--warn); }

@media (max-width: 700px) {
  /* Bonul trece deasupra: pe telefon, o coloana de 190px ar lasa titlului
     jumatate de ecran, iar suma ar cadea pe doua randuri. */
  .decizie-corp { flex-direction: column; }
  .decizie-bon { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .decizie-bon img { min-height: 0; max-height: 260px; }
  .decizie-cap { flex-direction: column; gap: 6px; }
  .decizie-suma { font-size: 22px; }
}

/* --- alerta „avans aprobat, treci sa ridici banii" ---------------------
   Verde, nu rosu de brand si nu chihlimbar: nu e o problema si nu e o
   asteptare — e o veste buna cu o actiune la capat. */
.alerta-avans {
  margin: 0 var(--pad-x) 10px; padding: 14px var(--card-pad);
  background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}
.alerta-avans-cap { display: flex; gap: 12px; align-items: flex-start; }
.alerta-avans-ico { color: var(--ok); flex: none; margin-top: 1px; }
.alerta-avans-t { font-size: 15.5px; font-weight: 670; letter-spacing: -.012em; }
.alerta-avans-s { font-size: 12.5px; color: var(--txt-2); line-height: 1.55; margin-top: 4px; }
.alerta-avans .buton { width: 100%; padding: 11px 0; font-size: 14.5px; }

/* --- grup de om, in decontul lunar ------------------------------------- */
.grup-om + .grup-om { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.grup-om-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.grup-om-nume { font-size: 15px; font-weight: 660; letter-spacing: -.012em; }
.grup-om-meta { font-size: 12px; color: var(--txt-3); margin-top: 2px; }
.grup-om-total { font-size: 17px; font-weight: 660; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- abonarea la notificari -------------------------------------------- */
.card-push { margin-top: 14px; }
.push-stare { font-size: 12.5px; line-height: 1.55; margin-bottom: 10px; color: var(--txt-2); }
.push-stare:empty { display: none; }
.push-stare.este-ok { color: var(--ok); }
.push-stare.este-atentie { color: var(--warn); }
.push-stare.este-stins { color: var(--txt-3); }

/* ---------------------------------------------------------------- 28. senzatia de aplicatie

   Pe telefon, diferenta dintre „un site" si „o aplicatie" e facuta de patru
   lucruri marunte, toate suparatoare cand lipsesc: pagina care sare cand tragi
   de ea, dreptunghiul gri la fiecare atingere, textul selectat din greseala
   cand tii degetul apasat, si zoom-ul pornit accidental cu doua degete.
   ---------------------------------------------------------------- */

html {
  /* Fara elasticitate la capete: pe iOS, „bounce"-ul face pagina sa sara si sa
     arate fundalul de sub ea — exact senzatia de pagina web intr-un browser. */
  overscroll-behavior: none;
  /* Textul nu se mareste singur cand telefonul se roteste. */
  -webkit-text-size-adjust: 100%;
}

body {
  overscroll-behavior: none;
  /* Dreptunghiul gri de la fiecare atingere: pe iOS arata a link de pagina web. */
  -webkit-tap-highlight-color: transparent;
}

/* Fara intarzierea de 300ms si fara zoom la dublu-tap pe elementele de comanda. */
a, button, .buton, .tab-jos, .nav-link, .mis, .fab, select, label, summary {
  touch-action: manipulation;
}

/* ⚠️ Selectia de text se opreste doar pe CHENAR — nu si pe continut.
   Butoanele, etichetele si navigarea nu au ce fi selectate, si cand se
   selecteaza din greseala (deget tinut apasat) arata a accident.
   Sumele, codurile de factura si IBAN-ul RAMAN selectabile: oamenii le copiaza
   ca sa le caute in SmartBill sau in extrasul de banca. */
.bara, .tabs-jos, .buton, .nav-link, .tab-jos, .cap-pagina h1, .card-cap,
.titlu-lista, .sold-et, .cifra-eticheta, .insigna, .picior {
  -webkit-user-select: none; user-select: none;
}
.mono, .cod, .bani, .numar, .sold-val, .cifra-valoare, .decizie-suma,
.coduri-v, .perechi dd, .diag-detalii dd, code {
  -webkit-user-select: text; user-select: text;
}

@media (max-width: 700px) {
  /* Capul intunecat intra sub bara de stare a telefonului, cu marginea de
     siguranta luata din sistem — altfel ora si bateria stau peste continut. */
  .bara { padding-top: env(safe-area-inset-top, 0px); }

  /* Campurile de sub 16px fac iOS sa MAREASCA pagina cand intri in ele, iar la
     iesire ramane marita si strambata. 16px e pragul; sub el, zoom automat. */
  input, select, textarea { font-size: 16px; }

  /* Modalele: pe telefon urca de jos, ca o foaie, si respecta marginea de jos. */
  .modal-fond { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: none; border-radius: 18px 18px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;
  }
  .modal-picior { flex-direction: column-reverse; gap: 8px; }
  .modal-picior .buton { width: 100%; padding: 13px 0; font-size: 15.5px; }
}

/* ---------------------------------------------------------------- 29. lupa pe bon

   ⚠️ Exista fiindca am oprit zoom-ul paginii (§28). Un bon fiscal are text de
   3 milimetri; fara o cale de a-l mari, cine aproba se uita la o poza si
   ghiceste. Inainte, bonul se deschidea intr-o fila noua — ceea ce, in
   aplicatia adaugata pe ecranul principal, arunca omul in Safari si il face sa
   piarda drumul inapoi.
   ---------------------------------------------------------------- */

.lupa {
  position: fixed; inset: 0; z-index: 90; background: #0A0A0C;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lupa-bara {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; color: #EBEBF0; flex: none;
}
.lupa-t { font-size: 13.5px; font-weight: 620; min-width: 0;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lupa-bara button {
  background: rgba(235,235,245,.14); border: 1px solid rgba(235,235,245,.2);
  color: #EBEBF0; border-radius: 980px; padding: 7px 13px; font: inherit;
  font-size: 13px; font-weight: 620; cursor: pointer; flex: none;
}
.lupa-bara button:hover { background: rgba(235,235,245,.22); }

/* Containerul se deruleaza; imaginea creste peste el cand e marita, iar
   deplasarea se face cu degetul, ca la orice lista. Fara matematica de gesturi. */
.lupa-cadru {
  flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center;
  -webkit-overflow-scrolling: touch;
}
.lupa-cadru img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
  transition: none; cursor: zoom-in;
}
.lupa-cadru.este-marit { place-items: start; }
.lupa-cadru.este-marit img {
  max-width: none; max-height: none; width: 260%; cursor: zoom-out;
}
.lupa-nota {
  flex: none; text-align: center; color: rgba(235,235,245,.44);
  font-size: 11.5px; padding: 8px 14px 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .lupa { animation: lupa-intra .16s ease-out; }
  @keyframes lupa-intra { from { opacity: 0; } to { opacity: 1; } }
}

/* --- taburi de filtrare -------------------------------------------------
   Filtreaza randuri deja randate. Cifrele de pe ele vin insa de pe server,
   deci nu pot minti chiar daca filtrul e local. */
.taburi {
  display: flex; gap: 7px; padding: 0 var(--pad-x) 12px;
  overflow-x: auto; scrollbar-width: none;
}
.taburi::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--txt-2);
}
.tab:hover { background: var(--panel-hi); color: var(--txt); }
.tab.este-activ { background: var(--brand); border-color: var(--brand-2); color: #fff; }
.tab-n {
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  background: var(--fill); border-radius: var(--r-pill); padding: 0 6px;
}
.tab.este-activ .tab-n { background: rgba(255,255,255,.22); }

/* --- capul ecranului de Acasa ------------------------------------------ */
.salut { padding: 16px var(--pad-x) 4px; }
.salut h1 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.salut-s { font-size: 12.5px; color: var(--txt-3); margin-top: 2px; }
.salut-s b { color: var(--txt-2); font-weight: 620; }

/* ⚠️ Antetul de Acasa duce si navigatorul de luna cu butonul — erau pe al
   doilea antet, care s-a scos. Se infasoara pe telefon, unde nu incap alaturi. */
.salut-cu-actiuni {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.salut-cu-actiuni .actiuni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.unde-stau { margin-top: 18px; }
.card-linistit { text-align: center; }
.mis-ico.este-ok      { background: var(--ok-bg);   color: var(--ok); }
.mis-ico.este-atentie { background: var(--warn-bg); color: var(--warn); }
.mis-ico.este-stins   { background: var(--off-bg);  color: var(--off); }

/* --- bara „versiune nouă" ----------------------------------------------
   Aceeasi materie ca bara laterala si ca taburile de jos: intunecata in
   amandoua temele. E o instiintare a aplicatiei despre ea insasi, nu un
   continut al ecranului — daca ar urma tema zonei de lucru, s-ar citi ca
   inca un card printre celelalte.

   ⚠️ Nu foloseste rosul de brand ca fundal: rosul e rezervat identitatii si
   actiunii principale. Aici accentul e pe buton, restul sta linistit. Si nu e
   nici galben, nici rosu de eroare — nu s-a stricat nimic, doar exista ceva
   mai nou.
------------------------------------------------------------------------- */

.versiune-noua {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--side); border: 1px solid var(--side-line);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  /* Starea de plecare: coborata si transparenta. Clasa `este-vizibila` o aduce. */
  opacity: 0; transform: translateY(14px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.versiune-noua.este-vizibila { opacity: 1; transform: none; }

/* Desktop: nu ocupa toata latimea — nu e o alerta de sistem, e o notita. */
@media (min-width: 701px) {
  .versiune-noua { left: auto; right: 22px; bottom: 22px; max-width: 380px; }
}

/* Telefon: deasupra barei de taburi, nu peste ea.

   ⚠️ Bara e FIXATA, deci acopera orice se afla dedesubt. Doua lucruri trebuie
   sa se dea la o parte cat timp e pe ecran, si amandoua au fost gasite abia la
   o revizie, nu la testare:

   1. Butonul flotant „Adaugă un bon" de pe portofel — pe telefon e SINGURA cale
      de a incepe o cheltuiala („Bon nou" din capul paginii e ascuns sub 700px),
      deci acoperit inseamna om cu bonul in mana si fara buton.
   2. Ultimul rand al paginii pe ecranele de decont. Pe o cheltuiala noua, ala e
      chiar randul „Salvez ciorna / Trimit" — si nu exista derulare cu care sa
      fie urcat, fiindca e capatul paginii.

   Clasa `are-versiune-noua` o pune app.js cand arata bara si o scoate cand omul
   apasa „mai tarziu". */
@media (max-width: 700px) {
  .versiune-noua {
    bottom: calc(var(--h-taburi) + 2px + env(safe-area-inset-bottom, 0px));
  }

  body.are-versiune-noua .fab {
    bottom: calc(var(--h-taburi) + var(--h-versiune) + var(--aer-jos)
                 + env(safe-area-inset-bottom, 0px));
  }

  body.are-versiune-noua .zona {
    /* ⚠️ Bara incepe la `--h-taburi + 2px` si e inalta de `--h-versiune`, deci
       capatul continutului trebuie sa fie DEASUPRA lui `76+2+74 = 152px`.
       Fara `--aer-jos`, iese fix 150px si ultimul rand ramane sub muchie. */
    padding-bottom: calc(var(--h-taburi) + var(--h-versiune) + var(--aer-jos)
                         + env(safe-area-inset-bottom, 0px));
  }
}

.vn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vn-text b { color: var(--side-txt); font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.vn-text span {
  color: var(--side-txt-3); font-size: 11.5px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vn-reincarca {
  flex: 0 0 auto;
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.vn-reincarca:hover:not(:disabled) { background: var(--brand-h, var(--brand)); }
.vn-reincarca:disabled { opacity: .6; }

.vn-inchide {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--side-txt-3); font-size: 13px; line-height: 1;
}
.vn-inchide:hover { background: rgba(235,235,245,.08); color: var(--side-txt); }
.vn-inchide:focus-visible, .vn-reincarca:focus-visible {
  outline: 2px solid var(--side-brand-lt); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .versiune-noua { transition: none; opacity: 1; transform: none; }
}

/* --- „Caută factura în SmartBill" --------------------------------------
   Rândul de sub seria/numărul facturii, plus panoul cu ce s-a găsit.
------------------------------------------------------------------------- */

.factura-cauta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}

#rezultat-factura { margin-top: 10px; }

.factura-gasita { display: block; }

.factura-cifre {
  margin-top: 8px;
  display: grid; gap: 2px;
}
.factura-cifre > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.fc-et  { color: var(--txt-2); font-size: 12.5px; }
.fc-val { font-weight: 650; font-size: 14px; }

@media (max-width: 700px) {
  .factura-cauta { gap: 6px; }
  /* Pe telefon, explicatia trece sub buton — altfel butonul se strange
     la doua cuvinte pe rand. */
  .factura-cauta .camp-ajutor { flex: 1 1 100%; }
}

/* --- pașii formularului de comision -------------------------------------
   Doi pași: „ce factură" și „restul detaliilor". Al doilea stă stins până
   când s-a găsit factura sau omul a ales să completeze de mână.

   Nu e un wizard cu pagini: câmpurile pasului 2 apar dedesubt, în aceeași
   pagină. Un formular de bani nu are voie să ascundă ce ai completat deja
   după un „Înainte".
------------------------------------------------------------------------- */

.pas {
  display: flex; align-items: center; gap: 9px;
  margin: 20px 0 10px;
  color: var(--txt-2); font-size: 12px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
}
.pas .n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.pas .l { flex: 1; height: 1px; background: var(--linie); }

/* Stins = încă nu e rândul lui. Rămâne lizibil, ca omul să vadă ce urmează. */
.pas.stins { color: var(--txt-3); }
.pas.stins .n { background: var(--off-bg); color: var(--txt-3); }

/* Primul pas nu are nevoie de spațiu deasupra: e imediat sub titlul cardului. */
.pas[data-pas="1"] { margin-top: 4px; }

/* --- registrul financiarului --------------------------------------------
   Un rând de filtre deasupra, file, cifre, tabel. Ecranul merge fără
   JavaScript: filtrele sunt un formular GET, filele sunt legături.
------------------------------------------------------------------------- */

.reg-filtre { padding: var(--card-pad); }

.reg-campuri {
  display: grid; gap: 10px 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.reg-campuri .camp { margin: 0; }
.reg-cauta { grid-column: span 2; }
.reg-butoane { display: flex; gap: 8px; align-items: center; }

.reg-paginare {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 12px var(--card-pad) 0;
  border-top: 1px solid var(--linie);
  margin-top: 4px;
}
.reg-pagini { display: flex; gap: 10px; align-items: center; }

@media (max-width: 700px) {
  /* Pe telefon, filtrele nu mai stau pe coloane: unul sub altul se citește,
     două pe rând se strâng până devin de neapăsat. */
  .reg-campuri { grid-template-columns: minmax(0, 1fr); }
  .reg-cauta { grid-column: span 1; }
  .reg-paginare { justify-content: center; text-align: center; }
}

/* --- „Adu denumirea" din CUI --------------------------------------------
   Câmpul de CUI și butonul, pe același rând. Pe telefon, butonul trece dedesubt
   pe toată lățimea — altfel se strânge la două cuvinte pe rând.
------------------------------------------------------------------------- */

.cui-cauta { display: flex; gap: 8px; align-items: stretch; }
.cui-cauta input { flex: 1 1 auto; min-width: 0; }
.cui-cauta .buton { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 480px) {
  .cui-cauta { flex-wrap: wrap; }
  .cui-cauta .buton { flex: 1 1 100%; justify-content: center; }
}

/* --- navigatorul de lună ------------------------------------------------
   Săgeată, luna, săgeată. A înlocuit un <select> cu 14 opțiuni: pe telefon
   acela deschidea o roată de sistem peste tot ecranul pentru o mișcare care
   aproape mereu e „o lună înapoi".

   Săgeata de la capăt rămâne pe ecran, stinsă. Una care ar dispărea face bara
   să sară și te lasă să te întrebi dacă ai apăsat greșit.
------------------------------------------------------------------------- */

.luna-navig {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--card-2, var(--fundal)); border: 1px solid var(--linie);
  border-radius: 10px; padding: 2px;
}

.luna-sageata {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--txt); text-decoration: none;
  transition: background .12s ease;
}
.luna-sageata:hover { background: var(--linie); }
.luna-sageata.este-stins { color: var(--txt-3); cursor: default; }
.luna-sageata.este-stins:hover { background: none; }
.luna-sageata:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.luna-acum {
  min-width: 11ch; padding: 0 6px; text-align: center;
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap;
}

/* „azi" apare doar când te-ai plimbat de la luna curentă. */
.luna-azi {
  padding: 0 9px; height: 32px; display: grid; place-items: center;
  border-radius: 8px; text-decoration: none;
  color: var(--brand); font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
}
.luna-azi:hover { background: var(--linie); }

@media (max-width: 480px) {
  /* Degetul are nevoie de 44px, iar pe telefon navigatorul e des folosit. */
  .luna-sageata, .luna-azi { width: 40px; height: 40px; }
  .luna-azi { width: auto; padding: 0 12px; }
  .luna-acum { font-size: 14px; }
}

/* ================================================================ 20. salarizare
   Ecranul de reconciliere: lista scurta in stanga, formula in dreapta.
   Direcția aleasa de Adrian pe 13 august (macheta C), cu o hotarare explicita:
   ⚠️ NU se proiecteaza pentru telefon. Salarizarea se face pe laptop. Sub
   1000px ecranul spune „Deschide pe laptop" in loc sa arate un tabel strambat
   — o interfata care se preface ca merge e mai rea decat una care spune ca nu.
   ================================================================ */
/* ============================================================
   12. ECRANUL DE SALARIZARE — două panouri
   ============================================================ */

.sal-grila {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
}

/* --- panoul din stânga: lista scurtă --------------------------------
   Nume și TOTAL CASH. Atât. Cele șase coloane NU apar aici — nici pe
   desktop, unde ar încăpea: dacă lista ar arăta șase cifre, ochiul ar
   încerca să le adune singur, iar la 101 rânduri ar renunța. */
.sal-lista { padding: 0; overflow: hidden; }
/* Cardul are padding 0, deci capul nu mai trebuie tras afară cu margini negative. */
.sal-lista > .card-cap { margin: 0; border-radius: 0; }
.sal-unelte {
  padding: 10px var(--card-pad); border-bottom: 1px solid var(--line); background: var(--panel);
}
.sal-cauta {
  width: 100%; font-family: var(--font); font-size: 12.5px; color: var(--txt);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 7px 10px; margin-bottom: 8px;
}
.sal-cauta::placeholder { color: var(--txt-3); }

.om-rand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--card-pad); border-bottom: 1px solid var(--line-soft);
  color: inherit; text-decoration: none; min-width: 0;
}
.om-rand:last-child { border-bottom: 0; }
.om-rand:hover { background: var(--panel-hi); text-decoration: none; }
.om-p { flex: 1; min-width: 0; display: block; }
.om-nume {
  display: block; font-size: 12.5px; font-weight: 560; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.om-cod { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 1px; }
.om-total {
  flex: none; font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 620; letter-spacing: -.012em; white-space: nowrap;
}
.om-sageata { flex: none; color: var(--txt-3); }
.om-rand.este-ales {
  background: linear-gradient(90deg, rgba(172,46,49,.16), rgba(172,46,49,.02));
  box-shadow: inset 2px 0 0 var(--brand);
}
.om-rand.este-ales .om-nume { font-weight: 680; }
.om-rand.este-ales .om-sageata { color: var(--brand-lt); }

/* Semnul pentru cine are ceva nelămurit: culoare + FORMĂ (triunghi), ca să
   se vadă și fără culoare, și un „—" în locul sumei — nu un zero. Un zero
   ar fi o afirmație („nu primește nimic"), iar aici nu se știe încă. */
.om-rand.este-atentie { box-shadow: inset 2px 0 0 var(--warn); }
.om-rand.este-atentie.este-ales { box-shadow: inset 2px 0 0 var(--warn); }
.om-semn { flex: none; color: var(--warn); line-height: 0; }
.om-semn svg { width: 14px; height: 14px; }
.om-total.este-lipsa { color: var(--warn); font-weight: 700; }
.om-lipsa-text { display: block; font-size: 10.5px; color: var(--warn); margin-top: 1px; }

.sal-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px var(--card-pad); background: var(--panel-2); border-top: 1px solid var(--line);
}
.sal-total-et { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.sal-total-val {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 680; letter-spacing: -.02em;
}

/* --- panoul din dreapta: fișa omului -------------------------------- */
.fisa { position: sticky; top: 12px; padding: 0; overflow: hidden; }
.fisa-cap {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px var(--card-pad); border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.fisa-nume { font-size: 17px; font-weight: 680; letter-spacing: -.018em; }
.fisa-meta { font-size: 11.5px; color: var(--txt-2); margin-top: 4px; line-height: 1.7; }
.fisa-meta .cod { color: var(--txt); font-size: 11px; }
.fisa-corp { padding: var(--card-pad); }

/* Registrul: șase termeni, unul sub altul. Pe verticală încap oricând —
   asta e tot răspunsul la „șase coloane pe 390px". */
.reg { display: block; }
.reg-rand {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.reg-rand:first-child { padding-top: 2px; }
.reg-semn {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; line-height: 1;
  background: var(--fill); color: var(--txt-3);
}
.reg-plus  { background: var(--ok-bg);  color: var(--ok); }
.reg-minus { background: var(--off-bg); color: var(--off); }
.reg-baza  { background: var(--panel-hi); color: var(--txt-2); font-size: 11px; }
.reg-mij { flex: 1; min-width: 0; display: block; }
.reg-et { display: block; font-size: 13px; font-weight: 620; letter-spacing: -.005em; }
.reg-sursa { display: block; font-size: 11.5px; color: var(--txt-3); margin-top: 2px; line-height: 1.5; }
.reg-sursa .cod { color: var(--txt-2); font-size: 11px; }
.reg-suma {
  flex: none; text-align: right;
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 620; letter-spacing: -.015em; white-space: nowrap;
}
.reg-suma.zero { color: var(--txt-3); font-weight: 500; }
.reg-suma small { display: block; font-size: 10px; font-weight: 500; color: var(--txt-3); letter-spacing: .06em; }

/* Fiecare cifră duce înapoi la sursa ei. <details> = zero JavaScript. */
.duce-la { margin-top: 6px; }
.duce-la > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; color: var(--brand-lt);
}
.duce-la > summary::-webkit-details-marker { display: none; }
.duce-la > summary::before {
  content: "▸"; color: var(--txt-3); transition: transform .12s; display: inline-block;
}
.duce-la[open] > summary::before { transform: rotate(90deg); }
.duce-la > summary:hover { text-decoration: underline; }
.sursa-cutie {
  margin-top: 7px; padding: 9px 11px; border-radius: var(--r-ctl);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--txt-2); line-height: 1.6;
}
.sursa-rand {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 3px 0;
}
.sursa-rand + .sursa-rand { border-top: 1px solid var(--line-soft); }
.sursa-rand .cod { font-size: 11px; color: var(--txt-3); }
.sursa-rand b { font-family: var(--font-cifre); font-variant-numeric: tabular-nums; font-weight: 620; color: var(--txt); }
.sursa-nota { color: var(--txt-3); font-size: 11px; margin-top: 6px; }
/* Folosită din 1.29 în fișă („versiune închisă", „Nimic pe luna asta"), dar
   nedefinită până în 1.53 — textul secundar ieșea la fel de tare ca cifra. */
.stins3 { color: var(--txt-3); }
.sursa-titlu {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); margin: 0 0 2px;
}
.sursa-titlu + .sursa-rand { border-top: 0; }
.sursa-sep { height: 1px; background: var(--line); margin: 8px 0; }

/* Comisioane aprobate care stau pe niciun stat: semn pe rândul omului, ca un
   0,00 să nu mai pară „n-a câștigat nimic". Culoare + iconiță (forma). */
.reg-astept {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--warn);
}
.reg-astept svg { width: 13px; height: 13px; flex: none; }

/* --- închiderea: fiecare blocaj spune unde se rezolvă --------------- */
.blocaje { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: blocaj; }
.blocaj {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.blocaj:first-child { padding-top: 2px; }
.blocaj-nr {
  counter-increment: blocaj; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: var(--warn-bg); color: var(--warn);
}
.blocaj-nr::before { content: counter(blocaj); }
.blocaj-et { font-size: 13px; font-weight: 640; }
.blocaj-suma {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 620; white-space: nowrap; text-align: right;
}
.blocaj-cum { grid-column: 2 / -1; font-size: 12px; color: var(--txt-2); line-height: 1.55; }
.blocaj-cum b { color: var(--txt); font-weight: 600; }
.cum-et {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); margin-right: 6px;
}
.blocaj > .actiuni { grid-column: 2 / -1; margin-top: 6px; }
.mini {
  grid-column: 2 / -1; margin: 6px 0 0; padding: 4px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--r-ctl); background: var(--panel-2);
  font-size: 11.5px; list-style: none;
}
.mini-rand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.mini-rand + .mini-rand { border-top: 1px solid var(--line-soft); }
.mini-rand > span { color: var(--txt-2); min-width: 0; }
.mini-rand b { font-family: var(--font-cifre); font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap; }
/* Utilizatori: căutarea și filtrele, deasupra tabelului (1.54.1). */
.u-unelte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.u-unelte .sal-cauta { flex: 1 1 280px; margin: 0; }
.u-unelte .taburi { flex: none; }
/* ⚠️ Un rând ascuns de filtru rămâne ascuns orice ar spune alte reguli despre
   `display` pe rânduri (vederea pe telefon le face carduri). */
.tabel tr[hidden] { display: none; }

/* Stat de plată: „Mută pe august" și „Amână", unul sub altul, ca tabelul să
   nu iasă din ecran. */
.actiuni-linie { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* Numele omului din lista comisioanelor neatașate: text, nu sumă. */
.mini-rand b.mini-om { font-family: var(--font); font-variant-numeric: normal; font-weight: 600; color: var(--txt); white-space: normal; }
/* În bandă, lista stă sub text, cu aer, și nu întinde banda pe toată lățimea. */
.banda .lista-neatasate { margin-top: 8px; max-width: 760px; }
.nu-blocheaza {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-size: 12px; color: var(--txt-3);
}
.nu-blocheaza svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.nu-blocheaza b { color: var(--txt-2); font-weight: 600; }

.fisa-total {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px var(--card-pad); border-radius: var(--r);
  background: linear-gradient(150deg, var(--brand) 0%, #7E2126 100%); color: #fff;
}
.fisa-total-et { font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; opacity: .84; }
.fisa-total-sub { font-size: 11.5px; opacity: .84; margin-top: 3px; }
.fisa-total-val {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 640; letter-spacing: -.03em; line-height: 1;
}
.fisa-total-val small { font-size: 14px; opacity: .74; margin-left: 5px; font-weight: 500; }
.fisa-actiuni {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px var(--card-pad); border-top: 1px solid var(--line); background: var(--panel-2);
}

/* ⚠️ Sub 1000px nu se incearca o rearanjare — se spune limpede ca ecranul nu
   e pentru telefon. Sase termeni de bani plus nume nu incap onest pe 390px,
   iar o interfata care se preface ca merge il face pe om sa creada ca vede
   tot. Salarizarea se face pe laptop; comisioanele si deconturile raman
   perfect utilizabile de pe telefon. */
.sal-doar-laptop { display: none; }
@media (max-width: 1000px) {
  .sal-grila { display: none; }
  .sal-doar-laptop {
    display: block; text-align: center; padding: 40px 20px;
    color: var(--txt-2); font-size: 13px; line-height: 1.7;
  }
  .sal-doar-laptop b { display: block; color: var(--txt); font-size: 15px; margin-bottom: 6px; }
}

/* =====================================================================
   21. JURNALUL LUNII — firul, bulinele, si miscarea lor
   =====================================================================

   ⚠️ TREI MISCARI, fiecare cu o treaba anume. Nu sunt decor: daca vreuna
   nu poarta o informatie, se scoate.

     firul care curge   — „s-a mutat de acolo pana aici"
     inelul care se     — „e randul TAU" (chihlimbar, repede)
       desprinde          sau „astepti pe altcineva" (albastru, rar)
     retragerea         — „s-a intors" (o respingere)

   ⚠️ BULINA NU SE CLINTESTE cand pulseaza. Inelul se desprinde din marginea
   ei si se dilata in afara, iar miezul ramane pe loc. O bulina care isi
   schimba marimea la fiecare 2 secunde e greu de citit cu coada ochiului,
   si exact asta face omul care lucreaza in alta parte a ecranului.

   ⚠️ PULSUL ARE TIMP MORT. Inelul pleaca in prima jumatate a ciclului, iar
   restul e liniste. O respiratie continua, sinusoidala, devine tapet in
   cinci minute; una cu pauza ramane un semnal.

   ⚠️ Se animeaza DOAR `transform` si `opacity`. `height` sau `top` ar cere
   browserului sa recalculeze asezarea la fiecare cadru, pe un card care are
   dedesubt un tabel.
   ===================================================================== */

/* ⚠️ Bulina si firul stau in MARGINEA din stanga, deci la offset NEGATIV fata
   de rand: `.jr-ev` e `position: relative`, iar marginea lui din stanga e deja
   dupa `padding-left`. Cu `left: 0` bulinele cadeau fix peste primul caracter
   al titlului („ituatia depusa"), iar firul trecea prin text. Cele trei valori
   de mai jos sunt legate intre ele si se schimba impreuna:
     --jr-gol : cat de lat e culoarul din stanga
     --jr-x   : unde sta bulina (10px) in el
     firul    : 2px, centrat pe aceeasi axa cu bulina */
.jurnal {
  position: relative;
  --jr-gol: 28px;
  --jr-x: calc(-1 * var(--jr-gol) + 6px);   /* bulina: 6px..16px din culoar */
  padding-left: var(--jr-gol);
}

/* Bulina sta la 16px de marginea de sus a randului: cam prima linie de text.
   Valoarea traieste intr-un singur loc, fiindca si firul si inelul o folosesc. */
.jurnal { --jr-y: 16px; }

.jr-ev {
  position: relative;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.jr-ev:last-child { border-bottom: none; }

/* Firul: fiecare rand isi deseneaza bucata lui, deci nu exista aritmetica in
   pixeli si nici nu conteaza cat de inalt e un eveniment. */
.jr-ev::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  /* centrat pe axa bulinei: bulina are 10px, deci mijlocul ei e la --jr-x + 5 */
  left: calc(var(--jr-x) + 4px);
  width: 2px; border-radius: 2px;
}
.jr-ev:first-child::before { top: var(--jr-y); }
.jr-ev:last-child::before  { bottom: calc(100% - var(--jr-y)); }

/* ⚠️ Firul e VERDE pana la cap si GRI dupa el — nu se taie. Prima varianta il
   oprea fix in bulina-cap, ceea ce arata bine cat timp capul era si ultimul
   rand; cu un eveniment scris DUPA el (un bon aprobat a doua zi dupa o linie
   respinsa) ramanea o ruptura in mijlocul firului, care se citea ca un defect.
   Culoarea spune acelasi lucru fara sa rupa nimic. */
.jr-ev::before { background: var(--ok); }
.jr-ev.jr-cap ~ .jr-ev::before { background: var(--fill); }

/* Capul: verdele devine chihlimbar (e randul tau) sau albastru (astepti pe
   altcineva) exact acolo unde s-a oprit lucrul. */
.jr-ev.jr-cap.jr-acum::before   { background: linear-gradient(180deg, var(--ok), var(--warn)); }
.jr-ev.jr-cap.jr-astept::before { background: linear-gradient(180deg, var(--ok), var(--info)); }
.jr-ev.jr-viitor::before        { background: var(--fill); }

.jr-pt {
  position: absolute; left: var(--jr-x); top: var(--jr-y);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--fill);
  box-sizing: border-box; z-index: 2;
}
.jr-facut  > .jr-pt { background: var(--ok);   border-color: var(--ok); }
.jr-acum   > .jr-pt { background: var(--warn); border-color: var(--warn); }
.jr-astept > .jr-pt { background: var(--info); border-color: var(--info); }

/* ── inelul, in repaus ──────────────────────────────────────────────── */
.jr-inel {
  position: absolute; left: var(--jr-x); top: var(--jr-y);
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid currentColor; box-sizing: border-box;
  opacity: 0; z-index: 1; pointer-events: none;
}
.jr-acum   > .jr-inel { color: var(--warn); }
.jr-astept > .jr-inel { color: var(--info); }

/* ⚠️ Cine cere mai putina miscare: inelul ramane VIZIBIL si dilatat, ca semn
   static — nu dispare. Altfel „e randul tau" s-ar pierde cu totul pentru cine
   are pornita optiunea, iar aia e chiar informatia care conteaza. */
@media (prefers-reduced-motion: reduce) {
  .jr-acum > .jr-inel, .jr-astept > .jr-inel { opacity: .45; transform: scale(1.9); }
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️ TOT CE SE MISCA STA AICI, intr-un `no-preference`.
   Forma asta e preferabila unui `@media reduce` care anuleaza dupa: app.css
   are deja o regula globala `* { animation: none !important }` la sectiunea
   de reduced-motion, iar un bloc care isi tine starea de repaus in
   `animation-fill-mode: forwards` ar iesi GRESIT sub ea. Aici nu e nimic de
   anulat, si nu conteaza ordinea in fisier.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes jr-inel {
    0%   { transform: scale(1);   opacity: .55; }
    55%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }   /* restul ciclului e liniste */
  }

  /* E RANDUL TAU: 2s, bataie apropiata. */
  .jr-acum > .jr-inel { animation: jr-inel 2s ease-out infinite; }
  /* ASTEPTI PE ALTCINEVA: 3,8s, respiratie rara — se citeste ca „nu te grabi". */
  .jr-astept > .jr-inel { animation: jr-inel 3.8s ease-out infinite; }

  /* ── firul care curge, o data, la deschidere ────────────────────────── */
  @keyframes jr-curge { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .jr-ev::before { transform-origin: top; }
  .jurnal.jr-porneste .jr-ev::before {
    animation: jr-curge .5s cubic-bezier(.4, 0, .2, 1) backwards;
    animation-delay: calc(var(--i, 0) * .11s);
  }
  /* Bulinele sosesc in urma firului, cu o saltare scurta. */
  @keyframes jr-soseste {
    0%   { transform: scale(.3); }
    64%  { transform: scale(1.28); }
    100% { transform: scale(1); }
  }
  .jurnal.jr-porneste .jr-pt {
    animation: jr-soseste .36s cubic-bezier(.34, 1.45, .64, 1) backwards;
    animation-delay: calc(var(--i, 0) * .11s + .16s);
  }
  /* Inelul nu incepe sa pulseze pana nu ajunge firul la el. */
  .jurnal.jr-porneste .jr-inel { animation-delay: calc(var(--i, 0) * .11s + .5s); }

  /* ── retragerea: cand s-a INTORS ────────────────────────────────────── */
  /* ⚠️ Fara revenire elastica si mai scurta decat inaintarea. Un om tocmai a
     pierdut niste bani; miscarea are voie sa spuna „s-a intors", n-are voie
     sa para jucausa. */
  @keyframes jr-retrage {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(.45); }
  }
  @keyframes jr-recul {
    0%   { transform: translateY(0) scale(1); }
    42%  { transform: translateY(-4px) scale(.88); }
    100% { transform: translateY(0) scale(1); }
  }
  .jurnal.jr-porneste .jr-ev.jr-intors::before {
    animation: jr-curge .42s cubic-bezier(.4, 0, .2, 1) backwards,
               jr-retrage .3s cubic-bezier(.4, 0, .7, 1) forwards;
    animation-delay: calc(var(--i, 0) * .11s), calc(var(--i, 0) * .11s + .42s);
  }
  .jurnal.jr-porneste .jr-ev.jr-intors > .jr-pt {
    animation: jr-recul .34s cubic-bezier(.36, 0, .4, 1) backwards;
    animation-delay: calc(var(--i, 0) * .11s + .5s);
  }


}

.jr-m { flex: 1; min-width: 0; }
.jr-t { font-size: 13.5px; font-weight: 620; }
.jr-acum   > .jr-m > .jr-t { color: var(--warn); }
.jr-astept > .jr-m > .jr-t { color: var(--info); }
.jr-viitor > .jr-m > .jr-t { color: var(--txt-3); }
.jr-s { font-size: 11.5px; color: var(--txt-3); }
.jr-d { font-size: 11px; color: var(--txt-3); white-space: nowrap; padding-top: 2px; }
.jr-bani {
  font-family: var(--font-cifre); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 620; white-space: nowrap; padding-top: 1px;
}
.jr-act { margin-top: 8px; }

/* ⚠️ Butonul de stergere definitiva din /utilizatori. Nu e rosu de brand — ala
   inseamna „actiunea principala" peste toata aplicatia, iar stergerea nu e
   niciodata actiunea principala. E discret, si devine rosu abia la trecerea cu
   mouse-ul peste el: se vede ce e, dar nu trage ochiul. */
.buton-sterge {
  background: transparent; color: var(--txt-3);
  border: 1px solid var(--line);
}
.buton-sterge:hover {
  color: var(--brand-lt); border-color: var(--brand-lt);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* =====================================================================
   Popup „Evidența lunii" — tot ce s-a notat pe un om, pe file.

   ⚠️ Miezul e graficul ratei: pana acum ecranul arata doar soldul, deci o rata
   pe sase luni nu se putea verifica — nu vedeai nici cate transe s-au dus, nici
   cate mai sunt.
   ===================================================================== */
.ev-file { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.ev-fila {
  border: 0; background: none; font: inherit; font-size: 13px; color: var(--txt-2);
  cursor: pointer; padding: 8px 12px 9px; border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 7px;
}
.ev-fila .ev-nr {
  background: var(--fill); color: var(--txt-2); border-radius: var(--r-pill);
  padding: 1px 7px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ev-fila.este-activa { color: var(--txt); font-weight: 600; border-bottom-color: var(--brand); }
.ev-fila.este-activa .ev-nr { background: var(--brand); color: #fff; }

.ev-rand {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.ev-rand:last-of-type { border-bottom: 0; }
.ev-st { min-width: 0; }
.ev-titlu { font-size: 13px; }
.ev-sub { color: var(--txt-3); font-size: 11.5px; margin-top: 1px; }
.ev-dr { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ev-gol { color: var(--txt-3); font-size: 12.5px; padding: 10px 0; }
.ev-actiuni { margin-top: 10px; }

/* --- o rata, cu graficul ei --- */
.ev-rata {
  border: 1px solid var(--line-soft); border-radius: var(--r-ctl);
  padding: 11px 12px; margin: 0 0 9px; background: var(--panel-2);
}
.ev-rata-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ev-rata-nume { font-size: 13px; font-weight: 600; }
.ev-transe { margin: 9px 0 0; border-top: 1px dashed var(--line-soft); padding-top: 8px; }
.ev-transa {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: center; padding: 3px 0; font-size: 12.5px;
}
.ev-luna { color: var(--txt-2); }
.ev-suma { font-weight: 600; }

/* ⚠️ Transa lunii curente e evidentiata fiindca EA intra in totalul de plata.
   Fara ea, graficul e o insiruire in care nu se vede unde esti. */
.ev-transa.este-acum {
  background: var(--warn-bg); border-radius: 7px; margin: 0 -7px; padding: 4px 7px;
}
.ev-transa.este-acum .ev-luna { color: var(--txt); font-weight: 600; }

.ev-pas {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap;
  border: 1px solid transparent;
}
.ev-facut  { background: var(--ok-bg);   color: var(--ok);     border-color: var(--ok-bd); }
.ev-acum   { background: var(--warn-bg); color: var(--warn);   border-color: var(--warn-bd); }
.ev-viitor { background: var(--fill);    color: var(--txt-3); }

.ev-rata-sold {
  display: flex; justify-content: space-between; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 700;
}

/* =====================================================================
   GHIDUL „?" — panou lateral, peste pagina în care ești (1.53)

   Varianta A din `machete-salarizare/ghid-si-inchidere.html`. Pe telefon
   panoul ia tot ecranul. Se animă doar `transform` și `opacity`, și doar
   pentru cine n-a cerut mișcare redusă.
   ===================================================================== */
.ghid-fond {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(4,6,9,.42);
  display: flex; justify-content: flex-end;
}
/* ⚠️ `display:flex` ar bate atributul `hidden` — fără regula asta panoul ar
   sta deschis peste orice pagină, de la încărcare. */
.ghid-fond[hidden] { display: none; }
.ghid {
  width: min(440px, 100%); height: 100%;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.ghid-cap { padding: 14px 16px 0; border-bottom: 1px solid var(--line-soft); }
.ghid-rand { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ghid-rand h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--txt); }
.ghid-inchide {
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--fill); color: var(--txt-2); font-size: 17px; line-height: 1;
}
.ghid-inchide:hover { color: var(--txt); }
.ghid-sub { font-size: 11.5px; color: var(--txt-3); margin-top: 2px; }
.ghid-file { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.ghid-file::-webkit-scrollbar { display: none; }
.ghid-fila {
  flex: none; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; color: var(--txt-2);
  padding: 8px 10px 9px; border-bottom: 2px solid transparent;
}
.ghid-fila.este-activa { color: var(--txt); font-weight: 650; border-bottom-color: var(--brand); }
.ghid-corp {
  flex: 1; overflow-y: auto; padding: 12px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.ghid-pasi { list-style: none; margin: 0; padding: 0; position: relative; }
/* Firul care leagă pașii, sub buline. */
.ghid-pasi::before {
  content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px;
  width: 2px; background: var(--line);
}
.ghid-pas {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 12px; padding: 9px 0;
}
.ghid-nr {
  position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--line);
  font-size: 11px; font-weight: 800; color: var(--txt-3);
}
.ghid-pas.este-aici .ghid-nr { border-color: var(--brand); background: var(--brand); color: #fff; }
.ghid-titlu { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ghid-aici {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--brand); border-radius: var(--r-pill); padding: 1px 7px;
}
.ghid-text { font-size: 12px; color: var(--txt-2); margin-top: 2px; line-height: 1.55; }
.ghid-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ghid-loc {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 650;
  color: var(--brand-lt); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px;
  background: var(--panel-2);
}
a.ghid-loc:hover { border-color: var(--brand-lt); text-decoration: none; }
/* Ecran la care rolul n-are acces: rămâne numit, dar nu e un link spre 403. */
.ghid-loc.este-text { color: var(--txt-3); }
.ghid-cine { font-size: 11px; color: var(--txt-3); }
body.ghid-deschis { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .ghid-fond.este-deschis { animation: ghid-voal .18s ease-out; }
  .ghid-fond.este-deschis .ghid { animation: ghid-intra .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes ghid-voal { from { opacity: 0; } }
  @keyframes ghid-intra { from { transform: translateX(28px); opacity: 0; } }
}