/*
  Stilurile aplicației — doar așezare în pagină. Tot ce ține de aspectul componentelor stă în
  Rsic.Mud. Aici, ca și acolo, nicio culoare și nicio dimensiune scrisă direct: numai tokenuri.
*/

/*
  Învelișul aplicației interne: meniul lateral pe o coloană fixă, conținutul pe restul, ca în
  machete. Fundalul este tonul „subtle”, ca suprafețele albe — carduri, tabele — să se ridice de pe
  el. Sub 1280 px (CNF174) meniul se pliază în panou (regula stă în mud.css), iar conținutul ia tot
  rândul.
*/
.rsic-shell {
  display: grid;
  grid-template-columns: var(--size-sidenav) minmax(0, 1fr);
  align-items: stretch;
  background: var(--bg-subtle);
  min-block-size: calc(100vh - var(--size-topbar));
}

@media (max-width: 79.99rem) {
  .rsic-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Meniul rămâne la vedere cât derulează conținutul; înălțimea lui este a ferestrei, nu a paginii. */
@media (min-width: 80rem) {
  .rsic-shell > .mud-sidenav {
    position: sticky;
    inset-block-start: var(--size-topbar);
    block-size: calc(100vh - var(--size-topbar));
    overflow-y: auto;
  }
}

.rsic-shell__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  inline-size: 100%;
  max-inline-size: 90rem;
  margin-inline: auto;
  padding: var(--space-24) var(--space-32) var(--space-48);
}

/* Subsolul se lipește de înveliș: golul alb dintre fundalul „subtle” și subsol arăta a ruptură. */
.rsic-shell + .mud-footer {
  margin-block-start: 0;
}

/* Ținta legăturii de salt este focalizată din cod; inelul propriu al paginii ar fi de prisos. */
.rsic-shell__main:focus {
  outline: none;
}

.rsic-shell__main:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Marca aplicației interne: dală de brand cu sigla, numele alături. */
.rsic-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-32);
  block-size: var(--space-32);
  padding-inline: var(--space-6);
  border-radius: var(--radius-8);
  background: var(--bg-brand);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-wide);
}

.rsic-brand__name {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
}

.mud-topbar .rsic-brand {
  align-items: center;
}

@media (max-width: 64rem) {
  /* Sub lățimea unei ferestre împărțite în două, numele lung lasă loc căutării. */
  .mud-topbar .rsic-brand__name {
    display: none;
  }
}

/* ── Căutarea rapidă din bara de sus ──────────────────────────────────────────────────────── */

