/* Stil scris de mana, fara framework. Aplicatia se foloseste pe un laptop,
   intr-un atelier - text suficient de mare, contrast bun, nimic decorativ. */

:root {
  --text: #1a1a1a;
  --fundal: #ffffff;
  --fundal-slab: #f4f4f4;
  --bordura: #ccc;
  --accent: #1a5fb4;
  --eroare: #b30000;
  --eroare-fundal: #fdecea;
  --pericol: #c01c28;
  --avertisment: #7a5b00;
  --avertisment-fundal: #fff3c4;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--fundal-slab);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--fundal);
  border-bottom: 1px solid var(--bordura);
}

header .marca {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

header nav a {
  margin-left: 1rem;
  color: var(--accent);
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

.antet-dreapta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.iesire {
  margin: 0;
}

.iesire button {
  padding: 0.3rem 0.7rem;
  font-size: 0.9rem;
}

.avertisment {
  margin: 0;
  padding: 0.6rem 1.5rem;
  background: var(--avertisment-fundal);
  color: var(--avertisment);
  border-bottom: 1px solid var(--avertisment);
  font-weight: 700;
  text-align: center;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 {
  font-size: 1.6rem;
  margin-top: 0;
}

h2 {
  font-size: 1.2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fundal);
  margin-bottom: 1.5rem;
}

th, td {
  border: 1px solid var(--bordura);
  padding: 0.5rem 0.6rem;
  text-align: left;
}

th {
  background: var(--fundal-slab);
}

label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

input, select, textarea {
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--bordura);
  border-radius: 3px;
  font-weight: 400;
  width: auto;
  max-width: 20rem;
}

input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
  vertical-align: middle;
}

