/* =====================================================================
   ITALIEN — panou de administrare

   Foaie separată de cea a site-ului, intenționat. Site-ul public e o
   vitrină: fotografie mare, mișcare, aer. Panoul e un instrument ținut
   deschis toată ziua de cineva care are altceva de făcut — aici aerul
   costă derulare, iar mișcarea costă atenție.

   Ce ia din identitate: paleta, titlurile în Anton, colțurile drepte,
   terracotta ca singur accent. Ce lasă afară: granulația, Ken Burns,
   dezvăluirile la derulare.

   Regula de fond: cifrele se aliniază, rândurile se citesc dintr-o
   privire, iar butonul care șterge ceva nu arată ca cel care salvează.
   ===================================================================== */

/* ---------------------------------------------------------------------
   `hidden` ÎNSEAMNĂ ASCUNS. ORICE AR ZICE RESTUL FOII.

   Browserul are `[hidden] { display: none }`, dar e o regulă slabă:
   orice `display` scris de noi pe o clasă o învinge. Aşa, un element cu
   `hidden` scris pe el rămâne pe ecran, iar codul care îl ascunde pare
   stricat fără să fie.

   S-a întâmplat de DOUĂ ori în aceeaşi zi: bara de butoane din planul
   sălii, şi filtrarea listei de oameni din „Cine unde intră". Amândouă
   ascundeau corect din JavaScript; amândouă se vedeau oricum. A doua
   oară a fost limpede că nu e o scăpare, ci o capcană — şi capcanele se
   astupă o dată, la rădăcină, nu de fiecare dată când cade cineva în ele.

   `!important` e dinadins: regula asta trebuie să bată tot.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
  --ink:       #151518;
  --terra:     #6F1A02;
  --ember:     #D33F20;
  --verde:     #18490a;
  --blush:     #FF94C7;
  --cream:     #F5EDD9;
  --sand:      #BEA77F;

  --bg:        #F3F0E7;
  --surface:   #FFFFFF;
  --side:      #151518;

  --ink-soft:  rgba(21, 21, 24, .66);
  --ink-faint: rgba(21, 21, 24, .42);

  /* HÂRTIA. Culoarea unei coli, pentru lucrurile care ARATĂ a hârtie:
     planul sălii, capul unui tabel tipizat, foaia de raion.

     Nu se foloseşte `--side` pentru aşa ceva, şi merită spus de ce:
     `--side` e culoarea BAREI LATERALE, adică #151518 — aproape
     negru. Am folosit-o din greşeală ca fundal de hârtie în trei
     locuri, şi rezultatul a fost exact tiparul „nimic nu se strică,
     doar nu se întâmplă nimic": ecranul se deschidea, mesele erau
     toate acolo în pagină, desenate cu negru pe negru. Un
     dreptunghi negru, fără nicio eroare nicăieri. */
  --hartie:    #FAF6EC;
  --line:      rgba(21, 21, 24, .13);
  --line-soft: rgba(21, 21, 24, .07);

  --ok:   #18490A;
  --warn: #9A5B12;
  --err:  #B3401F;

  --ok-bg:   rgba(35, 99, 31, .09);
  --warn-bg: rgba(154, 91, 18, .10);
  --err-bg:  rgba(179, 64, 31, .09);

  /* Aceleași fonturi ca pe site — vezi comentariul din app.css. Panoul
     nu e o aplicație separată, e aceeași casă pe dinăuntru. */
  --font-display: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --side-w: 236px;
  --r: 0px;

  color-scheme: light;
}

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

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

body.adm {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

/* `height: auto` nu e opțional aici: un <svg> fără atribute width/height
   — cum e codul QR generat de noi — capătă înălțimea implicită de 150px
   a elementelor înlocuite, iar lățimea limitată îl lasă deformat și
   înalt cât un rând întreg de tabel. */
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 1.1; letter-spacing: .015em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip { position: absolute; top: -100px; left: 1rem; z-index: 300; padding: .7rem 1.1rem; background: var(--terra); color: var(--cream); }
.skip:focus { top: .6rem; }

/* ---------------------------------------------------------------------
   BARA LATERALĂ
   --------------------------------------------------------------------- */
.adm__side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--side-w);
  background: var(--side);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.adm__brand { padding: 1.3rem 1.1rem 1rem; border-bottom: 1px solid rgba(245, 237, 217,.13); }

.adm__logo {
  display: block;
  width: 116px;
  aspect-ratio: 3334 / 970;
  background: var(--cream);
  -webkit-mask: url('/assets/img/brand/main.svg') left center / contain no-repeat;
  mask: url('/assets/img/brand/main.svg') left center / contain no-repeat;
}

.adm__brand-sub {
  display: block;
  margin-top: .45rem;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 237, 217,.44);
}

/* ---------------------------------------------------------------------
   APLICAȚIILE — celelalte cinci uși, sus, înaintea ecranelor.

   Deliberat ALTFEL decât rândurile de meniu de dedesubt: sunt pastile
   mici, așezate pe două coloane, nu rânduri pe toată lățimea. Dacă ar
   arăta la fel, ochiul le-ar citi ca pe primele cinci ecrane din panou
   și le-ar număra printre ele — or ele duc în ALT program.
   --------------------------------------------------------------------- */
.adm__apps { padding: .85rem 1.1rem .8rem; border-bottom: 1px solid rgba(245, 237, 217,.13); }

.adm__apps-titlu {
  display: block; margin-bottom: .5rem;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 237, 217,.4);
}

.adm__apps-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }

.adm__app {
  display: flex; align-items: center; justify-content: space-between; gap: .25rem;
  min-height: 34px;
  padding: .3rem .5rem;
  border: 1px solid rgba(245, 237, 217,.16);
  font-size: .74rem;
  line-height: 1.2;
  color: rgba(245, 237, 217,.72);
  text-decoration: none;
  transition: background .16s, color .16s, border-color .16s;
}

.adm__app:hover { background: rgba(245, 237, 217,.08); border-color: rgba(245, 237, 217,.34); color: var(--cream); }
.adm__app-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm__app-sageata { flex: none; font-size: .68rem; opacity: .5; }

/* ---------------------------------------------------------------------
   MENIUL, PE GRUPE

   Patruzeci și două de rânduri într-o coloană nu sunt un meniu, sunt o
   listă de cuvinte: nimeni nu le citește, toată lumea ține minte a câta
   poziție e cea căutată — și se rătăcește la fiecare rând nou.
   --------------------------------------------------------------------- */
.adm__nav { padding: .6rem 0; flex: 1; }

.adm__grup + .adm__grup { border-top: 1px solid rgba(245, 237, 217,.07); }

.adm__grup-cap {
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px;
  padding: .4rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(245, 237, 217,.5);
  transition: color .16s, background .16s;
}

/* Săgeata implicită a lui <summary> se scoate din amândouă motoarele;
   a noastră trebuie să stea la DREAPTA, nu la stânga. */
.adm__grup-cap::-webkit-details-marker { display: none; }
.adm__grup-cap:hover { background: rgba(245, 237, 217,.05); color: rgba(245, 237, 217,.8); }
.adm__grup[open] > .adm__grup-cap { color: var(--cream); }

.adm__grup-nume { flex: 1; }

.adm__grup-sageata {
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
  opacity: .7;
}

.adm__grup[open] > .adm__grup-cap .adm__grup-sageata { transform: rotate(-135deg) translate(-3px, -3px); }

/* Subpunctele: intrate cu un deget față de părinte, cu o linie care
   arată de unde atârnă. Regulile care se bat cu `.adm__link` stau MAI
   JOS, după el — altfel padding-ul lui, scris după, le-ar șterge tăcut
   pe ale noastre. */
.adm__sub { margin-left: 1.1rem; border-left: 1px solid rgba(245, 237, 217,.14); }

.adm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  /* 42px: se nimerește cu degetul pe tabletă, fără să irosească înălțime */
  min-height: 42px;
  padding: .45rem 1.1rem;
  font-size: .9rem;
  color: rgba(245, 237, 217,.74);
  border-left: 3px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
}

.adm__link:hover { background: rgba(245, 237, 217,.06); color: var(--cream); }

.adm__link.is-on {
  background: rgba(245, 237, 217,.09);
  color: var(--cream);
  border-left-color: var(--ember);
  font-weight: 500;
}

.adm__link--quiet { font-size: .8rem; color: rgba(245, 237, 217,.5); min-height: 36px; }

.adm__badge {
  min-width: 20px;
  padding: 0 .35rem;
  border-radius: 10px;
  background: var(--ember);
  color: #fff;
  font-size: .66rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.adm__link--sub {
  min-height: 36px;
  padding: .35rem 1.1rem .35rem .8rem;
  font-size: .82rem;
  color: rgba(245, 237, 217,.62);
  border-left-width: 2px;
}

/* Cifra de pe grupa strânsă: mai mică decât cele dinăuntru, fiindcă e o
   sumă, nu un număr despre un ecran anume. Cu grupa deschisă se stinge:
   cifrele adevărate sunt sub ea, iar două numere aprinse unul lângă
   altul se citesc ca două vești. */
.adm__badge--grup { font-size: .6rem; line-height: 16px; min-width: 17px; }
.adm__grup[open] > .adm__grup-cap .adm__badge--grup { opacity: .4; }

.adm__foot { padding: .5rem 0 .9rem; border-top: 1px solid rgba(245, 237, 217,.13); }
.adm__me { padding: .6rem 1.1rem .2rem; }
.adm__me-name { display: block; font-size: .85rem; }
.adm__me-role { display: block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 237, 217,.44); }

/* Versiunea: prezentă, dar discretă. Se citește când o cauți, nu se
   bagă în ochi când lucrezi. */
.adm__version {
  display: block; padding: .5rem 1.1rem 0;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 237, 217,.3); text-decoration: none;
}
a.adm__version:hover { color: rgba(245, 237, 217,.62); }

.adm__menu-state, .adm__scrim, .adm__burger { display: none; }

/* ---------------------------------------------------------------------
   CORP
   --------------------------------------------------------------------- */
.adm__body { margin-left: var(--side-w); min-height: 100svh; display: flex; flex-direction: column; }

.adm__top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem clamp(1rem, 2.5vw, 2rem);
  background: rgba(244, 241, 238, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  min-height: 62px;
}

.adm__title { font-size: 1.32rem; flex: 1; min-width: 0; }
.adm__top-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

.adm__main { padding: clamp(1rem, 2.5vw, 2rem); flex: 1; max-width: 1500px; width: 100%; }

/* ---------------------------------------------------------------------
   CARDURI ȘI CIFRE
   --------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.1rem 1.2rem;
}

.card__h {
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.cards { display: grid; gap: .8rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.stat { display: grid; gap: .1rem; }
.stat__n { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.stat__sub { font-size: .8rem; color: var(--ink-soft); }
.stat--alert .stat__n { color: var(--ember); }

/* ---------------------------------------------------------------------
   TABELE
   Densitate mare, cifre aliniate la dreapta.
   --------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }

table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }

table.tbl th, table.tbl td { padding: .62rem .8rem; text-align: left; vertical-align: middle; }

/* Antetul NU e lipit sus.
   `.tbl-wrap` are `overflow-x: auto` pentru tabelele late, iar asta face
   din el un container de derulare: un `position: sticky` dinăuntru se
   raportează la el, nu la fereastră. Rezultatul era un antet care
   plutea peste primul rând și îl acoperea. Un antet fix arată bine
   într-o captură și încurcă la folosire. */