.rsic-cautare {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: var(--space-40);
  padding-inline: var(--space-12);
  border: var(--border-width-1) solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

/* Inelul de focus stă pe pastilă, nu pe câmpul din ea: câmpul nu are chenar propriu. */
.rsic-cautare:focus-within {
  border-color: var(--border-brand);
  background: var(--bg-default);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.rsic-cautare__icon {
  flex: none;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

.rsic-cautare__camp {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-default);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.rsic-cautare__camp:focus {
  outline: none; /* inelul stă pe pastila-părinte, prin :focus-within — nu se pierde, se mută */
}

.rsic-cautare__camp::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

/* ── Meniul de cont din bara de sus ───────────────────────────────────────────────────────── */

.profil {
  position: relative;
}

.profil__buton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: var(--space-40);
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
}

.profil__buton:hover {
  background: var(--bg-default-hover);
}

.profil__nume {
  max-inline-size: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 64rem) {
  .profil__nume {
    display: none;
  }
}

.profil__sageata {
  flex: none;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  color: var(--text-tertiary);
}

.profil__panou {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  inline-size: 18rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-12);
  background: var(--bg-default);
  box-shadow: var(--shadow-raised);
}

.profil__antet {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.profil__identitate {
  min-inline-size: 0;
}

.profil__nume-panou {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.profil__rol {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.profil__separator {
  margin: 0;
  border: 0;
  border-block-start: var(--border-width-1) solid var(--border-default);
}

/* Galeria de componente. Există doar în mediul de dezvoltare. */
.galerie__rand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.galerie__coloana {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-inline-size: 40rem;
}

/* ── Fișa cazului ─────────────────────────────────────────────────────────────────────────── */

.fisa__atribute {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: var(--space-8) var(--space-24);
  margin: 0;
}

.fisa__atribute dt { color: var(--text-secondary); }
.fisa__atribute dd { margin: 0; }

.fisa__descriere {
  margin-block-start: var(--space-24);
  max-inline-size: 60rem;
}

/*
  Ecranele de caz: coloana principală și panoul lateral de metadate, ca în machete. Panoul rămâne la
  vedere cât derulează coloana; sub lățimea unei ferestre împărțite în două, coboară sub conținut.
*/
.fisa__aranjament {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-aside);
  gap: var(--space-24);
  align-items: start;
}

@media (max-width: 63.99rem) {
  .fisa__aranjament {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fisa__principal {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-inline-size: 0;
}

.fisa__panou {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: sticky;
  inset-block-start: calc(var(--size-topbar) + var(--space-16));
}

/* Cardurile panoului lateral sunt mai strânse decât cele din coloana principală. */
.fisa__panou .mud-card__body {
  padding: var(--space-16) var(--space-20);
}

.fisa__panou .mud-card__header {
  padding: var(--space-16) var(--space-20) 0;
}

.fisa__panou .mud-card__header + .mud-card__body {
  padding-block-start: var(--space-12);
}

.fisa__panou .mud-card__title {
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
}

/* Rezultatul evaluării, în panoul lateral: scorul deasupra, sugestia dedesubt. */
.fisa__panou .evaluare__rezultat {
  flex-direction: column;
  gap: var(--space-16);
}

.fisa__panou .mud-stat {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.fisa__termene {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.fisa__panou-participanti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fisa__panou-participanti li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.fisa__panou-participant {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.fisa__panou-rol {
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.fisa__atribute--panou {
  grid-template-columns: minmax(7rem, max-content) 1fr;
  font-size: var(--font-size-14);
}

.fisa__atribute--panou code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-14);
}

/* Listele din detaliile incidentului (CF208 pct. 2, 7, 8): o linie per element, fără JSON brut. */
.fisa__lista {
  margin: 0;
  padding-inline-start: var(--space-16);
}

.fisa__lista li + li { margin-block-start: var(--space-4); }

.fisa__text-lung { white-space: pre-line; }

.fisa__inregistrari,
.fisa__participanti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.fisa__inregistrare {
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
}

/*
  O înregistrare înlocuită rămâne vizibilă și lizibilă. Estomparea ar fi tentantă, dar CF139 cere ca
  dosarul să arate ce s-a știut la fiecare moment: versiunea veche nu este o greșeală de ascuns, ci o
  parte a istoriei. Se distinge printr-un chenar lateral și prin insigna „Înlocuită”, nu prin contrast
  redus — care ar fi și o problemă de accesibilitate (CNF171).
*/
.fisa__inregistrare--inlocuita {
  border-inline-start: var(--border-width-3) solid var(--border-secondary);
  background: var(--bg-subtle);
}

.fisa__inregistrare-antet,
.fisa__inregistrare-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
}

.fisa__inregistrare-tip { font-weight: var(--font-weight-semibold); }

.fisa__inregistrare-meta { color: var(--text-secondary); font-size: var(--font-size-12); }

.fisa__inregistrare-text { margin: 0; white-space: pre-wrap; }

.fisa__participanti li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding-block: var(--space-8);
  border-block-end: var(--border-width-1) solid var(--border-default);
}

.fisa__participanti li > .mud-button { margin-inline-start: auto; }

/* Legătura corecției cu originalul (CF139) și acțiunile de pe o înregistrare. */
.fisa__inregistrare-corectie { color: var(--text-secondary); }

.fisa__inregistrare-actiuni { margin: var(--space-8) 0 0; }

/* Nivelurile TLP din fereastra de marcaj: eticheta lângă explicația ei (CF121, CNF175). */
.fisa__niveluri-tlp {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-8) var(--space-16);
  margin: 0 0 var(--space-16);
}

.fisa__niveluri-tlp dd { margin: 0; color: var(--text-secondary); }

.fisa__devine-public {
  margin: var(--space-8) 0 0;
  padding-inline-start: var(--space-16);
}

/* Atașamentele, cu starea scanării scrisă în cuvinte (CNF148, CNF171). */
.fisa__atasamente {
  list-style: none;
  margin: 0 0 var(--space-16);
  padding: 0;
}

.fisa__atasament {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  padding-block: var(--space-8);
  border-block-end: var(--border-width-1) solid var(--border-default);
}

.fisa__atasament-nume { font-weight: var(--font-weight-semibold); }

.fisa__atasament-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
}

.fisa__atasament-actiuni { margin-inline-start: auto; }

.fisa__atasament-nota { color: var(--text-secondary); font-size: var(--font-size-12); }

/* ── Portalul public ──────────────────────────────────────────────────────────────────────── */

/*
  Portalul este complet responsiv până la 360 px (§12.3), spre deosebire de aplicația internă, care
  are prag minim de 1280 px. Coloana de citit rămâne îngustă: un formular lat de un ecran de 27" este
  greu de parcurs cu ochiul de la o etichetă la câmpul ei.
*/
.rsic-public {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding: var(--space-24) var(--space-16) var(--space-64);
}

.rsic-public__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.rsic-public__main:focus { outline: none; }

.rsic-public__main:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.rsic-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  min-block-size: var(--target-size-min);
  text-decoration: none;
}

/* ── Comutatorul de limbă (CNF172) ────────────────────────────────────────────────────────────
   Trei legături scurte, una lângă alta; fiecare are ținta minimă de 24 px cerută de CNF171, iar
   limba curentă nu este legătură și se distinge prin fundal, nu doar prin culoare. */
.rsic-limba__lista {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsic-limba__legatura,
.rsic-limba__curenta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--target-size-min);
  min-block-size: var(--space-32);
  padding: 0 var(--space-8);
  border-radius: var(--radius-6);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
}

.rsic-limba__legatura {
  color: var(--text-secondary);
  text-decoration: none;
}

.rsic-limba__legatura:hover {
  background: var(--bg-default-hover);
  color: var(--text-default);
}

.rsic-limba__curenta {
  background: var(--bg-brand-subtle);
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
}

/* ── Formulare ────────────────────────────────────────────────────────────────────────────── */

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.formular__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.formular__ciorna {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
}

/*
  Codul de revendicare. Se afișează o singură dată, deci trebuie să fie imposibil de citit greșit:
  monospațiat, spațiat, destul de mare cât să fie transcris de pe ecran fără ezitare (§8.5, CF215).
*/
.fnv__cod {
  margin-block: var(--space-16);
}

.fnv__cod code {
  display: inline-block;
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-2) dashed var(--border-secondary);
  border-radius: var(--radius-8);
  background: var(--bg-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-24);
  letter-spacing: 0.12em;
  user-select: all;
}

/* ── Lista de cazuri și coada de triere ───────────────────────────────────────────────────── */

/*
  Filtrele se așază pe coloane care se strâng singure. Aplicația internă are prag minim de 1280 px
  (CNF174), dar lista se folosește și pe un ecran împărțit în două — de aceea nu se fixează numărul
  de coloane, ci lățimea minimă a unuia.
*/
.lista__filtre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-16) var(--space-24);
  align-items: start;
}

.lista__incarcare {
  padding: var(--space-24);
}

/* Numărul rezultatelor, lângă titlul listei (CNF181). */
.lista__numar {
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
  font-variant-numeric: tabular-nums;
}

/* Bara de filtre este compactă: etichete mici, coloane mai strâmte, totul pe cât mai puține rânduri. */
.lista__filtre {
  gap: var(--space-12) var(--space-16);
  align-items: end;
}

.lista__filtre .mud-field__label {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.lista__filtre .mud-input,
.lista__filtre .mud-select,
.lista__filtre .mud-combobox__input {
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

/* Numărul de caz este ce se copiază și se citează; se distinge de restul rândului. */
.mud-table__cell a {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Titlul unui grup din lista grupată (CU1.07): discret, cu numărul rândurilor lui. */
.lista__grup-titlu {
  margin: var(--space-16) 0 var(--space-8);
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

/* Rândurile filtrelor salvate: controlul și butoanele lui pe o linie, care se frânge singură. */
.lista__filtre-salvate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  align-items: end;
  margin-block-end: var(--space-12);
}

/* Eticheta din fața butoanelor de extragere (CU1.07). */
.lista__export-eticheta {
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
}

/* Lista casetelor din fereastra „Coloane afișate”. */
.lista__coloane {
  display: grid;
  gap: var(--space-8);
}

/* ── Evaluarea CVSS ───────────────────────────────────────────────────────────────────────── */

/*
  Metricile se așază pe coloane care se strâng singure. Sunt unsprezece în v4.0 și opt în v3.1, iar
  o singură coloană le-ar întinde pe două ecrane; un număr fix de coloane, în schimb, s-ar strica la
  fereastra împărțită în două. Se fixează deci lățimea minimă a unei coloane, nu numărul lor.
*/
.evaluare__metrici {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-16) var(--space-24);
  align-items: start;
}

.evaluare__vector {
  margin: 0;
  overflow-wrap: anywhere;
}

.evaluare__vector code {
  display: inline-block;
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-6);
  background: var(--bg-subtle);
  font-family: var(--font-family-mono);
  user-select: all;
}

.evaluare__rezultat {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-32);
}