button {
  font-size: 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

button.pericol {
  background: var(--pericol);
  border-color: var(--pericol);
}

.card {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 40rem;
}

.eroare {
  color: var(--eroare);
  background: var(--eroare-fundal);
  border: 1px solid var(--eroare);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Comanda de repornire din pagina "aplicatia e inchisa": trebuie sa se poata citi
   litera cu litera si sa se selecteze intreaga cu un dublu-clic. */
.comanda {
  background: #f4f4f4;
  border: 1px solid var(--bordura);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
  user-select: all;
  font-size: 0.95rem;
}

.indemn {
  color: #555;
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
}

/* Zona de stare a editorului: confirmarea salvarii sau refuzul serverului. Invelisul
   ramane mereu in pagina (are aria-live), doar continutul lui se schimba - de-aia
   inaltimea minima, ca tabelul sa nu sara cand apare primul mesaj. */
.stare {
  min-height: 1.6em;
}

.stare > p {
  margin: 0 0 0.6rem;
}

.salvat {
  color: #1f6b2f;
  font-weight: 600;
}

/* Panoul de verificare: ce spune motorul, dupa fiecare salvare. Sta deasupra tabelului
   pentru ca e primul lucru de citit dupa o modificare. */
.panou {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 0.6rem 1rem 0.8rem;
  margin-bottom: 1rem;
}

.panou h2 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.panou .sumar {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.panou .salvat,
.panou .indemn {
  margin: 0;
}

.panou .eroare {
  margin: 0 0 0.6rem;
}

.panou ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.panou .materiale {
  color: #555;
  list-style: none;
  padding-left: 0;
}

.panou .avertismente li {
  margin-bottom: 0.15rem;
}

/* Nivelul scris in cuvinte, nu doar prin culoare: culoarea singura nu se vede la
   monitorul din atelier si nici pentru cine nu deosebeste rosul de galben. */
.panou .nivel {
  display: inline-block;
  min-width: 5rem;
  margin-right: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.panou li.error .nivel {
  background: var(--eroare-fundal);
  color: var(--eroare);
  border: 1px solid var(--eroare);
}

.panou li.warn .nivel {
  background: var(--avertisment-fundal);
  color: var(--avertisment);
  border: 1px solid var(--avertisment);
}

.panou li.info .nivel {
  background: var(--fundal-slab);
  color: #555;
  border: 1px solid var(--bordura);
}

/* Codul corpului din avertisment duce la randul lui din tabel. Randul e un <form> cu
   display:contents, deci nu se poate colora el insusi - se coloreaza celulele lui. */
.corpuri-tabel form:target > * {
  background: var(--avertisment-fundal);
}

/* Tabelul de corpuri e un grid CSS, nu un <table> HTML: fiecare corp e un <form>
   (asa cum cere HTMX - un singur POST pe rand la orice schimbare de camp), iar un
   <form> nu are voie ca fiu direct al unui <tr>/<tbody> (HTML il "scoate" din tabel
   la parsare). display:contents pe fiecare <form> il face transparent pentru grid,
   iar fiii lui directi devin celulele randului, aliniate pe aceleasi coloane ca
   antetul.

   Cotele sunt in mm, deci de patru cifre in mod obisnuit (1200) si de cinci in cazuri
   limita. Coloanele de 4.5rem taiau afisarea: input-ul avea clientWidth 57 cu
   scrollWidth 67, adica "1200" se citea "120" - exact greseala care se taie la
   ferastrau. 6rem + padding mic pe input incap 5 cifre cu tot cu spinner.
   overflow: auto (nu doar overflow-x) face din tabel propriul cadru de derulare pe
   ambele axe: numai asa poate fi antetul lipicios. Cu overflow-x: auto singur,
   overflow-y se calculeaza tot 'auto' dar containerul nu deruleaza vertical (creste cu
   continutul), iar position: sticky nu are fata de ce sa se lipeasca. */
.corpuri-tabel {
  display: grid;
  grid-template-columns:
    8rem                  /* cod */
    7rem                  /* tip */
    6rem 6rem 6rem 6rem 6rem             /* x, y, latime, inaltime, adancime */
    3.5rem 3.5rem 3.5rem 3.5rem          /* cele 4 bife */
    5rem                  /* polite */
    minmax(8rem, 1fr)     /* observatii */
    minmax(34rem, 2fr)    /* zone (6 coloane: 5 de date + butonul de stergere) */
    9rem;                 /* actiuni */
  gap: 1px;
  background: var(--bordura);
  border: 1px solid var(--bordura);
  margin-bottom: 1.5rem;
  overflow: auto;
  max-height: 75vh;
  font-size: 0.9rem;
  /* cadru de pozitionare pentru .ascuns-vizual de mai jos: altfel textul numai-pentru-
     cititoare, absolut pozitionat, se aseaza fata de PAGINA si o intinde cu latimea
     tabelului derulat (masurat: scrollWidth 1795 la clientWidth 1440). */
  position: relative;
}

.corpuri-tabel > * {
  display: contents;
}

.corpuri-antet span {
  background: var(--fundal-slab);
  font-weight: 700;
  padding: 0.5rem 0.4rem;
  /* la 8 corpuri numele coloanelor dispareau la derulare */
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--bordura);
}

.corpuri-tabel form > * {
  background: var(--fundal);
  padding: 0.4rem;
  display: flex;
  align-items: center;
}

.corpuri-tabel input,
.corpuri-tabel select {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0.35rem 0.3rem;
}

.corpuri-tabel input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Tabelul zonelor depasea celula cu 33px, iar butonul "Duplică" al coloanei
   urmatoare (desenat peste, fiind mai tarziu in DOM) acoperea ultimii ~26px ai
   select-ului "Tacâmuri": un clic pe sageata lui duplica corpul.
   table-layout: fixed + width 100% il tin in celula orice ar scrie in select-uri;
   overflow: hidden pe celula e garda daca totusi ar depasi. */
.zona-col {
  min-width: 0;
  overflow: hidden;
  /* .corpuri-tabel form > * e display:flex; celula zonelor are DOUA lucruri unul sub
     altul (sub-tabelul si subsolul cu butonul de zona noua si suma), nu unul langa altul. */
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
}

.zona-col table.zone {
  margin: 0;
  font-size: 0.85rem;
  width: 100%;
  table-layout: fixed;
}

.zona-col table.zone th,
.zona-col table.zone td {
  padding: 0.2rem 0.3rem;
  overflow: hidden;
}

.zona-col table.zone th:nth-child(1) { width: 23%; }
.zona-col table.zone th:nth-child(2) { width: 14%; }
.zona-col table.zone th:nth-child(3) { width: 19%; }
.zona-col table.zone th:nth-child(4) { width: 17%; }
.zona-col table.zone th:nth-child(5) { width: 16%; }
.zona-col table.zone th:nth-child(6) { width: 11%; }

/* Butonul de stergere sta in celula lui, nu peste select-ul vecin: la Task 5 tocmai
   asa acoperea butonul "Duplica" un select, iar un clic pe sageata lui duplica corpul. */
.zona-col td.zona-actiuni {
  text-align: center;
  padding: 0.2rem 0.1rem;
}

.zona-buton {
  font-size: 0.85rem;
  padding: 0.1rem 0.4rem;
  line-height: 1.3;
  white-space: nowrap;
}

.zona-col td.zona-actiuni .zona-buton {
  width: 100%;
  padding: 0.1rem 0;
}

.zona-subsol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Suma inaltimilor zonelor. Cand nu se potriveste cu inaltimea corpului, motorul
   refuza corpul - deci diferenta trebuie sa se vada de la doi pasi, nu sa fie
   descoperita la calcul. */
.suma {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
}

.suma.nepotrivit {
  color: var(--eroare);
  background: var(--eroare-fundal);
  border: 1px solid var(--eroare);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-weight: 700;
}

/* Text numai pentru cititoarele de ecran: antetul coloanei de stergere a zonelor.
   Nu display:none - acela il scoate si din arborele de accesibilitate.
   'position: relative' pe .corpuri-tabel (mai sus) e ce il tine in cadrul tabelului:
   fara un stramos pozitionat, un element absolut se aseaza fata de pagina, deci
   offset-ul lui din interiorul tabelului DERULAT (x ~ 1794) intindea pagina cu ~350 px
   si toata pagina - informatiile proiectului si setarile odata cu ea - putea fi trasa
   pe orizontala. */
.ascuns-vizual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.actiuni-corp {
  gap: 0.4rem;
  flex-wrap: wrap;
}

.actiuni-corp button {
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}

/* Informatiile proiectului si setarile per proiect
   -----------------------------------------------
   Aceeasi grila pentru amandoua: coloane care se auto-potrivesc, minimum 15rem, deci
   pe un laptop intra 3-4 coloane si nu apare NICIODATA derulare pe orizontala (cu
   coloane de latime fixa, 32 de campuri o produceau). minmax(0, 1fr) - fara 0 ca
   minim, un input mai lat decat coloana ar impinge grila in afara paginii.
   Eticheta e <label> cu input INAUNTRU: nu se pot suprapune, oricat de ingusta e
   fereastra, si clicul pe text duce in camp. */
.grila-campuri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 1rem;
}

.grila-campuri label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 0;
}

.grila-campuri input,
.grila-campuri select {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 0.15rem;
  font-size: 0.95rem;
}

.info {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 0.75rem 1rem 1rem;
  margin-bottom: 1.5rem;
}

.info h2 {
  margin: 0 0 0.2rem;
}

/* Standardul constructiv se schimba rar: sta pliat, ca sa nu stea in drum cand omul
   lucreaza cu desenul alaturi si cu tabelul de corpuri deschis. */
.setari {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.setari > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.25rem 0;
}

.setari fieldset {
  border: 1px solid var(--bordura);
  border-radius: 4px;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem 0.75rem;
  min-width: 0;                 /* fara asta, un fieldset nu se micsoreaza in grila */
}

.setari legend {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0 0.3rem;
}

/* Desenul (elevatia + vederea in plan). Plansa se deruleaza in loc sa micsoreze
   desenul: o bucatarie de 3,5 m lata redusa cat sa intre pe ecran face cotele
   necitibile - masurat pe bucataria reala, "width: 100%" dadea scara 0.166, adica
   text de cota de 6,6 px, si scrollWidth == clientWidth, deci derularea promisa de
   comentariul de aici nu se intampla niciodata.
   Acum marimea plansei o scrie svg2d.py in atributele width/height ale <svg> (SCARA
   px pe mm), iar CSS-ul NU o mai atinge: singura lui treaba e sa dea un cadru cu
   derulare. De aceea nu exista aici nici "width", nici "max-height" pe <svg>. */
.desen {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 0.6rem 1rem 0.8rem;
  margin-bottom: 1rem;
}

.desen h2 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.desen .indemn {
  margin: 0 0 0.5rem;
}

.desen h3 {
  margin: 1.2rem 0 0.3rem;
  font-size: 0.95rem;
}

.desen-plansa {
  /* 'auto' pe ambele axe: plansa isi pastreaza scara, iar cadrul se deruleaza.
     resize: both da omului voie sa mareasca cadrul cat vrea. */
  overflow: auto;
  max-height: 78vh;
  resize: vertical;
  border: 1px solid var(--bordura);
  border-radius: 4px;
  background: #fff;
}

.desen-plansa svg {
  display: block;
  /* fara width/height aici: marimea vine din atributele SVG-ului, altfel scara se
     pierde si textul cotelor scade sub limita de citit */
}

/* Pagina de rezultate: cele patru tabele in taburi FARA JavaScript.
   Input-urile radio stau ascunse la inceputul lui .taburi, etichetele sunt <label for>,
   iar panoul se aprinde cu ":checked ~ .tab-panou:nth-of-type(n)". nth-of-type numara
   printre fratii de acelasi tip (<section>), deci ordinea etichetelor si a panourilor
   trebuie sa fie aceeasi - de-aia stau una langa alta in sablon.
   Daca CSS-ul nu se incarca, radio-urile se vad si toate cele patru tabele apar unul
   sub altul: nu dispare niciun rand, ceea ce conteaza mai mult decat aspectul. */
.taburi {
  background: var(--fundal);
  border: 1px solid var(--bordura);
  border-radius: 6px;
  padding: 0 1rem 1rem;
  margin-bottom: 1.5rem;
  /* Tabelul de debitare are 11 coloane: cadrul lui de derulare e .tabel-derulabil de
     mai jos, dar min-width: 0 e garda ca invelisul sa nu se intinda si sa scoata
     PAGINA pe orizontala. */
  min-width: 0;
}

.tab-radio {
  /* .ascuns-vizual n-ar merge: un input radio scos din flux nu mai poate primi focus
     vizibil in unele browsere. clip la 1px il tine focusabil si accesibil de la
     tastatura (Tab pe grupul de radio, sagetile schimba tabul), dar invizibil. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tab-etichete {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--bordura);
  margin-bottom: 1rem;
}

.tab-etichete label {
  display: block;
  margin: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-bottom: -2px;
  color: var(--accent);
}

.tab-etichete label:hover {
  background: var(--fundal-slab);
}

.tab-panou {
  display: none;
}

#tab-debitare:checked ~ .tab-etichete label[for="tab-debitare"],
#tab-corpuri:checked ~ .tab-etichete label[for="tab-corpuri"],
#tab-materiale:checked ~ .tab-etichete label[for="tab-materiale"],
#tab-accesorii:checked ~ .tab-etichete label[for="tab-accesorii"] {
  background: var(--fundal);
  border-color: var(--bordura);
  border-bottom: 2px solid var(--fundal);
  color: var(--text);
}

/* Conturul de focus pe eticheta tabului selectat: navigarea de la tastatura trebuie
   sa se vada, altfel radio-ul ascuns pare ca nu are focus nicaieri. */
.tab-radio:focus-visible ~ .tab-etichete label[for="tab-debitare"],
.tab-radio:focus-visible ~ .tab-etichete label[for="tab-corpuri"],
.tab-radio:focus-visible ~ .tab-etichete label[for="tab-materiale"],
.tab-radio:focus-visible ~ .tab-etichete label[for="tab-accesorii"] {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#tab-debitare:checked ~ .tab-panou:nth-of-type(1),
#tab-corpuri:checked ~ .tab-panou:nth-of-type(2),
#tab-materiale:checked ~ .tab-panou:nth-of-type(3),
#tab-accesorii:checked ~ .tab-panou:nth-of-type(4) {
  display: block;
}

.tab-panou h2 {
  margin: 0 0 0.4rem;
}

.tab-panou .unitate,
.tab-panou .nota {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.tab-panou .nota {
  color: #555;
}

/* Fiecare tabel deruleaza in cadrul LUI, nu in pagina: cu 86 de piese si 11 coloane,
   o derulare orizontala a paginii intregi ar ascunde antetul si panoul de verificare.
   overflow: auto pe ambele axe (nu doar overflow-x) ca antetul lipicios sa aiba fata
   de ce sa se lipeasca - aceeasi regula ca la tabelul de corpuri din editor. */
.tabel-derulabil {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--bordura);
  margin-bottom: 1rem;
}

table.rezultate {
  margin-bottom: 0;
  font-size: 0.9rem;
  border-collapse: separate;      /* 'collapse' pierde borduri sub thead lipicios */
  border-spacing: 0;
}

table.rezultate th,
table.rezultate td {
  border: none;
  border-right: 1px solid var(--bordura);
  border-bottom: 1px solid var(--bordura);
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}

table.rezultate td:first-child,
table.rezultate th:first-child {
  white-space: normal;            /* numele complet al piesei e lung, are voie sa curga */
  min-width: 12rem;
}

table.rezultate th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fundal-slab);
  border-top: 1px solid var(--bordura);
}

