/* Elconet Hub · stilurile de bază ale cochiliei: culorile, literele, intrarea, bara, cadrul paginii și componentele
   comune (butoane, câmpuri, panouri, mesaje, liste, tabele). Stilurile unui modul stau în dosarul lui. */
:root {
  --bg: #0d1117; --bar: #0a0d12; --pane: #131a23; --card: #18212c; --soft: #1f2a37; --line: #263241; --line2: #33425a;
  --ink: #e8edf3; --mut: #9aa7b8; --dim: #7d8a9b;
  --acc: #318bf0; --acc-t: #6fb0ff; --acc2: #13263d;
  --hover: rgba(255, 255, 255, .045);
  --ok: #3fbf8a; --ok2: #12291f; --wip: #e5b45a; --wip2: #2d2414; --err: #f07178; --err2: #2e1619;
  --plus: #b79cff; --plus2: #221b36;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sus: env(safe-area-inset-top, 0px); --jos: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-x: clip; min-height: 100vh; min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
a { color: var(--acc-t); }
.ascuns { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 20px; height: 20px; flex: none; }

/* ——— pornirea ——— */
.pornire { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.pornire-logo { width: 180px; height: auto; opacity: .9; }
/* Sub siglă, fără să o mute: nota „se încarcă mai greu” (pusă de paza pornirii, `pornire.js`) și plasa fără cod — dacă
   nici paza nu a sosit, după 30 de secunde la siglă apar textul și legătura de reîncărcare din `index.html`. */
.pornire-nota, .pornire-ajutor { position: absolute; left: 16px; right: 16px; top: calc(50% + 44px); margin: 0 auto; max-width: 340px; text-align: center; color: var(--mut); font-size: 14px; }
.pornire-ajutor { visibility: hidden; animation: pornire-ajutor 1ms linear 30s forwards; }
.pornire-ajutor p { margin: 0 0 14px; }
.cu-paza .pornire-ajutor { display: none; }
@keyframes pornire-ajutor { to { visibility: visible; } }
/* Ecranul „Aplicația nu s-a încărcat întreagă” (paza pornirii) are așezarea ecranului de intrare. */
.pornire-cazut h1 { margin-bottom: 8px; }

/* ——— intrarea, parola, codul ——— */
.poarta { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--sus)) 16px calc(24px + var(--jos)); }
.poarta-cutie { width: 100%; max-width: 400px; }
.poarta-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.poarta-logo img { height: 24px; width: auto; }
.poarta-logo span { font-weight: 650; font-size: 17px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
.poarta h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.poarta .sub { color: var(--mut); font-size: 14px; margin-bottom: 20px; }
.pasi { display: flex; gap: 6px; margin-bottom: 14px; }
.pasi span { height: 4px; flex: 1; border-radius: 2px; background: var(--soft); }
.pasi span.on { background: var(--acc); }
.camp { display: block; margin-bottom: 14px; }
.camp > span, .camp > label { display: block; font-size: 13px; color: var(--mut); margin-bottom: 5px; font-weight: 550; }
.parola-camp { position: relative; }
.camp .parola-camp input { padding-right: 50px; }
/* Edge își pune propriul buton de arătat parola lângă al aplicației: rămâne numai al aplicației. */
.parola-camp input::-ms-reveal, .parola-camp input::-ms-clear { display: none; }
.ochi { position: absolute; top: 0; right: 0; width: 46px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 0 10px 10px 0; color: var(--mut); cursor: pointer; }
.ochi:hover { color: var(--ink); }
.ochi:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ochi[aria-pressed="true"] { color: var(--acc-t); }
.ochi:disabled { opacity: .55; cursor: default; }
.camp input, .camp select { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; min-height: 44px; }
.camp input:focus, .camp select:focus { border-color: var(--acc); }
.camp small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 5px; }
/* Parola nouă: regula deasupra câmpurilor, de la început; lista care se bifează sub ele. */
.regula-parola { display: flex; gap: 8px; align-items: flex-start; background: var(--acc2); color: #b9d8ff; border: 1px solid #1d3a5c; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin: 0 0 14px; }
.regula-parola svg.ic { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--acc-t); }
.main .regula-parola { max-width: 560px; }
.bife-parola { list-style: none; margin: -4px 0 16px; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--dim); }
.bife-parola li { display: flex; align-items: center; gap: 8px; }
.bife-parola svg.ic { width: 16px; height: 16px; flex: none; }
.bife-parola li.on { color: #9fe0c3; }
.bife-parola li.on svg.ic { color: var(--ok); }
.cod-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .35em; text-align: center; }
/* Un singur fel de buton, fie <button>, fie <a>: aceeași culoare, fără subliniere. */
.btn { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line2); background: var(--soft); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14.5px; }
.btn:hover { border-color: var(--acc); }
.btn.prim { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.prim:hover { background: #2a7ad6; }
.btn.lat { width: 100%; }
.btn.mic { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.btn.pericol { color: var(--err); }
.btn:disabled { opacity: .55; cursor: default; }
.mesaj { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.mesaj.err { background: var(--err2); color: #f5b5b9; border: 1px solid #4a2328; }
.mesaj.ok { background: var(--ok2); color: #9fe0c3; border: 1px solid #1e4634; }
.mesaj.info { background: var(--acc2); color: #b9d8ff; border: 1px solid #1d3a5c; }
.qr { display: flex; justify-content: center; background: #fff; border-radius: 12px; padding: 12px; width: 204px; margin: 4px auto 14px; }
.qr img { width: 180px; height: 180px; display: block; }
.secret { display: block; font-family: var(--mono); font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all; text-align: center; margin-bottom: 14px; letter-spacing: .06em; }
.lista-pasi { margin: 0 0 16px; padding-left: 20px; color: var(--mut); font-size: 13.5px; }
.lista-pasi li { margin: 4px 0; }
.poarta-alt { margin-top: 10px; }
/* Codul pus de pe același telefon: pașii pe iPhone și pe Android, butonul care deschide aplicația de coduri, cheia cu
   „Copiază”. Pe calculator: pașii, codul QR și aceeași cheie. */
.poarta-cum { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; color: var(--mut); }
.poarta-cum b { color: var(--ink); }
.poarta-cum > b:first-child { font-size: 14px; }
.cod-pe-telefon { margin: 4px 0 16px; }
.cheie-cfg { margin-bottom: 16px; }
.cheie-rand { display: flex; gap: 8px; align-items: stretch; }
.cheie-rand .secret { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: center; user-select: all; -webkit-user-select: all; }
.cheie-rand .btn { flex: none; }
.cheie-cfg small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 6px; }
.poarta .sub.poarta-apoi { margin-bottom: 10px; }

/* ——— aplicația ——— */
/* Pe calculator: bara laterală în stânga și coloana conținutului. Pe telefon (sub 900 px): antetul și bara de jos. */
.ap { min-height: 100vh; min-height: 100dvh; display: flex; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 232px; flex: none; display: flex; flex-direction: column; gap: 2px; background: var(--bar); border-right: 1px solid var(--line); padding: calc(18px + var(--sus)) 12px 14px; overflow: hidden; }
.sb-cap { display: flex; align-items: center; gap: 12px; padding: 2px 10px 20px; min-height: 44px; }
.sb-cap .logo { height: 19px; width: auto; display: block; }
a.sb-cap, a.top-sigla { text-decoration: none; color: inherit; border-radius: 8px; }
a.sb-cap:focus-visible, a.top-sigla:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.top-sigla { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.sb-cap .semn { display: none; width: 30px; height: 30px; border-radius: 8px; }
.sb-cap .nm { font-weight: 650; font-size: 15px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
/* Lista secțiunilor: Tabloul singur sus, apoi secțiunile, fiecare cu numele ei (un buton care o strânge) și rândurile
   contului. Cu toate secțiunile deschise, lista se derulează în bară; sigla și contul rămân pe loc. */
.sb-nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; margin: 0 -6px; padding: 0 6px 8px; }
.sb-grup, .sb-randuri { display: flex; flex-direction: column; gap: 2px; }
.sb-grup { margin-top: 10px; }
.sb-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 4px 6px 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.sb-sec:hover { color: var(--ink); background: var(--hover); }
.sb-sec:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sb-sec svg.ic { width: 15px; height: 15px; transition: transform .12s; }
.sb-grup.strans .sb-sec svg.ic { transform: rotate(-90deg); }
.sb-grup.strans .sb-randuri { display: none; }
/* O secțiune strânsă care ține pagina deschisă își arată numele în culoarea de accent. */
.sb-grup.strans.are-on .sb-sec { color: var(--acc-t); }
/* Un rând care încă nu are modul („urmează”): numai la administrator, șters și de neapăsat. */
.sb-urm { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: 9px; color: var(--dim); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: default; opacity: .62; }
.sb-urm svg.ic { grid-row: 1 / 3; }
.sb-urm > span { grid-column: 2; align-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-urm small { grid-column: 2; align-self: start; font-size: 11px; letter-spacing: .02em; }
.sb-nav a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-nav a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 550; white-space: nowrap; }
.sb-nav a:hover { color: var(--ink); background: var(--hover); }
/* Secțiunea curentă e una singură și nu seamănă cu trecerea mouse-ului: fond și text de accent, linia din stânga. */
.sb-nav a.on, .sb-nav a.on:hover { color: var(--acc-t); background: var(--acc2); box-shadow: inset 3px 0 0 var(--acc); font-weight: 650; }
.sb-nav a:focus-visible, .sb-cont:focus-visible, .sb-strange:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sb-jos { flex: none; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sb-strange { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 13px; text-align: left; white-space: nowrap; }
.sb-strange:hover { color: var(--ink); background: var(--hover); }
.sb-cont { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.sb-cont:hover { background: var(--hover); }
/* Contul e pagina curentă (și cât e deschisă una dintre paginile lui): același semn ca la un rând al barei. */
.sb-cont.on, .sb-cont.on:hover { background: var(--acc2); box-shadow: inset 3px 0 0 var(--acc); }
.sb-cont.on .sb-om b { color: var(--acc-t); }
.sb-om { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-om b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-om small { font-size: 12px; color: var(--mut); }
.ap.sb-stransa .sb { width: 72px; padding-left: 10px; padding-right: 10px; }
.ap.sb-stransa .sb-cap { justify-content: center; padding: 2px 0 20px; }
.ap.sb-stransa .sb-cap .logo, .ap.sb-stransa .sb-cap .nm, .ap.sb-stransa .sb-nav span, .ap.sb-stransa .sb-strange span, .ap.sb-stransa .sb-om { display: none; }
.ap.sb-stransa .sb-cap .semn { display: block; }
.ap.sb-stransa .sb-nav a, .ap.sb-stransa .sb-strange, .ap.sb-stransa .sb-cont, .ap.sb-stransa .sb-urm { justify-content: center; padding-left: 0; padding-right: 0; }
.ap.sb-stransa .sb-urm { display: flex; }
/* Bara strânsă la iconițe: numele secțiunilor devin o linie, toate rândurile rămân la vedere. */
.ap.sb-stransa .sb-urm > span, .ap.sb-stransa .sb-urm small, .ap.sb-stransa .sb-sec span, .ap.sb-stransa .sb-sec svg.ic { display: none; }
.ap.sb-stransa .sb-sec { min-height: 0; height: 1px; padding: 0; margin: 4px 8px; width: auto; background: var(--line); pointer-events: none; }
.ap.sb-stransa .sb-grup.strans .sb-randuri { display: flex; }
.ap.sb-stransa .sb-nav { margin: 0; padding: 0 0 8px; scrollbar-width: none; }
/* Bara de sus, pe calculator: lângă bara laterală, deasupra conținutului; câmpul căutării comune (Ctrl K) la stânga,
   clopoțelul Notificărilor la dreapta. Sigla și poza sunt deja în bara laterală. Nu stă lipită sus: paginile își au
   barele lor lipite (capetele de tabel), care altfel ar intra sub ea. */
.top { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: calc(10px + var(--sus)) 32px 10px; background: var(--bar); border-bottom: 1px solid var(--line); }
.top .top-sigla, .top .cine { display: none; }
/* Câmpul căutării comune din bară (.top-cauta, lupa de telefon .top-lupa) are stilurile în module/cautare/cautare.css. */
.top .clopot { width: 44px; height: 44px; }
/* Numărul versiunii, lângă clopoțel: mic, subțire, fără bold. Verde = ultima versiune; portocaliu = veche (butonul o aduce pe cea nouă). */
.ver-antet-loc { display: inline-flex; align-items: center; flex: none; }
.ver-antet { font: inherit; font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ok); background: none; border: 0; padding: 8px 6px; margin: 0; white-space: nowrap; }
.ver-antet.veche { color: var(--wip); cursor: pointer; border-radius: 8px; }
.ver-antet.veche:hover { background: var(--hover); }
.ver-antet.veche:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ver-antet.veche:disabled { cursor: default; opacity: .7; }
.top .clopot:hover { color: var(--ink); background: var(--hover); }
.top .logo { height: 19px; width: auto; display: block; }
.top .nm { font-weight: 650; font-size: 15px; color: var(--mut); border-left: 1px solid var(--line2); padding-left: 12px; }
.top .sp { flex: 1; }
.cine { display: flex; align-items: center; border-radius: 999px; padding: 3px; text-decoration: none; color: var(--ink); }
/* Poza din antet e drumul spre Cont. Cât e deschis Contul sau o pagină a lui, poartă un inel de accent, desenat în afara
   ei: nimic din antet nu își schimbă mărimea sau locul. */
.cine.on .av { box-shadow: 0 0 0 2px var(--bar), 0 0 0 4px var(--acc); }
.cine:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.av.cu-poza { color: transparent; }
.sb-av { width: 34px; height: 34px; font-size: 12.5px; }
.av.lg { width: 56px; height: 56px; font-size: 19px; }
.av.xl { width: 96px; height: 96px; font-size: 32px; }
/* Regula de design a aplicației: conținutul ține toată lățimea, de la bară la marginea ferestrei, cu o margine
   interioară constantă (32 px; 16 px sub 900 px). Ce nu trebuie să se lungească se așază în grilă: panourile pe coloane,
   câmpurile cel mult 560 px, textul cel mult 80 de caractere pe rând. */
.main { flex: 1; width: 100%; padding: 28px 32px 48px; }
.main p, .main small, .gol > div, .mesaj { max-width: 80ch; }
.main .camp { max-width: 560px; }
.cap-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.panouri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.panouri > .panou + .panou { margin-top: 0; }
.campuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.panou { container-type: inline-size; }
@media (min-width: 2000px) {
  .panouri.lat-prim { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.hi { font-size: 22px; font-weight: 700; }
.sub { color: var(--mut); font-size: 13.5px; margin-top: 3px; }
.sec { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 24px 0 10px; font-weight: 650; }
.nav-jos { display: none; }
.chip { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip.curand { background: var(--wip2); color: var(--wip); }
.chip.activ { background: var(--ok2); color: var(--ok); }
.chip.oprit { background: var(--err2); color: var(--err); }
.chip.neutru { background: var(--soft); color: var(--mut); }
.gol { border: 1px dashed var(--line2); border-radius: 14px; padding: 22px 18px; color: var(--mut); font-size: 14px; display: flex; gap: 14px; align-items: flex-start; }
.gol .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--soft); color: var(--mut); display: grid; place-items: center; flex: none; }
.gol b { color: var(--ink); display: block; margin-bottom: 3px; font-size: 15px; }

.panou { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.panou + .panou { margin-top: 14px; }
.panou h2 { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.rand-date { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.rand-date dt { color: var(--mut); }
.rand-date dd { margin: 0; word-break: break-word; }
.panou > .sub + .rand-date { margin-top: 12px; }
.om-nume { display: flex; align-items: center; gap: 10px; }
.actiuni { display: flex; gap: 8px; flex-wrap: wrap; }

/* echipa */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 12px; color: var(--mut); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabel td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inapoi { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; background: none; border: 0; cursor: pointer; padding: 4px 0; }

@media (max-width: 899px) {
  .sb { display: none; }
  /* „Hub” stă lângă siglă și pe telefon, cât încape lângă clopoțel și poză (măsurat la 360 px:
     „Hub” se încheie la 181 px, clopoțelul începe la 256; cu marginile, antetul cere 313 px). Sub 320 px dispare numai „Hub”. */
  /* Antetul cere, la dreapta siglei, lupa, numărul versiunii, ochiul de prezentare, clopoțelul și poza (229 px cu marginile):
     la 375 px nu mai încăpea și pagina se derula în lat cu 2 px (30 px la 360). Sigla e singura care se strânge: cutia ei
     se îngustează, desenul se micșorează întreg (`object-fit`), iar „Hub” nu se strânge. */
  .top-sigla { flex: 0 1 auto; min-width: 0; gap: 8px; }
  .top .top-sigla .logo { flex: 0 1 110px; min-width: 0; width: 110px; height: 19px; object-fit: contain; object-position: left center; }
  .top .nm { white-space: nowrap; flex: none; }
  @media (max-width: 319px) { .top .nm { display: none; } }
  .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 0; padding: calc(6px + var(--sus)) 16px 6px; background: var(--bar); border-bottom: 1px solid var(--line); }
  /* Pe telefon bara rămâne subțire: sigla, apoi lupa, clopoțelul și poza, lipite la dreapta (cu „Hub”, 329 px la 360). */
  .top .top-sigla { display: flex; margin-right: auto; }
  .top .cine { display: flex; }
  .top .sp { display: none; }
  .top .clopot { width: 40px; height: 40px; }
  /* Numărul versiunii cere loc în antet: pe telefon stă strâns (litere de 12 px, margini mici), iar clopoțelul nu se mai subțiază. */
  .ver-antet { font-size: 12px; padding: 8px 3px; }
  .top { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .top .nm { padding-left: 8px; }
  .top .clopot { flex: none; }
  .main { padding: 18px 16px calc(90px + var(--jos)); }
  .cap-pagina > .actiuni { width: 100%; }
  .hi { font-size: 20px; }
  /* Bara de jos stă lipită de marginea de jos a ecranului VĂZUT, cu zona sigură a iPhone-ului. Pe iOS, după ce tastatura
     se închide, fereastra de așezare poate rămâne mai scurtă decât cea văzută, iar bara ar sta la mijloc: `--vv-jos`
     (pus de cochilie, după `visualViewport`, la fiecare ecran desenat) o coboară cât e diferența; altfel e 0. Niciun
     părinte al ei nu are transform, filter sau overflow, iar pagina se derulează pe document, nu într-un container. */
  .nav-jos { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--bar); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--jos)); transform: translate3d(0, var(--vv-jos, 0px), 0); }
  .nav-jos a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--dim); text-decoration: none; font-size: 11px; font-weight: 600; padding: 4px 0; min-height: 44px; }
  .nav-jos a span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-jos a.on { color: var(--acc-t); }
  .nav-jos svg.ic { width: 22px; height: 22px; }
  .rand-date { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rand-date dd { margin-bottom: 8px; }
  .tabel { display: none; }
}
dl.rand-date { margin: 0; }
.panou dl + .actiuni, .panou dl + .sub { margin-top: 14px; }
/* Panoul îngust (coloană de grilă sau telefon): datele una sub alta. La capăt, ca să treacă peste regulile de mai sus. */
@container (max-width: 420px) {
  .rand-date { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rand-date dd { margin-bottom: 8px; }
}

/* ——— felia 3: concediile și învoirile ——— */
.camp textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; min-height: 64px; resize: vertical; font: inherit; color: inherit; }
.camp textarea:focus { border-color: var(--acc); }
.actiuni.jos { margin-top: 14px; }
.h2-sec { margin-top: 20px; }
.mare { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 2px 0 4px; }
.eticheta { display: block; font-size: 13px; color: var(--mut); margin-bottom: 6px; font-weight: 550; }

/* ochiul de prezentare: lângă clopoțel; pornit, e luminat și acoperă câmpurile sensibile (`nucleu.js`, regulile puse prin CSSOM) */
.ochi-prez { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--mut); cursor: pointer; }
.ochi-prez:hover { color: var(--ink); background: var(--hover); }
.ochi-prez:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ochi-prez.on { color: var(--acc-t); background: var(--acc2); }
.top .ochi-prez { width: 44px; height: 44px; }
@media (max-width: 899px) { .top .ochi-prez { width: 40px; height: 40px; } }

/* clopoțelul: în bara de sus, pe calculator și pe telefon */
.clopot:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.clopot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--mut); text-decoration: none; }
.clopot .bulina { position: absolute; top: 3px; right: 2px; }
.bulina { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }

/* tabloul */

/* felul cererii */
.segment { display: inline-flex; background: var(--bg); border: 1px solid var(--line2); border-radius: 11px; padding: 3px; gap: 3px; margin-bottom: 6px; }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--mut); min-height: 36px; }
.segment input:checked + span { background: var(--acc); color: #fff; }
.segment input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.segment-ajutor { margin: 0 0 14px; }
.rezumat { font-size: 14px; color: var(--ink); margin: 0 0 14px; max-width: 80ch; }
.rezumat:empty { display: none; }
.rezumat b { color: var(--acc-t); }
.semn-pad { position: relative; width: 100%; max-width: 560px; aspect-ratio: 3 / 1; background: #fff; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; touch-action: none; margin-bottom: 10px; }
.semn-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.semn-ghid { position: absolute; left: 6%; right: 6%; bottom: 22%; border-top: 1px dashed #b8c2cf; padding-top: 4px; color: #8a96a6; font-size: 12px; pointer-events: none; }
.semn-pad.semnat .semn-ghid { color: transparent; }
.semn-cutie { display: inline-flex; background: #fff; border-radius: 10px; padding: 8px 14px; border: 1px solid var(--line2); margin-bottom: 6px; max-width: 100%; }
.semn-cutie img { display: block; max-height: 72px; max-width: 100%; }
.semn-msg .mesaj { margin-bottom: 10px; }
.semn-cutie + p.sub { margin: 0 0 10px; }
/* Chenarul de semnat (`comun/semnatura-pad.js`): ecranul e numai al lui; butoanele sus, sub chenar nimic de apăsat. */
html.sp-deschis, html.sp-deschis body { overflow: hidden; overscroll-behavior: none; }
.sp-ecran { position: fixed; inset: 0; z-index: 900; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: calc(12px + var(--sus)) 16px calc(16px + var(--jos)); }
.sp-cutie { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.sp-titlu { font-size: 22px; line-height: 1.25; margin: 4px 0 4px; }
.sp-sub { color: var(--mut); font-size: 14.5px; margin: 0 0 6px; max-width: 70ch; }
.sp-msg { height: 72px; width: 100%; overflow: hidden; }
.sp-msg .mesaj { margin: 0; font-size: 13.5px; line-height: 1.35; padding: 8px 12px; }
.sp-butoane { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-bottom: 10px; }
.sp-butoane [data-sp="salveaza"] { margin-left: auto; min-width: 120px; }
.sp-alegeri { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 4px; }
.sp-grup { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-alege[aria-pressed="true"] { border-color: var(--acc); background: var(--acc2); color: var(--acc-t); }
.sp-pata { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }
.sp-pata[data-c="albastru"] { background: #1d3a9e; } .sp-pata[data-c="negru"] { background: #1b1c20; } .sp-pata[data-c="inchis"] { background: #13254f; }
.sp-pen { color: var(--mut); font-size: 13.5px; margin: 6px 0 10px; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-chenar { position: relative; background: #fff; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; max-width: 100%; }
.sp-panza { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sp-linie { position: absolute; left: 5%; right: 5%; bottom: 24%; border-top: 1px solid #b8c2cf; pointer-events: none; }
.sp-ghid { position: absolute; left: 5%; bottom: calc(24% - 18px); color: #8a96a6; font-size: 12px; pointer-events: none; }
.sp-sprijin { height: 33vh; min-height: 120px; }
.sp-ecran[data-stare="lucru"] .sp-butoane, .sp-ecran[data-stare="lucru"] .sp-alegeri, .sp-ecran[data-stare="lucru"] .sp-chenar { opacity: .55; pointer-events: none; }
.sp-gata { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); }
.sp-gata .mesaj { width: 100%; }
.sp-gata-butoane { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 24px; }
.sp-gata-butoane .btn { flex: 1 1 160px; min-height: 52px; }
.lista-simpla { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.lista-simpla li { max-width: 80ch; }
.lista-simpla .chip { margin-left: 6px; }

/* avertismentele: back-up-ul care lipsește și el în aceeași perioadă */
.mesaj.avert { display: flex; gap: 10px; align-items: flex-start; background: var(--wip2); color: #f3d7a1; border: 1px solid #4a3b1d; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.mesaj.avert svg.ic { width: 18px; height: 18px; color: var(--wip); margin-top: 1px; }
.mesaj.avert p { margin: 0; max-width: 80ch; }
.mesaj.avert p + p { margin-top: 4px; }

/* notificările */
/* Rândul întreg se atinge și duce la lucrul lui (fără buton); felul e spus într-un cuvânt, textul are cel mult două
   rânduri, necititele au un punct. Rândurile sunt grupate pe zile. Lângă titlu, semnul de setări. */
.notif-cap { flex-wrap: nowrap; align-items: center; }
.notif-actiuni { display: flex; align-items: center; gap: 8px; flex: none; }
.notif-cap .hi { white-space: nowrap; }
.btn.notif-toate { min-height: 44px; white-space: nowrap; }
.versiuni .versiune.tinta { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); scroll-margin-top: 72px; }
.btn.notif-setari { flex: none; width: 44px; min-height: 44px; padding: 0; }
.notif-gol { margin-top: 18px; }
.lista-notif { list-style: none; margin: 0; padding: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.lista-notif li + li { border-top: 1px solid var(--line); }
.notif { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; color: var(--ink); text-decoration: none; }
a.notif:hover .notif-fel { color: var(--acc-t); }
a.notif:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.notif .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--mut); display: grid; place-items: center; flex: none; }
.notif.noua .ico { background: var(--acc2); color: var(--acc-t); }
.notif-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-sus { display: flex; align-items: baseline; gap: 8px; }
.notif-fel { font-size: 13px; font-weight: 650; }
.notif small { color: var(--mut); font-size: 12.5px; }
.notif-text { font-size: 14px; line-height: 1.35; color: var(--mut); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.notif.noua .notif-text { color: var(--ink); }
.notif-punct { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); flex: none; }
.notif > svg.ic { width: 18px; height: 18px; color: var(--dim); }

/* documentul: foaia A4, albă, cu panoul de acțiuni alături; pe hârtie rămâne numai foaia */
.doc-ecran { display: grid; grid-template-columns: minmax(0, 210mm) minmax(260px, 1fr); gap: 16px; align-items: start; }
.doc-foaie { background: #fff; color: #1b2430; border-radius: 6px; padding: 18mm 18mm 14mm; min-height: 270mm; display: flex; flex-direction: column; font-size: 14px; line-height: 1.55; }
.main .doc-foaie p { max-width: none; }
.doc-antet { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #318bf0; }
.doc-antet img { height: 34px; width: auto; }
.doc-firma { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 11.5px; color: #4a5565; line-height: 1.45; }
.doc-firma b { color: #1b2430; font-size: 12.5px; }
.doc-panou .actiuni { margin: 10px 0; }
.lista-istoric { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.lista-istoric li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.lista-istoric li:last-child { border-bottom: 0; }
.lista-istoric span { color: var(--mut); font-size: 12.5px; }
.lista-istoric .ist-det { color: var(--ink); font-size: 13px; margin-top: 2px; }

@media (max-width: 1279px) {
  .doc-ecran { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .doc-foaie { padding: 22px 16px; min-height: 0; font-size: 13px; }
  .doc-antet { flex-direction: column; }
  .doc-firma { align-items: flex-start; text-align: left; }
  .segment { display: flex; }
  .segment label { flex: 1; }
  .segment span { text-align: center; }
}
.main .camp.camp-lat { max-width: 80ch; }

/* cui se adresează */
fieldset.pentru { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.pentru legend { font-size: 13px; color: var(--mut); font-weight: 550; margin-bottom: 6px; padding: 0; }
.bifa-rol { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); cursor: pointer; font-size: 14px; }
.bifa-rol input { width: 18px; height: 18px; accent-color: var(--acc); margin: 0; }
.bifa-rol:has(input:checked) { border-color: var(--acc); background: var(--acc2); }
.lista-simpla small { color: var(--mut); font-size: 12.5px; }
.cap-pagina .inapoi { margin-bottom: 6px; }
#continut > .mesaj.info { margin-top: 14px; margin-bottom: 0; }
.mesaj.avert + .mesaj, .mesaj + .mesaj.avert { margin-top: 0; }
.main > .mesaj.avert, #continut > .mesaj.avert { margin: 14px 0; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #1b2430; }
  .sb, .top, .nav-jos, .doc-panou, .cap-pagina, .main > .sec, #msg-pagina { display: none !important; }
  .ap, .col { display: block; min-height: 0; }
  .main { padding: 0 !important; }
  .doc-ecran { display: block; }
  .main .doc-ecran { margin-top: 0; }
  .doc-foaie { width: 210mm; min-height: 295mm; border-radius: 0; padding: 16mm 18mm 12mm; font-size: 13.5px; }
  .doc-antet { flex-direction: row; }
  .doc-firma { align-items: flex-end; text-align: right; }
}

/* ——— versiunile (punctul 0): banda „Actualizează”, rezumatul și „Ce e nou” ——— */
.sus-versiune { padding: 20px 32px 0; }
.sus-versiune:empty { display: none; }
.sus-versiune + .main { padding-top: 16px; }
/* Banda de versiune: un singur bloc, pe toată lățimea conținutului; textul la stânga, butonul unic la dreapta. */
.versiune-bloc { display: flex; align-items: center; gap: 12px 24px; background: var(--acc2); border: 1px solid #1d3a5c; border-left: 4px solid var(--acc); border-radius: 14px; padding: 14px 16px 14px 18px; }
.versiune-bloc .vb-t { flex: 1; min-width: 0; }
.versiune-bloc .vb-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
/* „Vezi tot”: buton mic, secundar (`.btn.mic`), sub butonul principal. */
.versiune-bloc .vb-tot { align-self: stretch; justify-content: center; }
.versiune-bloc .vb-nou { margin: 6px 0 0; color: var(--mut); font-size: 13.5px; }
.versiune-bloc .vb-nou b { color: var(--acc-t); font-weight: 650; }
.versiune-bloc .rv-cap b { color: var(--acc-t); }
.versiune-bloc p, .versiune p { margin: 4px 0 6px; }
.versiune-bloc ul, .versiune ul { margin: 0 0 4px; padding-left: 20px; color: var(--ink); font-size: 14px; }
.versiune-bloc li, .versiune li { margin: 3px 0; }
/* Textele de citit („Ce e nou”, rezumatul versiunii de pe Tablou) țin toată lățimea cardului și sunt justificate, cu
   despărțire în silabe (pagina are lang="ro"), ca să nu rămână goluri mari (Cosmin, 06.10.2026 ~16:35: „vezi aici
   textul, pe toata pagina, justify”). Pe ecran îngust (sub 600 px) rămân aliniate la stânga, ca documentul cererii. */
.text-lung p, .text-lung li { max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 599px) {
  .text-lung p, .text-lung li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}
/* O versiune de reparații și finisaje: un rând discret, fără lista noutăților. */
.versiune-bloc.discret { padding: 8px 10px 8px 14px; border-left-width: 2px; border-radius: 10px; background: transparent; }
.versiune-bloc.discret .vb-discret { margin: 0; color: var(--mut); font-size: 13.5px; max-width: none; }
.versiune-bloc.discret .vb-discret b { color: var(--ink); font-weight: 650; }
.versiune-bloc.discret .vb-act { flex-direction: row; }
.rv-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rv-cap > span:last-child { color: var(--mut); font-size: 13px; }
.rv-cap h2 { font-size: 17px; }
.versiuni { display: grid; gap: 14px; }
.versiuni .panou + .panou { margin-top: 0; }
@media (max-width: 899px) {
  .sus-versiune { padding: 14px 16px 0; }
  .versiune-bloc { flex-direction: column; align-items: stretch; }
  .versiune-bloc .vb-act { flex-direction: row; align-items: center; justify-content: space-between; }
  .versiune-bloc .vb-act .btn { flex: 1; justify-content: center; }
  .versiune-bloc .vb-act .vb-tot { flex: none; }
}
@media print {
  .sus-versiune { display: none !important; }
}

/* ——— pagina „Concedii”: filele, rândurile „de făcut”, rezumatul de pe Tablou ——— */
.file-pagina { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.fila { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border-radius: 9px; color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fila:hover { background: var(--card); color: var(--ink); }
.fila.on { background: var(--acc2); color: var(--acc-t); box-shadow: inset 0 0 0 1px #1d3a5c; }
.fila:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.fila-nr { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 11.5px; font-weight: 700; }
@media (max-width: 899px) {
  .file-pagina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila { justify-content: center; padding: 6px 8px; min-width: 0; }
  .fila span:first-child { overflow: hidden; text-overflow: ellipsis; }
}

/* ——— felia 6: „?” (ajutorul), „Vezi ca”, notificările pe telefon, manualul ——— */
.hi .ajutor, h2 .ajutor { margin-left: 10px; vertical-align: middle; }
.ajutor { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--mut); border: 1px solid var(--line2); background: var(--soft); text-decoration: none; }
.ajutor svg.ic { width: 18px; height: 18px; }
.ajutor:hover, .ajutor:focus-visible { color: var(--acc-t); border-color: var(--acc); outline: none; }
/* ⓘ (H.info): explicația scurtă a unei pagini, a unui card sau a unui câmp, la apăsare, nu pe pagină */
.info-b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px 0 -4px 6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut); cursor: pointer; vertical-align: middle; flex: none; font: inherit; }
.info-b svg.ic { width: 18px; height: 18px; }
.info-b:hover, .info-b[aria-expanded="true"] { color: var(--acc-t); background: var(--soft); }
.info-b:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--acc); }
.info-panou { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--soft); color: var(--mut); font-size: 14px; line-height: 1.5; max-width: 80ch; font-weight: 400; }
/* Eticheta „Beta” (cochilia, `aplicatie.js`): pe titlul paginii și pe capul unei bucăți, un buton-ⓘ cu cuvântul alături (16 px,
   ca restul literelor din paginile unde se pune); în bara laterală și în „Meniu”, o pastilă simplă, fiindcă rândul e o legătură. */
.info-b.beta-b { width: auto; height: 30px; gap: 5px; grid-auto-flow: column; padding: 0 8px 0 11px; margin-left: 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--soft); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.info-b.beta-b svg.ic { width: 16px; height: 16px; }
.beta { display: inline-flex; align-items: center; flex: none; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line2); border-radius: 999px; color: var(--mut); font-size: 12px; font-weight: 650; letter-spacing: .03em; line-height: 1.5; text-transform: none; }
.sb-nav a.cu-beta { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 11px; align-items: center; padding-top: 4px; padding-bottom: 4px; }
.sb-nav a.cu-beta svg.ic { grid-row: 1 / 3; }
.sb-nav a.cu-beta > span:not(.beta) { grid-column: 2; align-self: end; }
.sb-nav a > span.beta { grid-column: 2; justify-self: start; align-self: start; margin: 1px 0 0; padding: 0 7px; font-size: 11px; line-height: 1.45; overflow: visible; }
.ap.sb-stransa .sb-nav a.cu-beta { display: flex; }
.ap.sb-stransa .sb-nav .beta { display: none; }
.men-r .beta { margin-left: 0; }
.hi + .info-panou { margin-top: 8px; }
.camp > .info-panou { margin: 6px 0 0; }
.main.litere-mari .info-panou { font-size: 16px; }
.banda-vezi { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 20px 32px 0; background: var(--wip2); color: #f3d7a1; border: 1px solid #4a3b1d; border-left: 4px solid var(--wip); border-radius: 12px; padding: 10px 12px 10px 14px; }
.banda-vezi svg.ic { color: var(--wip); }
.banda-vezi .bv-t { flex: 1; min-width: 200px; font-size: 14px; }
.banda-vezi b { color: var(--ink); }
body.vezi-ca [data-nc="da"] { opacity: .45; cursor: not-allowed; }
/* O parte din aplicație nu s-a încărcat (un modul fără fișierul lui): banda de pe fiecare ecran și mesajul de pe pagina
   modulului, amândouă cu „Reîncarcă”. */
.banda-incarcare { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 20px 32px 0; background: var(--wip2); color: #f3d7a1; border: 1px solid #4a3b1d; border-left: 4px solid var(--wip); border-radius: 12px; padding: 10px 12px 10px 14px; }
.banda-incarcare svg.ic { color: var(--wip); }
.banda-incarcare .bi-t { flex: 1; min-width: 200px; font-size: 14px; }
.banda-incarcare b { color: var(--ink); }
.gol.neincarcat { margin-top: 18px; }
.gol.neincarcat .actiuni { margin-top: 12px; }
.push-stare { margin: 0 0 4px; }
.comut { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; max-width: 640px; }
.comut:last-child { border-bottom: 0; }
.comut input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acc); flex: none; }
.comut b { display: block; font-weight: 600; font-size: 14.5px; }
.comut small { display: block; color: var(--mut); font-size: 13px; }
.push-pref fieldset { border: 0; margin: 14px 0 0; padding: 0; }
.push-pref legend { font-size: 13px; color: var(--mut); font-weight: 650; margin-bottom: 4px; padding: 0; }
.push-pref .ore-ajutor { display: block; color: var(--dim); font-size: 12.5px; max-width: 80ch; }
.push-pref .actiuni { margin-top: 16px; }
@media (max-width: 899px) {
  .banda-vezi, .banda-incarcare { margin: 14px 16px 0; }
}
@media print {
  .banda-vezi, .banda-incarcare, .ajutor, .info-b, .info-panou { display: none !important; }
}

/* Confirmarea unei scrieri (toast): jos în dreapta pe calculator, deasupra barei de jos pe telefon. Reușita dispare după
   ~3 secunde; eroarea rămâne până o închizi. */
.toast-loc { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); border: 1px solid var(--line2); background: var(--card); color: var(--ink); }
.toast svg.ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast.ok { border-color: #1f5a41; background: var(--ok2); }
.toast.ok svg.ic { color: var(--ok); }
.toast.err { border-color: #5a2a2e; background: var(--err2); color: #f5c2c5; }
.toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-inchide { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; min-width: 32px; min-height: 32px; }
.btn[data-se-salveaza] { opacity: .75; cursor: progress; }
@media (max-width: 899px) {
  .toast-loc { left: 16px; right: 16px; bottom: calc(84px + var(--jos)); max-width: none; transform: translate3d(0, var(--vv-jos, 0px), 0); }
}
@media print {
  .toast-loc { display: none; }
}
/* Numai pe iPhone și iPad (`-webkit-touch-callout` există numai acolo), în aplicația instalată: la deschidere, iOS poate
   socoti fereastra de așezare mai scurtă decât ecranul cu înălțimea zonei sigure de sus, iar o pagină scurtă lasă bara de
   jos mai sus, cu gol sub ea. Documentul cu atât mai înalt îl face să recalculeze. În Safari și pe orice alt aparat regula
   nu se aplică. Presupunere nemăsurată pe navă (nu există WebKit): o confirmă sau o infirmă un iPhone. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }
  }
}
/* Tabelul zilelor pe fel are 7 coloane: pe telefon se derulează în el, nu pagina. */
.tabel-derulare { overflow-x: auto; max-width: 100%; }

/* ——— Tabloul „Lista zilei” (varianta A din machetă) ———
   Sus „Ce te așteaptă” pe toată lățimea; dedesubt două coloane: avizierul ca listă în stânga, back-up-ul, cine lipsește
   și deciziile noi în dreapta. Sub 1100 px, o singură coloană, în aceeași ordine. */
/* legătura din capul unei părți e un buton mic (regula butoanelor), nu text colorat */
.sec-leg { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sec-leg > a.btn { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; min-height: 32px; padding: 4px 10px; gap: 4px; }
.sec-leg > a.btn svg.ic { width: 16px; height: 16px; }

/* ——— unealta Contracte-cadru ——— */
.opt { font-style: normal; color: var(--dim); font-weight: 500; }
/* Capul ecranelor Contracte-cadru (Cosmin, 07.10.2026: „sus in dreapta, un mic aspect de design”): titlul pe primul rând,
   cu butoanele la dreapta pe același rând, explicația dedesubt. Sub 900 px butoanele vin sub titlu, pe toată lățimea.
   Între cap și ce urmează rămân 18 px, ca la celelalte ecrane ale uneltei (foaia contractului și panoul „Stare” se
   lipeau de cap). */
.cap-pagina.cap-rand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: center; }
.cap-rand > div:first-child { display: contents; }
.cap-rand > div:first-child > .hi { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.cap-rand > div:first-child > .sub { grid-column: 1; grid-row: 2; }
.cap-rand > div:first-child > .info-panou { grid-column: 1 / -1; grid-row: 4; }
.cap-rand > .actiuni { grid-column: 2; grid-row: 1; justify-content: flex-end; }
@media (max-width: 899px) {
  .cap-pagina.cap-rand { grid-template-columns: minmax(0, 1fr); }
  .cap-rand > .actiuni { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 12px; }
}
.ctr-ecran { margin-top: 18px; }
.ctr-lista { display: flex; flex-direction: column; }
.ctr-r { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.ctr-r:last-child { border-bottom: 0; }
.ctr-r:hover .ctr-c b { color: var(--acc-t); }
.ctr-r:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.ctr-nr { font-family: var(--mono); font-weight: 700; font-size: 13px; background: var(--soft); border: 1px solid var(--line2); border-radius: 8px; padding: 3px 8px; min-width: 64px; max-width: 40%; text-align: center; flex: none; overflow-wrap: anywhere; }
.ctr-r .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--acc2); color: var(--acc-t); display: grid; place-items: center; flex: none; }
.ctr-r .ico svg.ic { width: 18px; height: 18px; }
.ctr-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctr-c b { font-weight: 650; overflow-wrap: anywhere; }
.ctr-c small { color: var(--mut); font-size: 12.5px; overflow-wrap: anywhere; }
.ctr-nimic { padding: 8px 4px 0; }
.ctr-titlu { text-align: center; font-size: 19px; font-weight: 700; margin: 22px 0 14px; color: #1b2430; }
.ctr-tabel { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 12.5px; }
.ctr-tabel th, .ctr-tabel td { border: 1px solid #c5cdd8; padding: 6px 8px; text-align: left; vertical-align: top; }
.ctr-tabel th { background: #eef1f5; font-weight: 700; }
.ctr-desc { margin: 10px 0; }
.ctr-date { margin-top: 4px; }
@media (max-width: 1279px) {
  .ctr-ecran .ctr-panou { order: -1; }
}
@media screen and (max-width: 599px) {
  .ctr-r { flex-wrap: wrap; gap: 8px 12px; }
  .ctr-r .ctr-c { flex-basis: calc(100% - 90px); }
}
.btn.mare { min-height: 52px; font-size: 16px; padding: 12px 22px; }
.btn.oprit { opacity: .55; pointer-events: none; }
.toast .btn.mic { flex: none; min-height: 34px; }

/* Nicio literă sub 16 px pe ecranele Sarcini și ale inventarului (clasa `litere-mari` pe `.main`, pusă de `cadru()` pe
   secțiunea Sarcini). Proba inventarului măsoară fiecare nod de text vizibil din `#continut` și mesajele de jos. */
.main.litere-mari .sub, .main.litere-mari small, .main.litere-mari .btn, .main.litere-mari .btn.mic, .main.litere-mari .mesaj, .main.litere-mari .mesaj.avert, .main.litere-mari .camp > label, .main.litere-mari .camp > span, .main.litere-mari .camp small, .main.litere-mari .camp input, .main.litere-mari .camp select, .main.litere-mari .camp textarea, .main.litere-mari .gol, .main.litere-mari .gol b, .main.litere-mari .sec, .main.litere-mari .rand-date, .main.litere-mari kbd, .main.litere-mari .chip { font-size: 16px; }
.main.litere-mari .sec { letter-spacing: .02em; }
body:has(.main.litere-mari) .toast, body:has(.main.litere-mari) .toast .btn.mic { font-size: 16px; }
/* Pe telefon, banda „Ce e nou” nu împinge lista de numărat sub primul ecran: rămân titlul, rezumatul și butoanele; lista
   noutăților e la „Vezi tot”. */
.main.litere-mari .av { width: 34px; height: 34px; font-size: 16px; }
/* Pe telefon (sub 600 px), banda „Ce e nou” e strânsă pe TOATE ecranele: rămân titlul și butoanele; rezumatul și
   noutățile sunt la „Vezi tot”. Întreagă, banda ținea 481 px din 844 și împingea sub bara de jos primul lucru de făcut
   de pe Tablou (caseta sarcinii active) și lista de numărat. Până la 10.10.2026 regula era numai a ecranelor Sarcini.
   Textele benzii nu se schimbă, iar de la 600 px în sus banda rămâne întreagă. */
@media (max-width: 599px) {
  .versiune-bloc.rezumat-versiune .vb-t > p, .versiune-bloc.rezumat-versiune ul { display: none; }
  .versiune-bloc { padding: 8px 12px; gap: 6px; }
  /* mai joasă cu ~18 px: la Gestiune, pe 390, primul rând al inventarului ieșea cu 6 px sub bara de jos */
  .sus-versiune { padding-top: 8px; }
  .sus-versiune + .main { padding-top: 10px; }
  /* tema versiunii („— Navigarea pe secțiuni”) ar trece titlul benzii pe două rânduri: aici rămâne numai numele */
  .versiune-bloc .vb-tema { display: none; }
  .versiune-bloc .vb-act .btn { min-height: 40px; }
}
/* un mesaj al inventarului poate apărea pe orice ecran (cifrele rămase pe calculator): tot 16 px */
.toast.inv, .toast.inv .btn.mic { font-size: 16px; }
.toast.inv a.btn.mic { flex: none; min-height: 34px; text-decoration: none; }
/* câmpul de căutare comun (cochilie/camp-cautare.js): câmpul, „… nou” înaintea listei, lista de rezultate, starea */
.cc { max-width: 640px; }
.cc .camp { margin-bottom: 10px; }
.cc-nou { margin-bottom: 0; }
.cc-stare:empty { display: none; }
.cc-stare .sub { margin: 12px 0 10px; font-size: 16px; }
.cc-stare .mesaj { margin: 12px 0 10px; font-size: 16px; }
.cc-lista { display: flex; flex-direction: column; margin: 12px 0 10px; }
.cc-lista[hidden] { display: none; }
.cc-rand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; min-height: 48px; color: var(--ink); cursor: pointer; font: inherit; font-size: 16px; }
.cc-rand:hover, .cc-rand.activ { border-color: var(--acc); }
.cc-rand.activ { background: var(--soft); }
.cc-rand:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.cc-rand b { overflow-wrap: anywhere; font-weight: 650; }
.cc-rand small { color: var(--mut); overflow-wrap: anywhere; font-size: 16px; }
.cc-rand[aria-disabled="true"] { opacity: .6; cursor: default; }
/* Semnul de atenție al unui client în alegerile din câmpul comun: iconița roșie lângă nume, motivul în linia de detaliu */
.cc-atentie { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--err); }
.cc-atentie svg.ic { width: 18px; height: 18px; }
.cc-atentie-motiv { color: var(--err); }
.cc-rand.ales { border-color: var(--acc); background: var(--acc2); }
.cc-mai:empty { display: none; }
.cc-mai .sub { margin: 0 0 10px; font-size: 16px; }
.cc-nou .btn.mic { min-height: 44px; font-size: 16px; }
/* Paginile, sub listă (`H.paginiHtml`, `cochilie/nucleu.js`): aceleași la Clienți și la Catalog. Pe calculator: „‹ 1 2 3 … 9 ›”, cu ce
   rânduri se văd și câte pe pagină alături. Pe telefon: „Înapoi” și „Înainte” mari, cu „pagina 2 din 3” între ele, iar dedesubt
   rândurile și mărimea. Literele, de 16 px. */
.evd-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; }
.evd-pg-nr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.evd-pg-nr a, .evd-pg-nr .evd-pg-sag, .evd-pg-gol { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.evd-pg-nr a { border: 1px solid var(--line2); background: var(--soft); }
.evd-pg-nr a:hover { border-color: var(--acc); }
.evd-pg-nr a:focus-visible, .evd-pg-tel a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.evd-pg-nr a.evd-pg-on { background: var(--acc); border-color: var(--acc); color: #fff; }
.evd-pg-nr .evd-pg-sag svg.ic, .evd-pg-tel .btn svg.ic { width: 18px; height: 18px; }
.evd-pg-oprit { opacity: .4; pointer-events: none; }
.evd-pg-gol { min-width: 24px; padding: 0; color: var(--mut); }
.evd-pg-jos { display: flex; align-items: center; gap: 12px 16px; margin-left: auto; color: var(--mut); }
.evd-pg-cate { white-space: nowrap; font-size: 16px; }
.evd-pg-jos select { background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 16px; color: var(--ink); }
.evd-pg-tel { display: none; }
@media (max-width: 899px) {
  .evd-pg { display: block; }
  .evd-pg-nr, .evd-pg-lat { display: none; }
  /* cele trei bucăți încap în cardul listei și la 375 px: butoanele se strâng (`minmax(0, 1fr)`), nu ies din card
     (până pe 17.10.2026 „Înainte” ieșea din card la 390 px) */
  .evd-pg-tel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .evd-pg-tel .btn { min-height: 48px; font-size: 16px; width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; justify-content: center; }
  .evd-pg-unde { text-align: center; white-space: nowrap; font-size: 16px; color: var(--mut); }
  .evd-pg-jos { margin: 14px 0 0; justify-content: space-between; }
  .evd-pg-jos select { min-height: 44px; }
}
/* selectorul de dată comun (cochilie/data-zi.js, `H.selectorData`): câmpul de tastat zz.ll.aaaa cu butonul calendarului și calendarul. Mărimile sunt în px,
   literele de 16 px (telefonul nu mărește pagina), iar ținta de atingere de 44 px; pe calculator zilele au 38 px. Calendarul stă deasupra ecranelor pe tot ecranul (900). */
.sdt, .camp > span.sdt { display: block; position: relative; min-width: 0; margin: 0; font-weight: 400; color: var(--ink); font-size: 16px; }
.sdt-cutie { display: block; position: relative; }
.sdt .sdt-text { width: 100%; min-height: 44px; font-size: 16px; padding: 9px 48px 9px 12px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; outline: none; font-variant-numeric: tabular-nums; }
.sdt .sdt-text:hover { border-color: var(--line2); }
.sdt .sdt-text:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(49, 139, 240, .28); }
.sdt .sdt-text:disabled { opacity: .55; cursor: not-allowed; }
.sdt .sdt-text::placeholder { color: var(--dim); opacity: 1; }
.sdt .sdt-text[aria-invalid="true"] { border-color: var(--err); }
.sdt .sdt-text[aria-invalid="true"]:focus { border-color: var(--err); box-shadow: 0 0 0 3px var(--err2); }
.sdt-buton { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 0; border-radius: 10px; color: var(--dim); cursor: pointer; }
.sdt-buton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sdt-buton:hover { color: var(--acc-t); }
.sdt-buton:focus-visible, .sdt-buton[aria-expanded="true"] { outline: none; color: var(--acc-t); box-shadow: 0 0 0 3px rgba(49, 139, 240, .28); }
.sdt-buton:disabled { opacity: .55; cursor: not-allowed; }
.sdt-mesaj { display: block; font-size: 16px; line-height: 1.35; color: var(--err); }
.sdt-mesaj:empty { display: none; }
.sdt-mesaj:not(:empty) { margin-top: 4px; }

.sdt-panou { position: fixed; z-index: 940; display: flex; flex-direction: column; overflow: auto; background: var(--soft); box-sizing: border-box;
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font-size: 16px; color: var(--ink); padding: 8px; overscroll-behavior: contain; }
.sdt-cap { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.sdt-titlu { flex: 1; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 16px; font-weight: 600; text-align: center; color: var(--ink);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-transform: capitalize; }
.sdt-titlu-an { display: flex; align-items: center; justify-content: center; cursor: default; }
button.sdt-titlu:hover { background: var(--hover); }
.sdt-nav { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent;
  border: 0; border-radius: 8px; color: var(--mut); cursor: pointer; }
.sdt-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sdt-nav:hover { background: var(--hover); }
.sdt-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sdt-tab th { height: 28px; padding: 0; font-size: 16px; font-weight: 600; color: var(--dim); text-align: center; }
.sdt-tab th abbr { text-decoration: none; cursor: default; }
.sdt-tab td { padding: 0; text-align: center; }
.sdt-zi { width: 100%; max-width: 44px; height: 44px; margin: 0 auto; padding: 0; display: block; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.sdt-zi:hover { background: var(--hover); }
.sdt-zi.sdt-alta { color: var(--dim); }
.sdt-zi.sdt-azi { border-color: var(--acc); }
.sdt-zi.sdt-ales, .sdt-zi.sdt-ales:hover { background: var(--acc2); border-color: var(--acc); color: var(--acc-t); font-weight: 700; }
.sdt-zi.sdt-stins, .sdt-luna.sdt-stins, .sdt-fapta[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.sdt-zi.sdt-stins:hover, .sdt-luna.sdt-stins:hover { background: transparent; }
.sdt-luni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sdt-luna { min-height: 48px; padding: 0 6px; font-size: 16px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.sdt-luna:hover { background: var(--hover); }
.sdt-luna.sdt-curent { border-color: var(--acc); font-weight: 600; }
.sdt-jos { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sdt-fapta { min-height: 44px; padding: 0 14px; font-size: 16px; font-weight: 600; color: var(--acc-t); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.sdt-fapta:hover { background: var(--hover); }
.sdt-panou button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .sdt-zi { height: 38px; }
  .sdt-nav, .sdt-titlu { height: 40px; min-height: 40px; }
  .sdt-fapta { min-height: 38px; }
}