.evaluare__sugestie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  max-inline-size: 32rem;
}

.evaluare__sugestie-eticheta {
  margin: 0;
  color: var(--text-secondary);
}

.evaluare__sugestie-definitie {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

/* ── Schimbul de documente ────────────────────────────────────────────────────────────────── */

.documente__previzualizare {
  margin-block-start: var(--space-16);
}

.documente__nume {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
}

/*
  Documentul exportat se arată ca atare, cu spațierea lui. Se derulează în propriul chenar: un CSAF
  are câteva sute de rânduri, iar pagina nu are voie să se lungească după el.
*/
.documente__continut {
  margin: 0;
  max-block-size: 24rem;
  overflow: auto;
  padding: var(--space-12);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  background: var(--bg-subtle);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.documente__campuri {
  margin: var(--space-8) 0 0;
  padding-inline-start: var(--space-24);
}

/* ── Condițiile de închidere (CU2.09, CF244) ──────────────────────────────────────────────────
   Starea fiecărei condiții se scrie în cuvinte, nu doar prin culoare: CNF171 cere ca informația
   să nu depindă exclusiv de culoare. Culoarea rămâne, ca ajutor la scanarea vizuală. */
.rsic-conditii {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rsic-conditii__element {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-24);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width-1) solid var(--border-default);
}

.rsic-conditii__nume {
  color: var(--text-default);
}

.rsic-conditii__stare {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.rsic-conditii__stare--da {
  /* „strong”: 4,9:1 la 14 px; --text-positive trece doar pentru text mare (axe, E2E). */
  color: var(--text-positive-strong);
}

/* ── Panoul de bord (CU1.02, CNF186) ──────────────────────────────────────────────────────────
   Elementele se așază pe patru coloane, iar fiecare ocupă câte îi spune aspectul salvat (CNF187).
   Coloanele se strâng singure sub pragul de 1280 px al aplicației interne: chiar dacă acela este
   minimul declarat, o fereastră împărțită în două nu are voie să taie conținutul. */
.panou {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: start;
}

.panou__loc--1 { grid-column: span 1; }
.panou__loc--2 { grid-column: span 2; }
.panou__loc--3 { grid-column: span 3; }
.panou__loc--4 { grid-column: span 4; }

@media (max-width: 75rem) {
  .panou { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panou__loc--3, .panou__loc--4 { grid-column: span 2; }
}

.panou__moment {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

.panou__detaliere {
  font-weight: var(--font-weight-medium);
}

/* Nota care ține locul unei legături absente. Nu este un avertisment — este explicația pentru care
   totalul nu se poate deschide — deci ton secundar, nu de eroare. */
.panou__nota {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

/* Acțiunile rapide se așază ca dale apăsabile, nu ca listă de legături subțiri. */
.panou__legaturi {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.panou__legaturi a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: var(--space-40);
  padding: var(--space-8) var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  background: var(--bg-default);
  color: var(--text-default);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.panou__legaturi a:hover {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--text-brand);
}

/*
  Distribuțiile se randează ca listă de categorii cu bară proporțională, nu ca desen: un grafic fără
  echivalent textual ar purta informația exclusiv prin formă și culoare (CNF171). Bara este marcată
  aria-hidden, fiindcă numărul de lângă ea spune deja același lucru.
*/
.panou__categorii {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.panou__categorie {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--space-12);
}

.panou__categorie-nume {
  overflow-wrap: anywhere;
}

.panou__categorie-numar {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  text-align: end;
}

.panou__bara {
  display: block;
  block-size: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  position: relative;
}

.panou__bara::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--panou-cota, 0%);
  border-radius: var(--radius-full);
  background: var(--bg-brand);
}

/*
  Varianta pe coloane a distribuției („BarChart”): aceleași elemente, în aceeași ordine de citire —
  nume, bară, număr — doar așezate vertical. Ordinea vizuală se schimbă prin „order”, nu prin marcaj,
  ca cititorul de ecran să audă în continuare numele înaintea numărului.
*/
.panou__categorii--coloane {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-16);
  align-items: end;
}

.panou__categorii--coloane .panou__categorie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.panou__categorii--coloane .panou__categorie-nume {
  order: 3;
  text-align: center;
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--text-secondary);
}

.panou__categorii--coloane .panou__categorie-numar {
  order: 1;
  text-align: center;
}

.panou__categorii--coloane .panou__bara {
  order: 2;
  align-self: center;
  inline-size: var(--space-32);
  block-size: calc(var(--space-96) + var(--space-24));
  border-radius: var(--radius-6);
}

.panou__categorii--coloane .panou__bara::before {
  inset-inline: 0;
  inset-block-start: auto;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: var(--panou-cota, 0%);
  border-radius: var(--radius-6);
}

.panou__aspect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.panou__aspect-element {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width-1) solid var(--border-default);
}

.panou__aspect-nume {
  flex: 1 1 16rem;
}

/* ── Divulgarea coordonată (CU2.32, CU2.06) ───────────────────────────────────────────────────
   Confirmările poartă autorul și momentul lor: CF217 cere confirmare expresă, iar „cine a
   confirmat” este chiar informația cerută. De aceea cele trei date stau pe aceeași linie, nu
   ascunse într-un titlu de element. */
.divulgare__confirmari {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.divulgare__confirmare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width-1) solid var(--border-default);
}

.divulgare__parte {
  font-weight: var(--font-weight-semibold);
}

.divulgare__autor {
  color: var(--text-secondary);
}

.divulgare__lipsa {
  margin: var(--space-12) 0 0;
}

.divulgare__termen {
  margin: 0 0 var(--space-8);
}

/*
  Lista din fereastra de confirmare a publicării. Nu este decor: este singurul loc din sistem în care
  se scrie ce anume devine public, înainte de o operațiune care nu se poate întoarce. Spațierea este
  largă tocmai ca lista să fie citită, nu sărită.
*/
.divulgare__devine-public {
  margin: var(--space-12) 0;
  padding-inline-start: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.divulgare__rezumat {
  margin: var(--space-8) 0 0;
  padding: var(--space-8) var(--space-12);
  border-inline-start: var(--border-width-3) solid var(--border-danger);
  background: var(--bg-danger-subtle);
}

/* ── Spațiul registratorului (CU2.33, CU2.34) ─────────────────────────────────────────────────
   Scadența și restul de timp sunt informația pentru care există ecranul: se citesc primele, deci
   se scriu mai mare decât restul. Depășirea are propriul ton, dar și propria propoziție — culoarea
   nu poartă singură informația (CNF171). */
.raportare__scadenta {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-18);
}