table.tbl thead th {
  background: #FAF8F6;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.tbl tbody tr { border-bottom: 1px solid var(--line-soft); }
table.tbl tbody tr:last-child { border-bottom: 0; }
table.tbl tbody tr:hover { background: #FBF9F7; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.tbl__act { text-align: right; white-space: nowrap; }
.tbl__empty { padding: 2.4rem 1rem; text-align: center; color: var(--ink-faint); }

/* Rândul ca pe hârtie: numele mare, restul mic dedesubt */
.cell-main { font-weight: 500; }
.cell-sub  { font-size: .76rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   ETICHETE DE STARE
   --------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .5rem;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
}

.tag--ok      { color: var(--ok);    border-color: rgba(24, 73, 10,.3);   background: var(--ok-bg); }
.tag--warn    { color: var(--warn);  border-color: rgba(154,91,18,.3);  background: var(--warn-bg); }
.tag--err     { color: var(--err);   border-color: rgba(179,64,31,.3);  background: var(--err-bg); }
.tag--neutral { color: var(--ink-faint); border-color: var(--line); }
.tag--info    { color: var(--terra); border-color: rgba(111, 26, 2,.3);  background: rgba(111, 26, 2,.06); }

/* ---------------------------------------------------------------------
   BUTOANE
   Trei greutăți vizuale: principal, obișnuit, distructiv. Butonul care
   șterge NU arată ca cel care salvează — e singurul loc din panou unde
   o apăsare greșită nu se poate repara.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .42rem .95rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.btn:hover { border-color: var(--ink-faint); background: #FBF9F7; }

.btn--primary { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.btn--primary:hover { background: var(--ember); border-color: var(--ember); color: var(--cream); }

.btn--ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn--ok:hover { filter: brightness(1.12); color: #fff; }

.btn--danger { color: var(--err); border-color: rgba(179,64,31,.35); background: var(--err-bg); }
.btn--danger:hover { background: var(--err); border-color: var(--err); color: #fff; }

.btn--sm { min-height: 31px; padding: .22rem .6rem; font-size: .75rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------
   FORMULARE
   --------------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.fields { display: grid; gap: .85rem; }
.fields--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fields--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

.f { display: grid; gap: .3rem; min-width: 0; }

.f__l {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.f__l .req { color: var(--terra); }

.inp, .sel, .txt {
  width: 100%;
  min-height: 40px;
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* 16px: sub această valoare, Safari pe iPhone mărește pagina la focus */
  font-size: 16px;
  transition: border-color .15s;
}

@media (min-width: 900px) { .inp, .sel, .txt { font-size: .9rem; } }

.inp:focus, .sel:focus, .txt:focus { outline: none; border-color: var(--terra); }
.inp[aria-invalid="true"], .txt[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.txt { min-height: 96px; resize: vertical; line-height: 1.5; }
.inp--num { text-align: right; font-variant-numeric: tabular-nums; }

.sel {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23241F20' stroke-opacity='.5' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}

.f__hint { font-size: .74rem; color: var(--ink-faint); line-height: 1.4; }
.f__err  { font-size: .78rem; color: var(--err); }

.chk {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-height: 38px;
  padding-block: .3rem;
  cursor: pointer;
  font-size: .87rem;
}

.chk input {
  appearance: none;
  width: 19px; height: 19px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.chk input:checked { background: var(--terra); border-color: var(--terra); }

.chk input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .1rem .8rem; }

/* Bara de filtre de deasupra tabelelor */
.filters {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
}

.filters .f { min-width: 120px; }
.filters .inp, .filters .sel { min-height: 36px; }

/* Bara lipită de jos cu butonul de salvare: la un formular lung nu
   trebuie să derulezi până la capăt ca să salvezi. */
.savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .4rem;
  padding: .8rem clamp(1rem, 2.5vw, 2rem);
  margin-inline: calc(clamp(1rem, 2.5vw, 2rem) * -1);
  background: rgba(244, 241, 238, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

.savebar__note { font-size: .76rem; color: var(--ink-faint); margin-left: auto; }

/* ---------------------------------------------------------------------
   MESAJE
   --------------------------------------------------------------------- */
.flash {
  display: flex;
  gap: .6rem;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid;
  border-left-width: 3px;
  font-size: .87rem;
}

.flash--success { color: var(--ok);  border-color: rgba(24, 73, 10,.3);  background: var(--ok-bg); }
.flash--error   { color: var(--err); border-color: rgba(179,64,31,.3); background: var(--err-bg); }

/* Butonul de acţiune din mesaj. `margin-inline-start:auto` îl trage la
   capătul rândului, ca să nu se amestece cu textul — altfel pare o parte
   din propoziţie şi nu se vede că se poate apăsa. */
.flash__actiune {
  margin-inline-start: auto;
  flex: none;
  align-self: center;
  padding: .3rem .7rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.flash__actiune:hover { text-decoration: underline; }

/* Pe telefon mesajul se rupe pe două rânduri şi butonul trece dedesubt,
   la lăţime întreagă: un buton de şaptezeci de pixeli lipit în dreapta
   unui text de trei rânduri nu se nimereşte cu degetul. */
@media (max-width: 520px) {
  .flash { flex-wrap: wrap; }
  .flash__actiune { margin-inline-start: 0; width: 100%; text-align: center; }
}
.flash--info    { color: var(--terra); border-color: rgba(111, 26, 2,.3); background: rgba(111, 26, 2,.06); }

.note {
  padding: .8rem 1rem;
  border-left: 3px solid var(--sand);
  background: #FAF6F1;
  font-size: .85rem;
  line-height: 1.55;
}

.note--warn { border-left-color: var(--warn); background: var(--warn-bg); }

/* Bannerul actualizărilor neaplicate. Stă în capul fiecărei pagini din
   panou, fiindcă problema pe care o anunță nu e a unei pagini anume:
   ecranele care au nevoie de coloanele lipsă nu se deschid deloc. */
.adm__alerta {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  font-size: .85rem;
}

.adm__alerta span { color: var(--ink-soft, inherit); }
.adm__alerta .btn { margin-inline-start: auto; }

/* ---------------------------------------------------------------------
   PAGINARE ȘI DIVERSE
   --------------------------------------------------------------------- */
.pager { display: flex; gap: .3rem; align-items: center; justify-content: center; padding: .9rem; flex-wrap: wrap; }

.pager a, .pager span {
  min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.pager .is-on { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.pager .is-off { opacity: .4; }

.thumb { width: 44px; height: 44px; object-fit: cover; background: var(--sand); flex: none; }
.mono { font-family: var(--mono); font-size: .78rem; }
.muted { color: var(--ink-faint); }
.right { text-align: right; }
.sep { height: 1px; background: var(--line); border: 0; margin-block: .4rem; }

.head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.head-split h2 { font-size: 1.05rem; }

/* Listă compactă cheie–valoare, pentru panourile de detaliu */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; font-size: .87rem; align-items: baseline; }
.kv dt { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kv dd { margin: 0; }

/* ---------------------------------------------------------------------
   ECRANUL DE INTRARE
   --------------------------------------------------------------------- */
/* `body.adm` de mai sus are specificitate mai mare decât o singură clasă,
   deci selectorul trebuie să fie tot pe `body` — altfel ecranul de
   intrare rămâne pe fundalul deschis al panoului. */
body.adm--bare { display: grid; place-items: center; padding: 1.2rem; background: var(--side); }

.login {
  width: 100%;
  max-width: 372px;
  background: var(--surface);
  border: 1px solid rgba(245, 237, 217,.14);
  padding: clamp(1.4rem, 5vw, 2.2rem);
  display: grid;
  gap: 1.1rem;
}

.login__logo {
  display: block;
  width: 140px;
  aspect-ratio: 3334 / 970;
  background: var(--ink);
  -webkit-mask: url('/assets/img/brand/main.svg') left center / contain no-repeat;
  mask: url('/assets/img/brand/main.svg') left center / contain no-repeat;
}

.login__sub { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.login__err { padding: .6rem .8rem; border-left: 3px solid var(--err); background: var(--err-bg); color: var(--err); font-size: .84rem; }

.login__tabs { display: flex; border: 1px solid var(--line); }

.login__tab {
  flex: 1;
  min-height: 38px;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: background .15s, color .15s;
}

.login__tab.is-on { background: var(--terra); color: var(--cream); }
.login__pin { text-align: center; font-size: 1.5rem; letter-spacing: .45em; text-indent: .45em; }

/* Rândul de sub buton, către cererea de cont. Mic și gri: e pentru omul
   nou, care îl caută, nu pentru cei treizeci care intră zilnic și n-au
   nevoie să-l vadă. */
.login__jos {
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------
   TABLETĂ ȘI TELEFON
   Pe tabletă panoul chiar se folosește: managerul verifică rezervările
   de pe iPad. Bara laterală se ascunde și se deschide peste conținut.
   --------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .adm__side {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;
  }

  .adm__menu-state:checked ~ .adm__side { transform: none; visibility: visible; }

  .adm__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(21, 21, 24,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s, visibility .26s;
  }

  .adm__menu-state:checked ~ .adm__scrim { opacity: 1; visibility: visible; }

  .adm__body { margin-left: 0; }

  .adm__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px; height: 40px;
    margin-left: -.4rem;
    cursor: pointer;
    flex: none;
  }

  .adm__burger span { display: block; width: 20px; height: 1.6px; background: var(--ink); }

}

@media (max-width: 640px) {
  .adm__title { font-size: 1.1rem; }
  .adm__main { padding: .9rem; }
  .savebar { margin-inline: -.9rem; padding-inline: .9rem; }

  /* Tabelele devin cartonașe: un tabel de 8 coloane pe 390px e ilizibil,
     oricât l-ai derula lateral. Fiecare celulă își poartă eticheta. */
  .tbl--cards thead { display: none; }
  .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards td { display: block; width: 100%; }

  .tbl--cards tr {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--line);
  }

  .tbl--cards td { padding: .16rem 0; display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; }

  .tbl--cards td::before {
    content: attr(data-l);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    flex: none;
  }

  .tbl--cards td.num, .tbl--cards td.tbl__act { text-align: left; }
  .tbl--cards td[data-l=""]::before { display: none; }
  .tbl--cards .tbl__act { justify-content: flex-start; padding-top: .5rem; }
}

@media print {
  .adm__side, .adm__top, .savebar, .btn, .filters, .pager { display: none !important; }
  .adm__body { margin-left: 0; }
  body.adm { background: #fff; }
  .tbl-wrap { border: 0; overflow: visible; }
}

/* Codul QR din lista de mese: dimensiune fixă, ca rândul să nu crească
   cât un cod de tipărit. Cel mare, de scanat, e pe foaia de tipărit. */
.qr-cell { width: 46px; background: #fff; padding: 2px; }
.qr-cell svg { width: 42px; height: 42px; }

/* ---------------------------------------------------------------------
   Alegerea felului în care se afișează meniul digital.

   Fiecare variantă are nevoie de descrierea ei ca alegerea să fie o
   alegere, nu o ghicitoare între cinci cuvinte italienești.
   --------------------------------------------------------------------- */
.varianta-alegere { display: grid; gap: .5rem; }

.varianta-optiune {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; border: 1px solid var(--line); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.varianta-optiune:hover { border-color: var(--ink-faint); }
.varianta-optiune:has(input:checked) { border-color: var(--verde); background: var(--ok-bg); }
.varianta-optiune input { margin-top: .25rem; flex: none; }

.varianta-optiune__corp { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.varianta-optiune__nume {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-weight: 600; font-size: .95rem;
}
.varianta-optiune__nume em { font-style: normal; }
.varianta-optiune__ce { font-size: .8rem; color: var(--ink-soft); }
.varianta-optiune__cand { font-size: .85rem; line-height: 1.45; color: var(--ink-soft); margin-top: .15rem; }
.varianta-optiune__vezi {
  align-self: flex-start; margin-top: .3rem;
  font-size: .78rem; color: var(--terra); text-decoration: underline; text-underline-offset: 3px;
}

/* =====================================================================
   FIȘA DE BUCĂTĂRIE
   =====================================================================
   Singurul ecran din panou care nu se citește de la birou. Se citește în
   picioare, de la o jumătate de metru, de pe un telefon rezemat de un
   raft, cu mâinile ocupate și cu abur pe ecran. De aici vine tot ce e
   mai mare decât în rest: gramajele, pașii, distanțele dintre rânduri.
   ===================================================================== */
.fisa { max-width: 780px; }

/* Pătratul e pe IMAGINE, nu pe `<figure>`: din 1.59.0 sub poză poate sta
   un rând de text (de unde vine fotografia), iar o legendă închisă
   într-un pătrat cu `overflow: hidden` s-ar fi tăiat în două. */
.fisa__poza { margin: 0 0 1.25rem; }

.fisa__poza img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  background: var(--bg-alt, #ece0c4);
}

.fisa__poza-sub {
  font-size: .8125rem;
  line-height: 1.45;
  opacity: .65;
  margin-top: .5rem;
}

.fisa__cap { margin-bottom: 1.5rem; }
.fisa__nume { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1; margin: 0; text-transform: uppercase; }
.fisa__alt { font-size: .875rem; opacity: .6; margin: .35rem 0 0; }

.fisa__sect { margin-bottom: 1.75rem; }
.fisa__sect--doua { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.fisa__h {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .55; margin: 0 0 .6rem; font-weight: 600;
}

/* --- ingredientele --------------------------------------------------
   Cantitatea în stânga, într-o coloană de lățime fixă, aliniată la
   dreapta. Așa se citesc toate gramajele pe verticală, dintr-o privire,
   fără să sară ochiul după fiecare denumire de altă lungime. */
.fisa__ingr { list-style: none; margin: 0; padding: 0; }
.fisa__ingr li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--linie, #e6e1d8) 70%, transparent);
}
.fisa__cant {
  flex: 0 0 5.5rem; text-align: right;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 1.125rem; font-weight: 600;
}
.fisa__cant i { font-style: normal; font-size: .75rem; opacity: .55; margin-inline-start: .1rem; }
.fisa__ing { font-size: 1.0625rem; }
.fisa__sub { font-size: .75rem; margin-inline-start: .5rem; opacity: .7; }
.fisa__nota { display: block; font-size: .8125rem; opacity: .6; font-style: normal; }

/* --- pașii ---------------------------------------------------------- */
.fisa__pasi ol { margin: 0; padding-inline-start: 1.5rem; }
.fisa__pasi li { font-size: 1.0625rem; line-height: 1.6; margin-bottom: .75rem; }
.fisa__pasi p  { font-size: 1.0625rem; line-height: 1.6; margin: 0; }

.fisa__mare { font-size: 1.0625rem; margin: 0; }
.fisa__gol  { font-size: .9375rem; opacity: .7; margin: 0; }
.fisa__mic  { font-size: .75rem; opacity: .6; line-height: 1.5; margin: .6rem 0 0; }
.fisa__subsol { margin-top: 2rem; }

.fisa__alergeni { display: flex; flex-wrap: wrap; gap: .3rem; }
.fisa__nutri { margin: 0; }
.fisa__nutri--sub td:first-child { padding-inline-start: 1.5rem; opacity: .75; }

@media (max-width: 560px) {
  .fisa__sect--doua { grid-template-columns: 1fr; }
  .fisa__cant { flex-basis: 4.5rem; }
}

/* =====================================================================
   GRILA DE ALERGENI
   =====================================================================
   Paisprezece alergeni pe fiecare preparat, 221 de preparate. Puse unul
   sub altul, cu „doar urme" pe rândul următor, ar fi 5 600 de rânduri
   de derulat — nimeni n-ar ajunge la capăt, iar ce nu se termină nu se
   face deloc.

   În grilă, toți paisprezece intră într-un ecran. „Urme" stă LIPIT de
   alergenul lui, în aceeași celulă: pe rândul următor, se bifează din
   greșeală la vecin, iar greșeala aia scrie pe meniul unui om cu
   alergie că preparatul conține ceva ce nu conține — sau invers.
   ===================================================================== */
.alerg-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .35rem;
  margin: .2rem 0 .6rem;
}

.alerg-cel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .55rem;
  border: 1px solid var(--linie, #e6e1d8);
  border-radius: 8px;
  transition: border-color .12s ease, background .12s ease;
}

/* Bifat = se vede din capătul celălalt al bucătăriei. Un chenar subțire
   nu se distinge pe o tabletă ținută pieziș, sub neon. */
.alerg-cel.is-on {
  border-color: var(--accent, #18490a);
  background: color-mix(in srgb, var(--accent, #18490a) 7%, transparent);
}

.alerg-cel .chk { margin: 0; }

.alerg-urme {
  flex: 0 0 auto;
  font-size: .6875rem;
  opacity: .5;
  white-space: nowrap;
}
.alerg-cel.is-on .alerg-urme { opacity: .8; }

/* ---------------------------------------------------------------------
   EDITORUL DE PLAN — mesele se trag cu degetul
   --------------------------------------------------------------------- */
.ed__bara {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.ed__sectiuni, .ed__unelte { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ed__sec {
  font: inherit; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft, #555); border: 1px solid var(--line, #ddd);
}
.ed__sec.is-activ { background: var(--ink, #151518); color: #fff; border-color: var(--ink, #151518); }
.ed__stare { font-size: .8rem; color: var(--ink-faint, #888); min-width: 11ch; }

.ed__panza {
  display: none; position: relative; width: 100%; max-height: 70vh;
  border: 1px solid var(--line, #ddd); border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 5% 5%,
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 5% 5%,
    #FAF6EC;
  touch-action: none;   /* altfel, pe tabletă, tragerea derulează pagina */
}
.ed__panza.is-activ { display: block; }

.ed__el { position: absolute; cursor: grab; user-select: none; }
.ed__el.se-trage { cursor: grabbing; z-index: 5; filter: brightness(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ed__el--decor { pointer-events: auto; }
.ed__el--masa {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.6rem, 1.4vw, .85rem);
}
.ed__ajutor { font-size: .82rem; color: var(--ink-faint, #888); margin-top: .6rem; }

.ed__foaie { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.ed__foaie[hidden] { display: none; }
.ed__fundal { position: absolute; inset: 0; background: rgba(21,21,24,.5); }
.ed__corp {
  position: relative; width: min(640px, 94vw); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 14px; padding: 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ed__cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.ed__cap h2 { margin: 0; font-size: 1.1rem; }
.ed__x { font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer; }
.ed__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.ed__actiuni { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.btn--sterge { background: #B3401F; color: #fff; border-color: #B3401F; }
.btn--mic { padding: .35rem .8rem; font-size: .78rem; }

/* Panoul încarcă doar admin.css, nu și foaia site-ului — deci formele
   și culorile meselor trebuie să existe și aici. Copiate dinadins, nu
   importate: o foaie de stil a panoului care depinde de foaia site-ului
   se strică în ziua în care site-ul își schimbă paleta. */
.ed__el--masa {
  border: 2px solid rgba(21,21,24,.28);
  background: #E8E2D0;
  color: #151518;
  border-radius: 6px;
  line-height: 1.05;
}
.ed__el--masa.plan__masa--round,
.ed__el--masa.plan__masa--oval  { border-radius: 50%; }
.ed__el--masa.plan__masa--booth { border-radius: 6px 6px 18px 18px; }
.ed__el--masa.plan__masa--bar   { border-radius: 999px; }

.ed__el--masa.plan__masa--libera  { background: #E8E2D0; }
.ed__el--masa.plan__masa--rezerv  { background: #3E6E8E; color: #F5EDD9; }
.ed__el--masa.plan__masa--ocupata { background: #C79A2E; }
.ed__el--masa.plan__masa--comanda { background: #D9720E; color: #F5EDD9; }
.ed__el--masa.plan__masa--servita { background: #8A7B3F; color: #F5EDD9; }
.ed__el--masa.plan__masa--nota    { background: #B3401F; color: #F5EDD9; }
.ed__el--masa.plan__masa--platita { background: #2F7A5A; color: #F5EDD9; }
.ed__el--masa.plan__masa--strans  { background: #7A7468; color: #F5EDD9; }
.ed__el--masa.plan__masa--blocata { background: #3A3A3E; color: rgba(245,237,217,.72); }

.ed__el--decor {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(21,21,24,.05);
  border-radius: 4px;
  font-size: clamp(.55rem, 1.1vw, .72rem);
  letter-spacing: .08em; text-transform: uppercase; color: rgba(21,21,24,.45);
}
.ed__el--decor.plan__decor--kitchen,
.ed__el--decor.plan__decor--pizza   { background: rgba(21,21,24,.10); }
.ed__el--decor.plan__decor--bar     { background: rgba(111,26,2,.14); color: #6F1A02; }
.ed__el--decor.plan__decor--stairs  { background: repeating-linear-gradient(90deg, rgba(21,21,24,.14) 0 4px, transparent 4px 9px); }
.ed__el--decor.plan__decor--vitrina { background: rgba(62,110,142,.28); border-color: rgba(62,110,142,.6); }
.ed__el--decor.plan__decor--bench   { background: rgba(21,21,24,.55); }
.ed__el--decor.plan__decor--door    { background: rgba(24,73,10,.20); border-color: rgba(24,73,10,.5); }
.ed__el--decor.plan__decor--plant   { background: rgba(24,73,10,.14); border-radius: 50%; }
.ed__el--decor.plan__decor--text    { background: none; border: 0; }

/* Cereri de factură */
.fisa-card__cap { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.fisa-card__nume { margin: 0; font-size: 1rem; }
.fisa-card__cod { margin: .15rem 0 0; font-size: .78rem; color: rgba(21,21,24,.45); }
.fisa-card__date { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .8rem 0 0; font-size: .85rem; }
.fisa-card__date dt { color: rgba(21,21,24,.45); }
.fisa-card__date dd { margin: 0; }
.fisa-card__spec { margin: .8rem 0 0; font-size: .85rem; padding: .5rem .7rem; background: rgba(0,0,0,.04); border-radius: 6px; }
.fisa-card__anaf { margin: .6rem 0 0; font-size: .8rem; color: rgba(21,21,24,.55); }
.fisa-card__semn { margin: .8rem 0 0; }
.fisa-card__semn img { display: block; max-width: 260px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; }
.fisa-card__semn figcaption { font-size: .72rem; color: rgba(21,21,24,.45); margin-top: .3rem; }
.fisa-card__act { display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.pastila { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.pastila--ok { background: rgba(47,122,90,.15); color: #2F7A5A; }
.pastila--rau { background: rgba(179,64,31,.15); color: #B3401F; }
.pastila--asteapta { background: rgba(21,21,24,.08); color: rgba(21,21,24,.55); }

/* Filtrele de sus (De rezolvat / Rezolvate / …) */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab {
  font-size: .8rem; letter-spacing: .04em; padding: .4rem .85rem;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.12);
  color: rgba(21,21,24,.6); text-decoration: none;
}
.tab.is-activ { background: #151518; color: #fff; border-color: #151518; }
.gol { color: rgba(21,21,24,.45); font-size: .9rem; padding: 2rem 0; }


/* =====================================================================
   19. ZONA DE LUCRU — documente, borderouri, departamente
   =====================================================================
   Aceeași foaie serveşte şi panoul (laptop), şi zona de lucru (telefon).
   Un fişier separat pentru patru ecrane ar însemna o cerere în plus la
   fiecare deschidere, pe conexiunea din subsolul restaurantului — iar
   browserul angajatului are deja foaia asta în memorie de la panou.
   ------------------------------------------------------------------ */

/* ---------- câmpuri (aceleaşi nume ca pe site, ca să nu existe două
              vocabulare pentru acelaşi lucru) ---------- */
.field { display: block; margin: 0 0 .9rem; }
.field__l {
  display: block; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(21,21,24,.55); margin-bottom: .3rem;
}
.field__l b { color: #B3401F; }
.field__i {
  width: 100%; min-height: 44px; padding: .5rem .7rem;
  font: 400 1rem/1.4 var(--sans, Figtree), system-ui, sans-serif;
  color: #151518; background: #fff;
  border: 1px solid rgba(0,0,0,.18); border-radius: 8px;
}
.field__i:focus { outline: none; border-color: #B3401F; }
textarea.field__i { min-height: 110px; resize: vertical; }
.field__ajutor { margin: .35rem 0 0; font-size: .8rem; color: rgba(21,21,24,.5); }
.field__e { display: block; margin-top: .25rem; font-size: .8rem; color: #B3401F; }
.field--mic { max-width: 180px; }

.check { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .6rem; font-size: .92rem; }
.check input { margin-top: .2rem; width: 18px; height: 18px; flex: none; }
.check--mic { font-size: .85rem; margin-bottom: .35rem; }
.bife { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .1rem .6rem; }

.btn--wide { width: 100%; justify-content: center; }
.btn--quiet { border-color: transparent; color: rgba(21,21,24,.55); background: transparent; }
.btn--quiet:hover { color: #B3401F; background: transparent; }

/* ---------- semnătura cu degetul ---------- */
.semn { margin: 1.2rem 0; }
.semn__cap { display: flex; align-items: center; justify-content: space-between; }
.semn__sterge {
  border: 0; background: none; font-size: .8rem; color: rgba(21,21,24,.5);
  cursor: pointer; padding: .2rem .4rem;
}
.semn__panza {
  display: block; width: 100%; height: auto; aspect-ratio: 900 / 260;
  background: #fff; border: 1px dashed rgba(0,0,0,.28); border-radius: 8px;
  touch-action: none;   /* altfel degetul derulează pagina în loc să scrie */
}
.semn__panza--lipsa { border-color: #B3401F; background: rgba(179,64,31,.05); }
.semn__nota { margin: .4rem 0 0; font-size: .78rem; color: rgba(21,21,24,.5); }

/* ---------- ajutoare mici, folosite peste tot ---------- */
.adm__h2 { margin: 2rem 0 .7rem; font: 600 1.05rem/1.3 var(--serif, Cinzel), Georgia, serif; }
.adm__h3 { margin: 1.4rem 0 .5rem; font-size: .95rem; font-weight: 600; }
.adm__mic { font-size: .78rem; color: rgba(21,21,24,.5); }
.adm__periculos { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08); }
.eticheta {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-size: .75rem; padding: .18rem .5rem; margin: 0 .25rem .25rem 0;
  background: rgba(21,21,24,.06); border-radius: 999px;
}
.eticheta--rau { background: rgba(179,64,31,.12); color: #B3401F; }
.dep-bulina { width: 10px; height: 10px; border-radius: 50%; background: var(--dep, #8a8f98); flex: none; }

.carduri { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.carduri--eticheteta { display: block; }
.card--stins { opacity: .55; }
.card__cap { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.card__rand { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.card__butoane { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.card__sterge { margin-top: .5rem; }
.field__i--titlu { font-weight: 600; border-color: transparent; background: transparent; padding-inline: .2rem; }
.field__i--titlu:focus { border-color: rgba(0,0,0,.18); background: #fff; }

.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabel th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(21,21,24,.45); font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid rgba(0,0,0,.1);
}
.tabel td { padding: .6rem; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: top; }
.tabel td .adm__mic { display: block; }
.tabel__nr { text-align: right; font-variant-numeric: tabular-nums; }
.tabel__nr--rau { color: #B3401F; font-weight: 600; }
.tabel__act { text-align: right; white-space: nowrap; }
.tabel tr.is-stins { opacity: .5; }
.tabel--mic td { padding: .35rem .5rem; font-size: .84rem; }

.filtre { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.2rem; }

.sumar { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sumar__cifra { display: flex; flex-direction: column; }
.sumar__cifra span { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(21,21,24,.45); }
.sumar__cifra strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sumar__cifra--rau strong { color: #B3401F; }

/* ---------- formularul de document ---------- */
.docf__grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .docf__grid { grid-template-columns: 1fr 300px; } }
.docf__side { align-self: start; padding: 1rem; background: rgba(0,0,0,.025); border-radius: 10px; }
.docf__text { min-height: 320px; font-family: var(--sans, Figtree), system-ui, sans-serif; line-height: 1.6; }
.docf__fisier {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem .9rem; margin-bottom: .9rem; background: rgba(0,0,0,.035); border-radius: 8px;
}
.docf__fisier p { margin: 0; }

/* ---------- fişa borderoului, în panou ---------- */
.bord-fisa__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bord-fisa__cap h2 { margin: 0; font-size: 1.1rem; }
.bord-fisa__cifre { margin: 1.2rem 0; }
.bord-fisa__rand { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.bord-fisa__rand strong { font-variant-numeric: tabular-nums; }
.bord-fisa__rand--total { border-top: 1px solid rgba(0,0,0,.1); padding-top: .6rem; margin-top: .4rem; }
.bord-fisa__rand--dif strong { color: #2F7A5A; }
.bord-fisa__rand--dif.is-rau strong { color: #B3401F; }
.bord-fisa__nota { white-space: pre-line; font-size: .9rem; }
.bord-fisa__semn { display: block; max-width: 280px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; }

/* =====================================================================
   20. ECRANUL PERSONALULUI (/lucru) — gândit pentru telefon
   =====================================================================
   Ţinte mari, litere mari, bara de navigare jos, sub degetul mare.
   Nimic sub 16px: se citeşte în picioare, în bucătărie, pe un ecran
   care nu e curat.
   ------------------------------------------------------------------ */

body.lucru {
  margin: 0; background: #F6F4F1; color: #151518;
  font: 400 1rem/1.55 var(--sans, Figtree), system-ui, sans-serif;
  /* Loc pentru fâşia din dreapta (1.66.0). Era `padding-bottom: 92px`,
     pentru bara de jos. */
  padding-inline-end: 64px;
  padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) {
  body.lucru { padding-inline-end: 92px; }
}

.lucru__top { background: #151518; color: #F6F4F1; }
.lucru__top-in {
  max-width: 720px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.lucru__marca {
  font: 600 1rem/1 var(--serif, Cinzel), Georgia, serif;
  letter-spacing: .14em; color: #F6F4F1; text-decoration: none;
}
/* ---------------------------------------------------------------
   COMUTATORUL DE LIMBĂ DIN BARA ZONEI DE LUCRU
   ---------------------------------------------------------------
   Ţintele au 40px, nu 48 ca restul zonei de lucru: butoanele astea nu
   se apasă în timpul lucrului, ci o dată, la început de tură, cu mâna
   liberă. Ce se apasă cu mâna ocupată stă în fâşia din dreapta şi
   rămâne la 48. */
.lucru__top-dr {
  display: flex; align-items: center; gap: .75rem;
}
.lucru__limbi { display: flex; gap: .25rem; }
.lucru__limba {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 40px; padding: 0 .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(246,244,241,.62); text-decoration: none;
  border: 1px solid rgba(246,244,241,.16); border-radius: 999px;
  background: none; cursor: pointer; white-space: nowrap;
}
.lucru__limba:hover { color: #F6F4F1; border-color: rgba(246,244,241,.38); }
.lucru__limba.is-acum {
  color: #151518; background: #F6F4F1; border-color: #F6F4F1;
}
.lucru__limba-steag { font-size: .95rem; line-height: 1; }

.lucru__limbi-meniu { position: relative; }
.lucru__limbi-meniu > summary { list-style: none; }
.lucru__limbi-meniu > summary::-webkit-details-marker { display: none; }
.lucru__limbi-lista {
  position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-end: 0;
  z-index: 40; min-width: 11rem; margin: 0; padding: .3rem; list-style: none;
  background: #FFF; color: #151518; border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.lucru__limbi-optiune {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 .7rem; border-radius: .45rem;
  color: inherit; text-decoration: none; font-size: .9rem;
}
.lucru__limbi-optiune:hover { background: rgba(21,21,24,.06); }
.lucru__limbi-optiune.is-acum { font-weight: 700; }

/* Pe telefon, rolul de sub nume e cel care pleacă, nu limbile: rolul şi-l
   ştie omul, limba o caută. */
@media (max-width: 420px) {
  .lucru__top-dr { gap: .45rem; }
  .lucru__eu-rol { display: none; }
  .lucru__limba { padding: 0 .45rem; }
}

.lucru__eu { text-align: right; line-height: 1.2; }
.lucru__eu-nume { display: block; font-size: .85rem; }
.lucru__eu-rol { display: block; font-size: .72rem; opacity: .6; }

.lucru__main { max-width: 720px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.lucru__titlu { margin: 0 0 1rem; font: 600 1.4rem/1.25 var(--serif, Cinzel), Georgia, serif; }
.lucru__mic { font-size: .85rem; color: rgba(21,21,24,.55); }
.lucru__dep {
  display: inline-block; margin: -.5rem 0 1rem; padding: .2rem .7rem;
  font-size: .78rem; border-radius: 999px;
  background: color-mix(in srgb, var(--dep, #8a8f98) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--dep, #8a8f98) 40%, transparent);
}

.lucru__card { background: #fff; border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.lucru__card h2 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; }
.lucru__card--cere { border-inline-start: 4px solid #B3401F; }

.lucru__grila { display: grid; gap: .8rem; margin: 0 0 1.2rem; }
.lucru__plita {
  display: block; padding: 1.1rem 1.2rem; background: #fff; border-radius: 12px;
  text-decoration: none; color: inherit; border: 1px solid rgba(0,0,0,.06);
}
.lucru__plita:active { background: #f0ece8; }
.lucru__plita-t { display: block; font-size: 1.05rem; font-weight: 600; }
.lucru__plita-s { display: block; margin-top: .2rem; font-size: .85rem; color: rgba(21,21,24,.55); }

.lucru__lista { list-style: none; margin: 0; padding: 0; }
.lucru__lista li + li { border-top: 1px solid rgba(0,0,0,.07); }
.lucru__lista a {
  display: block; padding: .85rem .2rem; text-decoration: none; color: inherit;
  min-height: 48px;
}
.lucru__lista a:active { background: rgba(0,0,0,.03); }
.lucru__lista-t { display: block; font-weight: 500; }
.lucru__lista-s { display: block; font-size: .83rem; color: rgba(21,21,24,.55); margin-top: .1rem; }
.lucru__eticheta { font-size: .7rem; color: rgba(21,21,24,.45); font-weight: 400; margin-inline-start: .4rem; }

.lucru__doc { background: #fff; border-radius: 12px; padding: 1.2rem; }
.lucru__text { font-size: 1.02rem; line-height: 1.7; }

/* Menţiunea de pe un document tradus. Deasupra textului, nu sub el: cine
   citeşte trebuie să ştie ÎNAINTE care variantă are greutate, nu după ce
   a citit-o. Stinsă ca ton — e o precizare, nu o alarmă; o alarmă pe
   fiecare document tradus se ignoră de la al treilea. */
.lucru__nota--tradus {
  margin: 0 0 1.1rem;
  padding: .65rem .85rem;
  border-inline-start: 3px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.035);
  border-radius: 0 6px 6px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft, #5a5a5a);
}

/* Pe ecran întors de la dreapta, colţurile rotunjite trebuie să se
   întoarcă şi ele, altfel dunga stă într-o parte şi rotunjirea în
   cealaltă. `border-inline-start` se mută singur; `border-radius` nu. */
[dir="rtl"] .lucru__nota--tradus { border-radius: 6px 0 0 6px; }
.lucru__fisier { text-align: center; padding: 1rem 0; }
.lucru__confirm { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(0,0,0,.08); }
.lucru__confirmat {
  margin-top: 2rem; padding: .8rem 1rem; border-radius: 8px;
  background: rgba(47,122,90,.1); color: #2F7A5A; font-size: .9rem;
}
.lucru__inapoi { margin-top: 1.5rem; font-size: .9rem; }
.lucru__stare { padding: .8rem 1rem; border-radius: 8px; background: rgba(21,21,24,.06); font-size: .9rem; }
.lucru__stare--contestat { background: rgba(179,64,31,.1); color: #B3401F; }
.lucru__stare--verificat { background: rgba(47,122,90,.1); color: #2F7A5A; }

.lucru__bara {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: flex; background: #fff; border-top: 1px solid rgba(0,0,0,.1);
  padding-bottom: env(safe-area-inset-bottom);
}
.lucru__bara-b {
  flex: 1; text-align: center; padding: .9rem .3rem; min-height: 56px;
  font-size: .85rem; text-decoration: none; color: rgba(21,21,24,.55);
}
.lucru__bara-b.is-on { color: #151518; font-weight: 600; box-shadow: inset 0 2px 0 #B3401F; }
.lucru__bara-b--quiet { flex: 0 0 auto; padding-inline: 1rem; opacity: .55; }
.lucru__iesire { max-width: 720px; margin: 0 auto 1rem; padding: 0 1rem; }
.lucru__iesire button {
  border: 0; background: none; font-size: .85rem; color: rgba(21,21,24,.45);
  cursor: pointer; padding: .4rem 0;
}

/* ---------- formularul de borderou ---------- */
.bord { background: #fff; border-radius: 12px; padding: 1.1rem; }
.bord fieldset { border: 0; margin: 0; padding: 0; }
.bord fieldset[disabled] { opacity: .75; }
.bord__h { margin: 1.6rem 0 .6rem; font-size: .95rem; font-weight: 600; }
.bord__rand { display: flex; gap: .8rem; flex-wrap: wrap; }
.bord__rand > .field { flex: 1 1 140px; }
.bord__grila { display: grid; gap: 0 .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bord__bani { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- raionul şi casierul ---------- */
.bord__rol {
  margin: 1rem 0 0; padding: .8rem .9rem; border-radius: 10px;
  background: rgba(21,21,24,.035); border: 1px solid rgba(21,21,24,.07);
  display: grid; gap: .6rem;
}
.bord__rol-r { margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bord__rol-e { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.bord__rol-b {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--rai, #8a8f98); flex: 0 0 auto;
}
.bord__rol-alt { margin: 0; }
.bord__casier { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.bord__casier input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.bord__casier > span { display: grid; gap: .15rem; }

/* Blocul cu bancnote dispare de tot când nu ţii casa — nu se
   înnegreşte. Un tabel gri, pe care nu poţi scrie, e o întrebare
   fără răspuns la ora unu noaptea. */
.bord__mon.is-ascuns,
.bord__fara-mon.is-ascuns { display: none; }
.bord__fara-mon {
  margin: 1rem 0 0; padding: .8rem .9rem; border-radius: 10px;
  font-size: .9rem; line-height: 1.5;
  background: rgba(47,122,90,.08); border: 1px solid rgba(47,122,90,.2);
}

.bord__total {
  margin: 1rem 0; padding: .9rem 1rem; border-radius: 10px;
  background: rgba(21,21,24,.04); border: 1px solid transparent;
}
.bord__total.is-bun { background: rgba(47,122,90,.1); border-color: rgba(47,122,90,.25); }
.bord__total.is-rau { background: rgba(179,64,31,.09); border-color: rgba(179,64,31,.3); }
.bord__total-rand { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.bord__total-rand strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.bord__total-rand--dif strong { font-size: 1.35rem; }
.bord__nota { margin: .4rem 0 0; font-size: .82rem; color: rgba(21,21,24,.6); }

.bord__miscare { display: grid; gap: .4rem; grid-template-columns: 1fr auto; margin-bottom: .7rem; }
.bord__miscare select { grid-column: 1 / -1; }
.bord__miscare input[name="m_amount[]"] { text-align: right; }
.bord__scoate {
  border: 1px solid rgba(0,0,0,.15); background: #fff; border-radius: 8px;
  width: 44px; min-height: 44px; font-size: 1.2rem; cursor: pointer; color: rgba(21,21,24,.5);
}
@media (min-width: 620px) {
  .bord__miscare { grid-template-columns: 1.2fr .7fr 1.6fr .8fr auto; }
  .bord__miscare select { grid-column: auto; }
}

.bord__butoane { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.bord__butoane .btn { flex: 1 1 160px; justify-content: center; min-height: 50px; }

.bord__card {
  display: block; background: #fff; border-radius: 12px; padding: .9rem 1rem;
  margin-bottom: .7rem; text-decoration: none; color: inherit;
}
.bord__card-sus { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.bord__card-jos { display: flex; gap: 1rem; margin-top: .3rem; font-size: .88rem; color: rgba(21,21,24,.6); }
.bord__dif { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.bord__dif--rau { color: #B3401F; font-weight: 600; }
.bord__card-nota { margin: .5rem 0 0; font-size: .84rem; color: #B3401F; }

/* Totalul rămâne lipit deasupra barei de jos cât timp completezi.
   E singurul număr pentru care omul deschide formularul; dacă îl pierde
   din vedere după ce derulează, calculul în timp real nu mai ajută la
   nimic — se uită la el abia la final, adică prea târziu. */
@media (max-width: 760px) {
  .bord__total { position: sticky; bottom: 68px; z-index: 5; box-shadow: 0 -6px 18px rgba(0,0,0,.06); }

  /* FONDUL TREBUIE SĂ FIE OPAC.
     Culorile de mai sus sunt translucide — 4% negru, 10% verde — fiindcă
     au fost alese pentru o cutie care stă în pagină, peste alb. Lipită
     deasupra formularului, aceeaşi cutie lasă textul de dedesubt să
     treacă prin ea: pe telefon, „Diferenţă 0,00 lei" se citea peste
     „Modern / CEC" şi peste câmpul lui.

     Se pune fondul paginii dedesubt şi culoarea peste el. Cifra pentru
     care există toată foaia n-are voie să fie singura care nu se poate
     citi. */
  .bord__total {
    background-color: var(--surface, #fff);
    background-image: linear-gradient(rgba(21,21,24,.04), rgba(21,21,24,.04));
  }
  .bord__total.is-bun {
    background-image: linear-gradient(rgba(47,122,90,.1), rgba(47,122,90,.1));
  }
  .bord__total.is-rau {
    background-image: linear-gradient(rgba(179,64,31,.09), rgba(179,64,31,.09));
  }
}

/* =====================================================================
   21. ÎMPĂRȚIREA SĂLII PE TURĂ
   ===================================================================== */

.tura__cap {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin-bottom: 1rem;
}

.tura__oameni { display: flex; flex-wrap: wrap; gap: .5rem; }

.tura__om {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--linie, rgba(0,0,0,.14));
  background: var(--card, #fff);
  font: inherit; font-size: .9rem; color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.tura__om:hover   { border-color: var(--c, #666); }
.tura__om.is-ales { border-color: var(--c, #666); background: color-mix(in srgb, var(--c) 10%, transparent); }

.tura__bulina {
  width: 12px; height: 12px; flex: 0 0 auto;
  background: var(--c, #999);
  border-radius: 50%;
}
.tura__om--sterge { --c: #999; }
.tura__om--sterge .tura__bulina { background: transparent; border: 1.5px dashed #999; }

.tura__cate {
  min-width: 1.5rem; text-align: center;
  font-size: .78rem; opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Raioanele, sub oameni. Butoanele lor seamănă cu ale oamenilor —
   aceeaşi bulină, aceeaşi formă — fiindcă fac acelaşi lucru: pun
   mese pe cineva. Linia de deasupra le desparte, ca să nu se
   apese unul crezând că e celălalt. */
.tura__raioane {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--linie, rgba(0,0,0,.1));
}
.tura__rai-e { font-size: .82rem; opacity: .6; }
.tura__rai {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  border: 1px dashed var(--c, #666);
  border-radius: 999px;
  background: var(--card, #fff);
  font: inherit; font-size: .88rem; color: inherit;
  cursor: pointer;
}
.tura__rai:hover:not([disabled]) { background: color-mix(in srgb, var(--c) 12%, transparent); }
.tura__rai[disabled] { opacity: .4; cursor: default; }
.tura__rai-spune { font-size: .82rem; opacity: .75; }

/* Mesele: pătrate mari, apăsabile cu degetul pe o tabletă la bar. */
.tura__mese {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .5rem;
}

.tura__masa {
  position: relative;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .8rem;
  min-height: 74px;
  border: 1px solid var(--linie, rgba(0,0,0,.14));
  border-left: 4px solid transparent;
  background: var(--card, #fff);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.tura__masa:hover  { border-color: #999; }
.tura__masa.is-pusa {
  border-left-color: var(--c, #666);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}

.tura__cod      { font-weight: 600; font-size: .95rem; }
.tura__eticheta { font-size: .76rem; opacity: .7; line-height: 1.3; }
.tura__cine     { font-size: .78rem; margin-top: auto; }
.tura__implicit { opacity: .45; font-style: italic; }

/* Selectul e ce se trimite la server. Nu-l ascundem cu `display:none`:
   trebuie să rămână la îndemâna tastaturii și a cititoarelor de ecran. */
.tura__select {
  position: absolute; inset: auto .4rem .4rem auto;
  width: 22px; height: 22px; overflow: hidden; opacity: 0;
}
.tura__select:focus-within { opacity: 1; width: auto; height: auto; overflow: visible; z-index: 2; }

.tura__jos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   22. MÂNERELE DIN PLANUL SĂLII
   =====================================================================

   Colțul din dreapta-jos face masa mai mare, rotița din dreapta-sus o
   învârte. Amândouă stau aproape invizibile până se trece cu degetul
   peste masă: un plan cu patruzeci de mese, fiecare cu două puncte
   negre în colț, e un plan pe care nu se mai vede sala.
   ===================================================================== */

.mese__drumuri { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }

.ed__el { touch-action: none; }

.ed__maner {
  position: absolute;
  width: 16px; height: 16px;
  background: var(--card, #fff);
  border: 1.5px solid var(--ink, #151518);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 3;
  /* Zona de apăsat e mai mare decât se vede — 16px cu degetul se ratează. */
  box-shadow: 0 0 0 6px transparent;
}
.ed__el:hover .ed__maner,
.ed__el:focus-within .ed__maner,
.ed__el.e-ales .ed__maner,
.ed__el.se-trage .ed__maner { opacity: 1; }

/* ---------------------------------------------------------------------
   ELEMENTUL ALES

   Un contur, nu o umbră colorată: masa are deja culoarea ei, aleasă din
   panou, iar o a doua culoare peste ea ar face-o să pară altă masă. Pe
   tabletă, unde nu există „trecut cu degetul peste", conturul ăsta e
   singurul fel în care se vede ce e ales.
   --------------------------------------------------------------------- */
.ed__el.e-ales {
  outline: 2px solid var(--accent, #7a5c3e);
  outline-offset: 3px;
  z-index: 40 !important;
}

/* ---------------------------------------------------------------------
   LINIILE DE ALINIERE

   Apar doar cât ţine mutarea, şi dispar imediat. O linie care rămâne pe
   ecran după ce ai dat drumul mesei arată ca o greşeală de desen.
   --------------------------------------------------------------------- */
.ed__ghid {
  position: absolute;
  background: var(--accent, #7a5c3e);
  opacity: .75;
  pointer-events: none;
  z-index: 60;
}
.ed__ghid--v { top: 0; bottom: 0; width: 1px; }
.ed__ghid--o { left: 0; right: 0; height: 1px; }

/* ---------------------------------------------------------------------
   BARA ELEMENTULUI ALES

   Lipită sub bara de sus, ca să nu sară pagina când apare şi dispare.
   Pe telefon se strânge pe două rânduri în loc să iasă din ecran.
   --------------------------------------------------------------------- */
.ed__bara-el {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .5rem .6rem;
  margin-bottom: .6rem;
  border: 1px solid var(--linie, #00000014);
  border-radius: 10px;
  background: var(--card, #fff);
  position: sticky;
  top: .4rem;
  z-index: 70;
}

.ed__bara-nume {
  font-weight: 650;
  margin-right: .3rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ed__bara-el { position: static; }
  .ed__bara-el .btn { flex: 1 1 auto; }
}

.ed__maner--marime {
  right: -8px; bottom: -8px;
  cursor: nwse-resize;
}
.ed__maner--rotire {
  right: -8px; top: -8px;
  border-radius: 50%;
  cursor: grab;
  /* Săgeata circulară, desenată o dată. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151518' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Denumirea mesei, sub cod, pe plan. */
.ed__eticheta {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  opacity: .65;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Codul și denumirea, unul sub altul. Pe același rând ies „14Masa lun…",
   care nu se citește nici ca număr, nici ca nume. */
.ed__el--masa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  overflow: hidden;
}
.ed__el--masa .plan__cod { line-height: 1.1; }

/* =====================================================================
   POTRIVIREA FOTOGRAFIILOR  (/panou/poze)

   Ecranul ăsta se folosește de pe telefon, în picioare, cu o mână. De
   aia tot ce se apasă are cel puțin 44px pe latura mică, iar biblioteca
   e o grilă care se îndesește singură, nu un tabel cu derulare laterală.

   Fotografia e conținutul, nu decorul: rămâne pătrată peste tot, ca
   ochiul să compare două poze fără să le corecteze mintal proporția.
   ===================================================================== */

.pz-sumar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  align-items: baseline;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .85rem;
}
.pz-sumar strong { font-variant-numeric: tabular-nums; }

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

.pz-lista { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pz-rand { background: var(--surface); }

.pz-rand__l {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem .7rem;
  min-height: 60px;
  color: inherit;
  text-decoration: none;
}
.pz-rand__l:hover { background: #FBF9F7; }

.pz-rand__poza {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--sand);
}
.pz-rand__poza--gol {
  display: grid;
  place-items: center;
  background: var(--err-bg);
  color: var(--err);
  font-size: 1.3rem;
  font-weight: 600;
}

.pz-rand__text { min-width: 0; flex: 1; }
.pz-rand__nume { display: block; font-weight: 500; }
.pz-rand__sub  { display: block; font-size: .78rem; color: var(--ink-faint); }
.pz-rand__sageata { flex: none; color: var(--ink-faint); font-size: 1.3rem; }

/* ---------- ecranul unui preparat ---------- */

.pz-drum { display: flex; gap: .8rem; align-items: baseline; margin-bottom: .8rem; font-size: .85rem; }

.pz-acum { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }

.pz-mare { margin: 0; }
.pz-mare__i, .pz-mare__gol {
  display: block;
  width: min(100%, 260px);
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--sand);
}
.pz-mare__gol {
  display: grid;
  place-items: center;
  background: var(--err-bg);
  color: var(--err);
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
}
.pz-mare__et { margin-top: .35rem; font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }

.pz-acum__act { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }

.pz-sec { margin-bottom: 1.6rem; }
.pz-h {
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .3rem;
}
.pz-h__nr {
  font-size: .72rem;
  padding: 0 .38rem;
  min-width: 1.35em;
  text-align: center;
  background: var(--ink);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.pz-ajutor { font-size: .8rem; color: var(--ink-soft); margin-bottom: .7rem; max-width: 62ch; }
.pz-gol    { font-size: .82rem; color: var(--ink-faint); padding: .9rem 0; }

/* Formularele de o apăsare nu au voie să ocupe spațiu. */
.pz-f { display: contents; }

/* ---------- galeria preparatului ---------- */

.pz-gal { display: flex; flex-wrap: wrap; gap: .55rem; }
.pz-gal__el { margin: 0; position: relative; width: 104px; }
.pz-gal__el img { display: block; width: 104px; height: 104px; object-fit: cover; background: var(--sand); }

.pz-gal__act { display: flex; gap: 1px; margin-top: 1px; }
.pz-mic {
  flex: 1;
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.pz-mic:hover { background: #FBF9F7; }
.pz-mic--x:hover { background: var(--err); border-color: var(--err); color: #fff; }

/* ---------- biblioteca ---------- */

.pz-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .55rem;
}

.pz-tile { margin: 0; position: relative; }

.pz-tile__b {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.pz-tile__b img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); }
.pz-tile__b:hover  { border-color: var(--ink-faint); }
.pz-tile__b:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.pz-tile.is-acum .pz-tile__b { border-color: var(--terra); }
.pz-tile.is-gal  .pz-tile__b { border-color: var(--verde); }

/* „+” stă peste colțul fotografiei: pe telefon, o a doua acțiune pusă
   sub poză ar dubla înălțimea grilei și ar înjumătăți câte poze vezi
   dintr-o privire. */
.pz-plus {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(21, 21, 24, .72);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.pz-plus:hover  { background: var(--ink); }
.pz-plus.is-on  { background: var(--verde); }

.pz-tile__jos { padding-top: .22rem; display: flex; flex-wrap: wrap; gap: .2rem; align-items: baseline; }
.pz-tile__nume {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pz-eticheta { font-size: .6rem; padding: 0 .25rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pz-eticheta--acum { background: var(--terra); color: var(--cream); }
.pz-eticheta--alt  { background: var(--warn-bg); color: var(--warn); }

.is-blocat { opacity: .45; cursor: not-allowed; }

.pz-urmator { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding-top: .6rem; border-top: 1px solid var(--line); }

/* ---------- confirmarea salvării ---------- */

.pz-vorba {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 2rem);
  padding: .55rem 1rem;
  background: var(--ink);
  color: var(--cream);
  font-size: .85rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.pz-vorba--rau { background: var(--err); color: #fff; }

/* Butonul „Scoate poza” se ascunde, nu dispare din pagină — vezi
   comentariul din şablon. `display:contents` de pe .pz-f l-ar face
   vizibil şi cu [hidden] pe părinte, de aia regula asta. */
.pz-sterge[hidden] { display: none; }


/* =====================================================================
   PROCEDURI
   Două ecrane cu nevoi opuse: unul se citește pe telefon, în picioare,
   cu o mână; celălalt se citește pe laptop, cu tabele dense. Aceleași
   date, altă densitate.
   ===================================================================== */

.card__nota {
  margin-top: .7rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* O cifră care merită privită a doua oară. Nu roșu de eroare — nimic
   n-a mers prost, doar nu s-a făcut. */
.e-slab { color: var(--err); font-weight: 600; }


/* ---------- lista de fișe, pe telefon ---------- */

.proc__lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }

.proc__rand > a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t c" "s c";
  align-items: center;
  gap: .1rem .8rem;
  /* 64px, nu 44: se apasă cu degetul mare, pe ecran murdar, între două
     mese. Ținta mică e cea pe care o ratezi de trei ori și apoi renunți
     să mai completezi fișa. */
  min-height: 64px;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.proc__rand.is-gata    > a { border-left-color: var(--ok); }
.proc__rand.is-inceput > a { border-left-color: var(--warn); }
.proc__rand.is-refacut > a { border-left-color: var(--err); background: var(--err-bg); }

.proc__t { grid-area: t; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.proc__s { grid-area: s; font-size: .8rem; color: var(--ink-faint); }

.proc__contor {
  grid-area: c;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
}
.proc__contor.is-bun  { color: var(--ok); }
.proc__contor.is-slab { color: var(--err); }


/* ---------- bara de contor, lipită sus ---------- */

.proc__bara {
  position: sticky;
  /* Sub bara de titlu a zonei de lucru, plus decupajul telefonului. */
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .2rem;
  margin-bottom: .6rem;
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.proc__bara-sina {
  flex: 1;
  height: 6px;
  background: var(--line-soft);
  overflow: hidden;
}
.proc__bara-sina > i { display: block; height: 100%; width: 0; background: var(--warn); transition: width .15s ease-out; }
.proc__bara.is-plin .proc__bara-sina > i { background: var(--ok); }
.proc__bara.is-plin { color: var(--ok); }

.proc__h {
  margin: 1.3rem 0 .5rem;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ---------- bifele ---------- */

.proc__bife { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.proc__bife > li { display: grid; gap: .35rem; }

/* La „bifare + cantitate", cantitatea stă LA DREAPTA punctului, ca pe
   hârtie — nu dedesubt. Pusă pe rândul următor, lista de șaisprezece
   pregătiri devine treizeci și două de rânduri și omul derulează de
   două ori mai mult pentru aceeași treabă. */
.proc[data-fel="cantitati"] .proc__bife > li {
  grid-template-columns: 1fr 7rem;
  align-items: stretch;
  gap: .4rem;
}

.bifa {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  /* Se apasă pe TOT rândul, nu pe căsuța de 14px. Pe hârtie bifai unde
     ajungeai cu pixul; aici trebuie să fie la fel de iertător. */
  min-height: 52px;
  padding: .7rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}

.bifa input { position: absolute; opacity: 0; width: 0; height: 0; }

.bifa__semn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: .05rem;
  border: 2px solid var(--line);
  background: var(--surface);
  position: relative;
}

.bifa input:checked + .bifa__semn {
  background: var(--ok);
  border-color: var(--ok);
}
.bifa input:checked + .bifa__semn::after {
  content: '';
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.bifa input:focus-visible + .bifa__semn { outline: 2px solid var(--ember); outline-offset: 2px; }

.bifa__t { font-size: .97rem; line-height: 1.4; }
.bifa input:checked ~ .bifa__t { color: var(--ink-faint); }

.bifa--mic { min-height: 0; padding: .4rem .6rem; }
.bifa--mic .bifa__semn { width: 18px; height: 18px; }
.bifa--mic .bifa__semn::after { left: 5px; top: 1px; width: 4px; height: 9px; }
.bifa--mic .bifa__t { font-size: .85rem; }

.proc__cant {
  width: 100%;
  min-height: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: .5rem .7rem;
  font-size: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
}


/* ---------- fișa de stoc ---------- */

.proc__tabel { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--surface); }
.proc__tabel th, .proc__tabel td { padding: .35rem .4rem; border-bottom: 1px solid var(--line-soft); }
.proc__tabel thead th {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.proc__tabel thead th:first-child { text-align: left; }
.proc__tabel tbody th { text-align: left; font-weight: 500; line-height: 1.25; }
.proc__tabel tbody th small { display: block; font-size: .68rem; color: var(--ink-faint); font-weight: 400; }

.proc__cifra {
  /* Lat cât să încapă „12,5" și nu mai mult: patru câmpuri pe un ecran
     de telefon, fără derulare laterală. */
  width: 3.6rem;
  min-height: 42px;
  padding: .3rem .35rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--line);
}
.proc__cifra:focus { border-color: var(--ember); outline: none; }


/* ---------- panou: punctele ratate ---------- */

.proc__ratate { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.proc__ratate li { line-height: 1.4; }
.proc__ratate small { display: block; font-size: .72rem; color: var(--ink-faint); }


/* ---------- panou: editarea șablonului ---------- */

.sablon__rand {
  display: grid;
  grid-template-columns: 9rem 1fr 8rem 4rem auto;
  gap: .4rem;
  margin-bottom: .35rem;
  align-items: center;
}

@media (max-width: 800px) {
  .sablon__rand { grid-template-columns: 1fr 1fr auto; }
  .sablon__lab { grid-column: 1 / -1; }
}


/* =====================================================================
   MONETAR
   Tabelul de numărat bancnote. Trei coloane și nimic altceva: nominal,
   bucăți, valoare — exact fișa de hârtie, cu singura deosebire că
   ultima coloană se completează singură.
   ===================================================================== */

.mon { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); }
.mon th, .mon td { padding: .3rem .6rem; border-bottom: 1px solid var(--line-soft); }
.mon thead th {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.mon tbody th { text-align: left; font-variant-numeric: tabular-nums; font-weight: 600; }

.mon__buc {
  width: 4.5rem;
  min-height: 42px;
  padding: .3rem .4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--line);
}
.mon__buc:focus { border-color: var(--ember); outline: none; }

.mon__tot th, .mon__tot td {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  padding-top: .6rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.mono { font-variant-numeric: tabular-nums; }


/* ---------- cele trei perechi de verificat ---------- */

.bord__perechi {
  display: grid;
  gap: .3rem;
  margin: .8rem 0 1rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
}

.bord__pereche {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: .88rem;
}
.bord__pereche span { color: var(--ink-soft); }
.bord__pereche strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.e-bun { color: var(--ok); }

/* Rândul de ospătar: nume lat, trei cifre înguste. */
.bord__ospatar { grid-template-columns: 1fr 6rem 6rem 5rem auto; }
@media (max-width: 700px) {
  .bord__ospatar { grid-template-columns: 1fr 1fr auto; }
  .bord__ospatar input[name="o_name[]"] { grid-column: 1 / -1; }
}
.bord__pereche[hidden] { display: none; }

/* =====================================================================
   CERERI DE CONT
   =====================================================================

   Blocul din capul paginii de utilizatori. Arată altfel decât restul
   paginii deliberat: e singurul loc de acolo unde cineva ASTEAPTĂ. O
   listă care se citește și o listă care se golește n-au voie să arate
   la fel, altfel a doua se citește ca prima și rămâne plină.

   Dunga din stânga e singurul semn de culoare. N-am pus fundal colorat
   pe tot cardul: ar fi strigat mai tare decât merită un lucru care se
   rezolvă din două apăsări, iar peste o săptămână n-ar mai fi fost
   văzut deloc. */

.card--cereri {
  border-left: 3px solid var(--warn);
  margin-bottom: 1.4rem;
}

/* Un rând de cerere e un formular întreg: cine e omul, ce rol îi dai,
   și cele două butoane. Pe ecran lat stau pe un rând; pe telefon se
   așază unul sub altul, în ordinea în care se gândește — întâi cine e,
   apoi ce rol, apoi decizia. */
.cerere {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem auto;
  gap: 1rem;
  align-items: start;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}

.cerere:first-of-type { border-top: 0; padding-top: .3rem; }

.cerere__cine .cell-sub { margin-top: .15rem; }

.cerere__rol {
  display: grid;
  gap: .25rem;
}

.cerere__rol .f__l { margin-top: .35rem; }
.cerere__rol .f__l:first-child { margin-top: 0; }

.cerere__act {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cerere__act .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .cerere { grid-template-columns: 1fr; gap: .7rem; }
  .cerere__act { flex-direction: row; }
}

.proc__auto {
  margin-inline-start: .3rem;
  font-size: .8em;
  opacity: .45;
  text-decoration: none;
  border: 0;
  cursor: help;
}

/* Anunțuri — panou. Lista de „n-au citit" e un simplu tabel de nume:
   nu are nevoie de mai mult, fiindcă singurul lucru pe care îl faci cu
   ea e să te uiți peste ea o dată, dimineața. */
.anunt-necitit {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}
.anunt-necitit li {
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.anunt__text { line-height: 1.6; margin-bottom: .8rem; }

/* ---------------------------------------------------------------------
   POZELE ATAȘATE LA BORDEROU
   Grupul care încă n-are poza obligatorie e marcat cu o dungă, nu cu
   roșu peste tot: la ora unu noaptea, un ecran roșu îl face pe om să
   caute ce a stricat, iar aici n-a stricat nimic — doar n-a terminat.
   --------------------------------------------------------------------- */
.bord__poze { display: grid; gap: .7rem; grid-template-columns: 1fr; margin: .6rem 0 1rem; }
@media (min-width: 760px) { .bord__poze { grid-template-columns: 1fr 1fr; } }

.poza-grup { border: 1px solid var(--line); background: var(--surface); padding: .7rem; }
.poza-grup--lipsa { border-left: 3px solid var(--warn); }
.poza-grup__cap { display: flex; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.poza-grup__cap strong { font-size: .92rem; }

.poza-lista { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .84rem; }
/* Rândul se rupe pe verticală ca să încapă citirea sub numele pozei —
   pe telefon, cele două nu stau una lângă alta. */
.poza-lista li { display: flex; gap: .45rem; align-items: center; padding: .2rem 0; flex-wrap: wrap; }
.poza-lista a { word-break: break-all; }

/* ---------------------------------------------------------------------
   POZA LÂNGĂ CIFRELE EI (1.68.0)
   Grupa nu mai stă într-un bloc comun la capăt, ci sub secţiunea pe
   care o dovedeşte. Marginea din stânga o leagă vizual de cifrele de
   deasupra: e hârtia lor, nu un ataşament oarecare.
   --------------------------------------------------------------------- */
.bord__grila + .poza-grup,
.tbl-wrap + .poza-grup { margin: .2rem 0 1.2rem; border-left: 3px solid var(--line); }

/* ---------------------------------------------------------------------
   CE A CITIT CITITORUL DE BONURI (1.68.0)
   Galben, nu roşu, şi niciodată o oprire. Vezi partial-ul pentru de ce:
   pe scurt, un cititor care poate greşi n-are voie să strige, fiindcă
   strigătul lui devalorizează roşul de la diferenţa de casă, care chiar
   contează.
   --------------------------------------------------------------------- */
.citire {
  display: block; flex-basis: 100%;
  margin: .3rem 0 .1rem; padding: .5rem .6rem;
  border-radius: 8px; font-size: .82rem; line-height: 1.5;
}
.citire__mic { display: block; opacity: .75; font-size: .78rem; margin-top: .2rem; }

.citire--asteapta { background: rgba(21,21,24,.05); color: var(--ink-faint); }
.citire--esuat    { background: rgba(21,21,24,.05); }
.citire--bun      { background: rgba(47,122,90,.09); }
.citire--dif      { background: rgba(200,121,31,.12); border: 1px solid rgba(200,121,31,.35); }

.citire__det summary { cursor: pointer; opacity: .7; }
.citire__det ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.citire__dif { list-style: none; margin: .35rem 0 0; padding: 0; }
.citire__dif li {
  display: flex; flex-wrap: wrap; gap: .1rem .8rem;
  padding: .25rem 0; border-top: 1px solid rgba(200,121,31,.25);
}
.citire__dif li:first-child { border-top: 0; }
.citire__camp { flex: 1 1 100%; font-weight: 600; }
/* Cifrele cu cifre tabulare: două sume aşezate una sub alta se compară
   cu ochiul doar dacă zecimalele cad în aceeaşi coloană. */
.citire__pe-bon, .citire__scris { font-variant-numeric: tabular-nums; }
.citire__pe-bon strong { color: var(--warn, #b3701f); }

.poza-scoate {
  border: 1px solid var(--line); background: none; cursor: pointer;
  width: 26px; height: 26px; line-height: 1; flex: 0 0 auto; color: var(--ink-faint);
}
.poza-scoate:hover { color: var(--err); border-color: var(--err); }

/* Ținta de atins e mare: se apasă cu degetul, în picioare, noaptea. */
.poza-alege { width: 100%; min-height: 44px; font-size: .84rem; padding: .4rem; }

/* ---------------------------------------------------------------------
   NOTA EXPLICATIVĂ
   Blocul de diferențe e marcat, fiindcă e o veste: cifrele nu se
   potrivesc. Formularul de sub el e liniștit — omul are deja destulă
   agitație la ora unu noaptea.
   --------------------------------------------------------------------- */
.nota-ex { border: 1px solid var(--warn); background: var(--warn-bg); padding: .8rem; margin: 1rem 0; }
.nota-ex__difs ul { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.nota-ex__difs li { padding: .1rem 0; }

.nota-form { margin-top: 1.2rem; }
.nota-form__h { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
                color: var(--ink-faint); margin: 1rem 0 .4rem; }
.nota-bife { display: grid; gap: .2rem; grid-template-columns: 1fr; margin-bottom: .6rem; }
@media (min-width: 700px) { .nota-bife { grid-template-columns: 1fr 1fr; } }
.nota-declar { margin: .9rem 0; padding: .6rem; border: 1px solid var(--line); }
.adm__lista { margin: .3rem 0 .8rem; padding-left: 1.1rem; font-size: .9rem; }
.adm__lista li { padding: .1rem 0; }


/* =====================================================================
   RAPORTUL ZILNIC ȘI GRAFICELE

   Graficele sunt desenate pe server, în SVG — vezi App\Core\Grafic.
   Aici stă doar așezarea lor: cât loc ocupă, cum se rup pe telefon și
   ce culoare are eticheta de lângă. Desenul propriu-zis nu depinde de
   foaia asta, ca să ajungă întreg și în mailul către contabilitate.
   ===================================================================== */

/* --- capul paginii: ziua, navigarea, starea ------------------------- */
.rz-cap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem;
  margin-bottom: 1rem;
}
.rz-cap__zi { display: flex; align-items: center; gap: .5rem; }
.rz-cap__form { margin: 0; }
.rz-cap__form .field__i { width: auto; min-width: 9.5rem; }
.rz-cap__stare { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.rz-av { margin-bottom: 1rem; }

/* --- cifrele zilei -------------------------------------------------- */
.rz-cifre {
  display: grid; gap: .6rem; margin-bottom: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .rz-cifre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rz-cifra {
  background: var(--surface); border: 1px solid var(--line);
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .25rem;
}
.rz-cifra__e {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rz-cifra__v { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rz-cifra--rau .rz-cifra__v { color: var(--err); }
.rz-cifra--ok  .rz-cifra__v { color: var(--ok); }

/* --- grila de grafice ----------------------------------------------- */
.rz-grile {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .rz-grile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rz-scroll { overflow-x: auto; }
.rz-ratate li { padding: .25rem 0; }
.rz-tabel tr.is-ciorna { opacity: .55; }

/* ---------- performanţa zilei (1.67.0) ---------- */
.kpi__h {
  margin: 1.4rem 0 .5rem; font-size: .88rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; opacity: .65;
}
.kpi__h:first-of-type { margin-top: .4rem; }
.kpi__t th[scope="row"] { font-weight: 600; }
.kpi__t th[scope="row"] .adm__mic { display: block; font-weight: 400; }
.kpi__bul {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--rai, #8a8f98); margin-right: .35rem;
}
/* Raionul care n-a avut pe nimeni rămâne în tabel, stins: e un răspuns
   („terasa n-a fost deschisă"), nu un rând lipsă. */
.kpi__gol { opacity: .5; }
.rz-desemn { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.rz-semnat__corp { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.rz-semnat__corp > div { flex: 1 1 14rem; }

/* Pânza de semnat. În zona de lucru stă în app.css; panoul nu încarcă
   foaia aia, iar o casetă de semnat fără chenar nu se vede că e o
   casetă de semnat. */
.rz-panza {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 10 / 3;
  background: #fff; border: 1px dashed var(--line);
  touch-action: none; cursor: crosshair;
  margin: .4rem 0 .6rem;
}

/* --- inelul și legenda lui ------------------------------------------ */
.graf-pereche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
}
.graf-inel { flex: 0 0 auto; max-width: 100%; height: auto; }

.graf-legenda {
  flex: 1 1 12rem; list-style: none; margin: 0; padding: 0;
  font-size: .86rem;
}
.graf-legenda li {
  display: grid; align-items: baseline; gap: .5rem;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  padding: .22rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.graf-legenda li:last-child { border-bottom: 0; }
.graf-legenda i { width: 10px; height: 10px; align-self: center; }
.graf-legenda__nume { overflow-wrap: anywhere; }
.graf-legenda b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.graf-legenda em {
  font-style: normal; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- barele --------------------------------------------------------- */
.graf-bare { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.graf-bare li {
  display: grid; align-items: center; gap: .5rem;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto;
  padding: .28rem 0;
}
@media (max-width: 560px) {
  .graf-bare li { grid-template-columns: minmax(0, 1fr) auto; }
  .graf-bare__sina { grid-column: 1 / -1; order: 3; }
}
.graf-bare__nume { overflow-wrap: anywhere; }
.graf-bare__nume small { display: block; color: var(--ink-faint); font-size: .76rem; }
.graf-bare__sina { background: rgba(21,21,24,.07); height: 12px; }
.graf-bare__sina i { display: block; height: 100%; min-width: 2px; }
.graf-bare__val { font-variant-numeric: tabular-nums; white-space: nowrap; }


/* =====================================================================
   ORAR, PONTAJ, SALARIZARE

   Calendarul e un tabel, nu o grilă CSS. Pe ecran lat arată la fel, dar
   un tabel are capul lipit de coloane: când derulezi orizontal peste
   paisprezece zile, numele secției rămâne acolo unde trebuie. Cu o grilă
   ar fi trebuit rescris același lucru din JavaScript.
   ===================================================================== */

.orar { width: 100%; border-collapse: collapse; font-size: .84rem; }
.orar th, .orar td { border: 1px solid var(--line); vertical-align: top; padding: .35rem; }
.orar thead th {
  background: rgba(21,21,24,.04); text-align: left;
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
.orar thead th small { display: block; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.orar th.is-azi, .orar td.is-azi { background: rgba(217,164,65,.10); }

/* Numele secției rămâne pe loc la derulare orizontală. Fără asta, la
   ziua a cincea nu mai știi la ce secție te uiți. */
.orar__sectie {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface); min-width: 8rem;
  border-left: 3px solid var(--dep, var(--line)) !important;
  font-weight: 600; text-align: left;
}
.orar__zi { min-width: 8.5rem; }

.tura {
  border: 1px solid var(--line); border-left: 3px solid var(--terra);
  background: var(--surface); padding: .35rem .45rem; margin-bottom: .3rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.tura--gol    { border-left-color: var(--err); background: var(--err-bg); }
.tura--ciorna { border-style: dashed; opacity: .82; }
.tura__ore { font-weight: 600; font-variant-numeric: tabular-nums; }
.tura__om  { overflow-wrap: anywhere; }
.tura--gol .tura__om { color: var(--err); font-weight: 600; font-size: .78rem; letter-spacing: .04em; }
.tura__fct, .tura__min { font-size: .74rem; color: var(--ink-faint); }
.tura__act { display: flex; gap: .3rem; margin-top: .2rem; }
.tura__act form { display: inline; }
.tura__b {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .72rem; color: var(--ink-faint); text-decoration: underline;
}
.tura__b--rau { color: var(--err); }

.orar__plus {
  width: 100%; border: 1px dashed var(--line); background: transparent;
  color: var(--ink-faint); cursor: pointer; padding: .25rem; font-size: .9rem; line-height: 1;
}
.orar__plus:hover { border-color: var(--terra); color: var(--terra); }

.orar__grid { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); margin-bottom: .8rem; }
@media (min-width: 720px) { .orar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .orar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- pontaje --------------------------------------------------------- */
.pontaj { margin-bottom: 1rem; }
.pontaj__cifre {
  display: grid; gap: .5rem; margin: .6rem 0;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.pontaj__cifre > div { display: flex; flex-direction: column; gap: .1rem; }
.pontaj__cifre strong { font-variant-numeric: tabular-nums; }
.pontaj__form { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .6rem; }

/* --- salarizare ------------------------------------------------------ */
.sal { margin-bottom: 1rem; }
.sal .tabel { margin: .6rem 0; }
.field__i--nr { max-width: 5.5rem; }


/* --- calendarul managerului: acoperire, absențe, zile de interes ----- */
.orar thead th.is-interes { background: rgba(179,64,31,.12); }
.orar__interes {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--err);
}
.orar__acop {
  display: block; font-size: .7rem; letter-spacing: 0; text-transform: none; font-weight: 600;
}
.orar__acop--rau { color: var(--err); }
.orar__acop--ok  { color: var(--ok); }

.orar__absente td { background: rgba(21,21,24,.03); }
.absent {
  display: block; font-size: .76rem; padding: .15rem 0;
  border-left: 3px solid var(--ink-faint); padding-left: .4rem; margin-bottom: .2rem;
}
.absent small { display: block; font-size: .68rem; color: var(--ink-faint); }
.absent--medical  { border-left-color: var(--err); }
.absent--concediu { border-left-color: var(--warn); }
.absent--liber    { border-left-color: var(--sand); }

.tura__supl { font-style: normal; color: var(--warn); font-weight: 600; }
.tura__supl--schimb { color: var(--terra); }

/* ===================================================================
   TRADUCERI ŞI LIMBI  (1.42.0)

   Rândul de traducere e două coloane: originalul românesc în stânga,
   caseta de scris în dreapta. Pe telefon se aşază una sub alta — cu
   româna DEASUPRA, fiindcă ăsta e sensul citirii: citeşti ce trebuie
   tradus, apoi scrii.

   Culoarea de pe marginea stângă spune starea dintr-o privire, fără
   să citeşti eticheta: roşu lipseşte, galben s-a schimbat originalul.
   =================================================================== */

.field--bif { display: flex; gap: .5rem; align-items: center; max-width: none; }
.field--bif input { width: 18px; height: 18px; flex: none; }
.field--bif > span { font-size: .85rem; }

.trad__limbi { display: flex; flex-wrap: wrap; gap: .5rem; }
.trad__limba {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit; background: #fff;
  flex: 1 1 220px; min-width: 0;
}
.trad__limba:hover { border-color: var(--terra); }
.trad__limba.este  { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.trad__steag { font-size: 1.2rem; flex: none; }
.trad__nume  { font-weight: 600; font-size: .9rem; flex: none; }
.trad__proc  { font-size: .8rem; font-variant-numeric: tabular-nums; flex: none; }

.trad__bara {
  flex: 1 1 40px; min-width: 40px; height: 6px; border-radius: 3px;
  background: rgba(21,21,24,.1); overflow: hidden; display: inline-block;
}
.trad__bara > i { display: block; height: 100%; background: var(--ok); }

.trad__filtre { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.trad__filtre .field { flex: 1 1 160px; }

.trad__lista { display: grid; gap: .55rem; }
.trad__rand {
  display: grid; gap: .5rem; padding: .6rem .7rem;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  background: #fff;
}
@media (min-width: 860px) {
  .trad__rand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.trad__rand--lipsa   { border-left-color: var(--err); }
.trad__rand--veche   { border-left-color: var(--warn); }
.trad__rand--aceeasi { border-left-color: var(--warn); }
.trad__rand--gata    { border-left-color: var(--ok); }

.trad__cheie { font-size: .7rem; color: rgba(21,21,24,.45); word-break: break-all; }
.trad__text  { margin: .2rem 0 0; font-size: .92rem; line-height: 1.4; }
.trad__vechi {
  margin: .3rem 0 0; font-size: .78rem; color: var(--warn);
  border-left: 2px solid var(--warn); padding-left: .4rem;
}
.trad__nou { display: grid; gap: .3rem; justify-items: start; }
.trad__caseta { width: 100%; font-size: .9rem; line-height: 1.4; resize: vertical; }

.trad__jos {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
}
.trad__pagini { display: flex; gap: .7rem; align-items: center; justify-content: center; margin: 1rem 0; }

.lim__sterg { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.lim__sterg .field--bif { margin: 0; }

/* ===================================================================
   PAZNICUL  (1.43.0)

   Capul de pagină e colorat ÎN ÎNTREGIME după verdict, nu doar cu o
   pastilă mică. Cine deschide ecranul ăsta vrea să afle dintr-o
   privire, de la trei metri, dacă e bine sau rău — nu să citească.
   =================================================================== */

.pz__cap {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem; border-radius: 12px; margin-bottom: 1rem;
  border: 1px solid var(--line); background: #fff;
}
.pz__cap--ok         { background: var(--ok-bg);   border-color: rgba(24,73,10,.25); }
.pz__cap--atentie    { background: var(--warn-bg); border-color: rgba(154,91,18,.25); }
.pz__cap--rau        { background: var(--err-bg);  border-color: rgba(179,64,31,.3); }
.pz__cap--necunoscut { background: rgba(21,21,24,.04); }

.pz__verdict { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.pz__cap--ok      .pz__verdict { color: var(--ok); }
.pz__cap--atentie .pz__verdict { color: var(--warn); }
.pz__cap--rau     .pz__verdict { color: var(--err); }
.pz__sub { margin: .3rem 0 0; font-size: .85rem; color: rgba(21,21,24,.6); max-width: 60ch; }

.pz__incidente { display: grid; gap: .6rem; }
.pz__inc {
  padding: .75rem .9rem; border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 8px; background: #fff;
}
.pz__inc--info    { border-left-color: var(--ink-faint); }
.pz__inc--atentie { border-left-color: var(--warn); }
.pz__inc--grav    { border-left-color: var(--err); }
.pz__inc--critic  { border-left-color: var(--err); background: var(--err-bg); }

.pz__inc-cap  { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pz__inc-text { margin: .4rem 0 .2rem; font-size: .93rem; line-height: 1.45; }
.pz__inc-nota {
  margin: .3rem 0 0; font-size: .82rem; font-style: italic; color: rgba(21,21,24,.55);
  border-left: 2px solid var(--line); padding-left: .5rem;
}
.pz__inc-act {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line);
}
.pz__lasa { display: flex; gap: .4rem; align-items: center; flex: 1 1 280px; }
.pz__lasa .field__i { font-size: .82rem; padding: .3rem .5rem; }

.pz__tablou { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .pz__tablou { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pz__tablou { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pz__v { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pz__v-cap  { display: flex; gap: .5rem; align-items: center; }
.pz__v-text { margin: .3rem 0 .2rem; font-size: .85rem; line-height: 1.4; }

.pz__punct { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.pz__v--ok      .pz__punct { background: var(--ok); }
.pz__v--atentie .pz__punct { background: var(--warn); }
.pz__v--rau     .pz__punct { background: var(--err); }
.pz__v--rau     { border-color: rgba(179,64,31,.35); background: var(--err-bg); }
.pz__v--atentie { border-color: rgba(154,91,18,.3); }

/* ---- planul sălii, în editor: aceleaşi desene ca în sală ------------- */
.ed__el--decor { overflow: visible; }
.ed__el--masa  { overflow: visible; }
.ed__el .mob__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed__el .plan__scaune { position: absolute; inset: 0; pointer-events: none; }
.ed__el .plan__scaun {
  position: absolute; width: 26%; height: 26%;
  min-width: 6px; min-height: 6px; max-width: 16px; max-height: 16px;
  border-radius: 40% 40% 28% 28%; background: rgba(94,66,49,.8);
}
.ed__el .plan__blat {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1em; border-radius: inherit;
}
.ed__el .plan__nrscaune { font-size: .7em; opacity: .6; }
.ed__el .plan__decor-et {
  position: absolute; inset: auto 0 6%; text-align: center;
  font-size: .7rem; font-weight: 600; text-shadow: 0 1px 2px rgba(255,255,255,.7);
}

/* ===================================================================
   CENTRUL DE CHEMĂRI  (1.44.0)

   Stă lângă plan, nu pe altă pagină: răspunsul la o chemare e „unde e
   masa aia", iar între o listă şi o hartă nu se comută în tură.
   Dispare de tot când nu e nicio chemare — un panou gol care scrie
   „nicio chemare" ocupă loc ca să nu spună nimic.
   =================================================================== */

.ch__centru {
  margin: 0 0 1rem; padding: .75rem .85rem;
  border: 1px solid rgba(179,64,31,.3); border-radius: 10px;
  background: var(--err-bg);
}
.ch__cap { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; justify-content: space-between; }
.ch__titlu { margin: 0; font-size: 1rem; font-weight: 700; }
.ch__scurt { font-size: .82rem; color: rgba(21,21,24,.6); font-variant-numeric: tabular-nums; }
.ch__scurt.e-tarziu { color: var(--err); font-weight: 700; }

.ch__lista { display: grid; gap: .4rem; margin-top: .6rem; }
.ch__rand {
  display: grid; gap: .6rem; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: .45rem .55rem; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--warn);
}
@media (max-width: 640px) {
  .ch__rand { grid-template-columns: auto minmax(0, 1fr); }
  .ch__act  { grid-column: 1 / -1; justify-content: flex-end; }
}
.ch__rand.e-tarziu { border-left-color: var(--err); box-shadow: inset 0 0 0 1px rgba(179,64,31,.2); }
.ch__rand.e-luata  { border-left-color: var(--ok); opacity: .82; }

.ch__masa {
  min-width: 2.6rem; padding: .3rem .5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--sand, #D9CFC2);
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.ch__masa:hover { border-color: var(--terra); }

.ch__ce { display: grid; gap: .1rem; min-width: 0; }
.ch__mesaj { font-size: .82rem; color: rgba(21,21,24,.75); overflow-wrap: anywhere; }
.ch__mic   { font-size: .74rem; color: rgba(21,21,24,.5); }
.ch__timp  { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch__rand.e-tarziu .ch__timp { color: var(--err); }
.ch__act   { display: flex; gap: .35rem; }
.ch__luata { font-size: .76rem; color: var(--ok); font-weight: 600; align-self: center; }

/* Masa căutată din listă clipeşte scurt, ca ochiul s-o găsească. */
.ed__el.e-cautata {
  outline: 3px solid var(--terra); outline-offset: 3px;
  animation: ch-cauta 1.1s ease-in-out 2;
}
@keyframes ch-cauta { 0%,100% { outline-color: var(--terra); } 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .ed__el.e-cautata { animation: none; } }

/* ===================================================================
   SARCINI ŞI DISCUŢII  (1.45.0)

   Tabla răspunde la „unde s-a blocat", nu la „câte sunt". Coloanele
   se derulează lateral pe telefon, fiindcă patru coloane înghesuite
   într-un ecran de şase centimetri nu sunt patru coloane, sunt patru
   şiruri de cuvinte tăiate.
   =================================================================== */

.sc__cap { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }

.sc__tabla { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
@media (min-width: 900px)  { .sc__tabla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px)  {
  .sc__tabla { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sc__col { scroll-snap-align: start; }
}

.sc__col {
  background: rgba(21,21,24,.035); border: 1px solid var(--line);
  border-radius: 10px; padding: .55rem; min-width: 0;
}
.sc__col-cap { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.sc__col-titlu { margin: 0; font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.sc__col-nr { font-size: .78rem; color: rgba(21,21,24,.5); font-variant-numeric: tabular-nums; }

.sc__lista { display: grid; gap: .45rem; min-height: 60px; border-radius: 8px; }
.sc__lista.e-tinta { outline: 2px dashed var(--terra); outline-offset: 3px; }
.sc__gol { margin: 0; text-align: center; color: rgba(21,21,24,.3); }

.sc__fisa {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 8px; padding: .5rem .6rem; cursor: grab;
}
.sc__fisa.e-tras { opacity: .45; }
.sc__fisa--urgenta { border-left-color: var(--err); }
.sc__fisa--normala { border-left-color: var(--sand, #D9CFC2); }
.sc__fisa--joasa   { border-left-color: rgba(21,21,24,.15); }
.sc__fisa.e-tarziu { background: var(--err-bg); }
.sc__fisa.e-uitata { box-shadow: inset 0 0 0 1px rgba(154,91,18,.35); }

.sc__titlu { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; color: inherit; }
.sc__titlu:hover { color: var(--terra); }
.sc__detaliu { margin: .25rem 0 0; font-size: .78rem; color: rgba(21,21,24,.6); line-height: 1.35; }
.sc__detaliu-mare { margin: .4rem 0 .8rem; font-size: .95rem; line-height: 1.55; }

.sc__jos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .45rem; font-size: .72rem; }
.sc__om { padding: .1rem .35rem; border-radius: 4px; background: rgba(21,21,24,.07); }
.sc__om--gol { color: var(--warn); background: var(--warn-bg); }
.sc__termen { font-variant-numeric: tabular-nums; color: rgba(21,21,24,.6); }
.sc__termen.e-tarziu { color: var(--err); font-weight: 700; }
.sc__termen.e-azi    { color: var(--terra); font-weight: 700; }
.sc__sectie { color: rgba(21,21,24,.45); }
.sc__repeta { color: rgba(21,21,24,.45); }
.sc__rosu   { color: var(--err); }

.sc__muta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem;
            padding-top: .4rem; border-top: 1px solid var(--line); }
.sc__mutare {
  font: inherit; font-size: .68rem; padding: .12rem .35rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: rgba(21,21,24,.6);
}
.sc__mutare:hover { border-color: var(--terra); color: var(--terra); }

.sc__mutari { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

.sc__istoric { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.sc__istoric li { display: flex; gap: .6rem; font-size: .84rem; align-items: baseline; }
.sc__ist-cand { font-variant-numeric: tabular-nums; color: rgba(21,21,24,.45); flex: none; }

.sc__vorba {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  max-width: min(90vw, 34rem); z-index: 90;
  padding: .7rem .95rem; border-radius: 10px;
  background: var(--err-bg); border: 1px solid rgba(179,64,31,.35); color: var(--err);
  font-size: .86rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ---- discuţiile ---------------------------------------------------- */

.ds__lista { display: grid; gap: .35rem; }
.ds__fir {
  display: grid; gap: .1rem .6rem; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: inherit; text-decoration: none;
}
.ds__fir:hover { border-color: var(--terra); }
.ds__fir.e-nou { background: var(--ok-bg); border-color: rgba(24,73,10,.25); }
.ds__fir-cap { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.ds__ultim { grid-column: 1; font-size: .8rem; color: rgba(21,21,24,.55); overflow-wrap: anywhere; }
.ds__cand  { font-size: .74rem; color: rgba(21,21,24,.4); white-space: nowrap; }
.ds__nr {
  min-width: 1.5rem; text-align: center; padding: .05rem .3rem; border-radius: 999px;
  background: var(--terra); color: #fff; font-size: .72rem; font-weight: 700;
}
.ds__mut { font-size: .8rem; opacity: .6; }

.ds__cutie { display: flex; flex-direction: column; }
.ds__mesaje {
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 58vh; overflow-y: auto; padding: .4rem .1rem; margin: .5rem 0;
}
.ds__mesaje--scurt { max-height: none; }

.ds__mesaj {
  position: relative; align-self: flex-start; max-width: min(88%, 44rem);
  padding: .45rem .65rem; border-radius: 10px 10px 10px 2px;
  background: rgba(21,21,24,.05); border: 1px solid var(--line);
}
.ds__mesaj.e-al-meu {
  align-self: flex-end; border-radius: 10px 10px 2px 10px;
  background: var(--ok-bg); border-color: rgba(24,73,10,.22);
}
.ds__mesaj.e-client { border-left: 3px solid var(--warn); }
.ds__mesaj-cap { display: flex; gap: .5rem; align-items: baseline; font-size: .76rem; }
.ds__ora  { color: rgba(21,21,24,.4); font-variant-numeric: tabular-nums; }
.ds__text { margin: .15rem 0 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.ds__sters { margin: .15rem 0 0; font-size: .82rem; font-style: italic; color: rgba(21,21,24,.4); }

/* Mesajele programului: un rând subţire, fără balon. Dacă „Ana a mutat
   sarcina" ar arăta ca un mesaj scris de om, firul ar fi jumătate
   zgomot şi nimeni n-ar mai citi jumătatea cealaltă. */
.ds__auto {
  align-self: center; margin: 0; padding: .15rem .5rem;
  font-size: .76rem; color: rgba(21,21,24,.5); font-style: italic;
}

.ds__sterge { position: absolute; top: .1rem; right: .2rem; opacity: 0; transition: opacity .15s; }
.ds__mesaj:hover .ds__sterge { opacity: 1; }
.ds__sterge-b {
  border: 0; background: transparent; cursor: pointer; font-size: 1rem;
  line-height: 1; color: rgba(21,21,24,.35); padding: 0 .2rem;
}
.ds__sterge-b:hover { color: var(--err); }

.ds__scrie { display: flex; gap: .5rem; align-items: flex-end; }
.ds__scrie .field__i { flex: 1 1 auto; resize: vertical; }

.ds__oameni {
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin: 0 0 .8rem;
  display: grid; gap: .2rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* ---- campaniile către clienţi (1.46.0) ------------------------------ */
.cp__cap {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 10px;
  background: rgba(21,21,24,.04); border: 1px solid var(--line);
}
.cp__lista { display: grid; gap: .6rem; }
.cp__fisa {
  padding: .7rem .85rem; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 8px; background: #fff;
}
.cp__fisa--pornita { border-left-color: var(--ok); }
.cp__fisa--trimisa { border-left-color: var(--ink-faint); opacity: .8; }
.cp__fisa--oprita  { border-left-color: var(--err); opacity: .7; }
.cp__fisa--ciorna  { border-left-color: var(--warn); }
.cp__fisa-cap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }

/* Previzualizarea arată ca o notificare adevărată: altfel nimeni nu-şi
   dă seama că textul e prea lung până nu ajunge pe telefoane. */
.cp__previz {
  display: grid; gap: .1rem; margin: .5rem 0;
  padding: .5rem .65rem; border-radius: 8px;
  background: rgba(21,21,24,.05); border: 1px solid var(--line);
  max-width: 24rem;
}
.cp__previz-titlu { font-weight: 700; font-size: .86rem; }
.cp__previz-text  { font-size: .82rem; color: rgba(21,21,24,.7); line-height: 1.35;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cp__act { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem;
           padding-top: .5rem; border-top: 1px solid var(--line); }
.cp__pornire { display: flex; gap: .4rem; align-items: center; }
.cp__pornire .field__i { width: 9rem; font-size: .8rem; }

/* =====================================================================
   23. CINE UNDE INTRĂ

   Două coloane: oamenii în stânga, fişa omului ales în dreapta. Pe
   telefon se pun una sub alta — lista întâi, fiindcă întâi alegi omul.
   ===================================================================== */

.acc {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 860px) {
  .acc { grid-template-columns: 1fr; }
}

/* ---------- lista de oameni ---------- */

.acc__lista {
  position: sticky;
  top: .6rem;
  background: var(--card, #fff);
  border: 1px solid var(--linie, #00000014);
  border-radius: 12px;
  padding: .7rem;
}

@media (max-width: 860px) {
  .acc__lista { position: static; }
}

.acc__oameni {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: 60vh;
  overflow-y: auto;
}

.acc__om {
  display: block;
  padding: .45rem .55rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.acc__om:hover { background: var(--fundal-2, #00000008); }

/* Omul ales se vede din capătul celălalt al camerei: pe ecranul ăsta,
   „despre cine vorbim" e întrebarea de sub toate celelalte, iar dacă nu
   se vede răspunsul, restul paginii nu înseamnă nimic. */
.acc__om.e-ales {
  background: var(--fundal-2, #00000010);
  border-color: var(--accent, #7a5c3e);
  font-weight: 600;
}

.acc__om-nume { display: block; }
.acc__om-sub  { display: block; font-size: .78rem; opacity: .7; }
.acc__om-semne { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .2rem; }

/* ---------- fişa omului ---------- */

.acc__om-fisa {
  background: var(--card, #fff);
  border: 1px solid var(--linie, #00000014);
  border-radius: 12px;
  padding: 1rem;
}

.acc__nume { margin: 0 0 .3rem; font-size: 1.25rem; }

/* Propoziţia de sus e cea mai importantă bucată de text din ecran:
   răspunde la întrebare în două secunde, iar tabelele de dedesubt sunt
   pentru a treia secundă. Deci e mai mare decât restul, nu mai mică. */
.acc__scurt {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.45;
}

.acc__unelte {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linie, #00000014);
}

.acc__unealta {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  flex-wrap: wrap;
}

.acc__plasa {
  margin: 0 0 1rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: #f6e9d8;
  color: #5a3d1a;
  font-size: .9rem;
}

/* ---------- aplicaţiile ---------- */

.acc__app {
  margin-bottom: 1rem;
  border: 1px solid var(--linie, #00000014);
  border-radius: 10px;
  overflow: hidden;
}

/* O aplicaţie în care omul nu intră rămâne pe ecran, dar palidă: ce NU
   poate cineva e la fel de important de văzut ca ce poate, iar o listă
   din care lipsesc aplicaţiile închise nu răspunde la „de ce nu-i apare
   borderoul". */
.acc__app.e-inchisa { opacity: .62; }

.acc__app-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  background: var(--fundal-2, #00000008);
}

.acc__app-nume { margin: 0; font-size: .98rem; }

.acc__ecrane { display: flex; flex-direction: column; }

.acc__ecran {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-top: 1px solid var(--linie, #0000000d);
}

.acc__ecran-nume { min-width: 11rem; }
.acc__ecran-nota { flex: 1 1 12rem; }
.acc__ecran-but  { margin-left: auto; display: flex; gap: .3rem; }

/* Rândul unui ecran deschis are o dungă verde în stânga — se numără cu
   ochii, fără să se citească fiecare etichetă. */
.acc__ecran.e-da { box-shadow: inset 3px 0 0 var(--ok, #2e7d52); }

@media (max-width: 640px) {
  .acc__ecran-but { margin-left: 0; width: 100%; }
  .acc__ecran-but .btn { flex: 1 1 auto; }
}

/* =====================================================================
   24. E-MAIL

   Trei coloane, ca orice program de mail de treizeci de ani încoace —
   şi exact ăsta e motivul: nimeni nu trebuie să înveţe ecranul ăsta. Un
   panou de restaurant se deschide de oameni care se schimbă des, iar un
   ecran care cere învăţat e un ecran pe care îl foloseşte numai cine
   l-a cerut.

   Pe telefon cele trei coloane se pun una sub alta, în ordinea în care
   se lucrează: cutiile, lista, mesajul.
   ===================================================================== */

.mail {
  display: grid;
  grid-template-columns: 180px minmax(280px, 380px) 1fr;
  gap: 0;
  /* Înălţimea ecranului minus cap: lista şi mesajul se derulează
     separat, fiindcă altfel, la un mesaj lung, lista de cutii dispare
     sus şi nu se mai poate sări la alta fără să urci înapoi. */
  height: calc(100svh - 132px);
  min-height: 420px;
  border: 1px solid var(--linie, rgba(28,22,18,.12));
  background: var(--card, #fff);
  overflow: hidden;
}

.mail__cutii,
.mail__lista,
.mail__mesaj { overflow-y: auto; min-width: 0; }

.mail__cutii { border-right: 1px solid var(--linie, rgba(28,22,18,.12)); padding: .5rem 0; }
.mail__lista { border-right: 1px solid var(--linie, rgba(28,22,18,.12)); }
.mail__mesaj { padding: 1.1rem 1.3rem; }

/* ---- cutiile ---- */
.mail__cutie {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .4rem;
  padding: .5rem .8rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}

.mail__cutie:hover { background: rgba(28,22,18,.04); }
.mail__cutie.e-aleasa { background: rgba(28,22,18,.07); border-left-color: var(--ember, #b4532a); }
.mail__cutie.e-rupta .mail__cutie-nume::after { content: ' ⚠'; color: var(--ember, #b4532a); }

.mail__cutie-nume   { font-size: .88rem; font-weight: 500; }
.mail__cutie-adresa { grid-column: 1 / -1; font-size: .7rem; opacity: .55; overflow: hidden; text-overflow: ellipsis; }
/* Cifra la DREAPTA numelui, nu în faţa lui. Cu doar „grid-row: 1",
   aşezarea automată o punea în prima coloană şi împingea numele în a
   doua — adică exact pe dos. */
.mail__cutie .adm__badge { grid-column: 2; grid-row: 1; align-self: center; }

/* ---- căutare şi filtre ---- */
.mail__cauta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--linie, rgba(28,22,18,.12));
}

.mail__cauta .input { flex: 1 1 140px; min-width: 0; }
.mail__bifa { display: flex; align-items: center; gap: .3rem; font-size: .76rem; white-space: nowrap; }

.mail__eroare {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .7rem .8rem;
  background: rgba(180,83,42,.1);
  border-bottom: 1px solid rgba(180,83,42,.3);
  font-size: .82rem;
}
.mail__eroare span { flex: 1 1 200px; opacity: .85; }

/* ---- lista de mesaje ---- */
.mail__randuri { list-style: none; margin: 0; padding: 0; }

.mail__rand {
  display: block;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--linie, rgba(28,22,18,.08));
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}

.mail__rand:hover { background: rgba(28,22,18,.04); }
.mail__rand.e-deschis { background: rgba(28,22,18,.07); border-left-color: var(--ember, #b4532a); }

/* Necitit = îngroşat, nu colorat. Culoarea e deja luată de stările
   meselor şi de cifrele roşii; încă una ar face panoul un pom de
   Crăciun în care nimic nu mai iese în evidenţă. */
.mail__rand.e-necitit .mail__cine,
.mail__rand.e-necitit .mail__subiect { font-weight: 600; }
.mail__rand.e-necitit { background: rgba(180,83,42,.035); }

.mail__rand-sus { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.mail__cine     { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__cand     { font-size: .7rem; opacity: .55; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail__subiect  { display: block; font-size: .82rem; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__inceput  { display: block; font-size: .74rem; opacity: .6; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__semne    { display: flex; gap: .4rem; align-items: center; font-size: .72rem; margin-top: .2rem; opacity: .6; }
.mail__citit-de { font-size: .68rem; }

.mail__nimic  { padding: 1.4rem .9rem; font-size: .84rem; opacity: .6; }
.mail__pagini { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; font-size: .74rem; opacity: .75; }

/* ---- mesajul deschis ---- */
.mail__cap { border-bottom: 1px solid var(--linie, rgba(28,22,18,.12)); padding-bottom: .8rem; margin-bottom: .9rem; }
.mail__cap-subiect { font-size: 1.12rem; margin: 0 0 .5rem; line-height: 1.3; text-wrap: balance; }
.mail__cap-cine { font-size: .9rem; }
.mail__cap-adresa { opacity: .55; font-size: .8rem; }
.mail__cap-rand { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .74rem; opacity: .6; margin-top: .3rem; }
.mail__cap-butoane { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.mail__atasamente { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.mail__atas {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .6rem;
  border: 1px solid var(--linie, rgba(28,22,18,.18));
  font-size: .78rem; text-decoration: none; color: inherit;
}
.mail__atas:hover { background: rgba(28,22,18,.05); }
.mail__atas-nume { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__atas-marime { opacity: .55; font-size: .7rem; font-variant-numeric: tabular-nums; }

.mail__poze-oprite {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem .7rem; margin-bottom: .9rem;
  background: rgba(28,22,18,.05);
  font-size: .76rem;
}
.mail__poze-oprite span { flex: 1 1 240px; opacity: .8; }

.mail__corp { font-size: .88rem; line-height: 1.6; }
.mail__text { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; }

/* Mesajul e scris de un străin, cu stilurile lui. Se ţine în frâu:
   fără lăţimi care ies din coloană, fără poze mai mari decât ecranul,
   iar tabelele cu factura înăuntru se derulează în cutia lor. */
.mail__html { overflow-wrap: break-word; }
.mail__html img { max-width: 100%; height: auto; }
.mail__html table { max-width: 100%; }
.mail__html { overflow-x: auto; }

.mail__fir { margin-top: 1.4rem; border-top: 1px solid var(--linie, rgba(28,22,18,.12)); padding-top: .8rem; }
.mail__fir h3 { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5; margin: 0 0 .4rem; }
.mail__fir ul { list-style: none; margin: 0; padding: 0; }
.mail__fir a { display: flex; gap: .7rem; padding: .3rem 0; font-size: .78rem; text-decoration: none; color: inherit; }
.mail__fir a:hover { text-decoration: underline; }
.mail__fir a span:first-child { opacity: .5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail__fir a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- răspunsul ---- */
.mail__raspuns { margin-top: 1.4rem; border-top: 2px solid var(--ember, #b4532a); padding-top: .9rem; }
.mail__raspuns-de-la { font-size: .78rem; opacity: .7; margin-bottom: .6rem; }
.mail__raspuns-nota { font-size: .72rem; opacity: .6; margin: .3rem 0 .7rem; }
.mail__raspuns-butoane { display: flex; gap: .5rem; flex-wrap: wrap; }

/* =====================================================================
   CUTIILE POŞTALE — configurarea
   ===================================================================== */
.cutii { max-width: 860px; }

.cutii__una { border: 1px solid var(--linie, rgba(28,22,18,.14)); margin-bottom: .6rem; background: var(--card, #fff); }

.cutii__cap {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; cursor: pointer; list-style: none;
}
.cutii__cap::-webkit-details-marker { display: none; }
.cutii__cap:hover { background: rgba(28,22,18,.03); }

.cutii__pastila { width: 9px; height: 9px; border-radius: 50%; background: rgba(28,22,18,.2); flex: none; }
.cutii__pastila.e-pornita { background: #2f7d3f; }

.cutii__nume   { font-weight: 500; font-size: .92rem; }
.cutii__adresa { font-size: .78rem; opacity: .6; }
.cutii__cand   { font-size: .7rem; opacity: .5; margin-left: auto; }
.cutii__stins  { font-size: .7rem; opacity: .5; margin-left: auto; }
.cutii__rau    { font-size: .72rem; color: var(--ember, #b4532a); font-weight: 600; margin-left: auto; }

.cutii__eroare { margin: 0 .9rem .6rem; padding: .5rem .7rem; background: rgba(180,83,42,.1); font-size: .78rem; }

.cutii__form   { padding: 0 .9rem .9rem; }
.cutii__randuri { display: grid; gap: 1.2rem; }
.cutii__grup   { display: grid; gap: .6rem; }
.cutii__grup-titlu { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5; margin: 0; }
.cutii__grup-nota  { font-size: .74rem; opacity: .6; margin: -.3rem 0 0; }
.cutii__doua   { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: start; }
.field--mic    { max-width: 130px; }

.cutii__bifa   { display: flex; align-items: flex-start; gap: .5rem; font-size: .84rem; }
.cutii__butoane { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.cutii__nota   { font-size: .74rem; opacity: .65; margin-top: .6rem; }
.cutii__sterge { padding: 0 .9rem .8rem; }

.cutii__rezultat { font-size: .78rem; }
.cutii__rezultat.e-bun { color: #2f7d3f; }
.cutii__rezultat.e-rau { color: var(--ember, #b4532a); }
.cutii__dosare, .cutii__detaliu { font-size: .72rem; opacity: .65; margin-top: .25rem; }

.cutii__intreaba {
  margin-top: .6rem; padding: .6rem .7rem;
  background: rgba(180,83,42,.1); border: 1px solid rgba(180,83,42,.3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.cutii__intreaba p { flex: 1 1 240px; margin: 0; font-size: .8rem; }

.gol { max-width: 560px; padding: 1.4rem 0; }
.gol__titlu { font-size: 1.2rem; margin: 0 0 .8rem; }
.gol__text  { font-size: .9rem; line-height: 1.65; margin: 0 0 .9rem; opacity: .85; }
.gol__mic   { font-size: .78rem; opacity: .6; margin-top: .6rem; }

/* ---- pe telefon: una sub alta, în ordinea în care se lucrează ---- */
@media (max-width: 900px) {
  .mail {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .mail__cutii {
    display: flex; gap: .3rem; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--linie, rgba(28,22,18,.12));
    padding: .5rem;
  }
  .mail__cutie { flex: none; border-left: 0; border-bottom: 3px solid transparent; }
  .mail__cutie.e-aleasa { border-left-color: transparent; border-bottom-color: var(--ember, #b4532a); }
  .mail__cutie-adresa { display: none; }

  .mail__lista { border-right: 0; border-bottom: 1px solid var(--linie, rgba(28,22,18,.12)); }
  .mail__lista, .mail__mesaj { overflow: visible; }
  .mail__mesaj { padding: 1rem .9rem; }

  .cutii__doua { grid-template-columns: 1fr; }
  .field--mic { max-width: none; }
}

/* Două câmpuri de aceeaşi importanţă, deci de aceeaşi lăţime. Cu
   „1fr auto auto" (rândul serverului, unde portul şi criptarea sunt
   mărunte) al doilea câmp s-ar strânge, iar eticheta lui s-ar rupe în
   două rânduri lângă una care încape pe unul. */
.cutii__doua--egale { grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
  .cutii__doua--egale { grid-template-columns: 1fr; }
}

/* =====================================================================
   25. SETĂRILE — cuprins, căutare, uşi către celelalte ecrane

   Cartonaşele erau bune; lipsea drumul până la ele. O sută patruzeci de
   valori pe un ecran lung de zece derulări nu se caută cu ochii, iar
   cine nu găseşte o setare trage concluzia că nu există.
   ===================================================================== */
.set {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
}

/* Coloana de conţinut trebuie să poată fi mai îngustă decât ce e în
   ea, altfel tabelul programului — care are propria lui derulare
   laterală — împinge toată pagina şi apare o bară de derulare pe
   orizontală sub tot ecranul. `minmax(0, 1fr)` spune asta pe lat;
   `min-width: 0` o spune şi acolo unde coloana e scrisă simplu. */
.set__corp { min-width: 0; }

/* ---- cuprinsul, lipit în stânga ---- */
.set__cuprins { position: sticky; top: .8rem; }

.set__cauta { margin-bottom: .7rem; }
.set__nr {
  font-size: .7rem; opacity: .55; margin: .35rem 0 0;
  font-variant-numeric: tabular-nums;
}

.set__lista {
  border: 1px solid var(--linie, rgba(28,22,18,.14));
  background: var(--card, #fff);
  /* Pe ecran scurt, cuprinsul însuşi trebuie să poată derula: altfel,
     pe un laptop de 13 ţoli, ultimele zone rămân sub marginea de jos
     şi nu se ajunge la ele nici derulând pagina, fiindcă blocul e
     lipit.

     Scăderea e mai mare decât pare că trebuie fiindcă deasupra listei
     stă căutarea: dacă tot blocul lipit iese mai înalt decât ecranul,
     browserul nu-l mai ţine sus, ci îl lasă să urce odată cu pagina —
     şi atunci primele zone din cuprins ies afară pe sus tocmai când ai
     derulat destul cât să ai nevoie de ele. */
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.set__lista-cap {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; padding: .6rem .8rem; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--linie, rgba(28,22,18,.1));
}
.set__lista-cap::-webkit-details-marker { display: none; }

.set__zona { padding: .6rem 0; border-bottom: 1px solid var(--linie, rgba(28,22,18,.08)); }
.set__zona:last-child { border-bottom: 0; }

.set__zona-nume {
  font-size: .72rem; font-weight: 600; margin: 0 0 .25rem;
  padding: 0 .8rem; opacity: .75;
}

.set__drum {
  display: block; padding: .28rem .8rem;
  font-size: .8rem; line-height: 1.35; text-decoration: none;
  color: inherit; opacity: .8;
  border-left: 2px solid transparent;
}
.set__drum:hover { opacity: 1; background: rgba(28,22,18,.04); border-left-color: var(--ember, #b4532a); }

/* Ceasurile din tabelul programului. Lăţimea stă în foaia de stil, nu
   pe element: pe telefon trebuie să poată fi alta, iar o valoare scrisă
   în atributul `style` nu se lasă schimbată de nicio regulă. */
.inp--ceas { max-width: 120px; }

/* ---- cartonaşele ---- */
.set__sec { margin-bottom: .8rem; scroll-margin-top: .8rem; }

.set__ce {
  font-size: .8rem; line-height: 1.55; opacity: .7;
  margin: -.2rem 0 .9rem;
}

.set__gol {
  padding: 1.2rem; font-size: .88rem; line-height: 1.6;
  border: 1px dashed var(--linie, rgba(28,22,18,.25));
  background: var(--card, #fff);
}

/* ---- uşile către ecranele de configurare ---- */
.set__usi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem;
}

.set__usa {
  display: block; padding: .6rem .7rem; text-decoration: none; color: inherit;
  border: 1px solid var(--linie, rgba(28,22,18,.14));
  background: var(--card, #fff);
}
.set__usa:hover { border-color: var(--ember, #b4532a); }

.set__usa-nume { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .2rem; }
.set__usa-ce   { display: block; font-size: .74rem; line-height: 1.45; opacity: .65; }

/* ---- pe telefon: cuprinsul se strânge sus ---- */
@media (max-width: 980px) {
  .set { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .set__cuprins { position: static; }
  .set__lista { max-height: 60vh; }

  /* Ceasurile din tabelul programului: pe telefon, tabelul se desface
     în cartonaşe şi câmpul are loc. La 120 de puncte, ceasul desenat de
     browser lângă oră taie ultima literă din „PM" — mic, dar exact
     genul de tăietură care te face să te uiţi de două ori. */
  .tbl--cards .inp--ceas { max-width: 160px; }

  /* Bara de salvare are, pe telefon, margini negative: e desenată ca să
     ajungă până la marginile ecranului când stă direct în pagină. Aici
     stă într-o coloană, iar marginile alea o duc nu la marginea
     ecranului, ci peste ea — şi pagina capătă o derulare laterală cât
     să se simtă că ceva nu e în regulă, dar prea mică să se vadă ce. */
  .set .savebar { margin-inline: 0; padding-inline: 0; }
}

/* =====================================================================
   26. OGLINDIREA ŞI MĂRIMEA SCRISULUI ÎN PLANUL SĂLII  (1.54.0)

   Elementul oglindit primeşte `--ox` / `--oy` (−1 sau 1). Din ele se
   întorc la loc lucrurile care n-au voie să fie citite în oglindă.
   ===================================================================== */

/* Scrisul: „BAR" oglindit ar fi „ЯAꓭ". Două întoarceri una peste alta
   se anulează, deci textul iese exact cum era — acelaşi loc, aceeaşi
   mărime — pe o piesă întoarsă. */
.ed__el .plan__blat,
.ed__el .ed__eticheta,
.ed__el .plan__decor-et { transform: scale(var(--ox, 1), var(--oy, 1)); }

/* Mânerele: colţul de mărit şi rotiţa. Oglindite, ar sări în partea
   cealaltă, dar socoteala din spate ar rămâne aceeaşi — masa s-ar
   micşora când o tragi ca să crească. */
.ed__el .ed__maner { transform: scale(var(--ox, 1), var(--oy, 1)); }

/* Mărimea scrisului, aleasă pe element. `--scris` e un raport (1 =
   cât a fost până acum), iar înmulţirea păstrează raporturile dintre
   numărul mesei, numărul de scaune şi denumire: se măresc toate
   deodată, nu numai unul dintre ele. */
.ed__el--masa  .plan__cod       { font-size: calc(1.25em * var(--scris, 1)); }
.ed__el        .plan__nrscaune  { font-size: calc(.7em   * var(--scris, 1)); }
.ed__el        .ed__eticheta    { font-size: calc(9px    * var(--scris, 1)); }
.ed__el        .plan__decor-et  { font-size: calc(.7rem  * var(--scris, 1)); }

/* DENUMIREA STĂ JOS, NU PESTE NUMĂR.
   Blatul (numărul şi câte scaune) e aşezat în mijlocul mesei, iar
   denumirea era şi ea în mijloc — la scrisul mic ieşea, din întâmplare,
   un rând între ele şi părea aşezată frumos. Mărit, numărul creşte, iar
   denumirea ajunge peste el: tocmai cifra pe care omul a mărit-o ca s-o
   vadă mai bine devine cea mai greu de citit. Aşa că denumirea îşi
   capătă locul ei, lipită de marginea de jos. */
.ed__el--masa .ed__eticheta {
  position: absolute;
  left: 2px; right: 2px; bottom: 1px;
  text-align: center;
  pointer-events: none;
}

/* MASA RĂMÂNE CU MARGINILE EI.
   Prima variantă lăsa scrisul mărit să iasă peste marginea mesei, ca un
   număr mare să nu fie tăiat. Pe plan a ieşit mai rău: cu 190 la sută,
   numărul şi denumirea ieşeau din pătrat şi se aşezau peste mesele de
   alături — planul arăta a mese suprapuse acolo unde nu erau. O masă
   care pare mutată e o minciună mai scumpă decât un nume scurtat, aşa
   că marginea taie, ca până acum, iar cine vrea scrisul mai mare fie
   scade procentul, fie face masa mai lată. */

/* Numărul de masă deja luat, spus în formular, în clipa în care se
   scrie. Roşu şi sub câmp, nu într-o fereastră peste ecran: o fereastră
   se închide, iar apoi nu mai ştii ce scria în ea. */
.field__ajutor--rau {
  color: var(--ember, #b4532a);
  font-weight: 600;
}

/* =====================================================================
   27. BIFA CARE CONSUMĂ  (/lucru/proceduri)  — 1.55.0

   Panoul de sub rând, care întreabă cât s-a folosit. Se completează în
   picioare, cu telefonul într-o mână, într-o bucătărie — deci butonul
   pe care se apasă de nouăzeci şi cinci de ori din o sută e mare, iar
   cel care deschide cifrele e mic şi stă deoparte.
   ===================================================================== */
.cons {
  margin: .5rem 0 .2rem 2.6rem;
  padding: .7rem .8rem;
  border-left: 3px solid var(--ember, #b4532a);
  background: rgba(180, 83, 42, .06);
}

.cons__cap {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .6; margin: 0 0 .5rem;
}
.cons__ora { font-variant-numeric: tabular-nums; }

.cons__lista { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }

.cons__rand {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .95rem; line-height: 1.35;
}
.cons__ce { font-weight: 500; }
.cons__ce.e-palid { opacity: .55; font-weight: 400; }

.cons__alt { display: inline-flex; align-items: center; gap: .4rem; }

/* Câmpul de cifră e mare: se apasă cu degetul, nu cu mausul. 16px e
   pragul sub care iPhone-ul măreşte singur pagina la focus — iar o
   pagină care sare când începi să scrii e o pagină pe care greşeşti. */
.cons__cifra {
  width: 5.5rem; font-size: 1rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cons__um { font-size: .85rem; opacity: .7; }

.cons__butoane { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

.cons__da { min-height: 44px; padding-inline: 1.3rem; font-size: 1rem; }

/* „Altă cantitate" e o legătură, nu un buton: nu concurează cu cel mare.
   Dar are aceeaşi zonă de apăsat de 44 de puncte, fiindcă se apasă cu
   degetul ca oricare altul. */
.cons__altul {
  background: none; border: 0; padding: .6rem 0;
  font: inherit; font-size: .85rem;
  color: var(--ember, #b4532a); text-decoration: underline;
  cursor: pointer;
}

.cons__raspuns { margin: .55rem 0 0; font-size: .85rem; line-height: 1.45; min-height: 1.2em; }
.cons__raspuns.e-bun     { color: #2f7d3f; }
.cons__raspuns.e-atentie { color: var(--ember, #b4532a); font-weight: 600; }
.cons__raspuns.e-rau     { color: var(--ember, #b4532a); }

@media (max-width: 560px) {
  /* Pe telefon panoul iese din retragerea de sub bifă: două centimetri
     de margine stângă pe un ecran de 390 de puncte sunt două centimetri
     în care nu încape cifra. */
  .cons { margin-left: 0; }
}

/* ---- magazia: listele mici din ecranele ei ---- */
.mag__uși { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mag__uși a { display: block; padding: .5rem .6rem; text-decoration: none; color: inherit;
              border: 1px solid var(--linie, rgba(28,22,18,.14)); background: var(--card, #fff); }
.mag__uși a:hover { border-color: var(--ember, #b4532a); }

.mag__norme { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.6; }

/* Rândul care cere ceva: roşu pentru minus, chihlimbar pentru sub minim.
   Două culori, nu una: „a intrat pe minus" şi „se apropie de fund" cer
   lucruri diferite, iar cu o singură culoare ar cere amândouă aceeaşi
   grabă — adică niciuna, după a treia zi. */
.tbl tr.e-rau     > * { background: rgba(180, 83, 42, .10); }
.tbl tr.e-atentie > * { background: rgba(200, 162, 74, .14); }
.tbl tr.e-stins   > * { opacity: .5; }
.e-rau  { color: var(--ember, #b4532a); }
.e-bun  { color: #2f7d3f; }


/* =====================================================================
   28. „NOU"  — 1.56.0

   Semnul de lângă un ecran adăugat de curând. E scris cu litere mici
   dinadins: un lucru nou într-un program pe care îl deschizi de zece
   ori pe zi trebuie să se vadă, nu să strige. Cifrele roşii (.adm__badge)
   spun „ai ceva de făcut"; asta spune doar „uite, a apărut".

   De aceea nu e roşie. Roşul e deja luat, şi înseamnă altceva.
   ===================================================================== */
/* Eticheta ia tot spaţiul liber, ca semnele să stea lipite în dreapta.
   Fără asta, `justify-content: space-between` le-ar împrăştia pe toate
   trei — nume la stânga, „NOU" fix la mijloc, cifra la dreapta — şi
   rândul s-ar citi ca trei lucruri, nu ca unul cu două semne. */
.adm__link > span:first-child { flex: 1 1 auto; min-width: 0; }

.adm__nou {
  flex: 0 0 auto;
  padding: 0 .3rem;
  border: 1px solid rgba(200, 162, 74, .55);
  border-radius: 3px;
  background: rgba(200, 162, 74, .14);
  color: #d9bb72;
  font-size: .54rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Pe capul unei grupe strânse: acelaşi semn, un pic mai mic — e o sumă
   („e ceva nou înăuntru"), nu o veste despre un ecran anume. Cu grupa
   deschisă se stinge, fiindcă semnele adevărate sunt sub el. */
.adm__nou--grup { font-size: .5rem; line-height: 14px; }
.adm__grup[open] > .adm__grup-cap .adm__nou--grup { display: none; }

/* Bara de jos a zonei de lucru: butoanele sunt mari şi au textul
   centrat, deci semnul nu poate sta pe rând — stă deasupra, în colţ. */
.lucru__bara-b { position: relative; }
.lucru__nou {
  position: absolute;
  /* Centrat deasupra cuvântului, nu în colţul din dreapta: butoanele
     astea stau lipite unul de altul, iar un semn împins în colţ ajunge
     mai aproape de eticheta vecinului decât de a lui. */
  top: .3rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 .25rem;
  border-radius: 3px;
  background: #c8a24a;
  color: #24160f;
  font-size: .5rem;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: .08em;
}


/* =====================================================================
   29. FEREASTRA „CE E NOU"  — 1.56.0

   Se deschide o singură dată după o actualizare, şi scrie în cuvinte
   din restaurant ce s-a schimbat. Nu e o notificare: nu se strecoară
   într-un colţ şi nu pleacă singură după patru secunde. Cine intră
   dimineaţa în program are dreptul să afle, o dată, că i s-a schimbat
   unealta din mână.

   Se închide cu un buton, cu Escape, sau apăsând pe fundal — toate trei
   scriu acelaşi lucru: „am citit".
   ===================================================================== */
.nou-f {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 12, 8, .72);
}

.nou-f__cutie {
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: var(--cream, #f5edd9);
  color: #2a1c14;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.nou-f__cap {
  padding: 1rem 1.2rem .7rem;
  border-bottom: 1px solid rgba(42, 28, 20, .14);
}
.nou-f__cap h2 {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.nou-f__sub { margin: .25rem 0 0; font-size: .82rem; opacity: .7; }

.nou-f__corp { overflow-y: auto; padding: .9rem 1.2rem 1.1rem; }

.nou-f__v + .nou-f__v { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(42, 28, 20, .12); }
.nou-f__nr {
  display: inline-block;
  margin-bottom: .2rem;
  padding: 0 .35rem;
  border-radius: 3px;
  background: rgba(180, 83, 42, .14);
  color: #8c3d1d;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.nou-f__data { margin-left: .4rem; font-size: .68rem; opacity: .6; }
.nou-f__titlu { margin: .1rem 0 .4rem; font-size: 1rem; font-weight: 600; }
.nou-f__note { margin: 0; padding-left: 1.1rem; }
.nou-f__note li { margin: .25rem 0; font-size: .9rem; line-height: 1.5; }

.nou-f__jos {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: flex-end;
  padding: .8rem 1.2rem;
  border-top: 1px solid rgba(42, 28, 20, .14);
}
.nou-f__jos .btn { min-height: 44px; }

@media (max-width: 520px) {
  .nou-f { padding: 0; align-items: flex-end; }
  .nou-f__cutie { max-height: 88vh; border-radius: 6px 6px 0 0; }
}

/* Pagina „Ce e nou" — aceeaşi listă, fără grabă. */
.cen__cap { display: flex; align-items: center; gap: .45rem; margin-bottom: .2rem; }
.cen__nou {
  padding: 0 .3rem;
  border: 1px solid rgba(180, 83, 42, .45);
  border-radius: 3px;
  background: rgba(180, 83, 42, .12);
  color: #8c3d1d;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.cen__titlu { margin: .15rem 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.cen__note { margin: 0; padding-left: 1.15rem; }
.cen__note li { margin: .3rem 0; line-height: 1.55; }


/* =====================================================================
   30. IAU DIN MAGAZIE  (/lucru/magazie)  — 1.57.0

   Ecran de telefon, ţinut într-o mână, în faţa raftului. Ţintele sunt
   de 44px şi cifra se apasă, nu se scrie: o tastatură numerică deschisă
   peste jumătate de ecran, lângă chiuvetă, cu degetul ud, nu e un câmp
   de completat — e un motiv să nu completezi.
   ===================================================================== */
.mag-l__secti { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.mag-l__sec {
  padding: .45rem .7rem;
  border: 1px solid rgba(21,21,24,.14);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  color: rgba(21,21,24,.62);
  text-decoration: none;
}
.mag-l__sec.is-on { border-color: #B3401F; background: #B3401F; color: #fff; font-weight: 600; }

.mag-l__ce { margin: 0 0 1rem; font-size: .88rem; line-height: 1.55; color: rgba(21,21,24,.6); }
.mag-l__cauta { margin-bottom: .8rem; }

.mag-l__p {
  border: 1px solid rgba(21,21,24,.1);
  border-radius: 12px;
  background: #fff;
  margin-bottom: .5rem;
  overflow: hidden;
}
.mag-l__p.e-atentie { border-color: rgba(200,162,74,.55); }
.mag-l__p.e-rau     { border-color: rgba(179,64,31,.55); }

.mag-l__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  min-height: 56px;
  padding: .7rem .9rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mag-l__nume { font-size: 1rem; font-weight: 500; color: #151518; }
.mag-l__are {
  flex: 0 0 auto;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: rgba(21,21,24,.55);
  white-space: nowrap;
}
.mag-l__p.e-atentie .mag-l__are { color: #8a6d24; font-weight: 600; }
.mag-l__p.e-rau     .mag-l__are { color: #B3401F; font-weight: 700; }

.mag-l__ia { padding: 0 .9rem .9rem; border-top: 1px solid rgba(21,21,24,.07); }

/* Cifra: „−  2  +", cu unitatea în cuvintele omului. */
.mag-l__cifra { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; }
.mag-l__pm {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border: 1px solid rgba(21,21,24,.16);
  border-radius: 10px;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mag-l__pm:active { background: #f2efe9; }
.mag-l__n {
  /* Lăţimea e scrisă şi ca `width`, nu doar în `flex`: o regulă de mai
     sus pune `width: 100%` pe câmpurile de text, iar `flex-basis`
     singur pierde în faţa ei — şi atunci cifra ocupa tot rândul, iar
     „+" şi unitatea cădeau sub el, unde nu le mai vedea nimeni. */
  flex: 0 0 76px;
  width: 76px;
  min-width: 0;
  height: 48px;
  border: 1px solid rgba(21,21,24,.16);
  border-radius: 10px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mag-l__um { font-size: .95rem; color: rgba(21,21,24,.6); }

.mag-l__motiv { margin-bottom: .7rem; }
.mag-l__ok { min-height: 52px; font-size: 1rem; }

.mag-l__raspuns {
  margin: .7rem 0 0;
  padding: .55rem .7rem;
  border-radius: 8px;
  background: rgba(63,122,74,.1);
  font-size: .9rem;
  line-height: 1.5;
  color: #2f5d38;
}
.mag-l__raspuns.e-rau { background: rgba(179,64,31,.1); color: #8c3d1d; }

.mag-l__gol { padding: 1rem 0; color: rgba(21,21,24,.5); }

/* Ce s-a luat azi. Nu ca să controleze cineva pe cineva: ca omul care
   se întreabă „am luat deja?" să nu ia a doua oară. */
.mag-l__h { margin: 1.8rem 0 .5rem; font-size: .95rem; font-weight: 600; }
.mag-l__azi { list-style: none; margin: 0; padding: 0; }
.mag-l__azi li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .1rem .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(21,21,24,.07);
  font-size: .88rem;
}
.mag-l__ora  { color: rgba(21,21,24,.45); font-variant-numeric: tabular-nums; }
.mag-l__cant { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mag-l__pr   { color: #151518; }
.mag-l__om   { grid-column: 3; font-size: .78rem; color: rgba(21,21,24,.45); }


/* =====================================================================
   31. POZA LÂNGĂ BIFĂ  (/lucru/proceduri)  — 1.57.0

   Un buton, o miniatură şi un rând de răspuns. Butonul deschide camera,
   nu galeria: o poză aleasă din galerie poate fi de ieri, iar atunci
   dovada nu mai dovedeşte nimic.
   ===================================================================== */
.poz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: .4rem 0 .2rem 2.6rem;
}

/* Punctul care CERE poză şi n-o are încă: se vede că mai e ceva de
   făcut, fără să strige. Roşul e pentru ce e greşit; asta e doar
   neterminat. */
.poz--cere {
  padding: .5rem .7rem;
  border-left: 3px solid #c8a24a;
  background: rgba(200, 162, 74, .1);
}

.poz__vezi {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(21,21,24,.14);
}
.poz__vezi img { width: 100%; height: 100%; object-fit: cover; display: block; }

.poz__buton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid rgba(21,21,24,.18);
  border-radius: 10px;
  background: #fff;
  font-size: .88rem;
  cursor: pointer;
}
.poz__buton:active { background: #f2efe9; }
.poz--cere .poz__buton { border-color: #c8a24a; font-weight: 600; }

.poz__raspuns {
  flex: 1 1 100%;
  margin: 0;
  font-size: .82rem;
  color: rgba(21,21,24,.55);
}
.poz__raspuns.e-rau { color: #B3401F; }

@media (max-width: 420px) {
  .poz { margin-left: 1.6rem; }
}


/* =====================================================================
   32. NU E TELEFONUL TĂU  (/lucru)  — 1.57.0
   ===================================================================== */
.alt-t__ce { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.6; }
.alt-t__disp { margin: 0; font-size: .85rem; color: rgba(21,21,24,.6); }
.alt-t__lista { list-style: none; margin: .3rem 0 0; padding: 0; }
.alt-t__lista li { padding: .5rem 0; border-bottom: 1px solid rgba(21,21,24,.07); }
.alt-t__de-cand { display: block; font-size: .8rem; color: rgba(21,21,24,.5); }
.alt-t__jos { margin: 1.2rem 0 0; font-size: .85rem; line-height: 1.6; color: rgba(21,21,24,.55); }

/* Pozele de pe o fişă, în panou. */
.fpz { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.fpz__p { margin: 0; }
.fpz__p img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line, rgba(21,21,24,.12)); background: #f2efe9;
}
.fpz__p figcaption { margin-top: .3rem; font-size: .76rem; line-height: 1.4; color: rgba(21,21,24,.6); }
.fpz__ora { display: block; font-variant-numeric: tabular-nums; opacity: .8; }

/* Punctul care duce unde se face treaba (/lucru/proceduri) — 1.58.0 */
.pct-leg {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: .3rem 0 .1rem 2.6rem;
  padding: .4rem .8rem;
  border: 1px solid rgba(179, 64, 31, .35);
  border-radius: 10px;
  background: rgba(179, 64, 31, .06);
  font-size: .86rem;
  font-weight: 500;
  color: #B3401F;
  text-decoration: none;
}
.pct-leg:active { background: rgba(179, 64, 31, .12); }
@media (max-width: 420px) { .pct-leg { margin-left: 1.6rem; } }

/* Zilele fără borderou (/panou/borderouri) — 1.58.0 */
.fb__zi {
  display: inline-block;
  margin: .15rem .25rem .15rem 0;
  padding: .2rem .45rem;
  border: 1px solid rgba(179,64,31,.3);
  border-radius: 5px;
  background: rgba(179,64,31,.07);
  color: #8c3d1d;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.fb__zi:hover { background: rgba(179,64,31,.14); }

/* Comanda pe furnizori (/panou/proceduri/{id}/comanda) — 1.58.0 */
.cmd__t { margin-bottom: .6rem; }
.cmd__d > summary { cursor: pointer; font-size: .85rem; color: rgba(21,21,24,.6); padding: .3rem 0; }
.cmd__d[open] > summary { margin-bottom: .4rem; }
.cmd__txt {
  width: 100%;
  border: 1px solid var(--line, rgba(21,21,24,.14));
  border-radius: 8px;
  padding: .6rem .7rem;
  font: 400 .85rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fbf9f7;
  resize: vertical;
}

/* Cifra propusă de program pe fişa de stoc — 1.58.0.
   Se vede că e a programului, nu a omului: scrisă altfel, pe fond
   galben stins. Se stinge în clipa în care omul scrie peste ea. */
.proc__cifra--calc { background: rgba(200,162,74,.16); border-color: rgba(200,162,74,.5); font-weight: 600; }

/* =====================================================================
   MANUALUL ECHIPEI  (/lucru/manual) — 1.59.0

   Se citeşte pe telefon, în picioare, de obicei fiindcă s-a blocat
   ceva. De aici vine tot ce e altfel decât în restul panoului: rândul
   de text e mai scurt (65 de semne, ca într-o carte), paşii au numere
   mari cât să se urmărească cu ochiul ridicat din tigaie, iar „aşa
   arată pe ecran" e o ramă care conţine BUTOANE ADEVĂRATE, nu poze.

   DE CE NU SUNT CAPTURI DE ECRAN
     O captură e adevărată în ziua în care a fost făcută. Peste trei
     săptămâni mutăm un buton, iar manualul arată în continuare ecranul
     vechi — şi omul care se uită în el crede că a greşit el. Ce e în
     rama de mai jos foloseşte aceleaşi clase ca ecranul adevărat: când
     se schimbă butonul, se schimbă şi aici, fără să atingă nimeni
     nimic.
   ===================================================================== */

/* --- lista de capitole ---------------------------------------------- */
.man-lista { display: flex; flex-direction: column; gap: .5rem; }

.man-cap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line, rgba(21,21,24,.14));
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  min-height: 56px;              /* se apasă cu degetul */
}
.man-cap:hover { border-color: rgba(21,21,24,.32); }
.man-cap--nou { border-color: rgba(24,73,10,.45); background: rgba(24,73,10,.035); }

.man-cap__mij { flex: 1 1 auto; min-width: 0; }
.man-cap__t   { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.man-cap__s   { display: block; font-size: .85rem; opacity: .62; margin-top: .15rem; text-wrap: pretty; }

.man-cap__semn {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .35rem;
  border-radius: 4px;
  background: #18490a;
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: 2px;
}

.man-cap__min {
  flex: none;
  font-size: .75rem;
  opacity: .5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- ce s-a schimbat ------------------------------------------------- */
.man-nou__v + .man-nou__v { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line, rgba(21,21,24,.12)); }
.man-nou__t { font-size: 1rem; margin: 0; line-height: 1.3; }
.man-nou__l { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .875rem; line-height: 1.5; }
.man-nou__l li + li { margin-top: .35rem; }
.man-nou__tot { margin: .9rem 0 0; font-size: .875rem; }

/* --- corpul unui capitol --------------------------------------------- */
.man { max-width: 42rem; }                 /* ~65 de semne pe rând */
.man p { line-height: 1.6; text-wrap: pretty; }
.man h2 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 2rem 0 .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, rgba(21,21,24,.12));
}
.man h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.man h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.man ul, .man ol { line-height: 1.6; padding-left: 1.25rem; }
.man li + li { margin-top: .4rem; }

/* Paşii numerotaţi. Numărul e mare fiindcă ecranul se citeşte de la o
   jumătate de metru, iar omul ridică ochii din ce face şi trebuie să
   găsească într-o clipă unde rămăsese. */
.man-pasi { list-style: none; margin: 1rem 0; padding: 0; counter-reset: pas; }
.man-pas {
  position: relative;
  padding-left: 2.75rem;
  min-height: 2rem;
  margin-bottom: 1.1rem;
}
.man-pas::before {
  counter-increment: pas;
  content: counter(pas);
  position: absolute;
  left: 0; top: -.1rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #18490a;
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.man-pas__t { font-weight: 600; display: block; margin-bottom: .15rem; }
.man-pas p  { margin: .15rem 0 0; font-size: .9375rem; }

/* „Aşa arată pe ecran" — rama cu bucăţi adevărate de interfaţă. */
.man-demo {
  margin: 1rem 0;
  border: 1px dashed rgba(21,21,24,.28);
  border-radius: 12px;
  background: #fbf9f7;
  padding: 1rem;
}
.man-demo__l {
  display: block;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .45;
  margin-bottom: .6rem;
}
/* Butoanele dinăuntru nu duc nicăieri: sunt desen, nu uşă. */
.man-demo [data-demo] { pointer-events: none; }

/* Atenţionarea. Roşie, dar nu ţipătoare: se foloseşte de patru ori în
   tot manualul, şi exact acolo unde greşeala nu se mai poate lua
   înapoi. Zece atenţionări pe pagină nu mai sunt atenţionări. */
.man-atentie {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-left: 3px solid #b3401f;
  border-radius: 0 8px 8px 0;
  background: rgba(179,64,31,.06);
  font-size: .9375rem;
  line-height: 1.55;
}
.man-atentie strong { color: #8c3d1d; }

/* „De ce e aşa" — pentru cine vrea să înţeleagă, nu doar să apese.
   Strâns, ca să nu-l încurce pe cel care are treabă. */
.man-dece {
  margin: 1rem 0;
  border: 1px solid var(--line, rgba(21,21,24,.12));
  border-radius: 10px;
  background: #fff;
}
.man-dece > summary {
  cursor: pointer;
  padding: .6rem .85rem;
  font-size: .875rem;
  font-weight: 600;
  opacity: .7;
  list-style: none;
}
.man-dece > summary::-webkit-details-marker { display: none; }
.man-dece > summary::before { content: '›  '; display: inline-block; transition: transform .15s; }
.man-dece[open] > summary::before { transform: rotate(90deg); }
.man-dece__c { padding: 0 .85rem .85rem; font-size: .9rem; line-height: 1.6; }
.man-dece__c p:first-child { margin-top: 0; }

/* Desenele. SVG în pagină, nu fotografii — se întind, se citesc pe
   orice ecran, şi nu au nevoie de o a doua cerere la server. */
/* Desenele sunt ÎNALTE, nu late, şi se opresc la 420px.
   Un desen lat de 560 pe un telefon de 390 se micşorează cu 30%, iar
   scrisul din el ajunge la şapte pixeli — adică nu mai e un desen, e o
   pată. Aşezate pe verticală şi oprite la 420, se citesc la fel pe
   telefon şi pe laptop. */
.man-desen { margin: 1rem 0; }
.man-desen svg { width: 100%; max-width: 420px; height: auto; display: block; }
.man-desen figcaption { font-size: .8125rem; opacity: .6; margin-top: .4rem; line-height: 1.5; }

/* Capătul capitolului: ecranul despre care a fost vorba, şi următorul. */
.man-capat {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, rgba(21,21,24,.14));
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.man-capat__ur { margin-left: auto; font-size: .875rem; text-align: right; }
.man-capat__ur span { display: block; opacity: .5; font-size: .75rem; }

@media (max-width: 420px) {
  .man-capat__ur { margin-left: 0; text-align: left; width: 100%; }
}

/* Raionul de azi, pe ecranul ospătarului (/lucru) — 1.59.0.
   Numerele meselor sunt mari şi despărţite: se citesc dintr-o privire,
   în mers, de pe un telefon ţinut într-o mână. O listă scrisă „3, 4, 7,
   12" se citeşte ca o propoziţie şi cere atenţie; nişte jetoane se
   numără cu ochiul. */
.raion { margin: 0 0 .9rem; }
.raion + .raion { padding-top: .9rem; border-top: 1px solid var(--line, rgba(21,21,24,.12)); }
.raion__tura {
  display: block;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: .35rem;
}
/* Numele zonei, deasupra jetoanelor. Bulina ia culoarea raionului, aşa
   cum e pe planul sălii: acelaşi lucru, acelaşi semn, în amândouă
   ecranele. */
.raion__z {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 .4rem .4rem 0;
  font-size: 1.05rem; font-weight: 600;
}
.raion__z::before {
  content: ''; width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--rai, #8a8f98); flex: 0 0 auto;
}
.raion__mese { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.raion__m {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .25rem .6rem;
  border: 1px solid rgba(24,73,10,.35);
  border-radius: 8px;
  background: rgba(24,73,10,.07);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   APARATELE DIN RESTAURANT  (/panou/aparate) — 1.59.0

   Ecran de citit, nu de comparat: fiecare aplicaţie îşi spune povestea
   întreagă într-un loc. Un tabel cu opt coloane ar fi cerut ţinut minte
   de la o coloană la alta, iar ecranul ăsta se deschide o dată la trei
   luni — exact când nimeni nu mai ţine minte nimic.
   ===================================================================== */
.apar__grup { margin-bottom: 2rem; }

.apar__cap { margin-bottom: .9rem; }
.apar__titlu {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: .02em;
}
.apar__ce {
  margin: .25rem 0 0;
  font-size: .875rem;
  opacity: .62;
  line-height: 1.5;
  max-width: 44rem;
}

.apar { margin-bottom: 1rem; border-left: 3px solid var(--c, #151518); }

.apar__h { align-items: center; gap: .7rem; }
.apar__h > span:first-child { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.apar__icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  flex: none;
  /* Rama ţine pictograma vizibilă şi când fundalul ei e aproape alb —
     panoul are fundal crem. */
  border: 1px solid rgba(21,21,24,.12);
  background: var(--c, #fff);
}
.apar__nume { font-weight: 600; }

/* Fişa aplicaţiei: perechi etichetă/valoare, pe două coloane la lat şi
   una la îngust. Nu un tabel: n-au aceeaşi lungime şi n-are rost să se
   alinieze pe verticală ca nişte cifre. */
.apar__fise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem 1.25rem;
  margin: .25rem 0 .9rem;
}
.apar__fise > div { min-width: 0; }
.apar__fise dt {
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: .15rem;
}
.apar__fise dd { margin: 0; font-size: .9375rem; line-height: 1.45; }

.apar__unde {
  margin: 0 0 .9rem;
  padding: .65rem .85rem;
  border-radius: 9px;
  background: rgba(21,21,24,.035);
  font-size: .9rem;
  line-height: 1.55;
}

.apar__h3 {
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 .4rem;
}

.apar__acces { margin-bottom: .9rem; }
.apar__roluri { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.apar__oameni { margin: 0; font-size: .9rem; line-height: 1.6; }
.apar__gol    { margin: 0; font-size: .9rem; opacity: .6; }
.apar__nota   { margin: .4rem 0 0; font-size: .8125rem; opacity: .55; }

.apar__note ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.55; }
.apar__note li + li { margin-top: .4rem; }

.apar__jos { margin-top: 1rem; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* =====================================================================
   REGISTRUL LEGAL şi PROCESUL-VERBAL — 1.60.0
   ===================================================================== */
.reg__grup { margin-bottom: 1.75rem; }
.reg__cap  { margin-bottom: .7rem; }
.reg__titlu { font-size: 1.05rem; margin: 0; }
.reg__ce   { margin: .2rem 0 0; font-size: .875rem; opacity: .62; line-height: 1.5; max-width: 46rem; }
.reg__cine { display: block; font-size: .8125rem; opacity: .8; margin-top: .15rem; }

.reg { margin-bottom: .85rem; }
.reg__rezumat { margin: .1rem 0 .7rem; font-size: .9rem; line-height: 1.5; }

.reg__fise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem 1.25rem;
  margin: 0 0 .6rem;
}
.reg__fise dt {
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  opacity: .5; margin-bottom: .1rem;
}
.reg__fise dd { margin: 0; font-size: .9rem; line-height: 1.4; }

.reg__temei > summary {
  cursor: pointer; font-size: .8125rem; opacity: .65; padding: .25rem 0;
}
.reg__temei ul {
  margin: .3rem 0 0; padding-left: 1.1rem;
  font-size: .8125rem; line-height: 1.55; opacity: .85;
}
.reg__temei li + li { margin-top: .2rem; }

.reg__lipsa { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.reg__lipsa li + li { margin-top: .3rem; }

/* Avertismentul care spune ce NU poate face programul. Stă sus şi se
   vede: un om care crede că documentele se actualizează singure se
   opreşte din verificat, şi ăsta e singurul fel în care ecranul ar
   putea face rău. */
.note--atentie {
  border-left: 3px solid #b3401f;
  background: rgba(179,64,31,.05);
}

/* --- procesul-verbal ------------------------------------------------- */
.pv__temei { margin: 0; padding-left: 1.1rem; font-size: .875rem; line-height: 1.6; }
.pv__temei li + li { margin-top: .25rem; }

.pv__formula {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 48rem;
}

.pv__t td, .pv__t th { vertical-align: middle; }
.pv__semn img { display: block; max-height: 34px; }
.pv__lipsa td { opacity: .75; }
.pv__lipsa td:nth-child(4), .pv__lipsa td:nth-child(5) { min-height: 2rem; }

/* --- actele documentului, în formularul de document ------------------
   Două câmpuri pe rând acolo unde chiar merg în pereche: ediţia cu data
   ei, aprobarea cu data ei, intervalul de revizuire cu ultima revizuire.
   Despărţite, ochiul le caută unul pe altul. */
.docf__doua { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 420px) { .docf__doua { grid-template-columns: 1fr; } }
.docf__side > details.field > summary { list-style: none; }
.docf__side > details.field > summary::-webkit-details-marker { display: none; }
.docf__side > details.field > summary::before { content: '▸ '; opacity: .55; }
.docf__side > details.field[open] > summary::before { content: '▾ '; }

/* --- capul şi subsolul de tipar ---------------------------------------
   Stau în pagină ca să fie acolo când se apasă Ctrl+P, dar pe ecran nu
   se văd: altfel pagina are două titluri.

   Regula trebuie să fie AICI, nu în print.css: foaia aia e legată cu
   `media="print"`, deci nimic din ea nu se aplică pe ecran — nici măcar
   ce e scris în afara lui `@media print`. Pusă acolo, era o regulă
   moartă care părea că funcţionează, şi antetul se vedea pe ecran pe
   toate paginile care îl au. */
.tipar-antet, .tipar-subsol, .tipar-semnaturi { display: none; }

/* =====================================================================
   TEMPERATURILE HACCP
   ===================================================================== */

/* --- ecranul omului, pe telefon -------------------------------------
   Cifra se scrie cu degetul, lângă un frigider deschis. Câmpul e mare
   şi butonul e lângă el: două atingeri, nu patru. */
.temp__cap   { margin-bottom: .8rem; }
.temp__t     { margin: 0; font-size: 1.25rem; }
.temp__sub   { margin: .1rem 0 0; opacity: .7; font-size: .9rem; }

.temp__cand  { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .9rem; }
.temp__momente { display: flex; gap: .35rem; }
.temp__m     {
  padding: .45rem .85rem; border-radius: 999px; font-size: .875rem;
  border: 1px solid rgba(0,0,0,.18); text-decoration: none;
}
.temp__m.is-on { background: #2f2a26; color: #fff; border-color: #2f2a26; }
.temp__zi    { min-width: 9rem; margin: 0; }

.temp__p     { margin-bottom: .7rem; border-left: 3px solid transparent; }
.temp__p.is-bun { border-left-color: #2e7d4f; }
.temp__p.is-rau { border-left-color: #b3401f; }

.temp__ph    { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.temp__nume  { font-weight: 600; }
.temp__cod   { opacity: .5; font-weight: 400; font-size: .8125rem; margin-left: .3rem; }
.temp__limita{ font-size: .8125rem; opacity: .7; white-space: nowrap; }

.temp__scris { margin: .4rem 0 0; font-size: .9rem; }
.temp__val   { font-size: 1.05rem; }
.temp__abatere { color: #b3401f; font-weight: 600; }
.temp__masura{ margin: .25rem 0 0; font-size: .875rem; opacity: .85; font-style: italic; }

.temp__f     { margin-top: .55rem; }
.temp__rand  { display: flex; gap: .5rem; align-items: flex-end; }
.temp__cifra { flex: 1; margin: 0; }
/* Cifra se citeşte de la un metru, cu ochelari de citit uitaţi acasă. */
.temp__cifra .field__i { font-size: 1.15rem; text-align: center; }
.temp__ok    { white-space: nowrap; min-height: 44px; }
.temp__mas   { margin: .5rem 0 0; }
.temp__f.are-abatere .temp__mas .field__l { color: #b3401f; font-weight: 600; }
.temp__gata  { margin-top: 1rem; opacity: .7; }

/* --- registrul din panou ---------------------------------------------
   Zilele pe rânduri, punctele pe coloane — ca hârtia de pe uşa
   frigiderului, fiindcă aşa se compară două zile dintr-o privire. */
.temp-reg           { font-size: .875rem; }
.temp-reg th,
.temp-reg td        { text-align: center; padding: .3rem .45rem; }
.temp-reg td:first-child,
.temp-reg th:first-child { text-align: left; white-space: nowrap; }
.temp-reg__m        { font-weight: 400; opacity: .6; font-size: .75rem; }
.temp-reg__c        { font-variant-numeric: tabular-nums; }
.temp-reg__c.is-bun { background: rgba(46,125,79,.10); }
.temp-reg__c.is-rau { background: rgba(179,64,31,.16); font-weight: 700; }
.temp-reg__c.is-gol { background: rgba(179,64,31,.05); }
.temp-reg__lipsa    { opacity: .45; }

.card.is-stins      { opacity: .62; }

/* =====================================================================
   CODUL DE MENIU, DE ARĂTAT OASPETELUI

   Ecranul e gol dinadins. Un cod QR se citeşte de o cameră, iar camera
   are nevoie de contrast şi de suprafaţă. Orice pus în jur fură din
   latura codului — singurul lucru care contează când telefonul e ţinut
   la patruzeci de centimetri, într-o sală cu lumină scăzută.
   ===================================================================== */
.mqr        { text-align: center; padding: .5rem 0 2rem; }

/* Fundal alb curat, lipit de cod: zona liniştită din SVG plus asta fac
   împreună marginea pe care o cere camera. */
.mqr__cod   {
  background: #fff; border-radius: 12px;
  padding: 12px; display: inline-block; line-height: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.mqr__cod svg {
  display: block; width: min(78vw, 340px); height: auto;
  image-rendering: pixelated;   /* module tăiate drept, fără gri pe muchii */
}

.mqr__ce    { margin: 1rem 0 .1rem; font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }
.mqr__sub   { margin: 0 auto; max-width: 26rem; font-size: .875rem; line-height: 1.5; opacity: .72; }
.mqr__adresa{
  margin: .9rem 0 0; font-size: .95rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; opacity: .85;
}
.mqr__nota  {
  margin: 1.6rem auto 0; max-width: 28rem; text-align: left;
  border-left: 3px solid rgba(0,0,0,.18); padding: .5rem .8rem;
  font-size: .85rem; line-height: 1.55; opacity: .8;
}

/* Pe un ecran mic, codul cât încape — el e pagina. */
@media (max-width: 420px) {
  .mqr__cod svg { width: min(86vw, 340px); }
}

/* ═══════════════════════════════════════════════════════════════════
   MENIUL DIN DREAPTA AL ZONEI DE LUCRU (1.66.0)

   Bara de jos avea cinci locuri şi zona de lucru are cincisprezece
   ecrane. Fâşia din dreapta ţine cele cinci apăsate într-o tură;
   panoul „Tot" le ţine pe toate, pe grupe.

   LĂŢIMEA e 64 de puncte, nu 80. Pe un telefon de 390 rămân 326 pentru
   conţinut — destul pentru un rând de text de 16px fără să se rupă
   cuvintele. La 80 rămâneau 310, şi sumele din borderou începeau să
   cadă pe două rânduri.
   ═══════════════════════════════════════════════════════════════════ */

.lrail {
  /* PESTE panouri, nu sub ele (z-index 50 faţă de 40).
     Cu fâşia dedesubt, un panou deschis îi acoperea clopoţelul: ca să
     treci de la meniu la înştiinţări trebuia să închizi întâi, apoi să
     apeşi — două apăsări pentru ceva ce se vede tot timpul. Deasupra,
     fâşia rămâne ce spune că este: locul în care apeşi ca să ajungi
     altundeva, indiferent ce e deschis. */
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 50;
  width: 64px;
  display: flex; flex-direction: column; align-items: stretch;
  background: #fff; border-left: 1px solid rgba(0,0,0,.1);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto; overscroll-behavior: contain;
}

.lrail__b,
.lrail__clopot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem;
  min-height: 60px; padding: .5rem .18rem;
  text-decoration: none; color: rgba(21,21,24,.55);
  font-size: .68rem; line-height: 1.15; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.lrail__b:active,
.lrail__clopot:active { background: #f0ece8; }

.lrail__b.is-on {
  color: #151518; font-weight: 600;
  box-shadow: inset -3px 0 0 #B3401F;
  background: rgba(179,64,31,.05);
}

/* Cuvintele lungi se rup în silabe, nu peste margine. */
.lrail__t { display: block; hyphens: auto; overflow-wrap: anywhere; }

.lrail__ic { display: block; color: inherit; }

.lrail__clopot { min-height: 64px; color: rgba(21,21,24,.62); }
.lrail__clopot.is-noi { color: #B3401F; }

/* Cifra stă PE clopoţel, în colţ, nu sub el: sub el ar fi împins
   butoanele în jos cu fiecare înştiinţare nouă, iar „Acasă" n-ar mai fi
   fost niciodată în acelaşi loc. */
.lrail__cifra {
  position: absolute; top: 8px; right: 10px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #B3401F; color: #fff;
  font-size: .64rem; font-weight: 700; line-height: 17px;
  font-variant-numeric: tabular-nums;
}

.lrail__nou {
  position: absolute; top: 9px; right: 13px;
  color: #B3401F; font-size: 1.1rem; line-height: 0;
}

.lrail__linie { height: 1px; margin: .1rem .6rem .2rem; background: rgba(0,0,0,.1); }

/* „Tot" se lipeşte de fund: e capătul listei, şi acolo îl caută mâna
   care vine de pe bara de jos de dinainte. */
.lrail__tot { margin-top: auto; border-top: 1px solid rgba(0,0,0,.08); }

/* ---------- panourile care intră din dreapta ---------- */

.lmen, .lclop { position: fixed; inset: 0; z-index: 40; }

/* ÎNCHISE ÎN DOUĂ FELURI, după cum merge sau nu JavaScriptul.
   `<html class="js">` se pune de un rând de script din capul paginii.

   CU JavaScript — ascunse de tot; se deschid din buton.
   FĂRĂ — rămân în pagină, jos, ca listă obişnuită, iar „Tot" coboară la
   ele. Un ecran de bucătărie cu browser vechi n-are voie să rămână fără
   meniu, şi nici să care după el o listă pe care n-o poate deschide. */
.js .lmen:not(.is-deschis),
.js .lclop:not(.is-deschis) { display: none; }

html:not(.js) .lmen,
html:not(.js) .lclop { position: static; inset: auto; z-index: auto; }

html:not(.js) .lmen__fundal { display: none; }

html:not(.js) .lmen__in {
  position: static; width: auto; max-width: 720px;
  margin: 0 auto 2rem; box-shadow: none; border-radius: 12px;
  right: auto;
}

.lmen__fundal { position: absolute; inset: 0; background: rgba(21,21,24,.45); }

.lmen__in {
  /* Se opreşte la marginea fâşiei, nu sub ea: aşa se văd amândouă, iar
     butonul care a deschis panoul rămâne aprins sub deget. */
  position: absolute; top: 0; bottom: 0; right: 64px;
  width: min(calc(100vw - 88px), 320px);
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.18);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 2rem;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.lmen__cap {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.1rem;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: .95rem;
}
.lmen__x {
  text-decoration: none; color: rgba(21,21,24,.5);
  font-size: 1.1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: flex-end;
}

.lmen__grupa { padding: .9rem 0 .2rem; }
.lmen__gt {
  margin: 0 0 .15rem; padding: 0 1.1rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(21,21,24,.42);
}
.lmen__lista { list-style: none; margin: 0; padding: 0; }
.lmen__l {
  display: flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.1rem;
  text-decoration: none; color: #151518; font-size: 1rem;
}
.lmen__l:active { background: #f0ece8; }
.lmen__l.is-on { font-weight: 600; box-shadow: inset 3px 0 0 #B3401F; }
.lmen__nou {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: #B3401F; border-radius: 999px; padding: .1rem .38rem;
}

.lmen__iesire { margin: 1.2rem 1.1rem 0; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08); }
.lmen__iesire button {
  border: 0; background: none; font-size: .88rem; color: rgba(21,21,24,.5);
  cursor: pointer; padding: .5rem 0; min-height: 44px;
}

/* ---------- clopoţelul ---------- */

.lclop__lista { list-style: none; margin: 0; padding: 0; }
.lclop__r + .lclop__r { border-top: 1px solid rgba(0,0,0,.07); }

/* Necitită = o dungă, nu un fundal colorat. Cinci rânduri cu fundal
   colorat unul sub altul arată ca o eroare, nu ca nişte noutăţi. */
.lclop__r.is-noua .lclop__l { box-shadow: inset 3px 0 0 #B3401F; }

.lclop__l {
  display: block; padding: .8rem 1.1rem;
  text-decoration: none; color: inherit;
}
a.lclop__l:active { background: #f0ece8; }
.lclop__t { display: block; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.lclop__x { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.45; color: rgba(21,21,24,.72); }
.lclop__c {
  display: block; margin-top: .3rem;
  font-size: .74rem; color: rgba(21,21,24,.45);
  font-variant-numeric: tabular-nums;
}
.lclop__fara { color: #B3401F; }

.lclop__gol { margin: 1.4rem 1.1rem; font-size: .9rem; line-height: 1.6; color: rgba(21,21,24,.6); }
.lclop__toate { margin: 1rem 1.1rem 0; }
.lclop__jos { margin: 1.2rem 1.1rem 0; font-size: .86rem; }

/* Cât timp e un panou deschis, pagina de dedesubt nu se mai derulează.
   Altfel, degetul care „închide" trăgând în jos derulează borderoul din
   spate, iar omul se întoarce în alt loc decât cel din care a plecat. */
body.lucru--blocat { overflow: hidden; }

/* ---------- pe ecran lat ---------- */

@media (min-width: 900px) {
  .lrail { width: 92px; }
  .lrail__b, .lrail__clopot { font-size: .74rem; }
  .lmen__in { right: 92px; width: min(calc(100vw - 116px), 360px); }
}

/* ---------- pagina înştiinţărilor ---------- */

.inst { max-width: 40rem; }
.inst__toate { margin: 0 0 1.4rem; }

.inst__lista {
  list-style: none; margin: 0; padding: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
}

/* Ziua ca titlu peste rânduri. Fără ea, patruzeci de ore una sub alta
   nu se mai citesc ca un şir de întâmplări, ci ca o listă de cifre. */
.inst__zi {
  padding: .8rem 1.1rem .3rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(21,21,24,.42);
  background: #F6F4F1;
}
.inst__zi:first-child { padding-top: .6rem; }

.inst__r + .inst__r { border-top: 1px solid rgba(0,0,0,.07); }
.inst__r.is-noua .inst__l { box-shadow: inset 3px 0 0 #B3401F; }

.inst__l { display: block; padding: .9rem 1.1rem; text-decoration: none; color: inherit; }
a.inst__l:active { background: #f0ece8; }

.inst__t { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.inst__x { display: block; margin-top: .2rem; font-size: .92rem; line-height: 1.5; color: rgba(21,21,24,.72); }
.inst__c {
  display: block; margin-top: .35rem;
  font-size: .78rem; color: rgba(21,21,24,.45);
  font-variant-numeric: tabular-nums;
}

.inst__nota { margin: 1.2rem 0 0; }

/* „N-a sunat telefonul" e o notă de subsol, nu o alarmă. Scrisă cu
   roşu, fura ochiul de pe titlul înştiinţării — adică de pe lucrul
   pentru care omul deschisese lista. Rolul ei e să se poată găsi
   într-o discuţie de peste o săptămână, nu să strige azi. */
.lclop__fara, .inst__c .lclop__fara { color: rgba(21,21,24,.5); font-style: italic; }

/* =====================================================================
   LIVRAREA DIN PANOU (1.69.0)
   Bara de progres e singurul lucru care spune, în cele treizeci de
   secunde cât urcă arhiva, că se întâmplă ceva. Fără ea, omul apasă
   a doua oară.
   ===================================================================== */
.liv { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .liv { grid-template-columns: 1fr 1fr; } }

.liv__c { border: 1px solid var(--linie, rgba(0,0,0,.12)); padding: .8rem; border-radius: 10px; }
.liv__c input[type="file"] { width: 100%; min-height: 44px; font-size: .84rem; padding: .4rem; }
.liv__c code { font-size: .76rem; word-break: break-all; }

.liv__bara {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(21,21,24,.08); margin: .6rem 0 .4rem;
}
.liv__bara i { display: block; height: 100%; width: 0; background: var(--acc, #6B3FA0); transition: width .2s ease; }

.liv__spune { margin: 0; font-size: .84rem; min-height: 1.2em; }
.liv__spune.is-bun { color: #2f7a5a; }
.liv__spune.is-rau { color: #b3401f; }

.liv__vechi { margin-top: 1rem; }
.liv__vechi summary { cursor: pointer; font-size: .86rem; }
.liv__vechi ul { margin: .4rem 0; padding-left: 1.2rem; }

/* =====================================================================
   BANII (1.70.0)
   Cifra pe care o caută omul — câţi bani sunt ACUM — e cea mai mare de
   pe ecran şi stă sus, fiindcă tabloul se deschide pe telefon, în două
   minute furate, şi răspunsul n-are voie să ceară derulare.
   ===================================================================== */
.bani-sus {
  display: grid; gap: .8rem; margin-bottom: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .bani-sus { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bani-mare {
  display: block; padding: 1rem 1.1rem; border-radius: 12px;
  background: var(--card, #fff); border: 1px solid var(--linie, rgba(0,0,0,.12));
  text-decoration: none; color: inherit;
}
.bani-mare__e { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.bani-mare__v {
  display: block; margin: .25rem 0 .2rem;
  font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bani-mare__m { display: block; font-size: .8rem; opacity: .7; }
.bani-mare--dat .bani-mare__v { color: #b3701f; }
.bani-mare--rau { border-color: rgba(179,64,31,.4); background: rgba(179,64,31,.06); }
.bani-mare--rau .bani-mare__v { color: #b3401f; }
.bani-mare--bun { border-color: rgba(47,122,90,.35); background: rgba(47,122,90,.06); }

/* Întârziatele se văd dintr-o privire, dar fără roşu ţipat: rândul are
   o dungă, nu un fundal. Un tabel roşu pe jumătate nu se mai citeşte. */
.bani-tarziu th[scope="row"] { box-shadow: inset 3px 0 0 #b3401f; padding-left: .6rem; }

/* ---------- barele de buget ---------- */
.bug { display: grid; gap: .9rem; }
.bug__cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.bug__n { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.bug__n .adm__mic { font-weight: 400; }
.bug__bul { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, #8a8f98); flex: 0 0 auto; }
.bug__v { font-variant-numeric: tabular-nums; font-size: .9rem; }
.bug__bara { height: 8px; border-radius: 999px; background: rgba(21,21,24,.08); overflow: hidden; margin: .35rem 0 .2rem; }
.bug__bara i { display: block; height: 100%; background: var(--c, #8a8f98); }
.bug__r.is-depasit .bug__bara i { background: #b3401f; }
.bug__r.is-depasit .bug__v strong { color: #b3401f; }

/* ---------- registrul de casă ---------- */
.casa-sold { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.casa-sold div { min-width: 8rem; }
.casa-sold span { display: block; font-size: .78rem; opacity: .6; text-transform: uppercase; letter-spacing: .05em; }
.casa-sold strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.casa-intrare { color: #2f7a5a; }
.casa-iesire  { color: #b3401f; }

/* Formularele din Banii: câmpuri pe două-trei coloane pe ecran lat, unul
   sub altul pe telefon. Butonul ţine toată lăţimea, ca să nu fie nevoie
   să nimereşti cu degetul. */
.f-grid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-grid .field--lat { grid-column: 1 / -1; }
.f-grid__jos { grid-column: 1 / -1; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.tabel tr.is-azi { background: rgba(21,21,24,.04); }

/* ---------- o factură pe card ---------- */
.fact {
  border: 1px solid var(--linie, rgba(0,0,0,.12)); border-radius: 10px;
  padding: .8rem .9rem; margin-bottom: .7rem;
}
.fact--tarziu { border-left: 3px solid #b3401f; }
.fact__cap { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.fact__cap .adm__mic { flex: 1 1 14rem; }
.fact__cifre {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  margin: .5rem 0 0; font-size: .86rem; font-variant-numeric: tabular-nums;
}
.fact__plati { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .84rem; }
.fact__plati li { padding: .15rem 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.fact__plata { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.fact__plata .field__i { max-width: 10rem; min-height: 40px; }

/* ═══════════════════════════════════════════════════════════════════
   CARNEŢELUL OSPĂTARULUI                                     1.71.0
   ═══════════════════════════════════════════════════════════════════
   Ecranele astea se folosesc ÎN PICIOARE, pe telefon, cu o singură
   mână, într-o sală cu lumină puţină. De-aia toate ţintele sunt de cel
   puţin 44 de pixeli, cifrele sunt `tabular-nums` (ca să nu joace
   totalul la fiecare adăugare), iar nimic important nu se bazează
   numai pe culoare: culoarea DUBLEAZĂ un cuvânt sau o cifră, nu îl
   înlocuieşte. Un ospătar care nu deosebeşte roşul de verde trebuie
   să poată închide tura la fel de repede.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- mesele mele ---------- */
.carn__ce { margin: 0 0 .9rem; font-size: .92rem; }
.carn__ce__rau { display: block; margin-top: .2rem; color: #b3401f; }

.carn__mese {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.carn-m {
  position: relative; display: flex; flex-direction: column; gap: .15rem;
  min-height: 6.2rem; padding: .7rem .75rem;
  border: 2px solid var(--linie, rgba(0,0,0,.12)); border-radius: 12px;
  background: #fff; color: inherit; text-decoration: none;
  border-left: 5px solid var(--raion, var(--linie, rgba(0,0,0,.12)));
}
.carn-m__cod { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.carn-m__nume { font-size: .8rem; opacity: .7; }
.carn-m__liber { margin-top: auto; font-size: .82rem; opacity: .55; }
.carn-m__total {
  margin-top: auto; font-weight: 700; font-variant-numeric: tabular-nums;
}
.carn-m__linii { font-size: .78rem; opacity: .7; }

/* Masa deschisă are chenar plin, nu doar altă culoare. */
.carn-m.is-desc { border-color: #1f6f4a; box-shadow: 0 1px 0 rgba(0,0,0,.05); }

/* Bulina de ciorne poartă CIFRA, deci spune ce are de spus şi fără
   culoare — pe un ecran alb-negru rămâne „2 lucruri netrimise". */
.carn-m__bul {
  position: absolute; top: -.5rem; right: -.5rem;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: 999px; background: #b3401f; color: #fff;
  font-size: .82rem; font-weight: 700;
}
.carn-m.is-ciorna { border-color: #b3401f; }

.carn__gol { padding: 1.4rem 0; max-width: 34rem; }
.carn__gol__t { font-weight: 700; margin: 0 0 .4rem; }
.carn__jos { margin-top: 1.4rem; font-size: .88rem; }

/* ---------- o masă ---------- */
.carn-m2 { padding-bottom: 5.5rem; }   /* loc pentru foaia lipită jos */
.carn-m2__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .7rem;
}
.carn-m2__inapoi { text-decoration: none; font-size: .9rem; }
.carn-m2__cod { font-variant-numeric: tabular-nums; opacity: .65; font-size: .85rem; }
.carn-m2__cauta { margin-bottom: .8rem; }
.carn-m2__cauta .field__i { min-height: 48px; }

.carn-rec { margin-bottom: 1rem; }
.carn-rec__l { display: block; font-size: .8rem; opacity: .7; margin-bottom: .35rem; }
.carn-rec__r { display: flex; gap: .4rem; flex-wrap: wrap; }
.carn-rec__b {
  min-height: 40px; padding: .4rem .7rem;
  border: 1px dashed var(--linie, rgba(0,0,0,.25)); border-radius: 999px;
  background: transparent; font: inherit; font-size: .85rem; cursor: pointer;
}

.carn-cat { margin-bottom: 1.1rem; }
.carn-cat__t { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 .45rem; }
.carn-cat__p { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.carn-p {
  position: relative; display: flex; align-items: center; gap: .5rem;
  min-height: 52px; padding: .55rem .7rem; text-align: left;
  border: 1px solid var(--linie, rgba(0,0,0,.14)); border-radius: 10px;
  background: #fff; font: inherit; cursor: pointer;
}
.carn-p__n { flex: 1 1 auto; font-size: .92rem; line-height: 1.25; }
.carn-p__pr { font-variant-numeric: tabular-nums; font-size: .86rem; opacity: .75; }
/* Semnul de întrebare e un CARACTER, nu o culoare: se vede şi pe un
   ecran spălat de soare. */
.carn-p__i {
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
  border-radius: 999px; background: #8a5a12; color: #fff;
  font-size: .78rem; font-weight: 700;
}
.carn-meniu__nimic { opacity: .6; padding: 1rem 0; }

/* ---------- foaia, lipită jos ---------- */
.carn-foaie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff;
  border-top: 1px solid var(--linie, rgba(0,0,0,.16));
  box-shadow: 0 -6px 20px rgba(0,0,0,.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.carn-foaie__maner {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  min-height: 56px; padding: .6rem .9rem;
  border: 0; background: transparent; font: inherit; cursor: pointer;
}
.carn-foaie__cat {
  min-width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border-radius: 999px; background: #151518; color: #fff;
  font-size: .86rem; font-weight: 700;
}
.carn-foaie__t { flex: 1 1 auto; text-align: left; font-weight: 600; }
.carn-foaie__tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.carn-foaie__corp { max-height: 60vh; overflow-y: auto; padding: 0 .9rem .9rem; }
.carn-foaie__gol { opacity: .6; padding: .6rem 0; }
.carn-foaie__but { display: grid; gap: .5rem; margin-top: .8rem; }
.carn-foaie__inchid { margin: 0; }

.carn-l {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linie, rgba(0,0,0,.08));
}
.carn-l__c { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.8rem; }
.carn-l__n { flex: 1 1 auto; line-height: 1.3; }
.carn-l__o, .carn-l__nota { display: block; font-size: .8rem; font-style: normal; opacity: .75; }
.carn-l__nota { color: #8a5a12; }
.carn-l__p { font-variant-numeric: tabular-nums; }
.carn-l__x {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--linie, rgba(0,0,0,.16)); background: transparent;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.carn-l__x--gol { border-color: transparent; opacity: .25; cursor: default; }
.carn-l__st { font-size: .75rem; opacity: .6; align-self: center; }
/* Linia anulată rămâne pe foaie, tăiată: se vede că a existat, dar nu
   se mai poate confunda cu una vie. */
.carn-l.is-anul { opacity: .5; text-decoration: line-through; }

/* ---------- sertarul de întrebări ---------- */
.carn-sert { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.carn-sert__fund { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.carn-sert__cutie {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 16px 16px 0 0; padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.carn-sert__cap { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.carn-sert__cap strong { flex: 1 1 auto; font-size: 1.05rem; }
.carn-sert__x {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--linie, rgba(0,0,0,.16)); background: transparent;
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.carn-sert__astept { opacity: .6; padding: .6rem 0; }
.carn-sert__cant {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: .9rem 0;
}
.carn-sert__cant strong { min-width: 2rem; text-align: center; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.carn-sert__cant .btn { min-width: 52px; min-height: 44px; font-size: 1.2rem; }
.carn-sert__rau { color: #b3401f; margin: .4rem 0 .6rem; font-size: .9rem; }

.carn-g { border: 0; padding: 0; margin: 0 0 1rem; }
.carn-g__l { font-weight: 700; font-size: .92rem; padding: 0; }
.carn-g__cer { font-weight: 400; font-size: .76rem; color: #b3401f; }
.carn-g__aj { margin: .15rem 0 .4rem; font-size: .8rem; opacity: .7; }
.carn-g__o { display: grid; gap: .35rem; margin-top: .45rem; }
.carn-o {
  display: flex; align-items: center; gap: .6rem;
  min-height: 46px; padding: .4rem .6rem;
  border: 1px solid var(--linie, rgba(0,0,0,.14)); border-radius: 10px;
  cursor: pointer;
}
.carn-o input { width: 20px; height: 20px; flex: 0 0 auto; }
.carn-o em { font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; }
.carn-o:has(input:checked) { border-color: #1f6f4a; background: rgba(31,111,74,.06); }

.carn-m2__mesaj {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%);
  z-index: 50; max-width: calc(100% - 2rem);
  padding: .55rem .9rem; border-radius: 10px;
  background: #151518; color: #fff; font-size: .9rem;
}
.carn-m2__mesaj.e-rau { background: #b3401f; }

/* ---------- ecranul de secţie ---------- */
.sct__f { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sct__fb {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .4rem .85rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--st, var(--linie, rgba(0,0,0,.16))); color: inherit;
}
.sct__fb.is-on { background: #151518; color: #fff; border-color: #151518; }

.sct__bilete {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.sct__gol { opacity: .65; padding: 2rem 0; max-width: 30rem; }

.sct-b {
  border: 2px solid var(--linie, rgba(0,0,0,.14)); border-radius: 12px;
  padding: .75rem .85rem; background: #fff;
}
.sct-b__cap { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.sct-b__masa { font-size: 1.5rem; line-height: 1.05; }
/* Minutele sunt cifre, deci întârzierea se citeşte şi fără culoare. */
.sct-b__min { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sct-b__n { margin: .5rem 0 0; font-size: 1.02rem; line-height: 1.3; }
.sct-b__c { font-weight: 700; font-variant-numeric: tabular-nums; }
.sct-b__o { margin: .35rem 0 0; font-weight: 700; font-size: .95rem; }
.sct-b__nota { margin: .25rem 0 0; font-size: .88rem; color: #8a5a12; }
.sct-b__jos { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.sct-b__osp { flex: 1 1 auto; font-size: .8rem; opacity: .65; }
.sct-b__gata { min-height: 46px; padding-inline: 1.1rem; }

.sct-b--atentie { border-color: #8a5a12; }
.sct-b--atentie .sct-b__min { color: #8a5a12; }
.sct-b--tarziu  { border-color: #b3401f; background: rgba(179,64,31,.05); }
.sct-b--tarziu  .sct-b__min { color: #b3401f; }
/* Biletul târziu poartă şi un semn, nu doar o culoare. */
.sct-b--tarziu .sct-b__min::after { content: ' !'; }

@media (max-width: 480px) {
  .carn__mese { grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); }
  .carn-cat__p { grid-template-columns: 1fr; }
  .sct__bilete { grid-template-columns: 1fr; }
}

/* ---------- ce se întreabă la preparate (1.71.0) ---------- */
.opt-cat { margin-bottom: 1.2rem; }
.opt-cat__t { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 .5rem; }

.opt-p {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--linie, rgba(0,0,0,.08));
  margin: 0;
}
.opt-p__cap { flex: 0 0 13rem; display: flex; flex-direction: column; }
.opt-p__g { flex: 1 1 20rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.opt-b { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; min-height: 36px; }
.opt-b__cer { font-style: normal; font-size: .72rem; color: #b3401f; }

.opt-g { margin-bottom: .6rem; }
.opt-g__s { cursor: pointer; padding: .5rem 0; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.opt-g__o { margin-top: .8rem; display: grid; gap: .4rem; }

.opt-o { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.opt-o .field__i { flex: 1 1 10rem; min-height: 40px; }
.opt-o__pr { flex: 0 0 5.5rem !important; font-variant-numeric: tabular-nums; }
.opt-o--nou { border-top: 1px dashed var(--linie, rgba(0,0,0,.18)); padding-top: .6rem; }

@media (max-width: 640px) {
  .opt-p__cap { flex: 1 1 100%; }
}

/* ---------- oaspeţii mesei, în carneţel (1.72.0) ---------- */
.carn-oasp {
  border: 1px solid var(--linie, rgba(0,0,0,.14)); border-radius: 12px;
  padding: .7rem .8rem; margin-bottom: 1rem;
}
/* Când cineva aşteaptă, cutia se vede de la distanţă: e o persoană cu
   telefonul în mână, nu un rând într-o listă. */
.carn-oasp[data-are="cer"] { border-color: #b3401f; border-width: 2px; background: rgba(179,64,31,.05); }
.carn-oasp__cap { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.carn-oasp__l { flex: 1 1 auto; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.carn-oasp__gol { margin: 0; font-size: .85rem; opacity: .6; }
.carn-oasp__toti { margin-bottom: .6rem; }

.carn-oa { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }
.carn-oa__n { flex: 1 1 auto; font-size: .92rem; }
.carn-oa__c {
  min-width: 1.5rem; text-align: center; font-size: .78rem; opacity: .65;
  font-variant-numeric: tabular-nums;
}
.carn-oa.is-cere .carn-oa__n { font-weight: 700; }

.carn-cod { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.carn-cod__fund { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.carn-cod__cutie {
  position: relative; background: #fff; border-radius: 16px; padding: 1.2rem;
  max-width: 21rem; width: calc(100% - 2rem); text-align: center;
}
.carn-cod__ce { margin: .4rem 0 .8rem; font-size: .88rem; opacity: .75; }
/* QR-ul cât încape: se scanează de pe un ecran ţinut în mână, de la
   jumătate de metru, de patru telefoane pe rând. */
.carn-cod__qr svg { width: 100%; height: auto; max-width: 16rem; }
.carn-cod__min { margin: .6rem 0 .9rem; font-size: .85rem; opacity: .7; }

/* ═══════════════════════════════════════════════════════════════════
   INTRAREA CU FAŢA ŞI PIN-UL                                  1.74.0
   ═══════════════════════════════════════════════════════════════════
   Ecranul se deschide de un om care tocmai a intrat în tură, pe
   telefonul lui, cu o mână, într-un hol cu lumină slabă. Deci: ţinte
   mari de tot (56px la tastatură), contrast, şi nimic de citit ca să
   ştii ce să apeşi.
   ═══════════════════════════════════════════════════════════════════ */

.login__intreb { margin: .2rem 0 .8rem; font-size: 1.05rem; font-weight: 600; text-align: center; }

.login__fete { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

.login-fata {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .9rem .6rem; min-height: 8rem;
  border: 2px solid var(--linie, rgba(0,0,0,.16)); border-radius: 14px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.login-fata__p, .login-fata__i {
  width: 4rem; height: 4rem; border-radius: 999px; object-fit: cover;
  display: grid; place-items: center;
}
/* Iniţiala, când n-are poză. Un cerc gol ar fi arătat la fel pentru
   toţi — adică n-ar fi ajutat pe nimeni să se aleagă pe el. */
.login-fata__i { background: var(--terra, #7A2E1E); color: #fff; font-size: 1.6rem; font-weight: 700; }
.login-fata__n { font-size: .95rem; font-weight: 600; text-align: center; line-height: 1.2; }

/* Bulinele: cine se uită peste umăr vede CÂTE ai tastat, nu care. */
.login__buline, .pinm__buline {
  display: flex; justify-content: center; gap: .7rem; margin: .8rem 0 1.1rem;
}
.login-bul, .pinm-bul {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid var(--linie, rgba(0,0,0,.3)); background: transparent;
}
.login-bul.is-plin, .pinm-bul.is-plin { background: currentColor; border-color: currentColor; }

.login__tastatura, .pinm__tastatura {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  max-width: 18rem; margin: 0 auto;
}
.login-t, .pinm-t {
  min-height: 56px; font-size: 1.5rem; font-weight: 600;
  border: 1px solid var(--linie, rgba(0,0,0,.16)); border-radius: 12px;
  background: transparent; color: inherit; font-family: inherit; cursor: pointer;
}
.login-t--mic, .pinm-t--mic { font-size: .82rem; font-weight: 500; }
.login-t:active, .pinm-t:active { background: rgba(0,0,0,.08); }

/* ---------- PIN-ul meu ---------- */
.pinm { max-width: 26rem; margin: 0 auto; }
.pinm__ce, .pinm__uitat { font-size: .9rem; opacity: .8; line-height: 1.5; }
.pinm__uitat { margin-top: 1.4rem; }
.pinm__stins { padding: 1.2rem 0; opacity: .75; }

.pinm__cheie {
  border-left: 3px solid #8a5a12; background: rgba(138,90,18,.07);
  padding: .7rem .9rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem;
  font-size: .9rem; line-height: 1.5;
}

.pinm__f { margin-top: 1.2rem; }
.pinm__camp {
  border: 2px solid transparent; border-radius: 12px;
  padding: .5rem; margin-bottom: .4rem; cursor: pointer;
}
/* Caseta în care scrii acum se vede, ca să nu tastezi în alta. */
.pinm__camp.is-activ { border-color: var(--terra, #7A2E1E); }
.pinm__l { display: block; text-align: center; font-size: .85rem; opacity: .75; }
.pinm__rau { color: #b3401f; text-align: center; margin: .3rem 0 .8rem; font-size: .88rem; }
.pinm__f .btn { margin-top: 1rem; }
.pinm__f .btn[disabled] { opacity: .45; }

/* ---------- „Vezi ca el" (1.75.0) ---------- */

/* Bara stă SUS pe toate ecranele şi nu se închide. Lucrul pe care îl
   previne e uitarea: patronul intră în contul cuiva, rezolvă ceva, şi
   peste douăzeci de minute scrie un borderou crezând că e el. */
.vca {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .55rem .9rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: #7A2E1E; color: #fff;
  font-size: .9rem;
}
.vca__semn { font-size: 1.1rem; }
.vca__t { flex: 1 1 14rem; line-height: 1.35; }
.vca__mic { display: block; font-size: .78rem; opacity: .85; }
.vca__f { margin: 0; }
.vca__b {
  min-height: 36px; padding: .3rem .9rem;
  border: 1px solid rgba(255,255,255,.7); border-radius: 8px;
  background: transparent; color: #fff; font: inherit; cursor: pointer;
}
.vca__b:hover { background: rgba(255,255,255,.15); }

.u-pin, .u-vca { margin: .3rem 0 0; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.u-vca__p { max-width: 8.5rem; min-height: 34px; font-size: .85rem; }

/* ---------------------------------------------------------------------
   FOAIA CU PIN-URILE ABIA FĂCUTE.

   E făcută să fie tipărită şi tăiată, aşa că bileţelul e o cutie cu
   chenar întrerupt — linia pe care umblă foarfecele. Cifrele sunt mari
   şi distanţate: se citesc de pe o hârtie ţinută în mână, într-o
   bucătărie, de cineva care nu şi-a pus ochelarii.

   Pe hârtie nu se tipăreşte nimic altceva: nici meniul, nici butoanele.
   O foaie cu PIN-uri care are pe ea şi bara de administrare e o foaie
   pe care cineva o lasă pe bar fiindcă „arată a captură de ecran".
   --------------------------------------------------------------------- */
.pinf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem;
}

.pinf__b {
  border: 1px dashed var(--adm-linie, #d8d2c6);
  border-radius: 6px;
  padding: .8rem .9rem;
  background: #fff;
  break-inside: avoid;
}

.pinf__n { margin: 0; font-weight: 600; font-size: .95rem; }

.pinf__c {
  margin: .35rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2rem;
  letter-spacing: .28em;
  font-variant-numeric: tabular-nums;
}

.pinf__u { margin: 0; font-size: .74rem; line-height: 1.35; color: #6b6355; }

@media print {
  .no-print, .note { display: none !important; }
  .pinf { grid-template-columns: repeat(2, 1fr); }
  .pinf__b { border-color: #999; }
}

/* ---------------------------------------------------------------------
   UNDE E FIECARE.

   Rânduri, nu cartonaşe. La paisprezece oameni, cartonaşele umplu un
   ecran şi te obligă să cauţi cu ochiul; rândurile se citesc de sus în
   jos şi se numără singure.

   Punctul din stânga e singurul lucru colorat: verde = e pe un ecran
   acum. Restul rămâne liniştit, ca punctul să nu aibă cu ce se bate.
   --------------------------------------------------------------------- */
.und__cap {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; font-size: .95rem;
}

.und { display: flex; flex-direction: column; }

.und__b {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: .3rem .7rem;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
  color: inherit;
  text-decoration: none;
}

.und__b:last-child { border-bottom: 0; }
.und__b:hover { background: rgba(0, 0, 0, .03); }

.und__punct {
  width: 8px; height: 8px; border-radius: 50%;
  background: #cdc5b6;
}

.und__b.is-aici .und__punct { background: #2e7d32; }

.und__n { font-weight: 600; font-size: .9rem; }
.und__e { font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
.und__t { font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.und__m { grid-column: 2 / -1; justify-self: start; }

@media (max-width: 720px) {
  .und__b { grid-template-columns: auto 1fr auto; }
  .und__e { grid-column: 2 / -1; }
}

/* ---------------------------------------------------------------------
   ZIUA UNUI OM: unde s-a dus timpul, şi în ce ordine.

   Barele sunt proporţionale cu cel mai mare, nu cu ziua întreagă: ce
   se caută aici e raportul dintre ecrane, nu procentul din opt ore —
   iar raportat la opt ore toate barele ar fi fost fire subţiri.
   --------------------------------------------------------------------- */
.zlbar { display: flex; flex-direction: column; gap: .35rem; }

.zlbar__r {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  align-items: center; gap: .6rem;
}

.zlbar__n { font-size: .85rem; overflow-wrap: anywhere; }

.zlbar__b {
  display: block; height: 10px; border-radius: 5px;
  background: rgba(0, 0, 0, .06);
}

.zlbar__b > span {
  display: block; height: 100%; border-radius: 5px;
  background: var(--adm-accent, #7b2d26);
}

.zlbar__m {
  font-size: .8rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

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

.zl__r {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: .7rem;
  padding: .45rem .2rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
}

.zl__r:last-child { border-bottom: 0; }

.zl__o {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; font-variant-numeric: tabular-nums;
  color: #6b6355;
}

.zl__e { font-size: .9rem; overflow-wrap: anywhere; }
.zl__m { font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .zlbar__r { grid-template-columns: 1fr auto; }
  .zlbar__b { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   TICHETE.

   Butonul de scris e mare şi stă primul: ecranul se deschide, în nouă
   cazuri din zece, ca să se scrie ceva, nu ca să se citească lista.
   --------------------------------------------------------------------- */
.tic-nou {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem; border-radius: 10px;
  background: var(--adm-accent, #7b2d26); color: #fff;
  text-decoration: none;
}

.tic-nou__s { font-size: 1.6rem; line-height: 1; }
.tic-nou strong { display: block; font-size: 1rem; }
.tic-nou__m { display: block; font-size: .82rem; opacity: .85; margin-top: .15rem; }

.tic-h { font-size: .95rem; margin: 1.4rem 0 .5rem; }

.tic-l { display: flex; flex-direction: column; }

.tic-r {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: .7rem;
  padding: .65rem .2rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
  color: inherit; text-decoration: none;
}

.tic-r:last-child { border-bottom: 0; }
.tic-r:hover { background: rgba(0, 0, 0, .03); }

/* Uitat de zile. O dungă, nu o culoare de fundal: fundalul roşu pe
   patru rânduri din cinci face lista de necitit, iar atunci dunga nu
   mai spune nimic. */
.tic-r.is-uitat { box-shadow: inset 3px 0 0 #b3541e; padding-left: .6rem; }

.tic-r__s { font-size: 1.2rem; line-height: 1; }
.tic-r__c { min-width: 0; }
.tic-r__t { display: block; font-size: .92rem; overflow-wrap: anywhere; }
.tic-r__m { display: block; font-size: .78rem; color: #6b6355; margin-top: .15rem; }
.tic-r__st { white-space: nowrap; }

.tic-uit { margin-bottom: 1rem; }

/* --- formularul --- */
.tic-f { max-width: 40rem; }

.tic-feluri { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem; }

.tic-fel {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .7rem; border: 1px solid var(--adm-linie, #ddd5c6);
  border-radius: 8px; cursor: pointer;
}

.tic-fel:has(input:checked) {
  border-color: var(--adm-accent, #7b2d26);
  background: rgba(123, 45, 38, .06);
}

.tic-fel input { margin: 0; }
.tic-fel__s { font-size: 1.15rem; line-height: 1; }
.tic-fel__t { font-size: .87rem; }

.tic-prio { display: flex; flex-wrap: wrap; gap: .4rem; }

.tic-p {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border: 1px solid var(--adm-linie, #ddd5c6);
  border-radius: 20px; cursor: pointer; font-size: .85rem;
}

.tic-p:has(input:checked) {
  border-color: var(--adm-accent, #7b2d26);
  background: rgba(123, 45, 38, .06);
}

.tic-p input { margin: 0; }

/* --- un tichet --- */
.tic-cap { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; }
.tic-cap__s { font-size: 1.7rem; line-height: 1; }
.tic-cap__c { flex: 1; min-width: 0; }
.tic-cap__t { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.tic-cap__m { font-size: .8rem; color: #6b6355; margin: .2rem 0 0; }

.tic-desc { white-space: normal; line-height: 1.5; margin-bottom: .6rem; }

.tic-tehnic {
  font-size: .78rem; color: #6b6355;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; margin: 0 0 1rem;
}

.tic-adm { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.tic-adm__f { flex: 1 1 12rem; }

/* --- discuţia --- */
.tic-msj { display: flex; flex-direction: column; gap: .5rem; }

.tic-auto {
  font-size: .78rem; color: #6b6355; text-align: center;
  margin: .2rem 0; font-style: italic;
}

.tic-m {
  max-width: 85%; align-self: flex-start;
  background: rgba(0, 0, 0, .04);
  border-radius: 10px; padding: .55rem .75rem;
}

.tic-m.is-eu {
  align-self: flex-end;
  background: rgba(123, 45, 38, .08);
}

.tic-m__cine { margin: 0 0 .15rem; font-size: .78rem; font-weight: 600; }
.tic-m__t { margin: 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }

.tic-scrie { display: flex; gap: .5rem; align-items: flex-end; margin-top: .8rem; }
.tic-scrie textarea { flex: 1; }

@media (max-width: 720px) {
  .tic-scrie { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------
   MESAJELE.
   --------------------------------------------------------------------- */
.msj-l { display: flex; flex-direction: column; }

.msj-r {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .7rem;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
  color: inherit; text-decoration: none;
}

.msj-r:last-child { border-bottom: 0; }
.msj-r:hover { background: rgba(0, 0, 0, .03); }

.msj-r__p {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(123, 45, 38, .12);
  font-weight: 600; font-size: 1rem;
}

.msj-r__c { min-width: 0; }
.msj-r__t { display: block; font-size: .93rem; font-weight: 500; }
.msj-r.is-noi .msj-r__t { font-weight: 700; }

.msj-r__u {
  display: block; font-size: .82rem; color: #6b6355;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.msj-r__d { text-align: right; display: grid; gap: .25rem; justify-items: end; }
.msj-r__o { font-size: .74rem; color: #6b6355; white-space: nowrap; }

.msj-r__b {
  min-width: 20px; height: 20px; padding: 0 .35rem;
  border-radius: 10px; background: var(--adm-accent, #7b2d26); color: #fff;
  font-size: .72rem; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

/* --- discuţie nouă --- */
.msj-grup { border: 0; padding: 0; margin: 0 0 1rem; }
.msj-grup__t { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6b6355; padding: 0; }

.msj-om {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .2rem; cursor: pointer;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
}

.msj-om__p {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(123, 45, 38, .12); font-size: .85rem; font-weight: 600;
}

.msj-om__n { font-size: .9rem; }
.msj-om:has(input:checked) { background: rgba(123, 45, 38, .07); }

/* ---------------------------------------------------------------------
   FILIGRANUL.

   NU opreşte printscreen-ul — nimic nu-l opreşte. Îl face să dea de
   gol: o captură scursă poartă numele celui care a făcut-o.

   `pointer-events:none` e obligatoriu: altfel stratul ar prinde
   apăsările şi n-ai mai putea deschide nicio poză pe sub el.
   --------------------------------------------------------------------- */
.msj-camera { position: relative; }

.msj-camera[data-filigran]::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; user-select: none;
  z-index: 3;

  /* SE REPETĂ ca un tapet. Unul singur, în mijloc, se taie cu o
     foarfecă — cine vrea o poză a unui mesaj decupează bula şi
     filigranul rămâne afară. Aşa, orice bucată de ecran poartă măcar
     o dată numele.

     Desenul vine din pagină (`--fili`), fiindcă poartă numele celui
     care se uită şi ora: dacă ar fi stat în foaia de stil, ar fi fost
     acelaşi pentru toţi, adică n-ar fi spus nimic. */
  background-image: var(--fili);
  background-repeat: repeat;
}

/* Fără foaia de stil venită din pagină — sau fără suport pentru
   variabile — rămâne textul, o dată. Mai puţin, dar nu nimic. */
@supports not (background-image: var(--fili)) {
  .msj-camera[data-filigran]::after {
    content: attr(data-filigran);
    display: grid; place-items: center;
    font-size: 1.1rem; font-weight: 600;
    color: rgba(123, 45, 38, .17);
    transform: rotate(-24deg);
    white-space: nowrap; overflow: hidden;
  }
}

/* Copierea stinsă — pe MESAJE, nu pe tot ecranul: ce tastezi tu rămâne
   al tău, se selectează şi se corectează normal. */
.msj-camera.is-fara-copiere .msj-fir {
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.msj-fir {
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 58vh; overflow-y: auto;
  padding: .6rem .2rem;
  border: 1px solid var(--adm-linie, #eee6d8);
  border-radius: 10px;
  background: #fff;
}

.msj-m {
  max-width: 82%; align-self: flex-start;
  background: rgba(0, 0, 0, .045);
  border-radius: 12px; padding: .5rem .7rem;
  position: relative;
}

.msj-m.is-eu { align-self: flex-end; background: rgba(123, 45, 38, .09); }

.msj-m.is-auto {
  align-self: center; background: none; max-width: 100%;
  font-size: .76rem; color: #6b6355; font-style: italic; padding: .2rem;
}

.msj-m__cine { margin: 0 0 .15rem; font-size: .74rem; font-weight: 600; color: #6b6355; }
.msj-m__t { margin: 0; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.msj-m__o { display: block; font-size: .68rem; color: #8a8175; text-align: right; margin-top: .2rem; }

.msj-m__poza {
  display: block; max-width: 100%; max-height: 18rem;
  border-radius: 8px; margin-bottom: .3rem;
}

.msj-m__fis {
  display: inline-block; font-size: .85rem;
  padding: .3rem 0; overflow-wrap: anywhere;
}

/* --- capul şi scrisul --- */
.msj-cap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .5rem; font-size: .82rem; }
.msj-cap__f { margin-left: auto; }

.msj-avert { font-size: .76rem; color: #6b6355; margin: 0 0 .5rem; }

.msj-scrie { display: flex; gap: .5rem; align-items: flex-end; margin-top: .7rem; }
.msj-scrie textarea { flex: 1; resize: none; min-height: 40px; }

.msj-clip {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--adm-linie, #ddd5c6); border-radius: 8px;
  cursor: pointer; font-size: 1.1rem;
}

.msj-clip input { display: none; }
.msj-clip:has(input:not(:invalid)) { border-color: var(--adm-accent, #7b2d26); }

.msj-jos { font-size: .76rem; margin-top: .4rem; }

@media (max-width: 720px) {
  .msj-fir { max-height: 52vh; }
  .msj-m { max-width: 90%; }
}

/* ---------------------------------------------------------------------
   FIŞA CLIENTULUI.

   Telefonul e cel mai mare lucru de pe ecran, fiindcă ecranul se
   deschide cu telefonul la ureche sau cu omul în faţă. Cifrele —
   vizite, cheltuit, puncte — sunt contextul, nu răspunsul.
   --------------------------------------------------------------------- */
.cli-cap {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}

.cli-cap__c { flex: 1 1 14rem; min-width: 0; }

.cli-cap__tel {
  margin: 0; font-size: 1.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cli-cap__tel a { color: inherit; text-decoration: none; }
.cli-cap__m { margin: .25rem 0 0; font-size: .85rem; color: #6b6355; overflow-wrap: anywhere; }

.cli-cifre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}

.cli-cif {
  background: #fff; border: 1px solid var(--adm-linie, #eee6d8);
  border-radius: 8px; padding: .6rem .7rem;
}

.cli-cif__n {
  display: block; font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cli-cif__e { display: block; font-size: .74rem; color: #6b6355; margin-top: .1rem; }

.cli-l { display: flex; flex-direction: column; }

.cli-r {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .45rem .1rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
  color: inherit; text-decoration: none;
}

.cli-r:last-child { border-bottom: 0; }
a.cli-r:hover { background: rgba(0, 0, 0, .03); }

.cli-r__t { flex: 1; font-size: .88rem; overflow-wrap: anywhere; }
.cli-r__d { font-size: .76rem; color: #6b6355; white-space: nowrap; }

/* ---------------------------------------------------------------------
   BULA DE CHAT DIN COLŢ.

   `--chat-dreapta` vine din aspect: în zona de lucru marginea dreaptă
   e ocupată de fâşia de meniu (64px, fixă), iar o bulă pusă la
   `right: 0` ar fi stat exact peste butonul de borderou.
   --------------------------------------------------------------------- */
.chatb {
  position: fixed;
  right: calc(var(--chat-dreapta, 1rem) + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;                 /* peste fâşie (50), sub ferestrele modale */
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}

.chatb__b {
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--adm-accent, #7b2d26); color: #fff;
  font-size: 1.35rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  display: grid; place-items: center;
  position: relative;
}

.chatb__b:hover { filter: brightness(1.08); }

/* Cifra roşie stă pe un fundal deschis, ca să se vadă peste butonul
   care e el însuşi închis la culoare. */
.chatb__nr {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 .3rem;
  border-radius: 10px; background: #fff; color: var(--adm-accent, #7b2d26);
  font-size: .72rem; font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.chatb__ping {
  background: #1b1614; color: #fff;
  padding: .5rem .8rem; border-radius: 8px;
  font-size: .84rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  max-width: 15rem;
}

/* --- panoul --- */
.chatb__p {
  width: min(22rem, calc(100vw - 2rem));
  height: min(30rem, calc(100vh - 8rem));
  background: #fff; border-radius: 12px;
  border: 1px solid var(--adm-linie, #e4dccd);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; overflow: hidden;
}

.chatb__cap {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--adm-linie, #eee6d8);
  font-size: .92rem;
}

.chatb__cap strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chatb__x, .chatb__inapoi {
  border: 0; background: none; cursor: pointer;
  font-size: 1rem; color: #6b6355; padding: .2rem .35rem; line-height: 1;
}

.chatb__tot { color: #6b6355; text-decoration: none; font-size: 1rem; padding: .2rem .35rem; }

.chatb__lista { flex: 1; overflow-y: auto; }
.chatb__gol { padding: 1rem; font-size: .85rem; margin: 0; }

.chatb__r {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .5rem;
  width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--adm-linie, #eee6d8);
  background: none; cursor: pointer;
  padding: .6rem .7rem;
}

.chatb__r:hover { background: rgba(0, 0, 0, .03); }
.chatb__rt { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatb__r.is-noi .chatb__rt { font-weight: 700; }

.chatb__ru {
  grid-column: 1; font-size: .78rem; color: #6b6355;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chatb__rb {
  grid-row: 1 / span 2; align-self: center;
  min-width: 18px; height: 18px; padding: 0 .3rem;
  border-radius: 9px; background: var(--adm-accent, #7b2d26); color: #fff;
  font-size: .68rem; display: grid; place-items: center;
}

.chatb__fir {
  flex: 1; overflow-y: auto; padding: .6rem;
  display: flex; flex-direction: column; gap: .35rem;
}

.chatb__scrie {
  display: flex; gap: .4rem; align-items: flex-end;
  padding: .5rem; border-top: 1px solid var(--adm-linie, #eee6d8);
}

.chatb__scrie textarea {
  flex: 1; resize: none; min-height: 34px; max-height: 110px;
  border: 1px solid var(--adm-linie, #ddd5c6); border-radius: 8px;
  padding: .4rem .55rem; font: inherit; font-size: .88rem;
}

/* Pe telefon panoul ia tot ecranul: o fereastră de 22rem pe un ecran
   de 360px lasă mesajele pe două cuvinte pe rând. */
@media (max-width: 560px) {
  .chatb.is-deschis {
    left: .5rem; right: .5rem; bottom: .5rem;
    align-items: stretch;
  }
  .chatb.is-deschis .chatb__p { width: auto; height: min(78vh, 34rem); }
  .chatb.is-deschis .chatb__b { align-self: flex-end; }
}


/* =====================================================================
   DISPOZIŢIA DE PLATĂ / ÎNCASARE (cod 14-4-4)

   Foaia seamănă cu tipizatul de la tipografie, şi nu din nostalgie: e
   citită de un contabil care are formularul ăla în cap de douăzeci de
   ani. O rubrică mutată sau rebotezată e o rubrică pe care o caută şi
   n-o găseşte.

   Aceleaşi reguli se aplică la tipar — vezi print.css, care face
   tabelele tabele şi scoate tot ce e unealtă de ecran.
   ===================================================================== */

.disp {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3dccd);
  border-radius: var(--r, 10px);
  padding: 1rem 1.1rem;
}

.disp--anulata { opacity: .7; }

.disp__anulat {
  margin: 0 0 .8rem;
  padding: .4rem .6rem;
  border: 1px solid #B3401F;
  color: #B3401F;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.disp__cap { width: 100%; border-collapse: collapse; font-size: .8rem; }
.disp__cap td { vertical-align: top; padding: 0 .5rem .6rem 0; }

.disp__viza { display: grid; gap: .12rem; }
.disp__viza-t {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint, #8a8375);
}

/* Rubricile necompletate se arată ca punctele de pe tipizat, nu ca un
   gol. Un rând gol pe hârtie se citeşte „nu se aplică"; punctele se
   citesc „se completează cu mâna". */
.disp__gol { color: var(--ink-faint, #8a8375); letter-spacing: .02em; }

.disp__titlu {
  margin: .8rem 0 .2rem;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.disp__nr { margin: 0 0 .9rem; text-align: center; font-size: .92rem; }
.disp__cod { color: var(--ink-faint, #8a8375); font-size: .8rem; }

.disp__t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.disp__t th,
.disp__t td {
  border: 1px solid var(--line, #e3dccd);
  padding: .4rem .55rem;
  text-align: left;
  vertical-align: top;
}
.disp__t th { background: var(--hartie, #FAF6EC); font-weight: 500; }

.disp__intocmit { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-faint, #8a8375); }

/* Linia care desparte dispoziţia propriu-zisă de partea completată la
   casierie. Pe tipizat e chiar o linie de tăiat. */
.disp__taie { margin: 1.1rem 0 .7rem; border: 0; border-top: 1px dashed var(--line, #ccc4b3); }

.disp__sub {
  margin: 0 0 .5rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint, #8a8375);
}

.disp__semn { max-height: 3.2rem; vertical-align: middle; }

.disp__temei {
  margin: .9rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-faint, #8a8375);
}

/* Pe telefon capul cu cele trei vize se aşază unul sub altul: trei
   coloane pe 360px înseamnă trei cuvinte tăiate. */
@media (max-width: 620px) {
  .disp__cap, .disp__cap tbody, .disp__cap tr, .disp__cap td { display: block; width: auto; }
  .disp__cap td { padding-bottom: .5rem; }
  .disp__t th, .disp__t td { display: block; width: auto; }
  .disp__t th { border-bottom: 0; }
}


/* =====================================================================
   RAIOANELE PE PLANUL SĂLII

   Ecranul are trei straturi, de jos în sus:
     1. conturul (SVG, topit cu un filtru)
     2. mesele
     3. banda cu raioane sau oameni

   Şi o singură regulă de aur: CULOAREA UNEI MESE VINE DINTR-O
   VARIABILĂ pusă de JavaScript (`--rz-c`). Foaia asta nu ştie şi nu
   trebuie să ştie ce raioane există — altfel ar fi fost a doua listă
   de culori, pe lângă cea din baza de date, şi ar fi rămas în urmă la
   primul raion adăugat.
   ===================================================================== */

.rz { display: grid; gap: .9rem; }

/* --- cele două întrebări --------------------------------------------- */
.rz__moduri { display: flex; gap: .5rem; flex-wrap: wrap; }

.rz__mod {
  flex: 1 1 14rem;
  display: grid; gap: .1rem;
  padding: .55rem .8rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3dccd);
  border-radius: var(--r, 10px);
  text-align: left; cursor: pointer;
  font: inherit; font-weight: 600;
}
.rz__mod small { font-weight: 400; font-size: .78rem; color: var(--ink-faint, #8a8375); }
.rz__mod-s { font-size: 1.1rem; margin-right: .3rem; }
.rz__mod.is-activ { border-color: var(--terra, #B3401F); box-shadow: inset 0 0 0 1px var(--terra, #B3401F); }

.rz__zi { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rz__zi .inp { width: auto; }

/* --- secţiunile ------------------------------------------------------ */
.rz__sectiuni { display: flex; gap: .3rem; flex-wrap: wrap; }
.rz__sec {
  padding: .35rem .7rem; font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3dccd);
  border-radius: 999px;
}
.rz__sec.is-activ { background: var(--ink, #151518); color: #fff; border-color: var(--ink, #151518); }

/* --- planul ---------------------------------------------------------- */
.rz__panza {
  display: none;
  position: relative;
  width: 100%;
  /* ACEEAŞI HÂRTIE CU CAROIAJ CA PLANUL SĂLII. Nu din cochetărie:
     e aceeaşi sală, desenată în două ecrane, iar dacă cele două coli
     arată altfel, omul nu le mai recunoaşte ca fiind acelaşi loc. */
  background:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 5% 5%,
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 5% 5%,
    var(--hartie, #FAF6EC);
  border: 1px solid var(--line, #e3dccd);
  border-radius: var(--r, 10px);
  overflow: hidden;
  /* Degetul vopseşte; fără asta, trasul peste mese derulează pagina şi
     nu colorează nimic. */
  touch-action: none;
}
.rz__panza.is-activ { display: block; }

.rz__contur { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.rz__masa {
  position: absolute;
  display: grid; place-items: center; gap: .1rem;
  padding: 0; margin: 0;
  font: inherit; font-size: .72rem; font-weight: 600;
  color: var(--ink, #151518);
  background: color-mix(in srgb, var(--rz-c, #E8E2D0) 26%, #fff);
  border: 2px solid var(--rz-c, #C9C2B0);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
/* Browserele fără `color-mix` primesc fundalul simplu — masa rămâne
   citibilă, doar mai puţin colorată. Conturul SVG spune oricum
   povestea. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .rz__masa { background: var(--surface, #fff); }
}

.rz__masa--round, .rz__masa--oval { border-radius: 50%; }
.rz__masa--booth { border-radius: 6px 6px 18px 18px; }
.rz__masa--bar   { border-radius: 999px; }

/* MASA FĂRĂ RAION e punctată, nu gri-plin. Gri-plin arată ca o masă
   stinsă; punctat arată ca o masă care aşteaptă să fie pusă undeva —
   ceea ce şi este. */
.rz__masa.is-fara {
  background: rgba(255, 255, 255, .55);
  border-style: dashed;
  border-color: rgba(21, 21, 24, .35);
  color: rgba(21, 21, 24, .75);
}

.rz__masa:focus-visible { outline: 2px solid var(--terra, #B3401F); outline-offset: 2px; }

.rz__cod { line-height: 1; }

/* Pastila cu iniţialele omului, în colţul mesei. */
.rz__om {
  position: absolute; top: -6px; right: -6px;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .18rem;
  display: grid; place-items: center;
  border-radius: 999px;
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 1.5px #fff;
}
.rz__om[hidden] { display: none; }

.rz__goala {
  position: absolute; inset: 0; display: grid; place-items: center;
  margin: 0; color: var(--ink-faint, #8a8375); font-size: .9rem;
}

/* --- banda de jos ---------------------------------------------------- */
.rz__banda {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3dccd);
  border-radius: var(--r, 10px);
  padding: .7rem .8rem;
}

.rz__indemn { margin: 0 0 .6rem; font-size: .88rem; color: var(--ink-faint, #8a8375); }
.rz__indemn.is-spus { color: var(--terra, #B3401F); font-weight: 600; }

.rz__chips { display: flex; gap: .45rem; flex-wrap: wrap; }

.rz__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem .4rem .45rem;
  font: inherit; font-size: .86rem; cursor: pointer;
  background: var(--surface, #fff);
  border: 2px solid var(--rz-c, #C9C2B0);
  border-radius: 999px;
}

/* ALES SE VEDE DE LA UN METRU. Un chip ales printr-o umbră subţire e
   un chip despre care omul nu ştie dacă e ales — şi atunci vopseşte cu
   raionul greşit peste jumătate de sală. */
.rz__chip.is-ales {
  background: var(--rz-c, #151518);
  color: var(--rz-t, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-c, #151518) 30%, transparent);
}

.rz__chip-s {
  width: 1.5rem; height: 1.5rem; flex: none;
  display: grid; place-items: center;
  background: var(--rz-c, #C9C2B0); color: var(--rz-t, #fff);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
}
.rz__chip.is-ales .rz__chip-s { background: var(--rz-t, #fff); color: var(--rz-c, #151518); }

.rz__chip-c {
  min-width: 1.2rem; padding: 0 .3rem;
  background: rgba(21, 21, 24, .08); border-radius: 999px;
  font-size: .72rem; font-variant-numeric: tabular-nums;
}
.rz__chip.is-ales .rz__chip-c { background: rgba(255,255,255,.28); color: inherit; }

.rz__chip--guma { --rz-c: #a8a192; --rz-t: #fff; }

/* --- culorile oamenilor ---------------------------------------------- */
.rz__culori { margin-top: .7rem; }
.rz__culori summary { cursor: pointer; font-size: .85rem; }
.rz__cul { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; flex-wrap: wrap; }
.rz__cul-n { min-width: 9rem; font-size: .86rem; }
.rz__cul-p { display: flex; gap: .2rem; flex-wrap: wrap; }
.rz__cul-b {
  width: 1.4rem; height: 1.4rem; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
}
.rz__cul-b.is-aleasa { border-color: var(--ink, #151518); }

/* --- mesele fără raion ----------------------------------------------- */
.rz__fara { margin: 0; font-size: .86rem; color: var(--ink-faint, #8a8375); }
.rz__fara.is-atentie { color: var(--terra, #B3401F); font-weight: 600; }

/* --- numele şi culorile raioanelor ------------------------------------ */
.rz__set summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.rz__set-lista { display: grid; gap: .5rem; margin-top: .6rem; }
.rz__set-f { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rz__set-f .inp { width: auto; flex: 1 1 10rem; min-width: 0; }
.rz__set-f input[type="color"] { flex: none; width: 3rem; padding: 2px; }
.rz__set-a { display: inline-flex; align-items: center; gap: .25rem; font-size: .82rem; }

/* Pe telefon banda şi planul stau unul sub altul şi respiră. */
@media (max-width: 560px) {
  .rz__mod { flex: 1 1 100%; }
  .rz__cul-n { min-width: 100%; }
  .rz__chip-n { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Butonul care strigă doar când are de ce. */
.btn--atentie {
  border-color: var(--terra, #B3401F) !important;
  color: var(--terra, #B3401F) !important;
  font-weight: 600;
}

/* Listele din „Ce s-a schimbat în sală": bife mari, de apăsat cu
   degetul pe o tabletă din sală, nu cu vârful mouse-ului. */
.urm__lista { list-style: none; margin: .4rem 0 .9rem; padding: 0; display: grid; gap: .25rem; }
.urm__lista label { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; cursor: pointer; }
.urm__lista input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; }
.urm__cod { margin-top: 1rem; }
.urm__cod summary { cursor: pointer; font-size: .9rem; }

/* =====================================================================
   TENDINŢA VÂNZĂRILOR

   Culorile nu sunt decor: verde/roşu/gri sunt singurul lucru care se
   citeşte de la un metru, de pe un telefon ţinut în mână la ora unu
   noaptea. Dar cifra scrie ŞI în cuvinte („la fel ca înainte"),
   fiindcă vreo opt la sută dintre bărbaţi nu deosebesc verdele de
   roşu — iar un raport care le spune doar prin culoare nu le spune.
   ===================================================================== */

.tend__rand {
  margin: 0 0 .8rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}

.tend__t { font-size: .9rem; }
.tend__lam { font-size: .78rem; line-height: 1.4; }

.tend__semn { font-weight: 600; white-space: nowrap; }
.tend__semn--creste   { color: #2F7A3D; }
.tend__semn--scade    { color: #B3401F; }
.tend__semn--constant { color: var(--ink-faint, #8a8375); }
.tend__semn--nimic    { color: var(--ink-faint, #8a8375); font-weight: 400; }

/* La tipar, culorile se sting (print.css face tot negru), deci semnul
   ▲▼ şi cuvintele rămân singurele care spun ceva — şi rămân. */
@media print {
  .tend__lam { font-size: 8pt; }
}

/* ---------------------------------------------------------------------
   STOCUL BARULUI

   Ecranul de numărat se ţine într-o mână, la unu noaptea. Deci: rânduri
   mari, câmpuri mari, şi nicio coloană care nu se citeşte pe un telefon.
   --------------------------------------------------------------------- */
.stoc__sectiune {
  margin: 1.6rem 0 .5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
}

.stoc__r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.stoc__r.is-alarma { background: rgba(155, 34, 38, .05); }

.stoc__nume { flex: 1 1 14rem; min-width: 0; font-size: .95rem; color: var(--ink); }
.stoc__um   { color: var(--ink-faint); font-size: .8rem; margin-left: .4rem; }

.stoc__semn {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  font-size: .68rem;
  background: rgba(21, 21, 24, .07);
  color: var(--ink-faint);
}

.stoc__camp { display: flex; gap: .4rem; flex: 0 0 auto; }

/* Degetul, nu mouse-ul: 44px e minimul la care nu se rateaza. */
.stoc__i {
  width: 5.4rem;
  min-height: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}
.stoc__i--mic { width: 4.6rem; opacity: .75; }
.stoc__i.is-bun { border-color: rgba(45, 106, 79, .55); }
.stoc__i.is-rau { border-color: rgba(155, 34, 38, .7); background: rgba(155, 34, 38, .06); }

.stoc__rez { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .88rem; color: var(--ink-faint); }
.stoc__rez strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.stoc__dif { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.stoc__dif.is-minus { color: #9B2226; }

.stoc__lam { flex: 1 1 100%; margin: .25rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.stoc__cate { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-faint); }

.stoc__ramase { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--ink-faint); }
.stoc__ramase li { margin-bottom: .35rem; }
.stoc__ramase strong { color: var(--ink); }

.stoc__t { text-align: right; font-variant-numeric: tabular-nums; }
.stoc__t.is-bun { border-color: rgba(45, 106, 79, .55); }
.stoc__t.is-rau { border-color: rgba(155, 34, 38, .7); }

/* Capul de secţiune din tabelul catalogului: HÂRTIE, nu bara laterală.
   Vezi 1.84.1 — aceeaşi greşeală a făcut un ecran întreg invizibil. */
.tbl__cap td {
  background: var(--hartie);
  color: var(--ink);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .stoc__r { align-items: flex-start; }
  .stoc__camp { flex: 1 1 100%; }
  .stoc__i { flex: 1 1 auto; width: auto; }
}

.stoc__iesit { flex: 1 1 100%; font-size: .8rem; color: var(--ink-faint); }

.inv__c { margin: .2rem 0 0; font-size: 1.6rem; font-weight: 600; color: var(--ink);
          font-variant-numeric: tabular-nums; }
.inv__c--minus { color: #9B2226; }
.inv__minus { color: #9B2226; }
.inv__plus  { color: #2D6A4F; }

.stoc__fara { color: var(--ink-faint); font-style: italic; }

.stoc__lei { color: var(--ink-faint); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* FILELE MĂRFII DE BAR — catalog, comandă, tampon, inventar.
   Stau lipite de capul paginii, nu într-un card: sunt o navigare, nu
   un conţinut. Pe telefon se dau la stânga într-un singur rând, ca să
   nu împingă tabelul cu un rând de pastile în jos. */
.stoc__file {
  margin: -.35rem 0 1rem; padding-bottom: .15rem;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stoc__file::-webkit-scrollbar { display: none; }
.stoc__file .tab { white-space: nowrap; flex: 0 0 auto; }

/* CÂT S-A CERUT PE COMANDĂ, lângă căsuţa „intrat" de pe ecranul de
   numărat. Cifra e mică şi cenuşie: e o informaţie, nu o comandă. Ce
   se colorează e doar abaterea — dacă a venit tot, verde şi atât; dacă
   lipseşte, roşu, fiindcă ăla e singurul caz care cere să facă cineva
   ceva. */
.stoc__cerut { flex: 1 1 100%; margin: .25rem 0 0; font-size: .8rem; color: var(--ink-faint); }
.stoc__cerut strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.stoc__venit { color: #2D6A4F; }
.stoc__lipsa { color: #9B2226; font-weight: 600; }

/* Căsuţa dintr-un tabel: îngustă, cifrele la dreapta, aliniate.
   Aceleaşi semne ca la tampon — verde s-a scris, roşu n-a mers. */
.inp--mic { width: 5.5rem; max-width: 100%; padding: .3rem .45rem; text-align: right;
            font-variant-numeric: tabular-nums; }
.cmd__i.is-bun { border-color: rgba(45, 106, 79, .55); }
.cmd__i.is-rau { border-color: rgba(155, 34, 38, .7); }


/* =====================================================================
   ECRANUL PATRONULUI
   =====================================================================
   Trei registre vizuale, fiindcă sunt trei feluri de informaţie:
     · benzile de sus — cifre mari, citite din mers
     · lista de hotărâri — rânduri de citit, cu butoane în ele
     · fişele de jos — perechi etichetă/valoare, de consultat

   Ce NU se face aici: carduri cu umbră peste tot. Umbra, chenarul şi
   colţul rotunjit spun fiecare „obiect separat"; puse pe toate, nu mai
   spun nimic şi ierarhia se aplatizează. Le cheltui pe lista de
   hotărâri, care e singurul lucru de pe ecran care cere o apăsare.
   ===================================================================== */

.pat__benzi {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: .4rem;
}
.pat__b__l { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
             color: var(--ink-faint); }
.pat__b__c { margin: .15rem 0 0; font-size: 1.7rem; font-weight: 600; line-height: 1.1;
             color: var(--ink); font-variant-numeric: tabular-nums; }
.pat__b__c--rau { color: #9B2226; }
.pat__b__din { display: block; font-size: .78rem; font-weight: 400;
               color: var(--ink-faint); font-variant-numeric: normal; }

/* „Nu se ştie" are un chip al lui, ca să nu fie confundat cu un zero
   nici din colţul ochiului. */
.pat__nu { font-size: .82rem; font-weight: 400; font-style: italic;
           color: var(--ink-faint); }
.pat__rau { color: #9B2226; font-size: .82rem; }

.pat__lipsa { margin: .9rem 0 0; padding-top: .7rem; font-size: .88rem;
              border-top: 1px solid var(--line); color: var(--ink); }

/* --- lista de hotărâri --------------------------------------------- */
.pat__lista { list-style: none; margin: .3rem 0 0; padding: 0; }
.pat__d { padding: .9rem 0; border-top: 1px solid var(--line); }
.pat__d:first-child { border-top: 0; }

.pat__d__cap { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.pat__d__t { font-size: .98rem; color: var(--ink); }
.pat__d__v { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
.pat__d__x { margin: .3rem 0 0; font-size: .86rem; color: var(--ink); }
.pat__d__u { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-faint); }

.pat__d__act { display: flex; gap: .5rem; align-items: center;
               flex-wrap: wrap; margin-top: .6rem; }
.pat__form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.pat__form--lat { flex: 1 1 22rem; }
.pat__form--lat .inp { flex: 1 1 12rem; min-width: 0; }

/* Eticheta de fel: culoarea spune din ce colţ al casei vine rândul,
   ca ochiul să poată sări peste un întreg fel când nu-l priveşte. */
.pat__f { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
          padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
          background: rgba(21,21,24,.07); color: rgba(21,21,24,.6); }
.pat__f--bani    { background: rgba(155,34,38,.12);  color: #9B2226; }
.pat__f--marfa   { background: rgba(45,106,79,.12);  color: #2D6A4F; }
.pat__f--oameni  { background: rgba(58,80,107,.12);  color: #3A506B; }
.pat__f--oaspeti { background: rgba(157,102,35,.14); color: #8A5A1E; }
.pat__f--regula  { background: rgba(21,21,24,.08);   color: rgba(21,21,24,.6); }

/* --- fişele de jos -------------------------------------------------- */
.pat__doua { display: grid; gap: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pat__dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem .9rem;
           margin: .3rem 0 0; align-items: baseline; }
.pat__dl dt { font-size: .84rem; color: var(--ink-faint); }
.pat__dl dd { margin: 0; text-align: right; font-size: .92rem; color: var(--ink);
              font-variant-numeric: tabular-nums; }
.pat__dl dd .muted { display: block; font-size: .76rem; }

@media (max-width: 560px) {
  .pat__b__c { font-size: 1.45rem; }
  .pat__form--lat { flex: 1 1 100%; }
  .pat__d__act .btn { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   POZELE MĂRFII DE BAR
   ═══════════════════════════════════════════════════════════════════
   Rândul e o bandă lată cu poza în stânga şi butoanele în dreapta,
   nu un tabel: aici nu se compară coloane între ele, se caută UN rând
   şi i se pune o poză. Iar lipsa se vede din prima — un pătrat gol cu
   semnul întrebării, care nu seamănă cu nimic altceva de pe ecran.
   ------------------------------------------------------------------ */

.pz__cifre { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
             margin-bottom: .9rem; }
.pz__c { display: flex; flex-direction: column; line-height: 1.1; }
.pz__c__n { font-size: 1.5rem; font-weight: 600; color: var(--ink);
            font-variant-numeric: tabular-nums; }
.pz__c__e { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
            color: var(--ink-faint); }
.pz__c--lipsa .pz__c__n { color: #B3401F; }

.pz__bara { flex: 1 1 10rem; height: 8px; border-radius: 999px; min-width: 6rem;
            background: rgba(21,21,24,.09); overflow: hidden; }
.pz__bara__i { display: block; height: 100%; background: #2D6A4F; border-radius: 999px; }
.pz__proc { font-size: .86rem; color: var(--ink-faint);
            font-variant-numeric: tabular-nums; }

.pz__vrac { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pz__vrac > div:first-child { flex: 1 1 22rem; min-width: 0; }
.pz__vrac__b { padding-top: 1.55rem; }

.pz__raport { margin-top: .9rem; padding: .8rem 1rem; border-radius: 8px;
              background: var(--hartie); border: 1px solid var(--line); }
.pz__raport__t { margin: .6rem 0 .25rem; font-size: .84rem; color: var(--ink-faint); }
.pz__raport__l { margin: 0; padding-left: 1.1rem; font-size: .82rem; }
.pz__raport__l code { font-size: .8rem; }

.pz__filtre { display: flex; justify-content: space-between; align-items: center;
              gap: 1rem; flex-wrap: wrap; }
.pz__f { margin-bottom: 0; }

.pz__sec { margin-top: 1.3rem; }
.pz__sec__t { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
              color: var(--ink-faint); margin: 0 0 .45rem; font-weight: 600; }

.pz__lista { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: .35rem; }

.pz__r { display: flex; align-items: center; gap: .8rem;
         padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px;
         background: var(--surface); transition: border-color .12s, background .12s; }

/* Armat = „următorul Ctrl+V vine aici". Trebuie să se vadă de la un
   metru, fiindcă altfel omul apasă Ctrl+V şi nu ştie unde s-a dus. */
.pz__r.is-armat { border-color: #2D6A4F; box-shadow: 0 0 0 2px rgba(45,106,79,.16); }
.pz__r.is-peste { border-color: #2D6A4F; background: rgba(45,106,79,.06); }
.pz__r.is-lucreaza { opacity: .55; pointer-events: none; }

.pz__r__p { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 6px;
            overflow: hidden; display: grid; place-items: center;
            background: var(--hartie); border: 1px solid var(--line); }
.pz__r__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pz__r__gol { font-size: 1.1rem; color: rgba(21,21,24,.28); font-weight: 600; }

.pz__r__n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pz__r__nume { font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.pz__r__cod { font-size: .72rem; color: var(--ink-faint);
              font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pz__r__act { flex: 0 0 auto; display: flex; gap: .3rem; align-items: center;
              flex-wrap: wrap; justify-content: flex-end; }
.pz__scot { margin: 0; }

/* Eticheta care ascunde un `input[type=file]` trebuie să arate ca un
   buton şi să se poată apăsa cu tastatura, nu doar cu degetul. */
.pz__fis { cursor: pointer; }
.pz__fis:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 620px) {
  .pz__r { flex-wrap: wrap; }
  .pz__r__n { flex: 1 1 8rem; }
  .pz__r__act { flex: 1 1 100%; justify-content: flex-start; }
  .pz__vrac__b { padding-top: 0; }
  .pz__filtre { align-items: flex-start; }
}

/* --- citirile trecute de pe hârtie ---------------------------------- */
.th__cifre { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.th__c { display: flex; flex-direction: column; line-height: 1.1; }
.th__c__n { font-size: 1.5rem; font-weight: 600; color: var(--ink);
            font-variant-numeric: tabular-nums; }
.th__c__e { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
            color: var(--ink-faint); }
.th__c--rau .th__c__n { color: #B3401F; }

.th__r--rau td { background: rgba(179,64,31,.055); }
.th__peste { display: block; font-size: .74rem; color: #B3401F; }
.th__foaie { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-size: .78rem; color: var(--ink-faint); }
.th__f { display: flex; gap: .35rem; align-items: center; margin: 0; flex-wrap: wrap; }
.th__inp { width: 6.5rem; min-width: 0; }

/* Banda de aparate din registru: se dă la stânga pe telefon, într-un
   singur rând, ca la marfa barului. */
.temp-reg__ap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.temp-reg__ap::-webkit-scrollbar { display: none; }
.temp-reg__ap .tab { white-space: nowrap; flex: 0 0 auto; }

/* Semnul întrebării de lângă o cifră neconfirmată. Nu roşu: nu e o
   abatere, e o îndoială — iar roşul e rezervat abaterilor. */
.temp-reg__c sup { color: #8A5A1E; font-weight: 700; margin-left: .1em; }

/* ═══════════════════════════════════════════════════════════════════
   SCANERUL DE CARDURI DE FIDELITATE (zona de lucru, pe telefon)
   ═══════════════════════════════════════════════════════════════════
   Totul e dimensionat pentru un deget, în picioare, seara: butoanele
   au înălţimea minimă de atins, iar ce se apasă des stă deasupra a ce
   se atinge rar.
   ------------------------------------------------------------------ */

.fid__cap  { margin-bottom: .8rem; }
.fid__t    { margin: 0; font-size: 1.25rem; }
.fid__sub  { margin: .15rem 0 0; color: var(--ink-faint); font-size: .88rem; }

.fid__buton { min-height: 52px; font-size: 1rem; }

/* Fereastra camerei. Pătrată: un cod se ţine în mijloc, iar un cadru
   lat pe telefon ar lăsa codul mic tocmai când e nevoie să fie mare. */
.fid__video { position: relative; border-radius: 10px; overflow: hidden;
              background: #000; aspect-ratio: 1 / 1; max-height: 60vh; }
.fid__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ţinta nu e decor: fără ea, omul ţine telefonul prea departe şi codul
   iese din cadru fără să se vadă de ce nu merge. */
.fid__tinta { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85);
              border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.fid__stop  { position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
              background: rgba(255,255,255,.94); }

.fid__manual { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.fid__manual > div:first-child { flex: 1 1 12rem; min-width: 0; }

/* --- cardul găsit --------------------------------------------------- */
.fid__cine { display: flex; flex-direction: column; margin-bottom: .6rem; }
.fid__nume { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.fid__numar { font-size: .78rem; color: var(--ink-faint);
              font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.fid__dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem .9rem;
           margin: 0 0 .9rem; align-items: baseline; }
.fid__dl dt { font-size: .84rem; color: var(--ink-faint); }
.fid__dl dd { margin: 0; text-align: right; font-size: 1.05rem; font-weight: 600;
              color: var(--ink); font-variant-numeric: tabular-nums; }

.fid__suma { margin-bottom: .9rem; }
.fid__mese { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.fid__masa { display: flex; gap: .4rem; align-items: baseline; }
.fid__masa.is-on { border-color: var(--ink); color: var(--ink); background: var(--hartie); }

.fid__act { display: flex; gap: .5rem; flex-wrap: wrap; }
.fid__a   { flex: 1 1 10rem; min-height: 48px; justify-content: center; }

/* Regula care ţine tot ecranul. Stă sub butoane, nu în subsol: acolo o
   citeşte cine tocmai s-a uitat la ele. */
.fid__regula { margin: .9rem 0 .3rem; padding: .7rem .85rem; border-radius: 8px;
               background: var(--hartie); border: 1px solid var(--line);
               font-size: .82rem; color: var(--ink-faint); line-height: 1.45; }

.fid__card.is-gata { border-color: #2D6A4F; }

@media (max-width: 480px) {
  .fid__manual__b { flex: 1 1 100%; }
  .fid__manual__b .btn { width: 100%; }
  .fid__a { flex: 1 1 100%; }
}

/* --- „nu-mi merge parola" ------------------------------------------- */
.login__uitat { margin-bottom: -.4rem; }
.login__uitat a { font-weight: 600; }

.uitat__f { display: grid; gap: .5rem; }
.uitat__f .field__l { margin-top: .5rem; }
.uitat__f .field__ajutor { margin: -.15rem 0 .2rem; }
.uitat__f .btn { margin-top: .7rem; min-height: 46px; }

.uitat__spune { padding: .7rem .85rem; border-left: 3px solid #2D6A4F;
                background: rgba(45,106,79,.07); font-size: .86rem; line-height: 1.45; }

/* Codul şi cele patru cifre se tastează o dată, repede, pe un telefon.
   Cifre mari şi rărite: la şase cifre înghesuite se pierde numărătoarea. */
.uitat__cod, .uitat__patru {
  font-size: 1.5rem; letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.uitat__pin { font-size: 1.2rem; letter-spacing: .24em; text-align: center; }

/* Ce se face când codul nu vine. Nu e o notă de subsol: e jumătate din
   rostul ecranului, fiindcă Meta are zile în care nu trimite. */
.uitat__nimic { margin-top: 1rem; padding: .75rem .85rem; border-radius: 8px;
                background: var(--hartie); border: 1px solid var(--line);
                font-size: .8rem; line-height: 1.5; color: var(--ink-faint); }

.uitat__inapoi { text-align: center; font-size: .84rem; margin: .2rem 0 0; }

/* --- cererile de resetat, pe ecranul managerului --------------------- */
.res__r { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
          padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
          margin-bottom: .4rem; background: var(--surface); }
.res__r.is-dus { opacity: .6; }
.res__n { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; }
.res__nume { font-size: .95rem; color: var(--ink); }
.res__tel { font-size: .76rem; color: var(--ink-faint);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.res__cod { font-size: 1.35rem; letter-spacing: .3em; font-weight: 700;
            color: var(--ink); font-variant-numeric: tabular-nums; }

/* =====================================================================
   DOSARELE DE PERSONAL (1.100 / 2.0.0)
   ---------------------------------------------------------------------
   Puţine clase, fiindcă ecranul e făcut din cărămizile care există deja
   — card, field, tbl, pastila. Astea sunt cele patru lucruri care n-au
   avut încă unde să se nască: o bară de completitudine, un titlu de
   secţiune în mijlocul paginii, şi două aşezări mici.
   ===================================================================== */

.docf__trei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
@media (max-width: 560px) { .docf__trei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .docf__trei { grid-template-columns: 1fr; } }

.h-sec { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
         color: var(--ink-faint); margin: 1.2rem 0 .4rem; font-weight: 700; }

/* Bara nu e un procent de progres, e „câte din actele obligatorii sunt
   la locul lor". Roşie când lipseşte ceva — galbenul ar fi spus „mai
   durează", iar aici nu mai durează, lipseşte. */
.dos-bara      { height: 6px; border-radius: 3px; background: var(--line, #e3e3e3);
                 overflow: hidden; max-width: 130px; }
.dos-bara__u   { display: block; height: 100%; background: var(--ok, #2f9e44); }
.dos-bara__u--rau { background: var(--err, #B3401F); }

.dos-act    { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.dos-inline { display: inline; }

.tbl tr.is-stins { opacity: .55; }

/* Opisul: vezi print.css pentru cum arată pe hârtie. */

/* =====================================================================
   CUM ARATĂ PE ECRAN HÂRTIILE CARE SE TIPĂRESC (2.0.0)
   ---------------------------------------------------------------------
   `print.css` e legată cu `media="print"`, deci NIMIC din ea nu se vede
   pe ecran — nici măcar blocul ei `@media screen`, care n-are cum să se
   aplice dintr-o foaie care nu se încarcă la ecran. Rezultatul: foaia de
   prezenţă şi opisul se vedeau pe ecran ca text gol, cu sigla la mărime
   naturală cât jumătate de pagină, deşi ieşeau perfect la tipar.
   Nimeni nu greşea nimic — pur şi simplu nu se întâmpla nimic.

   Regulile de aici sunt DOAR pentru privit înainte de tipărit. Cifrele
   şi aşezarea de pe hârtie rămân în print.css; astea fac atât cât să se
   vadă că e un document, nu o listă.
   ===================================================================== */

.foaie, .opis {
  background: #fff; color: #111; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 8px;
  max-width: 980px; overflow-x: auto;
}

.foaie__cap {
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px;
}
.foaie__logo  { width: 52px; height: auto; flex: 0 0 52px; margin-top: 2px; }
.foaie__firma { flex: 1 1 auto; }
.foaie__nume  { font-size: 1rem; font-weight: 700; }
.foaie__date  { font-size: .72rem; color: #444; }
.foaie__titlu { text-align: right; flex: 0 0 auto; }
.foaie__t     { font-size: 1rem; font-weight: 700; }
.foaie__luna  { font-size: .85rem; }
.foaie__scos  { font-size: .72rem; color: #333; margin-top: 3px;
                border: 1px solid #bbb; padding: 2px 6px; display: inline-block; }

.foaie__semnaturi { display: flex; gap: 32px; margin-top: 16px; font-size: .78rem; }
.foaie__semnaturi > div { flex: 1 1 0; text-align: center; }
.foaie__linie { border-bottom: 1px solid #111; height: 22px; margin-bottom: 3px; }
.foaie__subsol { margin-top: 10px; padding-top: 5px; border-top: 1px solid #ccc;
                 font-size: .68rem; color: #666; text-align: right; }

.opis__om, .opis__t { width: 100%; border-collapse: collapse; }
.opis__om { margin-bottom: 10px; }
.opis__om th, .opis__om td,
.opis__t th,  .opis__t td { border: 1px solid #bbb; padding: 3px 5px; font-size: .78rem;
                            text-align: left; vertical-align: top; }
.opis__om th { background: #f0f0f0; width: 150px; font-weight: 600; }
.opis__t thead th { background: #eee; text-align: center; font-size: .72rem; }
.opis__sec td { background: #e6e6e6; font-weight: 700; font-size: .72rem;
                text-transform: uppercase; letter-spacing: .05em; }
.opis__lipsa td { background: #f7e4e4; }
.opis__scan { font-size: .65rem; border: 1px solid #999; padding: 0 3px;
              border-radius: 2px; color: #555; margin-left: 3px; }
.opis__total { font-size: .8rem; margin: 8px 0 0; border-top: 1px solid #111; padding-top: 5px; }

.nota h2 { font-size: .92rem; margin: 12px 0 3px; font-weight: 700; }
.nota p  { font-size: .82rem; line-height: 1.5; margin: 0 0 6px; }
.nota__apasat { border-left: 3px solid #666; padding-left: 9px; }

/* Foaia de prezenţă, pe ecran: aceleaşi treizeci şi una de coloane, cu
   chenar, ca să se vadă că e un tabel înainte să fie tipărit. */
.foaie__t3 { width: 100%; border-collapse: collapse; }
.foaie__t3 th, .foaie__t3 td { border: 1px solid #bbb; padding: 1px 2px;
                               text-align: center; font-size: .62rem;
                               font-variant-numeric: tabular-nums; }
.foaie__t3 thead th { background: #eee; font-weight: 700; }
.foaie__zi--we { background: #dcdcdc; }
.foaie__om { text-align: left !important; font-size: .72rem; font-weight: 600; }
.foaie__tot { background: #f4f4f4; }
.foaie__sursa { font-size: .74rem; color: #444; border-left: 3px solid #999;
                padding-left: 8px; margin: 0 0 8px; }
.foaie__legenda { font-size: .72rem; color: #555; margin: 6px 0 0; }

/* ---------------------------------------------------------------------
   CRITERII DE PERFORMANŢĂ — pe cine priveşte
   Bifele de secţii stau pe un rând care se rupe singur pe telefon.
   Fără asta fiecare secţie ar ocupa un rând întreg şi cardul ar creşte
   cu fiecare secţie nouă.
   --------------------------------------------------------------------- */
.crit-sectii { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .2rem 0 .3rem; }


/* =====================================================================
   PONTAJUL PE TELEFON — ecranul din uşa localului
   =====================================================================

   DE CE A FOST REFĂCUT
   Regulile vechi (`.pont__*`) stăteau în `app.css`, iar zona de lucru
   încarcă `admin.css`. Adică ecranul se deschidea, butoanele erau toate
   acolo, totul mergea — şi arăta a pagină fără niciun stil. Nimic nu
   se stricase; pur şi simplu nu se întâmpla nimic.

   DE CE ARATĂ AŞA
   Forma vine din aplicaţia de pontaj a lui Valentin: un singur bloc mare
   de stare, ceas mare cât să se citească de la un metru, şi UN buton pe
   toată lăţimea. Ecranul ăsta se apasă cu o mână ocupată, în uşă, la ora
   unu noaptea. Chihlimbarul e culoarea de acolo; verdele şi roşul sunt
   singurele două care nu se citesc greşit la lumină de stradă.

   DE CE NU S-A ADUS ŞI FONTUL „Outfit"
   Fiindcă ar fi a treia familie încărcată de pe net pe ecranul ăsta, şi
   o cerere care întârzie pe o reţea proastă înseamnă un buton care apare
   la două secunde după ce omul s-a uitat la telefon. Figtree, pe care
   zona de lucru o are deja, e aceeaşi croială geometrică.
   --------------------------------------------------------------------- */

.pont-ecran {
  --p-chihlimbar:  #b45309;
  --p-chihlimbar2: #92400e;
  --p-auriu:       #d97706;
  --p-carte:       #fafaf9;
  --p-umplut:      #f5f5f4;
  --p-linie:       #e7e5e4;
  --p-linie-tare:  #d6d3d1;
  --p-text:        #292524;
  --p-text-mic:    #78716c;
  --p-text-slab:   #a8a29e;
  --p-verde:       #047857;
  --p-verde2:      #059669;
  --p-rosu:        #991b1b;
  --p-rosu2:       #b91c1c;

  max-width: 480px;
  margin: 0 auto;
  color: var(--p-text);
}

/* --- blocul de stare ------------------------------------------------- */

.pont {
  text-align: center;
  padding: 1.6rem 1.1rem 1.4rem;
  margin-bottom: 1rem;
  background: var(--p-carte);
  border: 1px solid var(--p-linie);
  border-radius: 18px;
}
.pont--tura  { border-color: rgba(4,120,87,.35);  background: linear-gradient(180deg, rgba(5,150,105,.07), var(--p-carte) 60%); }
.pont--pauza { border-color: rgba(217,119,6,.38); background: linear-gradient(180deg, rgba(217,119,6,.09), var(--p-carte) 60%); }

/* Rotocolul cu iniţiala. E acolo ca omul să vadă din prima că ecranul
   ştie PE CINE pontează: pe un telefon împrumutat de la un coleg, asta
   e singura bucată de pe ecran care spune că s-a greşit. */
.pont__chip {
  width: 76px; height: 76px; margin: 0 auto .7rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-auriu), var(--p-chihlimbar2));
  color: #fff; font-size: 2rem; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 18px rgba(146,64,14,.25);
}

.pont__stare {
  margin: 0; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--p-text-mic); font-weight: 600;
}
.pont__ceas {
  margin: .35rem 0 .1rem; font-size: 3.2rem; line-height: 1;
  font-variant-numeric: tabular-nums; font-weight: 600;
  letter-spacing: -.02em; color: var(--p-text);
}
.pont__sub { margin: .35rem 0 0; font-size: .9rem; color: var(--p-text-mic); }

/* Ceasul de perete, în pastilă. Nu e decor: omul care apasă „Intru" la
   16:02 vrea să vadă pe ecranul care-l pontează ce oră crede programul
   că e, nu ce oră arată telefonul lui. */
.pont__acum {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .9rem; padding: .35rem .8rem;
  background: var(--p-umplut); border: 1px solid var(--p-linie);
  border-radius: 999px; font-size: .84rem; color: var(--p-text-mic);
  font-variant-numeric: tabular-nums;
}

/* --- poziţia ---------------------------------------------------------- */

.pont__geo {
  margin: 0 0 1rem; padding: .6rem .85rem;
  font-size: .84rem; text-align: center;
  background: var(--p-umplut);
  border: 1px solid var(--p-linie);
  border-radius: 12px;
  color: var(--p-text-mic);
}
.pont__geo--ok  { border-color: rgba(4,120,87,.4);  color: var(--p-verde); background: rgba(5,150,105,.07); }
.pont__geo--rau { border-color: rgba(153,27,27,.4); color: var(--p-rosu);  background: rgba(185,28,28,.06); }

/* Avertismentul de plecare. Roşu, mare, cu numărătoare — fiindcă e
   singurul lucru de pe ecran care se întâmplă FĂRĂ ca omul să apese
   ceva, şi deci singurul despre care trebuie prevenit de două ori. */
.pont__paza {
  margin: 0 0 1rem; padding: .8rem .9rem;
  border: 1px solid rgba(153,27,27,.45);
  background: rgba(185,28,28,.07);
  border-radius: 12px; color: var(--p-rosu);
  font-size: .9rem; text-align: center; font-weight: 500;
}
.pont__paza strong { font-variant-numeric: tabular-nums; }

/* --- butoanele -------------------------------------------------------- */

.pont__form { margin-bottom: 1rem; }
.pont__buton {
  display: block; width: 100%;
  padding: 18px 0; border: 0; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 600;
  letter-spacing: 1px; color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(41,37,36,.14);
}
.pont__buton--intru,
.pont__buton--reiau { background: linear-gradient(135deg, var(--p-verde), var(--p-verde2)); }
.pont__buton--ies   { background: linear-gradient(135deg, var(--p-rosu),  var(--p-rosu2)); }
.pont__buton--pauza { background: linear-gradient(135deg, var(--p-auriu), var(--p-chihlimbar)); }
.pont__buton:active { transform: translateY(1px); filter: brightness(.94); }
.pont__buton[disabled] { opacity: .5; cursor: default; box-shadow: none; }

.pont__feluri { display: flex; gap: .4rem; margin-bottom: .55rem; flex-wrap: wrap; }
.pont__fel { flex: 1 1 5rem; }
.pont__fel input { position: absolute; opacity: 0; width: 0; height: 0; }
.pont__fel span {
  display: block; text-align: center; padding: .55rem .3rem;
  border: 1px solid var(--p-linie-tare); border-radius: 10px;
  font-size: .84rem; color: var(--p-text-mic); background: var(--p-carte);
}
.pont__fel input:checked + span {
  border-color: var(--p-chihlimbar); color: var(--p-chihlimbar);
  background: rgba(180,83,9,.07); font-weight: 600;
}
.pont__fel input:focus-visible + span { outline: 2px solid var(--p-chihlimbar); outline-offset: 2px; }

.pont__nota {
  width: 100%; padding: .7rem .8rem; margin-bottom: .6rem;
  border: 1px solid var(--p-linie-tare); border-radius: 12px;
  font-family: inherit; font-size: 1rem; background: var(--p-carte);
  color: var(--p-text);
}

/* --- listele ---------------------------------------------------------- */

.pont-card {
  background: var(--p-carte); border: 1px solid var(--p-linie);
  border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.pont-card h2 {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-text-slab); font-weight: 600;
}
.pont__pauze, .pont__lista { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.pont__pauze li, .pont__lista li {
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--p-linie);
}
.pont__pauze li:last-child, .pont__lista li:last-child { border-bottom: 0; }
.pont__pauze strong, .pont__lista strong { font-variant-numeric: tabular-nums; }
.pont__stare-mic { font-style: normal; font-size: .74rem; color: var(--p-text-slab); }
.pont__stare-mic--aprobat { color: var(--p-verde); }
.pont__stare-mic--respins { color: var(--p-rosu); }
.pont__legaturi { text-align: center; font-size: .88rem; color: var(--p-text-mic); }
.pont__legaturi a { color: var(--p-chihlimbar); }


/* =====================================================================
   RAIOANE — fila de LISTĂ şi fila de PENALIZĂRI
   =====================================================================

   Planul rămâne cel mai bun loc pentru a VEDEA împărţirea sălii: o masă
   rătăcită la capătul terasei sare în ochi pe desen şi e invizibilă
   într-o listă. Dar e cel mai prost loc pentru a o SCRIE de pe telefon,
   în picioare, cu o mână — şi exact aşa se face configurarea.

   Deci amândouă, pe aceleaşi date şi aceleaşi rute. Nu există două
   feluri de a scrie în ce raion e masa 12.
   --------------------------------------------------------------------- */

.rz-card { margin-bottom: 1rem; }
.rz-card.is-stins { opacity: .72; }

.rz-card__cap {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
  margin-bottom: .7rem;
}
.rz-card__culoare { width: 44px; min-width: 44px; padding: 2px; height: 36px; }
.rz-card__nume { flex: 1 1 10rem; font-weight: 600; }
.rz-card__nota { flex: 2 1 16rem; }

/* Mesele, ca nişte jetoane bifabile. Ţinte mari: ecranul se atinge cu
   degetul, nu cu mouse-ul. */
.rz-mese {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .7rem;
}
.rz-masa {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 68px; padding: .45rem .5rem;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; background: var(--surface); line-height: 1.2;
}
.rz-masa input { position: absolute; opacity: 0; width: 0; height: 0; }
.rz-masa__cod { font-weight: 600; font-variant-numeric: tabular-nums; }
.rz-masa__sec { font-size: .7rem; color: var(--ink-faint); }
.rz-masa__alt { font-size: .68rem; color: var(--warn); }
.rz-masa:has(input:checked) {
  border-color: var(--ink); border-width: 2px; padding: calc(.45rem - 1px) calc(.5rem - 1px);
  background: var(--bg-alt, #f3f0e7);
}
.rz-masa:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Masa care e deja în ALT raion: se vede, dar nu se ascunde. Bifând-o
   aici o scoţi de acolo — iar asta trebuie spus înainte, nu seara. */
.rz-masa.is-alt { border-style: dashed; }

/* Rândul de penalizat, din propuneri: selectul, zilele şi butonul pe
   acelaşi rând pe ecran mare, unul sub altul pe telefon. */
.rz-pen__f { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.rz-pen__f .inp { min-width: 7rem; }
.rz-pen__f .inp--num { min-width: 4.5rem; max-width: 5.5rem; }

/* Semnul de penalizare pe planul sălii: o dungă diagonală peste masă.
   NU roşu plin — roşul plin e al chemărilor, şi două lucruri urgente
   cu aceeaşi culoare înseamnă că niciunul nu mai e urgent. */
.rz__masa.is-penalizat::after,
.plan__masa.is-penalizat::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    rgba(179, 64, 31, .30) 0 4px,
    transparent 4px 9px
  );
}
.rz__masa.is-penalizat, .plan__masa.is-penalizat { position: relative; }

/* Bulina de culoare a raionului, în lista de mese. */
.rz-pet {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--rz-c, #8a8f98); margin-inline-end: .3rem;
  vertical-align: baseline;
}


/* =====================================================================
   PREVIZIUNEA RAIOANELOR
   --------------------------------------------------------------------- */
.prv-zi { margin-bottom: 1.1rem; }
.prv-tura { padding-top: .8rem; border-top: 1px solid var(--line); margin-top: .8rem; }
.prv-tura:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.prv-tura__cap {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .5rem;
}
.prv-tura__nume { margin: 0; font-size: 1rem; }
.prv-tura__oameni { margin-inline-start: auto; }

/* Ordinea oamenilor: jumătate din răspunsul la „de ce am eu terasa azi". */
.prv-ordine { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.prv-loc {
  display: inline-flex; align-items: baseline; gap: .25rem;
  padding: .12rem .45rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.prv-loc strong {
  font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: .8rem;
}
.prv-loc em { font-style: normal; font-size: .76rem; color: var(--ink-faint); }
.rz-card__numar { max-width: 4.2rem; min-width: 3.6rem; text-align: center; font-weight: 600; }

/* Avertismentul de lângă totalul Z. Galben, nu roşu: nu e o eroare care
   opreşte foaia, e un rând citit greşit de pe bandă — se corectează pe
   loc, nu se raportează. */
.bord__avertisment {
  margin: .5rem 0 0;
  padding: .6rem .8rem;
  border-inline-start: 3px solid #b8860b;
  background: rgba(184,134,11,.09);
  border-radius: 0 6px 6px 0;
  font-size: .86rem;
  line-height: 1.45;
  color: #6b4e00;
}
[dir="rtl"] .bord__avertisment { border-radius: 6px 0 0 6px; }

/* ---------------------------------------------------------------
   HARTA DE PONTAJ
   ---------------------------------------------------------------
   Desenul şi harta stau UNA PESTE ALTA, nu una după alta: desenul e
   acolo din prima clipă, harta se pune deasupra dacă vine. Schimbate
   între ele, omul din bucătărie — unde internetul lipseşte — ar fi
   văzut un dreptunghi gol şi ar fi crezut că s-a stricat programul. */
.harta {
  position: relative;
  margin: .75rem 0 0;
  border-radius: .6rem;
  overflow: hidden;
  background: #F4F1EC;
  border: 1px solid rgba(21,21,24,.10);
}
.harta__desen,
.harta__panza {
  position: absolute; inset: 0;
}
.harta {
  /* Înălţimea se dă din padding, ca desenul să ţină proporţia pe orice
     lăţime, fără JavaScript. */
  height: 0; padding-block-end: 68%;
}
.harta--mic { padding-block-end: 46%; max-width: 420px; }

.harta__desen { display: flex; align-items: center; justify-content: center; }
.harta__svg { width: 100%; height: 100%; }

.harta__panza { z-index: 2; opacity: 0; transition: opacity .25s; }
.harta--vie .harta__panza { opacity: 1; }

/* Legenda stă PESTE hartă, jos, nu sub ea: pe telefon, un rând în plus
   sub o hartă de 200 de pixeli împinge butonul de pontat sub ecran. */
.harta__legenda {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  margin: 0; padding: .3rem .5rem;
  display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: center;
  font-size: .68rem; line-height: 1.4;
  background: rgba(255,255,255,.88);
  color: rgba(21,21,24,.75);
}
.harta__cheie {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin-inline-end: .25rem; vertical-align: -1px;
}
.harta__cheie--local { background: #7A1F2B; }
.harta__cheie--om    { background: #1E6B4F; }
.harta__cheie--raza  { background: none; border: 1.5px dashed #7A1F2B; }

.harta__eticheta {
  font: 700 .72rem/1 var(--sans, Figtree), system-ui, sans-serif;
  color: #222; background: rgba(255,255,255,.9);
  padding: .15rem .4rem; border-radius: 999px;
  white-space: nowrap; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.leaflet-container { background: #F4F1EC; font: inherit; }

/* Harta strânsă într-un rând de listă. */
.card__harta { margin-top: .5rem; }
.card__harta > summary {
  cursor: pointer; font-size: .8rem; color: var(--vin, #7A1F2B);
  padding: .2rem 0; list-style: none;
}
.card__harta > summary::-webkit-details-marker { display: none; }
.card__harta > summary::before { content: '🗺 '; }
.card__harta[open] > summary { opacity: .6; }

/* Comutatorul de limbă din bara panoului. Stă în dreapta titlului,
   lângă butoanele ecranului — nu în bara laterală, unde ar fi al
   zecelea rând dintr-o listă de ecrane şi nu l-ar găsi nimeni. */
.adm__limbi { display: flex; gap: .25rem; margin-inline-start: auto; flex: none; }
.adm__limba {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 34px; padding: 0 .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(21,21,24,.55); text-decoration: none;
  border: 1px solid rgba(21,21,24,.14); border-radius: 999px;
  white-space: nowrap;
}
.adm__limba:hover { color: #151518; border-color: rgba(21,21,24,.34); }
.adm__limba.is-acum { color: #FFF; background: #151518; border-color: #151518; }

@media (max-width: 640px) {
  .adm__limba { padding: 0 .4rem; font-size: .7rem; }
}