table.rezultate tbody tr:nth-child(even) {
  background: #fafafa;
}

table.rezultate .cota {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.rezultate .gol {
  text-align: center;
  color: #555;
  white-space: normal;
}

.tab-panou .corp-titlu {
  margin: 1rem 0 0.2rem;
  font-size: 1rem;
}

.tab-panou .corp-detalii {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: #555;
}

.eticheta-sarit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--eroare);
  background: var(--eroare-fundal);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
}

/* Banda "lista este INCOMPLETA" de langa tabele: se tipareste odata cu ele, deci nu
   are voie sa fie discreta. */
.eroare.incomplet {
  background: var(--eroare-fundal);
  border: 1px solid var(--eroare);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
}

.descarcare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

/* Butonul de descarcare inainte ca ruta sa existe (Task 11): arata locul lui, dar nu
   se poate apasa - un link care da 404 pare o descarcare stricata. */
.buton.dezactivat {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--bordura);
  border-radius: 3px;
  background: var(--fundal-slab);
  color: #777;
  cursor: not-allowed;
  font-weight: 600;
}

.navigare-panou {
  margin: 0.6rem 0 0;
  font-weight: 600;
}

.navigare-sus,
.navigare-jos {
  margin: 0.3rem 0 1rem;
}

/* Tipar: pagina de rezultate e cea care se duce la ferastrau (vezi comentariul din
   rezultate.html), dar pana acum tipari doar tabul deschis pe ecran - regula
   ".tab-panou { display: none; }" de mai sus + regulile ":checked ~" arata un singur
   panou din patru, iar celelalte trei (Corpuri, Materiale, Accesorii) nu ajungeau
   niciodata pe hartie. Restul aplicatiei (antetul, avertismentul FARA parola,
   navigarea intre pagini, butonul de descarcare, etichetele taburilor) n-are ce cauta
   pe hartie - se tipareste pentru un om cu foaia in mana la ferastrau, nu ecranul.
   NU se ating regulile .plansa/#desen - pagina de rezultate nu include desenul deloc
   (_svg.html nu apare in rezultate.html), deci nu exista nimic de-al lor aici. */
@media print {
  header,
  .avertisment,
  .navigare-sus,
  .navigare-jos,
  .navigare-panou,
  .descarcare,
  .tab-etichete,
  .tab-radio {
    display: none;
  }

  .taburi {
    border: none;
    padding: 0;
    margin-bottom: 0;
  }

  /* Cele patru <section class="tab-panou"> sunt fratii care in mod normal se aprind
     unul cate unul dupa radio-ul bifat - la tipar se arata toate, unul sub altul, ca
     sa nu lipseasca Corpuri/Materiale/Accesorii de pe hartie. !important e necesar ca
     sa bata atat ".tab-panou { display: none; }" de mai sus, cat si regula
     ":checked ~ .tab-panou:nth-of-type(n)" care altfel ar arata numai tabul bifat. */
  .tab-panou {
    display: block !important;
    break-inside: avoid;
    margin-bottom: 1.5rem;
  }

  .tab-panou:last-child {
    margin-bottom: 0;
  }
}