.raportare__rest {
  margin: 0 0 var(--space-16);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
}

.raportare__rest--depasit {
  color: var(--text-danger);
  background: var(--deadline-breached-bg);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
}

.raportare__stare {
  margin: 0 0 var(--space-16);
  color: var(--text-secondary);
}

.raportare__evidenta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.raportare__depasiri {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--text-danger);
}

.raportare__repere-titlu {
  margin: var(--space-16) 0 var(--space-8);
  font-size: var(--font-size-16);
}

.raportare__repere {
  list-style: none;
  margin: 0 0 var(--space-16);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.raportare__reper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-6);
}

.raportare__reper--iminent {
  background: var(--deadline-imminent-bg);
}

.raportare__reper--depasit {
  background: var(--deadline-breached-bg);
}

.raportare__reper-nume {
  flex: 1 1 16rem;
}

.raportare__reper-stare {
  font-weight: var(--font-weight-medium);
}

/* ── Portalul public (CU3.09, CU3.10) ─────────────────────────────────────────────────────────
   Singurul loc din sistem văzut de cineva fără cont, și singurul complet responsiv până la 360 px
   (§12.3). Nimic nu se așază pe coloane fixe: fluxul este o listă, iar filtrele se strâng singure. */
.portal__filtre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-16) var(--space-24);
  align-items: start;
}

.portal__flux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/*
  Fiecare element este un articol de sine stătător, nu un rând de tabel: pe 360 px un tabel cu șase
  coloane nu se poate citi, iar portalul trebuie să funcționeze acolo.
*/
.portal__articol {
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  background: var(--bg-default);
}

.portal__eticheta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
}

.portal__titlu {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
}

.portal__rezumat {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
}

.portal__moment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
}

.portal__limba {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--bg-brand-secondary);
  color: var(--text-brand);
}

/*
  Textul unui material se randează ca text, nu ca marcaj: conținutul vine din baza de date, iar o
  randare ca HTML ar face din fiecare material publicat un vector de script (§14.3). Spațierea
  scrisă de autor se păstrează aici, prin CSS.
*/
.portal__text {
  margin-block: var(--space-12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal__legaturi,
.portal__fisiere,
.portal__seturi,
.portal__inregistrari,
.portal__istorie {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.portal__fisiere li,
.portal__intrare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
}

.portal__marime {
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
}

.portal__inregistrare {
  padding: var(--space-12) 0;
  border-bottom: var(--border-width-1) solid var(--border-default);
}

.portal__atribute {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--space-8) var(--space-24);
  margin: 0;
}

.portal__atribute dt {
  color: var(--text-secondary);
}

.portal__atribute dd {
  margin: 0;
}

.portal__indicatori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-24);
}

.portal__set {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width-1) solid var(--border-default);
}

.portal__set-nume {
  flex: 1 1 14rem;
  font-weight: var(--font-weight-medium);
}

.portal__set-cod {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}

.portal__set-formate {
  display: flex;
  gap: var(--space-12);
}

/* Sub pragul de 360 px al portalului, atributele trec pe un singur rând per pereche. */
@media (max-width: 30rem) {
  .portal__atribute { grid-template-columns: 1fr; gap: var(--space-4) 0; }
  .portal__atribute dd { margin-block-end: var(--space-8); }
}

/* Extragerea datelor unui element de panou (CNF188). Formatele stau lângă legătura de detaliere:
   sunt aceleași numere, o dată deschise în listă și o dată scoase într-un fișier. */
.panou__extragere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.panou__extragere-eticheta {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  margin-inline-end: var(--space-4);
}

/* ── Trierea alertelor (CU1.01, CU1.07, CF107–CF110) ─────────────────────────────────────────
   Butoanele de decizie stau pe rând, unul lângă altul; raportul trierii în masă se citește ca listă,
   element cu element, cu eșecurile înaintea reușitelor. */
/* În celula de acțiuni butoanele stau unul sub altul: trei butoane pe orizontală ar lăți coloana
   dincolo de marginea tabelului la 1440 px (constatare din capturile de verificare). */
.triere__actiuni {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.mud-table__cell .triere__actiuni .mud-button {
  justify-content: flex-start;
  /* Eticheta lungă („Degenerează în incident”) se împachetează pe două rânduri, nu iese din tabel. */
  white-space: normal;
  text-align: start;
}

.triere__totaluri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-16);
  margin-block-end: var(--space-16);
}

.triere__subtitlu {
  margin: var(--space-16) 0 var(--space-8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.triere__raport {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.triere__element {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-6);
}

/* Eșecul se distinge prin chenar și prin motivul scris, nu doar prin culoare (CNF171). */
.triere__element--esuat {
  border-inline-start: var(--border-width-3) solid var(--border-danger);
  background: var(--bg-danger-subtle);
}

.triere__element--reusit {
  border-inline-start: var(--border-width-3) solid var(--border-positive);
}

.triere__motiv {
  color: var(--text-secondary);
}

.triere__anunt {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

/* ── Completarea notificării din oficiu (CF224, CF226, CF227) ──────────────────────────────── */

.din-oficiu__casete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-8) var(--space-24);
  margin: 0 0 var(--space-16);
  padding: 0;
  border: 0;
}

.din-oficiu__casete legend {
  margin-block-end: var(--space-8);
  font-weight: var(--font-weight-semibold);
}

.din-oficiu__termen {
  margin: 0 0 var(--space-8);
  font-weight: var(--font-weight-semibold);
}

.din-oficiu__subtitlu,
.material__subtitlu {
  margin: var(--space-16) 0 var(--space-8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.din-oficiu__completari,
.material__cazuri,
.material__statistici,
.material__referinte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.din-oficiu__completare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-6);
}

.din-oficiu__camp { font-weight: var(--font-weight-semibold); }

.din-oficiu__sursa { color: var(--text-secondary); }

/* ── Redactarea materialelor și contextul de feedback (CU3.09, CF312) ─────────────────────── */

.material__agregat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.material__caz {
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
}

.material__caz-numar {
  margin: 0 0 var(--space-8);
  font-weight: var(--font-weight-semibold);
}

.material__indisponibil { color: var(--text-secondary); margin: 0; }

/* Ajutorul contextual al unui card: explicația de sub titlu, înaintea câmpurilor (CNF175). */
.rsic-ajutor {
  color: var(--text-secondary);
  margin: 0 0 var(--space-16);
}

/* ── Centrul de notificări și clopoțelul (§9.4, CF124, CNF184) ────────────────────────────── */

.notificari__lista,
.notificari__abonari,
.clopotel__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.notificari__rand,
.notificari__abonare {
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
}

/* Necititul poartă greutatea rândului nou din CNF184; eticheta textuală rămâne (CNF171). */
.notificari__rand--necitit .notificari__caz,
.notificari__rand--necitit .notificari__eveniment,
.clopotel__rand--necitit .clopotel__caz,
.clopotel__rand--necitit .clopotel__eveniment {
  font-weight: var(--row-new-weight);
}

/* Necititul se vede și din chenarul lateral, nu doar din greutate; eticheta textuală rămâne (CNF171). */
.notificari__rand--necitit {
  border-inline-start: var(--border-width-3) solid var(--border-brand);
  background: var(--bg-brand-subtle);
}

.notificari__rand {
  background: var(--bg-default);
}

.notificari__reper,
.notificari__meta,
.notificari__abonare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.notificari__subiect { margin: var(--space-8) 0; }

.notificari__moment,
.clopotel__moment {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
}

.clopotel { position: relative; }

.clopotel__buton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: none;
  border: 0;
  padding: var(--space-8);
  color: inherit;
  cursor: pointer;
}

