/* Azimundo — scheletul aplicației: meniu lateral, ecrane, carduri, formulare.
   Se încarcă DUPĂ azimundo.css (care ține tema + globul). Aici doar aplicația. */

:root{
  --sbw:262px;            /* lățimea meniului lateral */
  --ok:#7fd8c9; --warn:#ffd166; --bad:#ff8a5c;
  --line:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.035);
  --card2:rgba(255,255,255,.055);
}

/* ============ structura ============ */
.app{display:flex;min-height:100vh;background:var(--bg)}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
/* --pad = marginea laterală curentă; taburile o folosesc ca să iasă exact până la
   marginea ecranului, fără să depășească (altfel apare derulare orizontală pe telefon). */
.app-content{--pad:40px;flex:1;padding:34px var(--pad) 60px;max-width:1180px;width:100%;margin:0 auto}

/* ============ meniul lateral ============ */
.sidebar{width:var(--sbw);flex:none;background:linear-gradient(180deg,#081a2c,#061523 60%,#050f1a);
  border-right:1px solid rgba(255,209,102,.16);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60;
  scrollbar-width:thin;scrollbar-color:#1d4869 transparent}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:#1d4869;border-radius:4px}
.sb-brand{padding:20px 20px 14px;display:flex;align-items:center;gap:10px;text-decoration:none}
.sb-brand .logo{width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,#7fd8c9,#1d6f8f 55%,#0b2438);
  box-shadow:0 0 0 1px rgba(255,209,102,.45),0 4px 16px rgba(0,0,0,.5)}
.sb-brand .nm{font-family:var(--serif);font-size:21px;color:#f7f2e7;line-height:1}
.sb-brand .nm em{font-style:normal;color:var(--gold)}
.sb-brand .tag{font-size:9.5px;letter-spacing:2.4px;color:var(--dim);margin-top:3px}

.sb-sec{padding:6px 12px 4px}
.sb-lbl{font-size:9.5px;letter-spacing:2.4px;color:#6b8398;font-weight:700;padding:14px 10px 7px;text-transform:uppercase}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:#c3d3e0;text-decoration:none;font-size:13.6px;font-weight:500;line-height:1.25;
  transition:background .15s,color .15s;position:relative}
.sb-link .ic{width:20px;text-align:center;font-size:15px;flex:none}
.sb-link:hover{background:rgba(255,255,255,.06);color:#f2f6fa}
.sb-link.on{background:rgba(255,209,102,.13);color:var(--gold)}
.sb-link.on::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  background:var(--gold);border-radius:0 3px 3px 0}
.sb-link .pill{margin-left:auto;background:var(--coral);color:#08131f;font-size:10.5px;font-weight:800;
  border-radius:9px;padding:1px 7px;min-width:19px;text-align:center}
.sb-link .pill.soft{background:rgba(127,216,201,.2);color:var(--teal)}
.sb-link .pill.warn{background:var(--gold);color:#082036}

.sb-trip{margin:4px 12px 0;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--line)}
.sb-trip .t{font-family:var(--serif);font-size:14.5px;color:#f7f2e7;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-trip .d{font-size:11px;color:var(--dim);margin-top:4px}
.sb-trip .d b{color:var(--teal);font-weight:700}
.sb-foot{margin-top:auto;padding:12px;border-top:1px solid var(--line)}

/* Comutatorul de limbă: două pastile mici, cea activă evidențiată. Fără JavaScript,
   ca să meargă și pe paginile publice, unde nu încărcăm scripturile aplicației. */
.lang-switch{display:inline-flex;gap:4px;padding:4px;margin:0 0 8px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line)}
.lang-opt{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;
  font-size:12px;font-weight:600;letter-spacing:.4px;color:#8fa6b8;text-decoration:none;
  transition:background .15s,color .15s;white-space:nowrap}
.lang-opt:hover{background:rgba(255,255,255,.06);color:#e8f0f6}
.lang-opt.on{background:rgba(127,216,201,.14);color:var(--teal);cursor:default}
.lang-switch.flotant{position:absolute;top:18px;right:22px;z-index:30;
  background:rgba(6,15,26,.72);backdrop-filter:blur(6px)}
@media(max-width:640px){.lang-switch.flotant{top:12px;right:12px}
  .lang-opt{padding:5px 8px;font-size:11.5px}}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px 12px}
.sb-user .av{width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#1d6f8f,#0b2438);border:1px solid rgba(255,209,102,.35);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--gold)}
.sb-user .nm{font-size:13px;color:#dbe6ee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user .em{font-size:10.5px;color:#6b8398;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ bara de sus (mobil) ============ */
.topnav{display:none;position:sticky;top:0;z-index:55;align-items:center;gap:12px;
  padding:11px 15px;background:rgba(6,15,26,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,209,102,.18)}
.topnav .burger{background:none;border:1px solid rgba(255,209,102,.35);color:var(--gold);
  width:38px;height:38px;border-radius:10px;font-size:17px;cursor:pointer;flex:none}
.topnav .ttl{font-family:var(--serif);font-size:17px;color:#f7f2e7;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topnav .bell{position:relative;color:#c3d3e0;text-decoration:none;font-size:19px;padding:4px 6px}
.topnav .bell .dot{position:absolute;top:0;right:0;background:var(--coral);color:#08131f;
  font-size:9.5px;font-weight:800;border-radius:8px;padding:0 5px;min-width:16px;text-align:center}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(2,7,13,.72);z-index:59;
  backdrop-filter:blur(2px)}

/* ============ antetul paginii ============ */
.page-head{margin-bottom:24px}
.page-head .crumb{font-size:11.5px;color:var(--dim);margin-bottom:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.page-head .crumb a{color:var(--teal);text-decoration:none}
.page-head .crumb a:hover{text-decoration:underline}
.page-head h1{font-family:var(--serif);font-size:31px;color:#f7f2e7;line-height:1.15;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-head .lead{color:var(--dim);font-size:14.5px;margin-top:8px;line-height:1.6;max-width:760px}
.page-head .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ============ taburile unui trip ============ */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin:-4px 0 24px;
  scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 15px;
  border-radius:20px;font-size:13px;font-weight:600;text-decoration:none;color:#b9c8d5;
  border:1px solid var(--line);background:rgba(255,255,255,.02);transition:all .15s}
.tabs a:hover{border-color:rgba(255,209,102,.45);color:#f2f6fa}
.tabs a.on{background:var(--gold);border-color:var(--gold);color:#082036}
.tabs a .n{background:rgba(0,0,0,.18);border-radius:8px;padding:0 6px;font-size:11px}
.tabs a.on .n{background:rgba(0,0,0,.22)}
.tabs a:not(.on) .n{background:rgba(255,138,92,.22);color:#ffb287}

/* ============ carduri & grile ============ */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.box.tight{padding:15px}
.box h2,.box h3{font-family:var(--serif);color:#f7f2e7;margin-bottom:4px}
.box h2{font-size:20px} .box h3{font-size:16.5px}
.box .hint{font-size:12.5px;color:var(--dim);line-height:1.55}
.box-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.box-head h2,.box-head h3{margin:0}
.box-head .sp{flex:1}

.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:17px 19px}
.stat .k{font-size:10.5px;letter-spacing:1.8px;color:var(--dim);font-weight:700;text-transform:uppercase}
.stat .v{font-family:var(--serif);font-size:27px;color:var(--gold);margin-top:7px;line-height:1.1}
.stat .v.sm{font-size:20px}
.stat .s{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.5}
.stat.ok .v{color:var(--teal)} .stat.bad .v{color:var(--coral)}

/* ============ butoane & formulare ============ */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.sm{padding:6px 13px;font-size:12.5px}
.btn.tiny{padding:4px 10px;font-size:11.5px;border-radius:16px}
.btn.ghost{border-color:var(--line);color:#b9c8d5}
.btn.ghost:hover{border-color:rgba(255,209,102,.5);color:var(--gold)}
.btn.danger{border-color:rgba(255,138,92,.5);color:var(--coral)}
.btn.danger:hover{background:var(--coral);color:#081c2e;border-color:var(--coral)}
.btn.teal{border-color:rgba(127,216,201,.55);color:var(--teal)}
.btn.teal:hover{background:var(--teal);color:#082036}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}

label.fl{display:block;font-size:11.5px;letter-spacing:1.3px;color:var(--dim);font-weight:700;
  text-transform:uppercase;margin-bottom:6px}
.inp,input[type=text].inp,input[type=email].inp,input[type=number].inp,input[type=date].inp,
input[type=datetime-local].inp,select.inp,textarea.inp{
  width:100%;background:rgba(3,10,18,.6);border:1px solid var(--line);border-radius:11px;
  padding:10px 13px;color:var(--ink);font-size:14px;font-family:var(--sans);transition:border-color .15s}
/* Se vede unde ești cu tastatura.
   Aici era `outline:none` cu o singură schimbare de nuanță a chenarului — pe fundalul
   închis diferența e sub pragul la care ochiul o prinde, așa că omul care se plimbă cu
   Tab printr-un formular lung nu mai știa în ce câmp scrie. Punem înapoi un semn
   adevărat: chenar auriu plin + un inel în jurul lui, la fel de vizibil în ambele stări.
   `:focus-visible` ține inelul departe de cei care dau clic cu mausul. */
.inp:focus{outline:none;border-color:rgba(255,209,102,.75);box-shadow:0 0 0 3px rgba(255,209,102,.22)}
.inp:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,209,102,.28)}
/* Aceleași reguli pentru butoane și legături — Tab-ul nu trece doar prin câmpuri. */
.btn:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,
[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
textarea.inp{min-height:110px;resize:vertical;line-height:1.6}
select.inp{cursor:pointer}
select.inp option{background:#0a2036;color:var(--ink)}
.field{margin-bottom:15px}
.field .help{font-size:11.5px;color:#6b8398;margin-top:5px;line-height:1.5}
.inline-form{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.inline-form .field{margin:0;flex:1;min-width:140px}

/* ============ liste de rânduri (termene, membri, bagaje...) ============ */
.rows{display:flex;flex-direction:column;gap:9px}
.row-item{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:13px 16px;transition:border-color .15s,background .15s}
.row-item:hover{border-color:rgba(255,209,102,.3);background:var(--card2)}
.row-item .ric{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.row-item .rbody{flex:1;min-width:0}
.row-item .rt{font-size:14.5px;font-weight:600;color:#f2f6fa;line-height:1.35}
.row-item .rs{font-size:12.3px;color:var(--dim);margin-top:3px;line-height:1.5}
.row-item .racts{display:flex;gap:7px;align-items:center;flex:none}
.row-item.done{opacity:.5}
.row-item.done .rt{text-decoration:line-through}
.row-item.crit{border-left:3px solid var(--coral)}
.row-item.warn{border-left:3px solid var(--gold)}
.row-item.info{border-left:3px solid var(--teal)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 10px;border-radius:12px;letter-spacing:.4px;white-space:nowrap}
.chip.g{background:rgba(127,216,201,.16);color:var(--teal)}
.chip.y{background:rgba(255,209,102,.16);color:var(--gold)}
.chip.r{background:rgba(255,138,92,.18);color:var(--coral)}
.chip.n{background:rgba(159,180,196,.14);color:var(--dim)}

/* ============ stări goale ============ */
.empty{text-align:center;padding:44px 24px;border:1px dashed rgba(255,209,102,.3);border-radius:16px;
  background:rgba(255,209,102,.03)}
.empty .e{font-size:34px;margin-bottom:12px}
.empty h3{font-family:var(--serif);font-size:19px;color:#f7f2e7;margin-bottom:8px}
.empty p{color:var(--dim);font-size:13.5px;line-height:1.65;max-width:460px;margin:0 auto 18px}

/* ============ mesaje flash ============ */
.flash{display:flex;align-items:flex-start;gap:11px;border-radius:13px;padding:13px 17px;margin-bottom:20px;
  font-size:13.5px;line-height:1.55;border:1px solid}
.flash.ok{background:rgba(127,216,201,.1);border-color:rgba(127,216,201,.45);color:#bfe9e1}
.flash.err{background:rgba(255,138,92,.1);border-color:rgba(255,138,92,.5);color:#ffc4a8}
.flash.info{background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.4);color:#ffe0a3}

/* ============ tabele ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13.3px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:1.4px;color:var(--dim);font-weight:700;
  text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05);color:#cfdae5;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .money{color:var(--gold);font-weight:700}
/* Derularea pe orizontală a tabelelor late.
   `overflow-x:auto` singur NU e de ajuns: un element dintr-un container flexibil are,
   implicit, lățimea minimă egală cu a conținutului, deci se lățește în loc să deruleze —
   și împinge toată pagina. `min-width:0` îi dă voie să fie mai îngust decât tabelul.
   Se vedea pe telefon, la /admin/sistem: pagina depășea ecranul cu 112px. */
.tbl-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px;min-width:0}
.app-content,.box{min-width:0}

/* ============ progres / cronologie ============ */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,rgba(255,209,102,.5),rgba(127,216,201,.35))}
.tl-item{position:relative;padding-bottom:20px}
.tl-item::before{content:'';position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid #081c2e;box-shadow:0 0 0 2px rgba(255,209,102,.3)}
.tl-item.past::before{background:#42627a;box-shadow:none}
.tl-item.now::before{background:var(--teal);box-shadow:0 0 0 3px rgba(127,216,201,.35);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(127,216,201,.35)}50%{box-shadow:0 0 0 7px rgba(127,216,201,.08)}}
.tl-item .tw{font-size:11px;letter-spacing:1.5px;color:var(--gold);font-weight:700;text-transform:uppercase}
.tl-item .tt{font-size:15px;color:#f2f6fa;font-weight:600;margin-top:3px}
.tl-item .tx{font-size:12.8px;color:var(--dim);margin-top:4px;line-height:1.6}

/* ============ responsive ============ */
@media (max-width:1024px){
  .app-content{--pad:22px;padding:26px var(--pad) 80px}
  .page-head h1{font-size:26px}
}
@media (max-width:980px){
  .topnav{display:flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:22px 0 60px rgba(0,0,0,.6);width:280px}
  .sidebar.open{transform:translateX(0)}
  .sb-backdrop.show{display:block}
  .app-content{--pad:16px;padding:20px var(--pad) 90px}
  .page-head h1{font-size:23px}
  .page-head .lead{font-size:13.5px}
  .box{padding:16px;border-radius:14px}
  .stat{padding:14px 16px}
  .stat .v{font-size:23px}
  .grid{gap:12px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .row-item{padding:12px 13px;gap:11px;align-items:flex-start;flex-wrap:wrap}
  .row-item .rbody{flex:1 1 100%;min-width:0}
  .row-item .racts{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;margin-top:4px}
  .row-item .ric{margin-bottom:-6px}
  .tabs{margin:0 calc(-1 * var(--pad)) 20px;padding:0 var(--pad) 4px}
  .inline-form .field{min-width:100%}
  .btn{padding:9px 16px}
}
@media (max-width:420px){
  .app-content{--pad:12px;padding:16px var(--pad) 90px}
  .page-head h1{font-size:20.5px}
  .box{padding:14px}
  .row-item .ric{width:31px;height:31px;font-size:14px}
}

/* pe ecrane mici, tabelele „grele" devin liste */
@media (max-width:640px){
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 4px;background:var(--card)}
  .tbl.stack td{display:flex;justify-content:space-between;gap:14px;border:none;padding:7px 12px;text-align:right}
  .tbl.stack td::before{content:attr(data-l);font-size:10.5px;letter-spacing:1.2px;color:var(--dim);
    font-weight:700;text-transform:uppercase;text-align:left;flex:none}
  .tbl.stack td.num{text-align:right}
}

/* ============ galeria de poze mari (PhotoSwipe) ============
   Pielea implicită a bibliotecii e gri și alb pe negru — corectă, dar străină peste navy
   și auriu: pare o fereastră a altcuiva deschisă peste aplicație. Aici se schimbă DOAR
   culorile și formele, prin variabilele pe care biblioteca le expune anume pentru asta.

   Fișierele din public/js/vendor/photoswipe/ rămân exact cele publicate de autor (MIT,
   fără nicio dependență), ca actualizarea la o versiune nouă să fie o simplă copiere
   peste. Cine mută vreodată regulile astea ÎN fișierul bibliotecii pierde tocmai asta:
   prima actualizare le va șterge fără să spună nimănui, iar galeria va redeveni gri.

   DE CE `.pswp.pswp` ȘI NU `.pswp`, deși e aceeași clasă scrisă de două ori:
   foaia bibliotecii se încarcă din `@stack('head')`, adică DUPĂ shell.css. La aceeași
   greutate de selector câștigă ultima foaie citită — deci un `.pswp` simplu de aici ar fi
   fost înghițit tăcut de `.pswp` al bibliotecii, iar galeria ar fi rămas gri pe negru,
   fără nicio eroare nicăieri. Măsurat în browser, nu presupus. Clasa dublată dă greutate
   mai mare și ne scoate din cursa asta cu totul.
   Cine „curăță" duplicatul peste un an strică exact atât: culorile dispar, nimic nu se
   plânge. */
.pswp.pswp{
  --pswp-bg:#03080e;
  --pswp-placeholder-bg:#081a2c;
  --pswp-icon-color:#ffd166;
  --pswp-icon-color-secondary:#03080e;
  --pswp-icon-stroke-color:rgba(3,8,14,.6);
  --pswp-icon-stroke-width:1.6px;
  --pswp-preloader-color:rgba(159,180,196,.28);
  --pswp-preloader-color-secondary:#ffd166;
  --pswp-error-text-color:#ffc4a8;
}
/* Aceeași boltă ca pe restul ecranelor, nu un negru plat. */
.pswp.pswp .pswp__bg{background:radial-gradient(120% 90% at 50% 0%,#0b2438,#03080e 72%)}
.pswp.pswp .pswp__button{border-radius:12px;transition:background .15s}
.pswp.pswp .pswp__button:hover{background:rgba(255,209,102,.15)}
.pswp.pswp .pswp__button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pswp.pswp .pswp__counter{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:1px;
  color:var(--dim);text-shadow:none;opacity:1}
.pswp.pswp .pswp__img{border-radius:5px}

/* Legenda de sub poză: se scrie din pagină, la fiecare schimbare de imagine.

   `pointer-events:none` nu e o rafinare, e ce ține glisarea vie: banda stă exact peste
   marginea de jos, adică fix unde cade degetul pe telefon când tragi spre poza următoare.
   Cu evenimentele pornite, jumătatea de jos a ecranului nu mai schimbă poza.
   Clasa dublată de mai jos e obligatorie și aici: biblioteca pune pe orice element de
   interfață clasa `pswp__hide-on-close`, iar regula ei `.pswp--ui-visible
   .pswp__hide-on-close{pointer-events:auto}` cântărește la fel de mult ca un `.pswp .…`
   de-al nostru — și, fiind citită după shell.css, câștiga. Măsurat în browser. */
.pswp.pswp .pswp__azi-legenda{position:absolute;left:0;right:0;bottom:0;z-index:10;pointer-events:none;
  padding:40px 20px 20px;text-align:center;font-family:var(--sans);
  background:linear-gradient(0deg,rgba(3,8,14,.93),rgba(3,8,14,.55) 58%,transparent)}
.pswp.pswp .pswp__azi-legenda[hidden]{display:none}
.pswp.pswp .pswp__azi-legenda .t{font-size:15px;line-height:1.55;color:#f7f2e7;max-width:760px;margin:0 auto}
.pswp.pswp .pswp__azi-legenda .d{font-size:12px;line-height:1.5;color:var(--dim);margin-top:6px}
@media (max-width:600px){
  .pswp.pswp .pswp__azi-legenda{padding:32px 14px 16px}
  .pswp.pswp .pswp__azi-legenda .t{font-size:13.5px}
}

/* utilitare */
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt28{margin-top:28px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}.mb20{margin-bottom:20px}
.muted{color:var(--dim)}.gold{color:var(--gold)}.teal{color:var(--teal)}.coral{color:var(--coral)}
.small{font-size:12.3px}.bold{font-weight:700}.center{text-align:center}
.nowrap{white-space:nowrap}.flex{display:flex}.gap8{gap:8px}.gap12{gap:12px}.wrap-f{flex-wrap:wrap}
.hide{display:none!important}