.clopotel__buton:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.clopotel__icon { inline-size: 1.5em; block-size: 1.5em; }

.clopotel__numar {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--bg-brand);
  color: var(--text-on-brand, var(--bg-default));
}

.clopotel__panou {
  position: absolute;
  inset-inline-end: 0;
  inline-size: 24rem;
  max-inline-size: 90vw;
  padding: var(--space-12);
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-popover);
  z-index: 1;
}

.clopotel__rand {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-8);
  padding: var(--space-8) 0;
  border-block-end: var(--border-width-1) solid var(--border-default);
}

.clopotel__stare,
.clopotel__gol { color: var(--text-secondary); font-size: var(--font-size-12); }

.clopotel__toate { display: inline-block; margin-block-start: var(--space-8); }

/* ── Planul calendaristic (CU2.31, CF915–CF919) ───────────────────────────────────────────── */

.plan__antet,
.plan__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.plan__subtitlu,
.rapoarte__subtitlu {
  margin: var(--space-24) 0 var(--space-8);
  font-size: var(--font-size-16);
}

.plan__moment {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
}

.plan__moment--depasit { color: var(--text-danger); }

.plan__repere,
.plan__termene,
.rapoarte__tabel {
  inline-size: 100%;
  border-collapse: collapse;
}

.plan__repere th,
.plan__repere td,
.plan__termene th,
.plan__termene td,
.rapoarte__tabel th,
.rapoarte__tabel td {
  padding: var(--space-8) var(--space-12);
  text-align: start;
  border-block-end: var(--border-width-1) solid var(--border-default);
  vertical-align: top;
}

/* Depășit: tokenurile rândului critic din CNF184. Iminent: fond de avertisment, cu text propriu. */
.plan__reper--depasit td,
.plan__termen--depasit td {
  font-weight: var(--row-critical-weight);
  color: var(--row-critical-fg);
}

.plan__reper--iminent td,
.plan__termen--iminent td { background: var(--bg-warning-subtle); }

.plan__formular { margin-block-start: var(--space-12); }

.plan__repere-propuse {
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-16);
}

.plan__ciorne { list-style: none; margin: 0 0 var(--space-12); padding: 0; }

.plan__ciorna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-block-end: var(--border-width-1) solid var(--border-default);
}

/* ── Corelarea (CU1.08, CF113, CF115) ─────────────────────────────────────────────────────── */

.corelare__sugestii,
.corelare__legate {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.corelare__sugestie,
.corelare__legat {
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
}

.corelare__reper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.corelare__titlu { color: var(--text-secondary); }

.corelare__detalii {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  margin: var(--space-12) 0;
}

.corelare__detalii dt { color: var(--text-secondary); }
.corelare__detalii dd { margin: 0; }

.corelare__scor { font-weight: var(--font-weight-semibold); }

.corelare__justificare { margin: var(--space-8) 0; white-space: pre-line; }

.corelare__formular { margin-block-start: var(--space-12); }

/* ── Rapoartele (CU1.03) ──────────────────────────────────────────────────────────────────── */

.rapoarte__catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-12);
}

.rapoarte__definitie {
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rapoarte__definitie--aleasa { border-color: var(--border-brand); }

.rapoarte__reper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.rapoarte__titlu { font-weight: var(--font-weight-semibold); }

.rapoarte__cod { color: var(--text-secondary); font-size: var(--font-size-12); }

.rapoarte__detalii {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-12);
  row-gap: var(--space-4, var(--space-8));
  margin: 0;
  font-size: var(--font-size-14);
}

.rapoarte__detalii dt { color: var(--text-secondary); }
.rapoarte__detalii dd { margin: 0; }

.rapoarte__sectiune { margin-block-start: var(--space-16); }

.rapoarte__numar { text-align: end; font-variant-numeric: tabular-nums; }

/* ── Formularul de feedback (CU3.08, CF316) ───────────────────────────────────────────────── */

.feedback__sectiune {
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.feedback__optiuni { border: 0; padding: 0; margin: 0; }

/* ── Sarcinile de fundal (CNF154) ─────────────────────────────────────────────────────────── */

.sarcina { display: flex; flex-direction: column; gap: var(--space-12); }

.sarcina__atribute {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  margin: 0;
}

.sarcina__atribute dt { color: var(--text-secondary); }
.sarcina__atribute dd { margin: 0; }

.sarcina__rezultat {
  margin: var(--space-8) 0 0;
  white-space: pre-wrap;
  font-size: var(--font-size-12);
}

/* Căutarea în director (CF903) și părțile protejate (§8.5). */
.fisa__participant-ales,
.fisa__rezultate-lista li,
.fisa__parti li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
}

.fisa__rezultate-lista,
.fisa__parti {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fisa__rezultate-lista li,
.fisa__parti li {
  padding-block: var(--space-8);
  border-block-end: var(--border-width-1) solid var(--border-default);
}

.fisa__rezultat-secundar,
.fisa__parte-meta,
.fisa__parte-anonim { color: var(--text-secondary); font-size: var(--font-size-12); }

.fisa__parte-fel { font-weight: var(--font-weight-semibold); }

.fisa__rezultate-lista li > .mud-button,
.fisa__parti li > .mud-button { margin-inline-start: auto; }

/* ── Portal public ────────────────────────────────────────────────────────────────────────────
   Învelișul de serviciu guvernamental al portalului (§12.3, CNF171–CNF177, CU3.10): bara oficială,
   antetul lipicios cu navigare și „Raportează”, pagina de aterizare pe secțiuni, subsolul cu banda
   eGov, formularele publice cu coloană laterală. Numai tokenuri; responsiv de la 360 px la 1440 px.
   Pragurile: sub 60 rem meniul se pliază; 60–90 rem navigarea coboară pe rândul al doilea;
   de la 90 rem apare și căutarea în antet. */

.portal-container {
  max-inline-size: 90rem;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.portal-principal {
  display: block;
}

/* Ținta legăturii de salt este focalizată din cod; inelul propriu al paginii ar fi de prisos. */
.portal-principal:focus {
  outline: none;
}

.portal-principal:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Coloana de citit a paginilor de conținut; „îngustă” pentru formulare fără coloană laterală. */
.portal-pagina {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-32) var(--space-24) var(--space-64);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.portal-pagina--ingusta {
  max-inline-size: 56rem;
}

/* ── Bara guvernamentală ── */
.portal-guvern {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

.portal-guvern__rand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  min-block-size: var(--space-40);
  flex-wrap: wrap;
  padding-block: var(--space-2);
}

.portal-guvern__oficial {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.portal-guvern__oficial strong {
  font-weight: var(--font-weight-semibold);
}

.portal-guvern__scut {
  inline-size: var(--space-16);
  block-size: var(--space-16);
  flex-shrink: 0;
}

/* Comutatorul de limbă stă pe fundal invers: culorile lui obișnuite nu s-ar citi acolo. */
.portal-guvern .rsic-limba__legatura {
  color: var(--text-inverse);
}

.portal-guvern .rsic-limba__legatura:hover {
  background: color-mix(in srgb, var(--bg-default) 16%, transparent);
  color: var(--text-inverse);
}

.portal-guvern .rsic-limba__curenta {
  background: var(--bg-default);
  color: var(--text-brand);
}

/* ── Antetul lipicios ── */
.portal-antet {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--bg-default);
  border-block-end: var(--border-width-1) solid var(--border-default);
  box-shadow: var(--shadow-sticky);
}

.portal-antet__rand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  min-block-size: var(--space-64);
  padding-block: var(--space-8);
}

.portal-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  min-block-size: var(--target-size-min);
  text-decoration: none;
}

.portal-marca__stema {
  inline-size: var(--space-40);
  block-size: var(--space-40);
  flex-shrink: 0;
}

.portal-marca__text {
  display: flex;
  flex-direction: column;
}

.portal-marca__agentie {
  color: var(--text-default);
  font-size: var(--font-size-16);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.portal-marca__registru {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.portal-nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.portal-nav__legatura {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-40);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.portal-nav__legatura:hover {
  background: var(--bg-default-hover);
  color: var(--text-default);
}

/* Starea curentă se poartă prin aria-current, nu doar prin culoare (CNF171). */
.portal-nav__legatura[aria-current="page"] {
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
}

.portal-nav__legatura[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-12);
  inset-block-end: 0;
  block-size: var(--border-width-3);
  border-radius: var(--radius-full);
  background: var(--bg-brand);
}

.portal-antet__actiuni {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-inline-start: auto;
}

/* Căutarea apare doar pe ecranele late; pe restul, filtrul de pe /alerte face același lucru. */
.portal-cautare {
  display: none;
}

.portal-antet__mpass-scurt {
  display: none;
}

/* Meniul „Raportează”: <details>, funcțional fără JavaScript și înaintea circuitului. */
.portal-raporteaza {
  position: relative;
}

.portal-raporteaza__buton {
  list-style: none;
  cursor: pointer;
}

.portal-raporteaza__buton::-webkit-details-marker {
  display: none;
}

.portal-raporteaza__sageata {
  margin-inline-start: var(--space-4);
}

.portal-raporteaza[open] .portal-raporteaza__sageata {
  transform: rotate(180deg);
}

.portal-raporteaza__meniu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  min-inline-size: 20rem;
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-popover);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.portal-raporteaza__intrebare {
  margin: 0;
  padding: var(--space-8) var(--space-12) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.portal-raporteaza__optiune {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  text-decoration: none;
}

.portal-raporteaza__optiune:hover {
  background: var(--bg-brand-subtle);
}

.portal-raporteaza__optiune strong {
  color: var(--text-brand);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-raporteaza__optiune span {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

/* Meniul pliabil există doar sub 60 rem; peste prag este scos și din arborele de accesibilitate. */
.portal-meniu {
  display: none;
}

@media (min-width: 60rem) and (max-width: 89.99rem) {
  .portal-nav {
    order: 10;
    flex-basis: 100%;
    border-block-start: var(--border-width-1) solid var(--border-default);
    padding-block-start: var(--space-4);
  }
}

@media (min-width: 90rem) {
  .portal-nav {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .portal-cautare {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border: var(--border-width-1) solid var(--border-control);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-16);
    background: var(--bg-default);
  }

  .portal-cautare:hover,
  .portal-cautare:focus-within {
    border-color: var(--border-brand);
  }

  .portal-cautare__camp {
    border: 0;
    background: transparent;
    font: inherit;
    font-family: var(--font-family);
    color: var(--text-default);
    inline-size: 13rem;
    min-block-size: var(--space-32);
  }

  .portal-cautare__buton {
    border-radius: var(--radius-full);
  }
}

@media (max-width: 79.99rem) {
  .portal-antet__mpass-lung {
    display: none;
  }

  .portal-antet__mpass-scurt {
    display: inline;
  }
}

@media (max-width: 59.99rem) {
  .portal-nav,
  .portal-antet__mpass {
    display: none;
  }

  .portal-meniu {
    display: block;
  }

  .portal-meniu__buton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    inline-size: var(--space-40);
    block-size: var(--space-40);
    border: var(--border-width-1) solid var(--border-control);
    border-radius: var(--radius-8);
    background: var(--bg-default);
    cursor: pointer;
    list-style: none;
  }

  .portal-meniu__buton::-webkit-details-marker {
    display: none;
  }

  .portal-meniu__bara {
    display: block;
    inline-size: var(--space-16);
    block-size: var(--border-width-2);
    border-radius: var(--radius-full);
    background: var(--text-default);
  }

  .portal-meniu__panou {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--bg-default);
    border-block-end: var(--border-width-1) solid var(--border-default);
    box-shadow: var(--shadow-raised);
    padding: var(--space-8) var(--space-24) var(--space-16);
    max-block-size: calc(100dvh - var(--space-96));
    overflow-y: auto;
  }

  .portal-meniu__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .portal-meniu__lista a,
  .portal-meniu__sectiune a {
    display: flex;
    align-items: center;
    min-block-size: var(--space-48);
    padding: var(--space-8);
    border-radius: var(--radius-8);
    color: var(--text-default);
    font-size: var(--font-size-16);
    text-decoration: none;
  }

  .portal-meniu__lista a[aria-current="page"] {
    background: var(--bg-brand-subtle);
    color: var(--text-brand);
    font-weight: var(--font-weight-semibold);
  }

  .portal-meniu__sectiune {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-8);
    border-block-start: var(--border-width-1) solid var(--border-default);
  }

  .portal-meniu__sectiune a {
    color: var(--text-brand);
    font-weight: var(--font-weight-medium);
  }
}

@media (max-width: 47.99rem) {
  .portal-marca__text {
    display: none;
  }
}

/* ── Eroul paginii de aterizare ── */
.portal-erou {
  background: linear-gradient(160deg, var(--bg-brand-subtle) 0%, var(--bg-default) 55%, var(--bg-brand-subtle) 100%);
  border-block-end: var(--border-width-1) solid var(--border-default);
  overflow: hidden;
}

.portal-erou__grila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
  align-items: center;
  padding-block: var(--space-48);
}

@media (min-width: 64rem) {
  .portal-erou__grila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    padding-block: var(--space-96);
  }
}

.portal-erou__decor {
  display: none;
}

@media (min-width: 64rem) {
  .portal-erou__decor {
    display: flex;
    justify-content: center;
  }

  .portal-erou__decor img {
    inline-size: 100%;
    max-inline-size: 18rem;
    opacity: 0.12;
  }
}

.portal-eticheta-sus {
  margin: 0 0 var(--space-8);
  color: var(--text-brand);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.portal-eticheta-sus--inversa {
  color: var(--bg-brand-secondary);
}

.portal-erou__titlu {
  margin: 0;
  font-size: var(--font-size-40);
  line-height: var(--line-height-48);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  max-inline-size: 18em;
}

@media (min-width: 64rem) {
  .portal-erou__titlu {
    font-size: var(--font-size-56);
    line-height: var(--line-height-64);
  }
}

@media (min-width: 90rem) {
  .portal-erou__titlu {
    font-size: var(--font-size-64);
    line-height: var(--line-height-80);
  }
}

.portal-erou__introducere {
  margin: var(--space-16) 0 0;
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  color: var(--text-secondary);
  max-inline-size: 46rem;
}

.portal-erou__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-32);
}

.portal-erou__cifre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) 0;
  margin: var(--space-40) 0 0;
  padding-block-start: var(--space-24);
  border-block-start: var(--border-width-1) solid var(--border-default);
}

.portal-erou__cifra {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-4);
  padding-inline-end: var(--space-24);
}

.portal-erou__cifra + .portal-erou__cifra {
  border-inline-start: var(--border-width-1) solid var(--border-default);
  padding-inline-start: var(--space-24);
}

/* Sub 40 rem separatoarele verticale nu mai au sens: la impachetare, al treilea numar cadea pe
   rand nou cu un separator orfan. In coloana, fiecare cifra sta pe randul ei, numarul inainte. */
@media (max-width: 39.99rem) {
  .portal-erou__cifre {
    flex-direction: column;
    gap: var(--space-12);
  }

  .portal-erou__cifra {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-8);
    padding-inline-end: 0;
  }

  .portal-erou__cifra + .portal-erou__cifra {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: var(--border-width-1) solid var(--border-default);
    padding-block-start: var(--space-12);
  }
}

.portal-erou__cifra dt {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.portal-erou__cifra dd {
  margin: 0;
  color: var(--text-brand);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ── Secțiunile paginii de aterizare ── */
.portal-sectiune {
  padding-block: var(--space-64);
  background: var(--bg-subtle);
}

.portal-sectiune--alba {
  background: var(--bg-default);
}

@media (min-width: 64rem) {
  .portal-sectiune {
    padding-block: var(--space-96);
  }
}

.portal-cap-sectiune {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
  border-block-end: var(--border-width-1) solid var(--border-default);
  padding-block-end: var(--space-24);
  margin-block-end: var(--space-32);
}

.portal-cap-sectiune h2 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.portal-cap-sectiune__text {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  max-inline-size: 46rem;
}

.portal-cap-sectiune__legatura {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size-min);
  white-space: nowrap;
  color: var(--text-brand);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.portal-cap-sectiune__legatura::after {
  content: "→";
  margin-inline-start: var(--space-8);
}

.portal-cap-sectiune__legatura:hover {
  text-decoration: underline;
}

/* Pașii „Cum funcționează” (CU3.08): numărul este decorativ, ordinea o dă lista ordonată. */
.portal-pasi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-24);
}

.portal-pas {
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}

.portal-pas__numar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-32);
  block-size: var(--space-32);
  border-radius: var(--radius-full);
  background: var(--bg-brand);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-12);
}

.portal-pas h3 {
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
  margin-block-end: var(--space-8);
}

.portal-pas p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

/* Cardurile de conținut ale aterizării. */
.portal-carduri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-24);
}

.portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.portal-card:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-raised);
}

.portal-card__insigne {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.portal-card__titlu {
  margin: 0;
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
}

.portal-card__titlu a {
  color: var(--text-default);
  text-decoration: none;
}

.portal-card__titlu a:hover {
  color: var(--text-brand);
  text-decoration: underline;
}

.portal-card__rezumat {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-card__moment {
  margin: auto 0 0;
  padding-block-start: var(--space-8);
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.portal-gol {
  margin: 0;
  color: var(--text-secondary);
}

/* Dalele „Registrul în cifre”. */
.portal-dale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-24);
}

.portal-dala {
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}

/* Dala este deja un card: chenarul propriu al lui .mud-stat ar face „cutie în cutie”. */
.portal-dala .mud-stat {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-dala .mud-stat__value {
  color: var(--text-brand);
  font-size: var(--font-size-36);
  line-height: var(--line-height-40);
  font-weight: var(--font-weight-bold);
}

/* Sub 40 rem dalele stau două pe rând: una singură pe lățime lăsa un gol cât jumătate de ecran. */
@media (max-width: 39.99rem) {
  .portal-dale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .portal-dala {
    padding: var(--space-16);
  }
}

/* Banda de abonare: gradient din tokenurile de brand, text invers. */
.portal-banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
  background: linear-gradient(135deg, var(--bg-brand-active) 0%, var(--bg-brand) 100%);
  color: var(--text-inverse);
  border-radius: var(--radius-24);
  padding: var(--space-32) var(--space-24);
}

@media (min-width: 64rem) {
  .portal-banda {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-48);
    padding: var(--space-48);
  }
}

.portal-banda h2,
.portal-banda h3 {
  color: var(--text-inverse);
}

.portal-banda__text h2 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  letter-spacing: var(--letter-spacing-tight);
}

.portal-banda__text p {
  margin: var(--space-12) 0 0;
  color: var(--bg-brand-secondary);
}

.portal-banda__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-24);
}

.portal-banda__buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-40);
  padding: var(--space-8) var(--space-20);
  border-radius: var(--radius-8);
  border: var(--border-width-1) solid transparent;
  background: var(--bg-default);
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.portal-banda__buton:hover {
  background: var(--bg-brand-subtle);
}

.portal-banda__buton--discret {
  background: transparent;
  color: var(--text-inverse);
  border-color: color-mix(in srgb, var(--bg-default) 40%, transparent);
}

.portal-banda__buton--discret:hover {
  background: color-mix(in srgb, var(--bg-default) 12%, transparent);
}

.portal-banda__aparte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  background: color-mix(in srgb, var(--bg-default) 10%, transparent);
  border: var(--border-width-1) solid color-mix(in srgb, var(--bg-default) 25%, transparent);
  border-radius: var(--radius-16);
  padding: var(--space-24);
}

.portal-banda__aparte p {
  margin: 0;
  color: var(--bg-brand-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

/* Banda finală „Raportează”. */
.portal-chemare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  background: var(--bg-brand-subtle);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-24);
  padding: var(--space-32) var(--space-24);
}

@media (min-width: 64rem) {
  .portal-chemare {
    padding: var(--space-40) var(--space-48);
  }
}

.portal-chemare h2 {
  font-size: var(--font-size-28);
  line-height: var(--line-height-36);
}

.portal-chemare p {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  max-inline-size: 40rem;
}

.portal-chemare__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* ── Subsolul ── */
.portal-subsol {
  margin-block-start: var(--space-64);
  background: var(--bg-subtle);
  border-block-start: var(--space-8) solid var(--bg-brand);
  padding: var(--space-64) 0 var(--space-32);
}

.portal-subsol__grila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-40);
  padding-block-end: var(--space-40);
}

@media (min-width: 48rem) {
  .portal-subsol__grila {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-subsol__marca {
    grid-column: 1 / -1;
  }
}

@media (min-width: 80rem) {
  .portal-subsol__grila {
    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr));
  }

  .portal-subsol__marca {
    grid-column: auto;
  }
}

.portal-subsol__identitate {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.portal-subsol__descriere {
  margin: var(--space-16) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  max-inline-size: 30rem;
}

.portal-subsol__egov-titlu {
  margin: var(--space-24) 0 var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.portal-subsol__egov {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.portal-subsol__egov li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-12);
  background: var(--bg-default);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-semibold);
}

.portal-subsol__egov img {
  inline-size: 1rem;
  block-size: 1rem;
}

.portal-antet__mpass-sigla {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.portal-subsol__adresa {
  margin-block-start: var(--space-24);
  font-style: normal;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-24);
}

.portal-subsol__coloana {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.portal-subsol__coloana h2 {
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--space-4);
}

.portal-subsol__coloana a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size-min);
  color: var(--text-default);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  text-decoration: none;
}

.portal-subsol__coloana a:hover {
  color: var(--text-brand);
  text-decoration: underline;
}

.portal-subsol__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  border-block-start: var(--border-width-1) solid var(--border-default);
  padding-block-start: var(--space-24);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.portal-subsol__legal p {
  margin: 0;
}

/* ── Listele publice și pagina unui material ── */
.portal-abonare-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

/* Cardul unui element din flux — aceleași clase, tratament de card MUD. */
.portal__articol {
  border-radius: var(--radius-16);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.portal__articol:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-raised);
}

.portal-material {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}

@media (min-width: 64rem) {
  .portal-material {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

.portal-material__continut {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-inline-size: 0;
}

.portal-material__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

@media (min-width: 64rem) {
  .portal-material__lateral {
    position: sticky;
    inset-block-start: var(--space-96);
  }
}

.portal-cuprins,
.portal-partajare {
  background: var(--bg-subtle);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-12);
  padding: var(--space-16);
}

.portal-cuprins__titlu,
.portal-partajare__titlu {
  margin-block-end: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.portal-cuprins__lista,
.portal-partajare__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.portal-cuprins__lista a,
.portal-partajare__lista a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size-min);
  font-size: var(--font-size-14);
}

.portal-conexe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.portal-conexe li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-16);
}

.portal-conexe time {
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
}

/* Tabelul accesibil al statisticilor lunare (CNF171). */
.portal-tabel {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-tabel th,
.portal-tabel td {
  border-block-end: var(--border-width-1) solid var(--border-default);
  padding: var(--space-8) var(--space-12);
  text-align: start;
}

.portal-tabel thead th {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.portal-tabel__numar {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Cardurile seturilor de date deschise (CNF114). */
.portal-seturi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-24);
}

.portal-set-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}

.portal-set-card__nume {
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
}

.portal-set-card__cod {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-12);
  color: var(--text-secondary);
}

.portal-set-card__detalii {
  margin: 0;
  display: flex;
  gap: var(--space-8);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-set-card__detalii dt {
  color: var(--text-secondary);
}

.portal-set-card__detalii dt::after {
  content: ":";
}

.portal-set-card__detalii dd {
  margin: 0;
}

.portal-set-card__formate {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-block-start: var(--space-8);
}

.portal-set-card__eticheta {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  margin-inline-end: var(--space-4);
}

/* ── Formularele publice: coloana de completat și cea de lămurit ── */
.portal-formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}

@media (min-width: 72rem) {
  .portal-formular {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

.portal-formular__coloana {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-inline-size: 0;
}

.portal-formular__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

@media (min-width: 72rem) {
  .portal-formular__lateral {
    position: sticky;
    inset-block-start: var(--space-96);
  }
}

.portal-etape {
  background: var(--bg-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.portal-etape__titlu {
  margin: 0;
  padding: var(--space-16) var(--space-24);
  background: var(--bg-subtle);
  border-block-end: var(--border-width-1) solid var(--border-default);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
}

.portal-etape__lista {
  list-style: none;
  margin: 0;
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.portal-etape__pas {
  display: flex;
  gap: var(--space-12);
}

.portal-etape__numar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-32);
  block-size: var(--space-32);
  border-radius: var(--radius-full);
  background: var(--bg-brand);
  color: var(--text-inverse);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.portal-etape__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portal-etape__text strong {
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-etape__text > span {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-urgent {
  background: var(--bg-warning-subtle);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
}

.portal-urgent__titlu {
  margin-block-end: var(--space-8);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
}

.portal-urgent p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

.portal-formular__nota {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
  max-inline-size: 24rem;
}

/* Sub pragul îngust, containerele își strâng marginile. */
@media (max-width: 47.99rem) {
  .portal-container,
  .portal-pagina {
    padding-inline: var(--space-16);
  }
}

/* CNF171: fără mișcare pentru cine a cerut asta. Duratele-token devin deja zero în mud.css;
   aici se sting și tranzițiile proprii portalului. */
@media (prefers-reduced-motion: reduce) {
  .portal-card,
  .portal__articol,
  .portal-nav__legatura,
  .portal-banda__buton,
  .portal-raporteaza__sageata {
    transition: none;
    transform: none;
  }
}