/* Delta Dunării Maps — rutare pe apă. Stiluri.
Paleta e scoasă din siglă, nu aleasă pe lângă ea: navy-ul fundalului,
albastrul mediu al arcului, albastrul deschis al valului. Așa marca și
aplicația arată ca fiind același lucru, iar sigla nu stă ca un autocolant
peste un design străin.
Numele variabilelor au rămas cele vechi — `--teal`, `--cream` — deși
culorile nu mai sunt acelea. Redenumirea ar fi atins câteva sute de locuri
pentru zero câștig: ce contează e rolul, iar rolul nu s-a schimbat. */
:root{
--navy:#16294a; /* fundalul siglei; carduri de navigație */
--navy-2:#1E3A63;
--albastru:#2E6EA6; /* arcul siglei */
--albastru-tare:#1B62C4; /* acțiuni, traseu */
--albastru-pal:#E8F1FA; /* fundal de rând ales */
--val:#93C6E8; /* valul din siglă */
--ink:#132033; --ink-2:#4a5a70; --ink-3:#8496aa;
--cream:#eef3f9; --surface:#fff;
--accent:#1B62C4; --teal:#16294a; --teal-deep:#0e1c33;
--apa:#2E6EA6; --lac:#9CC9E8;
--linie:rgba(19,32,51,.13);
--sigur:#1f8a5f; --atentie:#c07d12; --oprit:#c2412d;
/* Lățimea panoului. Pe telefon e toată lățimea ecranului, deci zero;
pe ecran mare devine o coloană, iar butoanele de acțiune se dau la o
parte cu exact atât. O singură valoare, ca să nu se desincronizeze. */
--panou-w:0px;
font-family:"Albert Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* ---------- documentul nu are voie să se deruleze ----------
`overflow:hidden` NU e de ajuns pe iOS. Când un `` primește focus și
urcă tastatura, Safari derulează documentul ca să aducă câmpul la vedere —
peste `overflow:hidden` — iar când tastatura pleacă, offsetul RĂMÂNE. Din
afară arată exact așa: toată aplicația urcată, o dungă gri jos, butoanele
de sus ajunse sub marginea ecranului. Și se repară „singură" dacă nimerești
să derulezi înapoi, ceea ce face bug-ul să pară capricios.
`position:fixed` pe body scoate documentul din discuție: n-are ce derula,
fiindcă n-are înălțime de derulat. `overscroll-behavior:none` oprește și
efectul de cauciuc, care lăsa aceeași dungă pentru o clipă.
`100dvh` înaintea lui `100%`: pe telefon, bara de adrese care se ascunde
schimbă înălțimea „vizibilă", iar `dvh` o urmărește. Browserele care nu-l
știu iau rândul de dinainte. */
html,body{margin:0;width:100%;height:100%;height:100dvh;
position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;
background:var(--cream);color:var(--ink)}
#harta{position:absolute;inset:0}
/* ---------- pastila de înregistrare ----------
Stătea în antet. Antetul a plecat, ea a rămas — dar acum plutește singură,
sus-centru, fiindcă apare doar cât înregistrezi o tură. */
.inreg-chip{position:absolute;z-index:6;top:calc(env(safe-area-inset-top) + 10px);
left:50%;transform:translateX(-50%)}
.cota{background:var(--surface);border:1px solid var(--linie);border-radius:999px;
padding:7px 14px;font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center;
box-shadow:0 1px 3px rgba(19,32,51,.08)}
.cota{cursor:pointer}
.cota b{font-variant-numeric:tabular-nums}
.cota .pastila{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.spatiu{flex:1}
.inreg-chip{display:flex;align-items:center;gap:8px;background:var(--oprit);color:#fff;
border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:650;
box-shadow:0 2px 8px rgba(194,65,45,.35);font-variant-numeric:tabular-nums}
.inreg-chip[hidden]{display:none}
.inreg-chip .pct{width:8px;height:8px;border-radius:50%;background:#fff;
animation:clipeste 1.6s ease-in-out infinite}
@keyframes clipeste{0%,100%{opacity:1}50%{opacity:.25}}
.cont{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
padding:7px 14px;border-radius:999px;border:1px solid var(--linie);background:var(--surface);
color:var(--ink);box-shadow:0 1px 3px rgba(19,32,51,.08);display:flex;align-items:center;gap:7px}
.cont .rol{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:2px 7px;border-radius:999px;background:var(--cream);color:var(--ink-2)}
.cont .rol.platitor{background:#e3f2ea;color:#1f8a5f}
.cont .rol.admin{background:#fbe9e5;color:#a13122}
.cont .rol.superadmin{background:#16294a;color:#ffffff}
.furnizori{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.furnizor{appearance:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
padding:13px 18px;border-radius:12px;border:1px solid var(--linie);background:var(--surface);
color:var(--ink);display:flex;align-items:center;gap:12px;transition:.14s}
.furnizor:hover{border-color:var(--ink-3);background:var(--cream-2, #f4f9fe)}
.furnizor:active{transform:scale(.98)}
/* Sigla Google are dimensiunea și marginile cerute de regulile ei de folosire:
nedeformată, pe fond alb sau deschis, lângă text, nu în locul lui. */
.furnizor .sigla{width:20px;height:20px;flex:none;display:block}
.rotund[disabled]{opacity:.4;cursor:not-allowed}
/* ---------- butoane plutitoare ---------- */
.actiuni{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 108px);
z-index:5;display:flex;flex-direction:column;gap:9px}
.rotund{width:48px;height:48px;border-radius:50%;border:1px solid var(--linie);
background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;
box-shadow:0 2px 8px rgba(19,32,51,.14);font-size:19px;transition:.15s;
/* culorile implicite ale pictogramei; fiecare buton le rescrie mai jos */
--c1:var(--ink);--c2:var(--ink);--c3:var(--ink)}
/* `display:grid` de mai sus BATE regula implicită a browserului pentru
[hidden], care e `display:none` la specificitate zero. Fără rândul ăsta,
`b.hidden = true` pune atributul, `el.hidden` întoarce `true` — și butonul
se vede mai departe pe ecran. Exact asta s-a întâmplat cu „Adaugă o
legătură lipsă" și „Marchează un canal impracticabil": codul le ascundea,
testul verifica atributul și trecea, iar pe telefon erau tot acolo.
Toate celelalte suprafețe ascunse cu `hidden` au deja rândul lor; ăsta
lipsea. */
.rotund[hidden]{display:none}
.rotund:active{transform:scale(.94)}
.rotund[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
.rotund svg{width:23px;height:23px;display:block;pointer-events:none}
/* Culoarea fiecărei pictograme, prin variabile. Starea „apăsat" nu trebuie
să știe nimic despre desenul dinăuntru: schimbă doar variabilele, iar
pictograma devine albă oricâte culori ar fi avut. */
.ic-cauta{--c1:#2E6EA6}
.ic-loc {--c1:#16294a;--c2:#16294a}
.ic-nume {--c1:#4a5a70}
.ic-fond {--c1:#1B62C4;--c2:#2E6EA6;--c3:#93C6E8}
.ic-ruta {--c1:#c2412d;--c2:#1f8a5f;--c3:#8496aa}
.ic-leg {--c1:#1B62C4;--c2:#1B62C4}
.ic-poi {--c1:#16294a;--c2:#1B62C4}
.ic-apropiere{--c1:#2E6EA6;--c2:#16294a}
.ic-bloc {--c1:#c2412d}
.ic-rec {--c1:#c2412d}
.ic-live {--c1:#1f8a5f}
.rotund[aria-pressed="true"],
.rotund.live,.rotund.urmarire,.rotund.inreg{--c1:#fff;--c2:#fff;--c3:#fff}
/* Butonul de înregistrare stă roșu în repaus, ca să se vadă la ce e bun, apoi
inversează: fundal roșu, pictogramă albă. Aceeași formă, culorile schimbate. */
.rotund.inreg{background:var(--oprit);border-color:var(--oprit);
animation:puls 2s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 2px 8px rgba(194,65,45,.4)}50%{box-shadow:0 2px 18px rgba(194,65,45,.75)}}
/* ---------- meniul, stânga jos ----------
La degetul mare al mâinii stângi, departe de butoanele de acțiune. Ce e
aici nu se face pe apă: setări, ajutor, cont. */
.meniu-buton{position:absolute;left:12px;z-index:6;
bottom:calc(env(safe-area-inset-bottom) + 82px);
width:48px;height:48px;border-radius:50%;border:1px solid var(--linie);
background:var(--surface);color:var(--teal);display:grid;place-items:center;cursor:pointer;
box-shadow:0 2px 8px rgba(19,32,51,.14);transition:.15s}
.meniu-buton svg{width:23px;height:23px;display:block;pointer-events:none}
.meniu-buton:active{transform:scale(.94)}
.meniu-buton[aria-expanded="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
/* ---------- sertarul ----------
Intră din stânga, de unde vine și butonul. Vălul din spate face două
lucruri: spune că restul aplicației e în pauză și oferă o suprafață mare
pe care o atingi ca să ieși — mai ușor de nimerit decât un × de 32 px. */
.voal{position:absolute;inset:0;z-index:11;background:rgba(19,32,51,.38);
opacity:0;transition:opacity .22s;pointer-events:none}
.voal.vizibil{opacity:1;pointer-events:auto}
.voal[hidden]{display:none}
.sertar{position:absolute;top:0;bottom:0;left:0;z-index:12;
width:min(330px, 86vw);background:var(--surface);
border-right:1px solid var(--linie);box-shadow:6px 0 28px rgba(19,32,51,.18);
display:flex;flex-direction:column;
transform:translateX(-101%);transition:transform .26s cubic-bezier(.3,.8,.4,1)}
.sertar.deschis{transform:translateX(0)}
.sertar[hidden]{display:none}
.sertar-cap{display:flex;align-items:center;gap:9px;flex:none;
padding:calc(env(safe-area-inset-top) + 14px) 14px 12px;
border-bottom:1px solid var(--linie)}
.sertar-titlu{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sertar-versiune{flex:1;font-size:12.5px;color:var(--ink-3)}
.sertar-corp{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
padding:4px 10px calc(env(safe-area-inset-bottom) + 18px)}
.meniu-lista{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px}
.meniu-rand{appearance:none;border:0;background:transparent;font:inherit;font-size:15px;
color:var(--ink);text-align:left;cursor:pointer;width:100%;
padding:12px 6px;border-radius:11px;display:flex;align-items:center;gap:13px;transition:.12s}
.meniu-rand:hover{background:#f1f6fb}
.meniu-rand:active{transform:scale(.99)}
.meniu-rand .ico{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
.meniu-rand .ico svg{width:20px;height:20px;display:block}
.meniu-rand .txt{flex:1;min-width:0}
.meniu-rand .sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.35}
.meniu-rand .val{font-size:13px;color:var(--ink-3);flex:none}
.meniu-rand.pericol{color:var(--oprit)}
.meniu-rand.pericol .ico{color:var(--oprit)}
.meniu-grup{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);margin:16px 0 4px;padding:0 6px}
.meniu-grup:first-child{margin-top:4px}
.meniu-nota{font-size:12.5px;color:var(--ink-3);line-height:1.45;padding:2px 6px 8px}
/* pastilele de categorii din sertar au acul categoriei în loc de bulină */
.sertar .categorii{padding:0 4px;margin-bottom:2px}
.cat .ac-mic{flex:none;display:grid;place-items:center;width:15px;height:20px}
.cat .ac-mic svg{display:block}
/* ---------- meniul plutitor ----------
Ancorat lângă butonul care l-a deschis. Poziția e calculată în JS, fiindcă
butonul se mută: bara e jos pe telefon și mai sus pe ecran mare, iar meniul
trebuie să încapă pe ecran în ambele cazuri. */
.plutitor{position:absolute;z-index:9;background:var(--surface);
border:1px solid var(--linie);border-radius:14px;
box-shadow:0 6px 26px rgba(19,32,51,.22);
padding:6px;min-width:196px;max-width:min(300px, 78vw);
max-height:min(66vh, 460px);overflow:auto;overscroll-behavior:contain}
.plutitor[hidden]{display:none}
.plutitor-titlu{font-size:11.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-3);padding:6px 8px 4px}
.plut-rand{appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;
color:var(--ink);text-align:left;cursor:pointer;width:100%;
padding:10px 9px;border-radius:10px;display:flex;align-items:center;gap:11px;transition:.12s}
.plut-rand:hover{background:#f1f6fb}
.plut-rand:active{transform:scale(.985)}
.plut-rand .ac{width:22px;flex:none;display:grid;place-items:center}
.plut-rand .ac svg{display:block}
.plut-rand .txt{flex:1;min-width:0}
.plut-rand .sub{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:1px}
.plut-rand[aria-pressed="true"]{background:#e8f1fa;color:var(--teal);font-weight:650}
.plut-rand .bifa{width:16px;flex:none;color:var(--teal);opacity:0}
.plut-rand[aria-pressed="true"] .bifa{opacity:1}
.plut-nota{font-size:12.5px;color:var(--ink-3);line-height:1.45;padding:6px 9px 4px}
/* ---------- căutarea ---------- */
.cautare{position:absolute;top:0;left:0;right:0;z-index:8;
padding:calc(env(safe-area-inset-top) + 10px) 12px 0}
.cautare[hidden]{display:none}
.cautare-cutie{display:flex;align-items:center;gap:9px;background:var(--surface);
border:1px solid var(--linie);border-radius:14px;padding:10px 12px;
box-shadow:0 3px 16px rgba(19,32,51,.18)}
.cautare-cutie .lupa{width:19px;height:19px;flex:none;color:var(--ink-3)}
.cautare input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:16px;
background:transparent;color:var(--ink)}
.cautare input::-webkit-search-cancel-button{display:none}
.cautare-x{appearance:none;border:0;background:transparent;color:var(--ink-3);
font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.cautare-rez{margin-top:7px;background:var(--surface);border:1px solid var(--linie);
border-radius:14px;box-shadow:0 3px 16px rgba(19,32,51,.18);
max-height:min(56vh,460px);overflow:auto}
.cautare-rez:empty{display:none}
.rez-rand{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
border-bottom:1px solid var(--linie)}
.rez-rand:last-child{border-bottom:0}
.rez-rand:hover{background:#f1f6fb}
.rez-rand .pastila-fel{width:9px;height:9px;border-radius:50%;flex:none}
.rez-rand .nume{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rez-rand .fel{font-size:12.5px;color:var(--ink-3);flex:none}
.cautare-gol{padding:14px 13px;font-size:14px;color:var(--ink-3);line-height:1.5}
/* ---------- panoul de jos ----------
Trei trepte, nu două. O atingere pe hartă poate fi din greșeală, deci
deschide panoul doar pe jumătate: vezi despre ce e vorba fără să pierzi
harta. O acțiune cerută de tine — un buton, un traseu calculat — îl
deschide de tot. */
/* z-index 11: peste ecranul Acasă (10), sub sertar (12). Era 8, adică SUB
Acasă — iar codul QR al unei ture, deschis din Acasă, se desena dedesubt și
părea că nu s-a întâmplat nimic; trebuia să închizi Acasă ca să-l vezi. Un
panou deschis cu intenție e ultimul lucru cerut, deci stă deasupra a ceea ce
era pe ecran, nu sub. */
.panou{position:absolute;left:0;right:0;bottom:0;z-index:11;background:var(--surface);
border-top:1px solid var(--linie);border-radius:18px 18px 0 0;
padding:0 16px calc(env(safe-area-inset-bottom) + 14px);
box-shadow:0 -3px 20px rgba(19,32,51,.10);
transform:translateY(calc(100% - 62px));transition:transform .28s cubic-bezier(.3,.8,.4,1);
max-height:76vh;overflow:auto;overscroll-behavior:contain}
.panou.jumatate{transform:translateY(max(0px, calc(100% - 42vh)))}
/* `.deschis` stă DUPĂ `.jumatate` intenționat: orice cod vechi care adaugă
doar clasa `deschis` deschide panoul complet, chiar dacă era la jumătate. */
.panou.deschis{transform:translateY(0)}
/* Antetul rămâne la vedere oricât ai derula. Fără el, la un canal cu multe
secțiuni pierdeai și titlul, și butonul de închidere. */
.cap{position:sticky;top:0;z-index:2;background:var(--surface);
padding:12px 0 9px;margin:0 -16px;padding-left:16px;padding-right:16px;
border-radius:18px 18px 0 0;transition:box-shadow .18s}
.cap.umbrit{box-shadow:0 8px 12px -10px rgba(19,32,51,.5)}
.maner{width:44px;height:5px;border-radius:3px;background:#c3d2e2;margin:0 auto 10px;cursor:pointer}
.panou.deschis .maner,.panou.jumatate .maner{background:var(--linie)}
.cap-rand{display:flex;align-items:flex-start;gap:10px}
.cap-butoane{display:none;gap:6px;flex:none;margin-top:-2px}
.panou.deschis .cap-butoane,.panou.jumatate .cap-butoane{display:flex}
.capbtn{width:32px;height:32px;border-radius:50%;flex:none;
border:1px solid var(--linie);background:var(--surface);color:var(--ink-2);
display:grid;place-items:center;cursor:pointer;font-size:19px;line-height:1;padding:0}
.capbtn svg{width:17px;height:17px;display:block}
.capbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.capbtn:active{transform:scale(.93)}
/* marcaje pe hartă */
.mk{display:grid;place-items:center;font:700 13px/1 "Albert Sans",system-ui,sans-serif;
color:#fff;border:2.5px solid #fff;border-radius:50%;width:30px;height:30px;
box-shadow:0 2px 6px rgba(19,32,51,.35);cursor:default}
.mk-a{background:#1f8a5f}
.mk-b{background:#c2412d}
.mk-portaj{background:#9a5a24;width:32px;height:32px;font-size:15px}
.mk-etapa{background:#4a5a70;width:26px;height:26px;font-size:12px}
.mk-loc{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--linie);
border-radius:6px;width:auto;height:auto;padding:3px 8px;font-weight:600;font-size:12.5px;
white-space:nowrap;box-shadow:0 1px 4px rgba(19,32,51,.18)}
.mk-loc.mare{font-size:14px;font-weight:700;padding:4px 10px}
/* ---------- ciorchinele de puncte ----------
Disc albastru cu numărul de puncte strânse sub el. Trei trepte de mărime,
nu o creștere continuă: un cerc care se umflă cu fiecare punct în plus
n-ar spune nimic mai mult, dar ar face harta să pară că respiră. */
.mk-ciorchine{width:38px;height:38px;border-radius:50%;background:#1B62C4;
border:3px solid #fff;box-shadow:0 2px 8px rgba(19,32,51,.32);
display:grid;place-items:center;cursor:pointer;
color:#fff;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;
line-height:1;transition:transform .12s}
.mk-ciorchine.mijlociu{width:46px;height:46px;font-size:15px}
.mk-ciorchine.mare{width:56px;height:56px;font-size:16px}
.mk-ciorchine:active{transform:scale(.93)}
.mk-poi{width:32px;height:32px;border-radius:50%;border:2.5px solid #fff;
box-shadow:0 2px 6px rgba(19,32,51,.32);cursor:pointer;transition:transform .12s}
.mk-poi:hover{transform:scale(1.12)}
.mk-poi svg{width:17px;height:17px;display:block}
.mk svg{display:block}
/* Centrele de închiriere. Altă culoare decât punctele obișnuite (chihlimbar,
nu albastru) fiindcă nu sunt același fel de lucru: un POI e ceva ce vezi pe
apă, un centru e un om pe care îl suni. Ancora e `bottom`, deci vârful stă
pe punct. */
.mk-centru{width:38px;height:38px;border-radius:50% 50% 50% 7px;
background:#c07a1e;border:3px solid #fff;color:#fff;
display:grid;place-items:center;
box-shadow:0 3px 10px rgba(19,32,51,.38);cursor:pointer;transition:transform .12s}
.mk-centru:hover{transform:scale(1.1)}
.mk-centru svg{width:19px;height:19px}
.mk-user{background:#16294a;width:34px;height:34px;border-radius:50%;padding:0;
display:grid;place-items:center;cursor:pointer;transition:transform .12s;
position:relative;overflow:hidden}
.mk-user:hover{transform:scale(1.1)}
.mk-user.eu{background:var(--accent)}
.mk-user.vechi{background:#8496aa}
.balon .maplibregl-popup-content{border-radius:10px;padding:9px 13px;font-size:13.5px;
font-family:"Albert Sans",system-ui,sans-serif;box-shadow:0 2px 12px rgba(19,32,51,.22)}
.mk-user svg{width:19px;height:19px}
/* Semnul (caiac sau barcă) stă dedesubt, poza peste el. O poză care nu se
încarcă se scoate singură din DOM, iar dedesubt rămâne semnul — nu un gol. */
.mk-user .semn{display:grid;place-items:center}
.mk-user .poza{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block}
.mk-user.vechi .poza{filter:grayscale(.8);opacity:.75}
/* balonul de la atingerea unei buline */
.balon-user{display:flex;align-items:center;gap:10px;min-width:0}
.balon-user .poza{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.balon-user .txt{min-width:0}
.balon-user .amb{font-size:12.5px;color:var(--albastru-tare);font-weight:600;margin-top:1px}
.balon-user .cand{font-size:12.5px;color:#7d8583;margin-top:1px}
/* ---------- poza și câmpurile din pagina Profil ---------- */
.profil-poza{width:84px;height:84px;border-radius:50%;margin:4px auto 16px;
position:relative;overflow:hidden;background:var(--albastru-pal);
display:grid;place-items:center;border:1px solid var(--linie)}
.profil-poza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.profil-poza .initiala{font-size:32px;font-weight:700;color:var(--albastru-tare)}
.camp-profil{display:block;margin-bottom:12px}
.camp-profil span{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.camp-profil input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;
padding:11px 13px;border-radius:12px;border:1px solid var(--linie);
background:var(--surface);color:var(--ink)}
.camp-profil input:focus{outline:none;border-color:var(--albastru-tare)}
/* ---------- câmpul de poză ----------
Miniatura la stânga, butoanele la dreapta. Miniatura e pătrată și de 72px
dinadins: destul cât să recunoști poza, prea puțin cât să pară că ea e
subiectul ecranului. Adresa stă strânsă dedesubt — vezi comentariul din
`24-poze.js` pentru de ce n-a dispărut de tot. */
.poza-camp{display:block;margin-bottom:12px}
.poza-camp > .et{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.poza-rand{display:flex;gap:12px;align-items:center}
.poza-vad{width:72px;height:72px;flex:none;border-radius:12px;overflow:hidden;
background:var(--albastru-pal);border:1px solid var(--linie);
display:grid;place-items:center;color:var(--ink-3)}
.poza-vad img{width:100%;height:100%;object-fit:cover;display:block}
.poza-vad svg{width:26px;height:26px}
.poza-comenzi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.poza-stare{font-size:12.5px;color:var(--ink-3)}
.poza-adresa{margin-top:9px}
.poza-adresa summary{font-size:12.5px;color:var(--ink-3);cursor:pointer;
list-style:none;user-select:none}
.poza-adresa summary::-webkit-details-marker{display:none}
.poza-adresa summary::before{content:'▸ ';font-size:11px}
.poza-adresa[open] summary::before{content:'▾ '}
.poza-adresa input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;
margin-top:7px;padding:10px 12px;border-radius:12px;border:1px solid var(--linie);
background:var(--surface);color:var(--ink)}
.poza-adresa input:focus{outline:none;border-color:var(--albastru-tare)}
.rotund.live{background:var(--sigur);color:#fff;border-color:var(--sigur)}
.rotund.urmarire{background:var(--teal);color:#fff;border-color:var(--teal)}
.eu-punct{position:relative;width:22px;height:22px;display:grid;place-items:center}
.eu-punct .miez{width:16px;height:16px;border-radius:50%;background:#16294a;
border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.eu-punct .halo{position:absolute;inset:-9px;border-radius:50%;
background:rgba(22,41,74,.18);animation:respira 2.4s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.15);opacity:.25}}
.rezumat{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14.5px;min-height:26px;
flex:1;min-width:0}
.rezumat .km{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.detalii{margin-top:4px;border-top:1px solid var(--linie);padding-top:13px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.detalii dl,.sertar-corp dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0 0 12px}
/* 🔴 Varianta pe DOUĂ COLOANE de mai sus e bună pentru perechi scurte („Tip /
canal", „Lungime / 420 m"). E proastă pentru propoziții: sertarul are sub
330 px, iar `auto` dă termenului toată lățimea de care are nevoie, așa că
explicației îi rămâne o coloană de câteva cuvinte, care se rupe urât.
Documentele juridice sunt numai propoziții — de asta au clasa asta, care le
pune unul sub altul. Termenul rămâne îngroșat, ca perechea să se citească
tot ca pereche. */
.detalii dl.stivuit,.sertar-corp dl.stivuit{display:block;margin:0 0 14px}
.detalii dl.stivuit dt,.sertar-corp dl.stivuit dt{font-weight:650;margin-top:11px}
.detalii dl.stivuit dt:first-child,.sertar-corp dl.stivuit dt:first-child{margin-top:0}
.detalii dl.stivuit dd,.sertar-corp dl.stivuit dd{margin:2px 0 0;line-height:1.5;color:var(--ink-2)}
.detalii dt,.sertar-corp dt{color:var(--ink-3);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:650;align-self:center}
.detalii dd,.sertar-corp dd{margin:0;font-variant-numeric:tabular-nums}
.nota{padding:11px 13px;border-radius:11px;font-size:13.5px;line-height:1.5;margin-top:10px}
.nota.atentie{background:#fdf4e3;border:1px solid #efdcb0;color:#8a5a08}
.nota.oprit{background:#fdeeeb;border:1px solid #f2ccc4;color:#a13122}
.nota.info{background:#e8f1fa;border:1px solid #cfe1f4;color:#1b4b7a}
.buton{appearance:none;border:0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
padding:12px 20px;border-radius:999px;background:var(--accent);color:#fff;width:100%;margin-top:12px}
.buton.sters{background:transparent;color:var(--ink-2);border:1px solid var(--linie)}
/* Ștergerea nu e roșie plină: n-o cauți, o găsești. Plină ar trage ochiul
mai tare decât „Confirm că e încă acolo", care e acțiunea obișnuită. */
.buton.pericol{background:transparent;color:var(--oprit);border:1px solid var(--oprit)}
.buton.pericol:disabled{opacity:.5}
.categorii{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 6px}
.cat{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
padding:8px 13px;border-radius:999px;border:1px solid var(--linie);background:var(--surface);
color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:.14s}
/* Aceeași trapă ca la `.rotund`: `display:inline-flex` bate `[hidden]`.
`#acasaComutaCont` e `hidden` chiar în HTML și se vedea totuși, ca o pastilă
goală în ecranul Acasă. Găsit de verificarea mecanică, nu cu ochiul. */
.cat[hidden]{display:none}
.cat .bulina{width:10px;height:10px;border-radius:50%;flex:none}
.cat .pict{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center}
.cat .pict svg{width:12px;height:12px}
.cat[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat:active{transform:scale(.96)}
.buton.pereche{width:calc(50% - 5px);display:inline-block}
.buton.pereche + .buton.pereche{margin-left:10px}
.buton:active{opacity:.85}
/* ---------- butoanele din panoul traseului calculat ----------
Trei acțiuni cu greutăți diferite, deci trei culori: pornești navigarea
(albastru), salvezi traseul pentru clienți (auriu), mai adaugi un punct
(verde). Culorile sunt din macheta lui Bogdan.
Semnul e o imagine din `img/nav/.png` — alb pe transparent, deci
merge pe orice fundal colorat. Ca să schimbi desenul, pui alt PNG peste,
cu același nume. Textul rămâne TEXT, nu desenat în imagine: se încadrează
pe ecrane înguste („Salvează ca traseu propus" e lung), rămâne clar la
orice zoom, și se poate schimba fără să redesenezi nimic. */
.buton.cu-semn{display:flex;align-items:center;justify-content:center;gap:10px;
text-align:center;line-height:1.25;padding:11px 18px}
.buton.cu-semn img{height:26px;width:auto;flex:none;display:block}
.buton.nav-merg {background:#2f5f96}
.buton.nav-salvez {background:#b98c46;color:#fff;border:0}
.buton.nav-adaug {background:#4f9c5a;color:#fff;border:0}
/* ---------- alegerea ambarcațiunii ----------
Cu desen, nu doar cu text: pe apă, la soare, o siluetă se recunoaște mai
repede decât un cuvânt. */
.ambarcatiuni{display:flex;gap:8px;margin:2px 0 4px}
.amb{appearance:none;font:inherit;cursor:pointer;flex:1;min-width:0;
padding:11px 8px 10px;border-radius:14px;border:1.5px solid var(--linie);
background:var(--surface);color:var(--ink-2);display:flex;flex-direction:column;
align-items:center;gap:5px;transition:.14s;text-align:center}
.amb svg{width:34px;height:24px;display:block;color:var(--ink-3)}
.amb .et{font-size:12.5px;font-weight:650;line-height:1.2}
.amb[aria-pressed="true"]{border-color:var(--teal);background:#e8f1fa;color:var(--teal)}
.amb[aria-pressed="true"] svg{color:var(--teal)}
.amb:active{transform:scale(.97)}
/* ---------- busola și scara ---------- */
.maplibregl-ctrl-top-left{top:calc(env(safe-area-inset-top) + 58px);left:10px}
.maplibregl-ctrl-top-left .maplibregl-ctrl{margin:0 0 8px}
.busola{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);
background:var(--surface);box-shadow:0 2px 8px rgba(19,32,51,.14);
display:grid;place-items:center;cursor:pointer;padding:0;position:relative}
.busola svg{width:30px;height:30px;display:block;transition:transform .12s linear}
.busola.urmareste{border-color:var(--teal);box-shadow:0 0 0 2px rgba(22,41,74,.22)}
/* (Regula veche, duplicată, a fost scoasă pe 2 septembrie: `stil.css` are mai
multe blocuri repetate, iar aici două reguli pentru scară însemnau că una
dintre ele nu făcea nimic — și oricare ai fi editat, pe cea moartă o
nimereai jumătate din timp. Cea vie e mai jos, în stil de atlas.) */
/* ---------- stil: indicii ---------- */
/* 🔴 `white-space:nowrap` + `left:50%` + `translateX(-50%)` = un mesaj lung
care CREȘTE ÎN AMBELE PĂRȚI din mijlocul ecranului și iese pe după margini,
la stânga și la dreapta deodată. Pe un ecran lat nu se vedea; pe telefon,
orice propoziție mai lungă de vreo 40 de caractere devenea necitibilă —
exact mesajele care aveau ceva de spus. Bogdan, 5 septembrie: „textul este
centrat si iese din ecran. Nu se poate citi mesajul."
Reparat cu trei rânduri care lucrează împreună, nu cu unul:
· `max-width` legat de lățimea ecranului, cu margini de 12 px de fiecare
parte, ca pastila să nu poată depăși niciodată ecranul;
· `white-space:normal` — are voie să se rupă pe mai multe rânduri;
· `overflow-wrap:anywhere` pentru un nume de canal lung fără spații, care
altfel ar fi împins singur pastila mai lată decât ecranul.
Rotunjimea coboară de la 999px la 16px: o pastilă complet rotundă pe trei
rânduri arată ca o pilulă umflată. Și textul se centrează, ca rândurile
scurte să nu atârne într-o parte. */
.indiciu{position:absolute;top:calc(env(safe-area-inset-top) + 62px);left:50%;transform:translateX(-50%);
z-index:5;background:var(--teal-deep);color:#fff;padding:9px 16px;border-radius:16px;
font-size:13.5px;font-weight:550;box-shadow:0 2px 10px rgba(0,0,0,.25);
max-width:calc(100vw - 24px);width:max-content;
white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.35;
opacity:0;transition:opacity .2s;pointer-events:none}
.indiciu.vizibil{opacity:1}
.config{position:absolute;inset:0;z-index:20;background:var(--cream);display:grid;place-items:center;padding:24px}
/* `display:grid` de mai sus bate regula implicită a browserului pentru [hidden],
care e doar `display:none` cu specificitate de element. Fără linia asta,
panoul de configurare rămâne vizibil oricât ai completa variabilele. */
.config[hidden]{display:none}
.config .cutie{max-width:440px;background:var(--surface);border:1px solid var(--linie);
border-radius:16px;padding:24px;font-size:14.5px;line-height:1.6}
.config h1{margin:0 0 10px;font-size:20px;letter-spacing:-.02em}
.config code{background:#eaf1f8;padding:2px 6px;border-radius:5px;font-size:13px}
/* ---------- ecrane mari ----------
Aplicația e gândită pentru telefon, ținut într-o mână, pe apă. Pe laptop
aceleași proporții devin caricaturale: un panou lat de un metru pentru
trei rânduri de text, iar harta — adică lucrul pentru care ai deschis
aplicația — ascunsă pe jumătate.
Nu e alt design, e același, strâns într-o coloană. Butoanele se dau la o
parte cu exact lățimea panoului, ca să nu ajungă niciodată sub el. */
@media (min-width:820px){
:root{--panou-w:clamp(340px, 27vw, 420px)}
/* Panoul stă CENTRAT jos, ca o fișă peste hartă. Am încercat și lipit de o
margine, întâi dreapta, apoi stânga: în ambele cazuri împingea altceva —
butoanele spre mijlocul hărții, sau meniul și busola din colțul lor. La
mijloc nu împinge nimic. Colțurile rămân ale uneltelor, iar coloanele de
hartă libere sunt egale în stânga și în dreapta.
Centrarea se face din `margin`, nu din `translateX(-50%)`: transformarea
e ocupată de alunecarea pe verticală, iar dacă ar face amândouă, fiecare
dintre cele trei trepte ar trebui să repete și centrarea. */
.panou{left:0;right:0;margin:0 auto;width:var(--panou-w);
bottom:14px;border-radius:16px;border:1px solid var(--linie);
padding:0 18px 16px;max-height:min(78vh,780px);
box-shadow:0 6px 30px rgba(19,32,51,.16);
transform:translateY(calc(100% - 58px))}
.panou.jumatate{transform:translateY(0);max-height:44vh}
.panou.deschis{transform:translateY(0);max-height:min(70vh,700px)}
.cap{margin:0 -18px;padding-left:18px;padding-right:18px;border-radius:16px 16px 0 0}
/* pe marginea hărții, ridicate cât să nu calce peste rândul de atribuire */
.actiuni{right:12px;bottom:calc(env(safe-area-inset-bottom) + 52px)}
.meniu-buton{left:12px;bottom:calc(env(safe-area-inset-bottom) + 46px);width:44px;height:44px}
.cautare{left:50%;right:auto;transform:translateX(-50%);width:min(560px, 60vw);padding-left:0;padding-right:0}
/* mouse-ul e mai precis decât degetul: butoanele pot fi mai mici */
.rotund{width:44px;height:44px}
.rotund svg{width:21px;height:21px}
}
/* ============================================================
Delta Dunării Maps — componentele din machetă
============================================================ */
/* ============================================================
Delta Dunării Maps — componentele proprii
============================================================ */
/* Înălțimea rezervată jos, o singură dată. Panoul, Acasă, sertarul și
butoanele plutitoare se opresc deasupra ei cu exact atât. Prima variantă
avea 66 px scriși de mână în trei locuri — și era greșit: pe telefoanele cu
bară de gesturi, `safe-area-inset-bottom` adaugă încă 34 px, iar panoul
acoperea butoanele. Acum butoanele Meniu și Rută nu mai sunt o bară lipită
de margine, ci două cărți plutitoare cu propria lor rezervă dedesubt — de
asta valoarea a crescut puțin față de vechea bară plată. */
:root{ --tabbar-h: calc(env(safe-area-inset-bottom) + 74px); }
/* ---------- ecranul de intrare ----------
Culoarea de fond e luată din colțurile pozei (#020c1d sus, #01060a jos), ca
dungile de pe ecranele late să nu se vadă ca dungi.
`object-fit:contain`, nu `cover`. Poza e 853×1844, adică potrivită fix pe un
telefon; pe o tabletă în lat, `cover` ar fi păstrat doar o fâșie verticală
din mijloc — exact fâșia FĂRĂ sigla aplicației și fără „powered by mowiti".
`contain` lasă în schimb două margini de aceeași culoare cu poza, care nu se
citesc ca margini.
`pointer-events` rămâne activ: o atingere îl trimite mai devreme.
Și da, `[hidden]` are nevoie de rândul lui, fiindcă clasa pune `display`. */
.splash{position:absolute;inset:0;z-index:60;background:#020c1d;overflow:hidden;
display:flex;align-items:center;justify-content:center;
opacity:1;transition:opacity .4s ease}
.splash.pleaca{opacity:0}
.splash[hidden]{display:none}
/* Fondul: aceeași poză, tăiată să umple (`cover`), neclară și întunecată.
`scale(1.1)` fiindcă `blur` trage culoarea de la margini spre înăuntru și
ar lăsa un chenar mai deschis pe muchii; mărită puțin, muchia aia rămâne
în afara ecranului. */
.splash-fond{position:absolute;inset:0;
background:url(../img/splash.jpg) center/cover no-repeat;
filter:blur(26px) brightness(.5) saturate(.9);transform:scale(1.1)}
/* Cutia are proporția exactă a pozei (853×1844), deci ocupă fix locul în care
`object-fit: contain` ar pune imaginea — dar, spre deosebire de imagine, e
un părinte poziționat, așa că rotitorul se poate așeza FAȚĂ DE POZĂ, nu față
de ecran. Fără ea, rotitorul ar fi nimerit banda goală doar pe telefonul pe
care s-a întâmplat să fie potrivit. */
.splash-cutie{position:relative;z-index:1;
/* 🔴 `height:100%` cu `width:auto`, NU amândouă `auto` cu `max-*`. Cu ambele
lăsate în seama browserului, mărimea cutiei se deduce din lățimea proprie
a pozei (853 px) și apoi se retează cu `max-height` — un drum pe care
`aspect-ratio` îl parcurge corect pe hârtie, dar care depinde de cât de
nou e motorul. Cu înălțimea fixată, lățimea iese dintr-o înmulțire și
atât: 100% × 853/1844. Fără presupuneri. */
height:100%;width:auto;aspect-ratio:853 / 1844;max-width:100%;
/* Topește cusătura dintre poza clară și fondul neclar. Fără ea, pe laptop se
vedea o muchie verticală dreaptă pe fiecare parte. */
box-shadow:0 0 90px 34px rgba(2,12,29,.75)}
.splash-cutie img{width:100%;height:100%;object-fit:contain;display:block}
/* Rotitorul stă în banda goală din josul desenului: conținutul pozei se
termină la 95,3% din înălțime (măsurat, nu ghicit), deci sub 96% e loc
liber pe orice ecran. */
.splash-rotitor{position:absolute;left:50%;bottom:35%;
width:20px;height:20px;margin-left:-10px;
border:2px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.9);
border-radius:50%;animation:invarte .8s linear infinite}
@keyframes invarte{to{transform:rotate(360deg)}}
/* Cine a cerut mai puțină mișcare primește un punct care pulsează, nu unul
care se învârte. */
@media (prefers-reduced-motion:reduce){
.splash-rotitor{animation:pulseaza 1.4s ease-in-out infinite}
@keyframes pulseaza{0%,100%{opacity:.35}50%{opacity:1}}
}
/* ---------- cardul Mowiti din „Despre aplicație" ----------
Un rând de meniu, nu un banner: aceeași formă cu restul paginii, ca să se
citească drept informație, nu drept reclamă strecurată. Săgeata ↗ spune că
pleacă din aplicație — mica politețe pe care o datorezi cuiva înainte de
a-i deschide o filă nouă. */
/* Insigna „Prelungit" din lista de utilizatori: cine a cerut si a doua transa
de proba. Verde, nu rosu si nu chihlimbar - e o veste buna, nu un
avertisment. Deliberat mai discreta decat insigna de rol: nu e un drept
castigat, e un semn de purtare. */
/* Legătura de ștergere a contului: gri, mică, subliniată discret. Nu e un
buton și nu trebuie să arate ca unul — e o ieșire pe care o găsești dacă o
cauți, nu una peste care dai. Roșu ar fi atras privirea exact acolo unde nu
vrem. */
.leg-stinsa{color:var(--ink-3);text-decoration:underline;
text-decoration-color:var(--linie-2, var(--linie));text-underline-offset:3px;
font-size:13px;cursor:pointer}
.leg-stinsa:hover{color:var(--oprit);text-decoration-color:var(--oprit)}
.insigna-prelungit{display:inline-block;margin-left:7px;padding:2px 7px;
border-radius:999px;background:#e6f4ea;color:#1c6b3a;
font-size:10.5px;font-weight:750;letter-spacing:.04em;vertical-align:middle;
white-space:nowrap}
.card-mowiti{display:flex;align-items:center;gap:12px;
padding:12px;border:1px solid var(--linie);border-radius:14px;
background:var(--surface);color:inherit;text-decoration:none;
transition:background .15s, transform .12s}
.card-mowiti:hover{background:var(--albastru-pal)}
.card-mowiti:active{transform:scale(.99)}
.card-mowiti img{width:64px;height:auto;flex:none;display:block}
.card-mowiti .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.card-mowiti .t{font-size:14.5px;font-weight:650;line-height:1.25}
.card-mowiti .s{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.card-mowiti .sag{flex:none;color:var(--ink-3);font-size:15px}
/* ---------- sigla Mowiti pe hartă ----------
Sus-stânga, lată cât butonul Meniu (`.tab`: 23 px de pictogramă plus 2×16 px
de margine ≈ 70). Fără fundal, fără chenar, fără umbră de cutie: „sa nu
semene cu un buton, ci doar logo-ul normal cu un efect de glow".
🔴 Ce ține locul pastilei albe e `drop-shadow`, nu `box-shadow`. Deosebirea
e tot rostul: `box-shadow` desenează umbra DREPTUNGHIULUI — adică pune
înapoi exact cutia pe care Bogdan a cerut s-o scoatem. `drop-shadow`
urmărește canalul alfa, deci haloul iese pe conturul bărcii și pe literele
„mowiti", și nicăieri altundeva. Două straturi: unul strâns, care ține
conturul negru citibil pe satelitul verde-închis, și unul larg și moale,
care desprinde tot semnul de fond.
`opacity:.62` — „poate fi un fade mai mare, parca e prea vizibil". Crește la
atingere, ca să se vadă că e ceva de apăsat.
Pleacă de pe ecran de două ori: în navigație (ecranul e al navigației) și cât
timp e deschisă căutarea, al cărei câmp se întinde peste ea de la o margine
la alta. Acolo se STINGE, nu dispare brusc: `visibility` însoțește `opacity`
ca să nu rămână apăsabilă cât e nevăzută. */
.sigla-mowiti{position:absolute;z-index:4;
top:calc(env(safe-area-inset-top) + 12px);left:12px;
display:block;line-height:0;opacity:.75;
/* 🔴 TREI umbre strânse, nu una moale. Prima variantă avea un halou lat și
difuz (2px + 7px): arăta bine pe topo, dar pe fondul de satelit sigla
devenea o pată cenușie — conturul e negru, verdele e închis, iar un halou
larg nu adaugă contrast, adaugă ceață. Umbrele de 1px suprapuse se adună
într-un contur ALB APROAPE OPAC lipit de desen, care scoate negrul din
orice fond; a patra, largă și slabă, doar desprinde semnul.
Probat pe verde de satelit, pe albastru de apă și pe topo deschis.
`opacity` e numărul de scăzut dacă tot pare prea vizibil. */
filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)
drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,255,255,.5));
transition:opacity .3s ease, visibility .3s ease}
.sigla-mowiti img{width:70px;height:auto;display:block}
.sigla-mowiti:hover{opacity:.85}
.sigla-mowiti:active{opacity:1}
.sigla-mowiti[hidden]{display:none}
body.navigheaza .sigla-mowiti{display:none}
body.cauta .sigla-mowiti{opacity:0;visibility:hidden}
/* ---------- sigla ---------- */
.sigla-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.sigla-lockup .marca{width:100%;height:100%;flex:none;display:block}
.sigla-lockup .cuvant{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.sigla-lockup .nume-rand{display:flex;align-items:center;gap:7px;min-width:0}
.sigla-lockup .nume{font-size:17px;font-weight:800;letter-spacing:.11em;color:var(--navy)}
.sigla-lockup .sub{font-size:9px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink-3);margin-top:3px}
/* Poza stă PESTE desen, nu în locul lui. Dacă fișierul lipsește sau nu se
încarcă, `onerror` o scoate și dedesubt rămâne desenul — antetul nu e gol
niciodată. Aceeași plasă ca la bulinele de pe hartă. */
.marca-cutie{position:relative;flex:none;display:block}
.marca-cutie .marca-poza{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;display:block}
/* Cât timp poza n-a sosit, desenul ține locul. Din clipa în care s-a
încărcat, desenul se stinge — altfel se vedeau AMÂNDOUĂ, una prin alta,
fiindcă PNG-ul are fundal transparent. `visibility`, nu `display`: cutia
își păstrează mărimea, deci antetul nu tresare la încărcare. */
.marca-cutie.are-poza .marca{visibility:hidden}
/* ---------- pașii publicării ----------
Trei pastile mici, în linie. Nu e decor: ecranul arată UN SINGUR pas, iar
fără ele omul n-ar ști nici câți mai are, nici că e la început. Pasul
trecut poartă o bifă, nu cifra — cifra ar fi arătat la fel cu cel care
urmează, și tocmai deosebirea asta e tot rostul rândului. */
/* Butonul „Centrul meu" / „Publică-ți centrul". Avea lista lipită de el, iar
pictograma era mai mică decât textul de lângă ea. Colțuri de 8px, ca
majoritatea. */
.inc-anunt{margin-bottom:14px;border-radius:8px}
.inc-anunt svg{width:21px;height:21px}
/* Poza centrului, sus de tot când îi apeși pinul. Raport fix, ca o poză
îngustă să nu lase o dungă albă și una lată să nu împingă totul sub ecran. */
.inc-poza{margin:-2px 0 12px;border-radius:12px;overflow:hidden;
background:var(--albastru-pal);aspect-ratio:16/9}
.inc-poza img{width:100%;height:100%;object-fit:cover;display:block}
.pasi{display:flex;gap:7px;margin:2px 0 14px}
.pasi .pas{flex:1;display:flex;align-items:center;gap:6px;min-width:0;
font-size:12px;font-weight:600;color:var(--ink-3);
padding:7px 8px;border-radius:8px;background:var(--cream);
border:1px solid var(--linie);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pasi .pas b{flex:none;width:18px;height:18px;border-radius:5px;display:grid;
place-items:center;font-size:11px;background:var(--ink-3);color:#fff}
.pasi .pas.acum{color:var(--ink);border-color:var(--albastru-tare);
background:var(--albastru-pal)}
.pasi .pas.acum b{background:var(--albastru-tare)}
.pasi .pas.gata{color:var(--sigur)}
.pasi .pas.gata b{background:var(--sigur)}
/* Bifa stă LÂNGĂ cifră, nu în locul ei: numărul de ordine rămâne pe ecran la
toți pașii, ca textul „Pasul 2" de mai jos să aibă mereu pereche sus. */
.pasi .pas .et{overflow:hidden;text-overflow:ellipsis}
.pasi .pas .bif{font-style:normal;font-size:11px;color:var(--sigur);flex:none}
/* ---------- insignele ----------
Două culori, două înțelesuri, ținute apart dinadins:
· roșu „PRO" = închis, ai nevoie de abonament
· chihlimbar „BETA" = deschis, dar încă se schimbă
Dacă ar avea același ton, amândouă ar însemna „atenție" și niciuna n-ar mai
spune ce anume. */
.insigna-pro{position:absolute;top:-5px;right:-5px;z-index:2;
background:var(--oprit);color:#fff;font-size:9px;font-weight:800;
letter-spacing:.06em;line-height:1;padding:3px 5px;border-radius:6px;
box-shadow:0 1px 3px rgba(0,0,0,.28);pointer-events:none}
/* „MEMBRI": aceeași formă ca PRO, alt ton. Albastrul aplicației, nu roșul de
oprire — ce cere butonul ăsta e un cont, care e gratis, nu bani. Litera e
mai mică fiindcă textul e mai lung: insigna trebuie să rămână o etichetă
pe colț, nu o a doua etichetă a butonului. */
.insigna-membri{background:var(--albastru-tare);font-size:8px;
letter-spacing:.04em;padding:3px 4.5px}
.insigna-beta{background:#F2A81C;color:#4A3000;font-size:9px;font-weight:800;
letter-spacing:.1em;line-height:1;padding:3px 6px;border-radius:5px;flex:none}
/* Un buton stins cu insignă rămâne LIZIBIL, nu doar palid: e o invitație, nu
o eroare. Și, important, se stinge CONȚINUTUL, nu butonul — `opacity` pe
buton ar fi înghițit și insigna, iar tocmai ea trebuie să rămână tare.
De asta regula bate stingerea generală a butoanelor dezactivate. */
.cu-pro{position:relative;overflow:visible}
.cu-pro[disabled]{opacity:1;cursor:not-allowed}
.cu-pro[disabled] > *:not(.insigna-pro){opacity:.5}
/* Butoanele rotunde de pe marginea hărții își taie colțurile, deci insigna ar
dispărea sub margine. `overflow:visible` o scoate afară, la vedere. */
.rotund.cu-pro{overflow:visible}
/* ---------- câmpul de căutare, deschis la cerere ----------
Antetul permanent a plecat (vezi index.html). Câmpul e acum o fâșie care
apare peste hartă doar cât scrii în el, iar `hidden` chiar îl ascunde —
`display:flex` de mai jos ar bate regula implicită a browserului, ca la
`.rotund` și `.cat`. */
.cota{flex:0 1 auto;min-width:0;padding:8px 12px;font-size:13px;overflow:hidden}
.cota span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-cautare{position:absolute;z-index:9;
top:calc(env(safe-area-inset-top) + 10px);left:12px;right:12px;
display:flex;align-items:center;gap:8px;
background:var(--surface);border:1px solid var(--linie);border-radius:999px;
padding:10px 14px;box-shadow:0 4px 16px rgba(19,32,51,.18)}
.camp-cautare[hidden]{display:none}
.camp-cautare .lupa{width:17px;height:17px;flex:none;color:var(--ink-3)}
.camp-cautare input{flex:1;min-width:0;width:100%;border:0;outline:none;font:inherit;
font-size:15px;background:transparent;color:var(--ink)}
.camp-cautare input::-webkit-search-cancel-button{display:none}
.camp-cautare .x{appearance:none;border:0;background:transparent;color:var(--ink-3);
font-size:19px;line-height:1;cursor:pointer;padding:0 2px;display:none}
.camp-cautare.plin .x{display:block}
.cont.mic{width:38px;height:38px;padding:0;border-radius:50%;flex:none;
justify-content:center;font-size:15px;font-weight:700;color:var(--navy);position:relative}
.cont.mic .rol{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;padding:0;
border-radius:50%;border:2px solid var(--surface);font-size:0}
.cautare-rez{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 62px);
z-index:9;background:var(--surface);border:1px solid var(--linie);
border-radius:14px;box-shadow:0 6px 22px rgba(19,32,51,.20);
max-height:min(56vh,460px);overflow:auto}
.cautare-rez:empty{display:none}
/* ---------- meniul plutitor ---------- */
.plutitor{position:absolute;z-index:9;background:var(--surface);
border:1px solid var(--linie);border-radius:14px;
box-shadow:0 6px 26px rgba(19,32,51,.22);
padding:6px;min-width:200px;max-width:min(300px, 78vw);
max-height:min(66vh, 460px);overflow:auto;overscroll-behavior:contain}
.plutitor[hidden]{display:none}
.plutitor-titlu{font-size:11.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-3);padding:6px 8px 4px}
.plut-rand{appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;
color:var(--ink);text-align:left;cursor:pointer;width:100%;
padding:10px 9px;border-radius:10px;display:flex;align-items:center;gap:11px;transition:.12s}
.plut-rand:hover{background:var(--albastru-pal)}
.plut-rand:active{transform:scale(.985)}
.plut-rand .ac{width:22px;flex:none;display:grid;place-items:center}
.plut-rand .ac svg{display:block}
.plut-rand .txt{flex:1;min-width:0}
.plut-rand .sub{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:1px}
.plut-rand[aria-pressed="true"]{background:var(--albastru-pal);color:var(--albastru-tare);font-weight:650}
.plut-rand .bifa{width:16px;flex:none;color:var(--albastru-tare);opacity:0}
.plut-rand[aria-pressed="true"] .bifa{opacity:1}
.plut-nota{font-size:12.5px;color:var(--ink-3);line-height:1.45;padding:6px 9px 4px}
/* ---------- bara de jos: nu mai e o bară ----------
Două dreptunghiuri libere, aliniate la stânga, nu o fâșie unită dintr-o
margine în cealaltă. Containerul rămâne întins pe toată lățimea, poziționat
la fel ca înainte — testat și de `--tabbar-h` mai sus, și de așezarea în
straturi — dar e transparent și lasă harta să răspundă la atingeri și în
golurile dintre butoane: doar butoanele înseși primesc clicuri. */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:7;
display:flex;justify-content:flex-start;gap:10px;
padding:0 14px calc(env(safe-area-inset-bottom) + 10px);
pointer-events:none}
.tabbar[hidden]{display:none}
.tab{pointer-events:auto;appearance:none;border:1px solid var(--linie);
background:var(--surface);cursor:pointer;border-radius:14px;
padding:10px 16px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
color:var(--ink-3);box-shadow:0 2px 8px rgba(19,32,51,.14);transition:color .14s}
.tab svg{width:23px;height:23px;display:block}
.tab .et{font-size:11px;font-weight:650}
.tab[aria-selected="true"]{color:var(--albastru-tare);border-color:var(--albastru-tare)}
.tab:active{transform:scale(.97)}
/* ---------- panoul: apare doar când are ce spune ----------
Avea o fâșie mereu vizibilă jos, cu un mâner și un text. Două probleme: pe
telefon acoperea bara de jos, iar fâșia era pe ecran și când nu era nimic de
arătat. Acum panoul e cu totul în afara ecranului până când chiar apare
ceva — un canal atins, un traseu, o setare. */
/* Treapta de jumătate e un panou MAI SCURT, nu unul împins în jos.
Împins, cutia de derulare ieșea sub marginea ecranului: derulai, iar
conținutul urca într-o zonă pe care n-o vedeai. La un canal cu multe
secțiuni asta însemna că jumătate dintre opțiuni erau de negăsit. */
/* `translateY` procentual se calculează din ÎNĂLȚIMEA PROPRIE a panoului, nu
din ecran. Când panoul n-are `detalii` (e gol — la pornire, sau chiar după
ce l-ai închis), înălțimea lui e doar antetul, vreo 60px: 102% din 60px
sunt 61px, mult mai puțin decât cei ~74px cu care e ridicat de jos — iar
antetul gol rămânea vizibil deasupra butoanelor, permanent. `100vh` în plus
îl scoate cu totul de pe ecran, oricât de scund ar fi conținutul lui. */
.panou{bottom:0;transform:translateY(calc(100% + 100vh))}
/* Trei praguri, cerute pe nume:
mic — doar antetul, cât să știi că panoul e acolo
jumatate — 30% din ecran: ambarcațiunea, căutarea, primele rânduri
deschis — tot ecranul, minus bara de sus a telefonului
Nu sunt înălțimi alese din ochi: la 30% intră exact rândul de ambarcațiuni
și câmpul de căutare, adică tot ce ai de ales înainte să pornești. */
.panou.jumatate{transform:translateY(0);max-height:30vh}
/* `100vh` pe telefon NU e cât vezi. Include și fâșia de sub bara de adrese
a browserului, care apare și dispare la derulare. Panoul e ancorat jos și
crește în sus, deci cu `100vh` vârful lui — adică antetul, cu × — ajunge
fix sub bara de adrese și nu-l mai poți apăsa.
`100dvh` e înălțimea vizibilă ACUM și se schimbă odată cu bara. Prima
linie rămâne ca rezervă pentru browserele care nu-l cunosc; a doua o
rescrie acolo unde există.
`--panou-sus` e cât rămâne liber DEASUPRA panoului deschis: zona sigură a
telefonului, plus bara de căutare, plus o palmă. Atât trebuie ca antetul
panoului — cel cu titlul și cu × — să fie mereu la vedere și apăsabil,
inclusiv în timpul rutării, unde conținutul e cel mai lung din aplicație.
Scăderea lui `--tabbar-h` a plecat de-aici: panoul nu mai începe deasupra
barei Meniu/Rută, ci din chiar josul ecranului, deci nu mai are ce rezerva
la capătul de jos. Ținută, făcea panoul cu ~74 px mai scund decât încape,
adică o fâșie de hartă moartă între antet și bara de sus. */
:root{--panou-sus:calc(env(safe-area-inset-top) + 76px)}
.panou.deschis{transform:translateY(0);
max-height:calc(100vh - var(--panou-sus))}
.panou.deschis{
max-height:calc(100dvh - var(--panou-sus))}
/* Cât timp tragi cu degetul, tranziția trebuie stinsă: altfel panoul
„aleargă" după deget cu un sfert de secundă întârziere și gestul pare
rupt. Se pune la loc când ridici degetul, ca alunecarea spre prag să fie
lină. */
.panou.trage{transition:none}
/* Antetul rămâne la vedere cât timp derulezi conținutul: × trebuie să fie
la îndemână oricând, nu doar când ai ajuns înapoi sus. */
.panou .cap{position:sticky;top:0;z-index:2;background:var(--surface)}
.panou .cap{touch-action:none}
/* ---------- de unde pleacă coloana de butoane ----------
Stătea la `--tabbar-h + 14px`, adică la 88 px de marginea de jos — dar bara
de jos e transparentă și are butoanele ei la 10 px, la STÂNGA. Coloana e la
dreapta, deci nu se calcă niciodată cu ele: cei 78 px erau aer irosit, iar
coloana creștea cu ei în sus.
Contează pentru că e o coloană LUNGĂ: un administrator vede nouă butoane,
adică peste 500 px. Cu 78 px în plus, capătul de sus ajungea în zona
câmpului de căutare, care se deschide sus — și butonul de căutare, primul
din coloană, rămânea sub el. Adică exact butonul cu care ai fi închis
căutarea. Acum pleacă de la același nivel cu Meniu și Rută. */
.actiuni{bottom:calc(env(safe-area-inset-bottom) + 10px)}
.indiciu{top:calc(env(safe-area-inset-top) + 66px)}
.maplibregl-ctrl-top-left{top:calc(env(safe-area-inset-top) + 158px)}
/* ---------- fâșia de cifre de pe marginea hărții ----------
Cota, vremea și vântul, una sub alta, în stânga. Sub rândul de sus — care
rămâne al căutării — și deasupra busolei, care a coborât de la 66px la
158px ca să le facă loc.
`pointer-events:none` pe fâșie, `auto` pe fiecare pastilă: harta se trage
cu degetul PRIN spațiile dintre ele. O fâșie care înghite atingerile ar
însemna o bandă moartă pe marginea hărții, exact unde omul apucă s-o miște.
Pastilele sunt mici dinadins: stau peste hartă tot timpul, nu se apasă, se
citesc dintr-o privire. Numărul e îngroșat, unitatea nu — la fel ca pe
cardul de navigație. */
.fasie-harta{position:absolute;z-index:6;left:10px;
top:calc(env(safe-area-inset-top) + 66px);
display:flex;flex-direction:column;align-items:flex-start;gap:6px;
pointer-events:none}
.fasie-harta[hidden]{display:none}
.fasie-harta .fh{pointer-events:auto;display:flex;align-items:center;gap:5px;
background:rgba(255,255,255,.92);border:1px solid var(--linie);border-radius:9px;
padding:4px 8px;box-shadow:0 1px 4px rgba(19,32,51,.14);
font:600 12px/1.25 "Albert Sans",system-ui,sans-serif;color:var(--ink);
white-space:nowrap}
.fasie-harta .fh b{font-weight:700}
.fasie-harta .fh .u{font-weight:500;opacity:.7}
.fasie-harta .fh svg{display:block;flex:none}
/* Bulina cotei — aceeași culoare ca în „Acasă", pusă din JS. */
.fasie-harta .bul{width:9px;height:9px;border-radius:50%;flex:none;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
/* Atribuirea („i"-ul din colț) stătea la `--tabbar-h`, adică exact acolo unde
coboară acum coloana. O mutăm la stânga ei, pe aceeași linie de jos: pe
telefon zona aia e goală, fiindcă Meniu și Rută sunt lipite de marginea
stângă. Lățimea coloanei e 48 px + 12 px de margine, deci 68 px o lasă
liberă cu aer. */
.maplibregl-ctrl-bottom-right{bottom:calc(env(safe-area-inset-bottom) + 10px);right:68px}
/* ---------- sertarul ---------- */
.voal{position:absolute;inset:0;z-index:11;background:rgba(19,32,51,.38);
opacity:0;transition:opacity .22s;pointer-events:none}
.voal.vizibil{opacity:1;pointer-events:auto}
.voal[hidden]{display:none}
.sertar{position:absolute;top:0;bottom:0;left:0;z-index:12;
width:min(330px, 86vw);background:var(--surface);
border-right:1px solid var(--linie);box-shadow:6px 0 28px rgba(19,32,51,.18);
display:flex;flex-direction:column;
transform:translateX(-101%);transition:transform .26s cubic-bezier(.3,.8,.4,1)}
.sertar.deschis{transform:translateX(0)}
.sertar[hidden]{display:none}
.sertar-cap{display:flex;align-items:center;gap:9px;flex:none;
padding:calc(env(safe-area-inset-top) + 14px) 12px 12px 14px}
/* Cine ești, scris întreg. Bulina din bara de sus arăta o singură literă —
o inițială nu spune nici cine ești, nici ce drepturi ai, iar loc pentru mai
mult acolo nu e. Aici e. */
.sertar-cont{flex:none;margin:0 10px 8px;padding:12px 12px;border-radius:14px;
background:var(--albastru-pal);display:flex;align-items:center;gap:11px;
cursor:pointer;border:1px solid transparent;transition:.14s}
.sertar-cont:hover{border-color:var(--linie)}
.sertar-cont{padding:10px 12px}
.sertar-cont .balon{width:32px;height:32px;border-radius:50%;flex:none;display:grid;
place-items:center;background:var(--navy);color:#fff;font-size:14px;font-weight:700;
overflow:hidden}
.sertar-cont .balon svg{width:17px;height:17px}
.sertar-cont .balon img{width:100%;height:100%;object-fit:cover;display:block}
.sertar-cont .txt{flex:1;min-width:0}
.sertar-cont .nume{font-size:15px;font-weight:650;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sertar-cont .fel{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.sertar-cont .sageata{color:var(--ink-3);flex:none}
.sertar-corp{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
padding:0 10px 8px}
/* Profil, Ajutor și feedback, Despre aplicație — nu se derulează cu restul:
stau fixe jos, cerute așa explicit, despărțite printr-o linie ca să nu se
piardă în lista de deasupra, care poate crește (secțiunea galbenă). Goală
pe paginile-fiice (`:empty`), ca ecranul lor să aibă tot spațiul. */
.sertar-jos{flex:none;border-top:1px solid var(--linie);
padding:8px 10px calc(env(safe-area-inset-bottom) + 14px)}
.sertar-jos:empty{display:none}
.meniu-lista{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px}
.meniu-rand{appearance:none;border:0;background:transparent;font:inherit;font-size:15px;
color:var(--ink);text-align:left;cursor:pointer;width:100%;
padding:12px 6px;border-radius:11px;display:flex;align-items:center;gap:13px;transition:.12s}
.meniu-rand:hover{background:var(--albastru-pal)}
.meniu-rand:active{transform:scale(.99)}
.meniu-rand .ico{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
.meniu-rand .ico svg{width:20px;height:20px;display:block}
.meniu-rand .txt{flex:1;min-width:0}
.meniu-rand .sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.35}
.meniu-rand .val{font-size:13px;color:var(--ink-3);flex:none}
.meniu-rand.pericol{color:var(--oprit)}
.meniu-rand.pericol .ico{color:var(--oprit)}
/* (regulile de meniu care erau repetate aici sunt identice cu cele de mai
sus, la „meniul din sertar" — au fost scoase ca să existe un singur loc
unde se schimbă) */
/* Rândul de „Înapoi", pe orice pagină din sertar care nu e cea principală.
Nu e un `.meniu-rand` ca restul: e navigație, nu o setare pe care o
apeși — trebuie să sară în ochi, sus de tot, înaintea listei. */
.meniu-inapoi{appearance:none;border:0;background:transparent;font:inherit;
font-size:15px;font-weight:650;color:var(--ink);cursor:pointer;width:100%;
display:flex;align-items:center;gap:6px;padding:8px 6px 14px;margin:0;
text-align:left}
.meniu-inapoi svg{flex:none}
.meniu-inapoi:active{transform:scale(.98)}
/* Opțiuni vechi, tot utile, fără loc hotărât încă în noua împărțire —
fundal galben, cât timp Bogdan decide unde se duc. N-au dispărut din
aplicație, doar din structura ordonată de sus. */
.meniu-provizoriu{background:#fdf6dc;border:1px solid #ecdba0;border-radius:14px;
padding:6px;margin:6px 0 12px}
.meniu-provizoriu .meniu-rand:hover{background:#faedc0}
/* ---------- alegerea ambarcațiunii ----------
Butonul poartă acum o ilustrație (`img/ambarcatiuni/.png`), nu un desen
din linii. Desenul din linii a rămas în cod ca rezervă: dacă fișierul
lipsește, `onerror` scoate `` și rămâne `svg.rezerva`, care e ascuns
cât timp imaginea e acolo. Un buton fără nimic pe el nu se poate întâmpla. */
.ambarcatiuni{display:flex;gap:8px;margin:2px 0 4px}
.amb{appearance:none;font:inherit;cursor:pointer;flex:1;min-width:0;
padding:10px 8px 9px;border-radius:14px;border:1.5px solid var(--linie);
background:var(--surface);color:var(--ink-2);display:flex;flex-direction:column;
align-items:center;gap:6px;transition:.14s;text-align:center}
.amb .poza{display:block;flex:none;width:100%;max-width:76px}
.amb .poza img{width:100%;height:auto;display:block}
/* rezerva se vede DOAR dacă imaginea a fost scoasă de `onerror` */
.amb .poza img + .rezerva{display:none}
.amb .poza .rezerva{width:38px;height:27px;display:block;margin:6px auto;color:var(--ink-3)}
.amb .et{font-size:12.5px;font-weight:650;line-height:1.2}
.amb[aria-pressed="true"]{border-color:var(--albastru-tare);background:var(--albastru-pal);color:var(--albastru-tare)}
.amb[aria-pressed="true"] .rezerva{color:var(--albastru-tare)}
.amb:active{transform:scale(.97)}
/* Nealesele se sting, ca alegerea să se vadă dintr-o privire: cu trei
ilustrații colorate una lângă alta, un simplu chenar albastru se pierde. */
.amb[aria-pressed="false"] .poza{filter:saturate(.45);opacity:.65}
/* ---------- alternativele de traseu, ca trei cartonașe ----------
Aceeași ilustrație ca la „Ambarcațiunea": e aceeași întrebare, pusă în două
locuri, deci n-are voie să arate a două lucruri diferite. */
.alternative{display:flex;gap:8px;margin:2px 0 12px}
.alt-card{appearance:none;font:inherit;cursor:pointer;flex:1;min-width:0;
padding:10px 6px 9px;border-radius:14px;border:1.5px solid var(--linie);
background:var(--surface);color:var(--ink-2);display:flex;flex-direction:column;
align-items:center;gap:5px;transition:.14s;text-align:center}
.alt-card .poza{display:block;width:100%;max-width:68px}
.alt-card .poza img{width:100%;height:auto;display:block}
.alt-card .poza img + .rezerva{display:none}
.alt-card .poza .rezerva{width:34px;height:24px;display:block;margin:5px auto;color:var(--ink-3)}
.alt-card .et{font-size:12.5px;font-weight:650;line-height:1.2;color:var(--ink)}
/* `margin-top:auto` lipește durata de baza cartonașului: „Barcă cu motor" se
rupe pe două rânduri, iar fără asta duratele ieșeau la înălțimi diferite. */
.alt-card .sub{font-size:11.5px;color:var(--ink-3);line-height:1.3;
font-variant-numeric:tabular-nums;margin-top:auto;padding-top:2px}
.alt-card[aria-pressed="true"]{border-color:var(--albastru-tare);background:var(--albastru-pal)}
.alt-card[aria-pressed="true"] .et{color:var(--albastru-tare)}
.alt-card[aria-pressed="false"] .poza{filter:saturate(.45);opacity:.65}
.alt-card:active{transform:scale(.97)}
/* „nu există traseu" rămâne la vedere, palid — dispariția lui ar face să pară
că aplicația a uitat o variantă */
.alt-card[disabled]{opacity:.5;cursor:default}
.alt-card[disabled] .poza{filter:grayscale(1)}
/* ---------- rute alternative ---------- */
.ruta-optiune{display:flex;align-items:center;gap:12px;padding:13px 14px;
border:1.5px solid var(--linie);border-radius:14px;margin-bottom:9px;cursor:pointer;
appearance:none;background:var(--surface);font:inherit;width:100%;text-align:left;transition:.14s}
.ruta-optiune[aria-pressed="true"]{border-color:var(--albastru-tare);background:var(--albastru-pal)}
.ruta-optiune .ic{width:26px;flex:none;color:var(--albastru);display:grid;place-items:center}
.ruta-optiune .ic svg{width:24px;height:24px;display:block}
.ruta-optiune .txt{flex:1;min-width:0}
.ruta-optiune .titlu{font-size:15px;font-weight:650;color:var(--ink)}
.ruta-optiune .sub{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ruta-optiune .bifa{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--linie);
display:grid;place-items:center;color:#fff}
.ruta-optiune[aria-pressed="true"] .bifa{background:var(--albastru-tare);border-color:var(--albastru-tare)}
.ruta-optiune[aria-pressed="true"] .bifa svg{display:block}
.ruta-optiune .bifa svg{width:13px;height:13px;display:none}
/* ---------- lista de puncte ---------- */
.poi-lista{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.poi-rand{display:flex;align-items:center;gap:11px;padding:10px 6px;border-radius:11px;
cursor:pointer;transition:.12s;text-align:left;appearance:none;border:0;background:transparent;
font:inherit;width:100%}
.poi-rand:hover{background:var(--albastru-pal)}
.poi-rand .ac{width:26px;flex:none;display:grid;place-items:center}
.poi-rand .ac svg{display:block}
.poi-rand .txt{flex:1;min-width:0}
.poi-rand .nume{font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poi-rand .sub{font-size:12.5px;color:var(--ink-3)}
/* Numele ghidului, sub numele traseului, pe fundalul lui. E o ATRIBUIRE — cine
a propus traseul — nu o descriere, deci se citește ca etichetă, nu ca text
mărunt. `.ev-pastila.ghid` n-a putut fi refolosită: are fundal alb-transparent,
gândit să stea peste poza turei, iar aici ar fi fost alb pe alb. */
/* `display:block` cu `width:fit-content`, NU `inline-block`: `.poi-rand .nume`
e element inline, iar o etichetă inline-block după el ar rămâne pe ACELAȘI
rând, lipită de numele traseului — exact ce n-am vrut. Un element de bloc
rupe rândul; `fit-content` îl strânge la lățimea textului, ca fundalul să nu
se întindă pe toată lățimea listei. */
.poi-rand .ghid-eticheta{display:block;width:fit-content;margin-top:3px;font-size:11.5px;
font-weight:600;line-height:1.3;padding:2px 7px;border-radius:6px;
background:var(--albastru-pal);color:var(--albastru-tare);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poi-rand .ghid-eticheta + .sub{display:block;margin-top:2px}
.poi-rand .km{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;flex:none}
/* ---------- busola și scara ---------- */
.maplibregl-ctrl-top-left .maplibregl-ctrl{margin:0 0 8px}
.busola{width:42px;height:42px;border-radius:50%;border:1px solid var(--linie);
background:var(--surface);box-shadow:0 2px 8px rgba(19,32,51,.14);
display:grid;place-items:center;cursor:pointer;padding:0;position:relative}
.busola svg{width:28px;height:28px;display:block;transition:transform .12s linear}
.busola.urmareste{border-color:var(--albastru-tare);box-shadow:0 0 0 2px rgba(27,98,196,.24)}
/* Bara de scară, în stilul unei hărți de atlas: segmente alternante negru-alb,
contur negru, cifra deasupra. Alegerea lui Bogdan, 2 septembrie, și e cea
bună — pe apă, cu soarele în ecran, contrastul pur bate orice nuanță de gri,
iar forma cu segmente se citește dintr-o privire fiindcă o știi de pe hărțile
de hârtie. Segmentele vin dintr-un degrade care se repetă, deci se întind
singure pe lățimea pe care o măsoară MapLibre: patru blocuri, oricât ar fi. */
.maplibregl-ctrl.maplibregl-ctrl-scale{background:#fff;border:1px solid #000;
border-radius:2px;color:#000;box-sizing:border-box;
font:700 10px/1.25 "Albert Sans",system-ui,sans-serif;
padding:2px 0 0;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.maplibregl-ctrl.maplibregl-ctrl-scale::after{content:'';display:block;height:5px;
margin-top:2px;border-top:1px solid #000;
background:repeating-linear-gradient(to right,#000 0 25%,#fff 25% 50%)}
.maplibregl-ctrl-bottom-left{left:10px;
bottom:calc(env(safe-area-inset-bottom) + 78px)}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0}
/* ---------- navigația pas cu pas ---------- */
.nav-card{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 10px);
z-index:8;background:var(--navy);color:#fff;border-radius:16px;
padding:14px 16px;display:flex;align-items:center;gap:14px;
box-shadow:0 6px 24px rgba(19,32,51,.35)}
.nav-card[hidden]{display:none}
.nav-card .sageata{width:44px;height:44px;flex:none;display:grid;place-items:center;
background:rgba(255,255,255,.12);border-radius:12px}
.nav-card .sageata svg{width:28px;height:28px;display:block}
.nav-card .text{flex:1;min-width:0}
.nav-card .dist{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.05;
font-variant-numeric:tabular-nums}
.nav-card .dist span{font-size:15px;font-weight:600;opacity:.8;margin-left:2px}
/* Comanda și numele pe UN rând. 🔴 Amândouă stau în ACELAȘI element (`.ce`),
nu în două făcute `inline` din CSS — fiindcă `overflow`/`text-overflow` NU
se aplică unei cutii inline. Prima variantă le lipea vizual, dar trunchierea
era moartă: un nume lung trecea pe al doilea rând și umfla cardul. Aceeași
familie cu `[hidden]` bătut de o clasă cu `display`.
`.unde` rămâne bloc, pe rândul lui — acolo scrie mesajul de abatere. */
.nav-card .ce{font-size:14.5px;font-weight:600;margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-card .unde{font-size:13px;opacity:.72;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-card .ce .unde-lipit{font-weight:400;opacity:.75;margin-left:5px}
/* În lista de manevre, numele urmează comanda tot pe același rând, mai palid.
`.poi-rand .nume` e un `` inline, deci `text-overflow` nu-l atinge: îl
facem bloc DOAR aici, ca „…" să funcționeze. Fără asta, „Continuă drept ·
" nu se poate nici rupe (moștenește `nowrap`), nici tăia — și
trece peste coloana cu distanța din dreapta. */
.poi-lista.manevre .nume{display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.poi-rand .unde-lipit{font-weight:400;color:var(--ink-3);margin-left:5px}
.nav-card .inchide{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;
width:32px;height:32px;border-radius:50%;flex:none;cursor:pointer;font-size:19px;line-height:1}
.nav-jos{position:absolute;left:0;right:0;bottom:0;z-index:8;background:var(--navy);
color:#fff;padding:13px 18px calc(env(safe-area-inset-bottom) + 13px);
display:flex;align-items:center;gap:14px;border-radius:18px 18px 0 0}
.nav-jos[hidden]{display:none}
.nav-jos .mijloc{flex:1;text-align:center}
/* Ține locul × -ului scos, ca mijlocul să rămână la mijloc. Aceeași lățime ca
butoanele barei; nu se vede și nu se apasă. */
.nav-jos .loc-gol{width:38px;flex:none}
.nav-jos .ramas{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.nav-jos .detaliu{font-size:12.5px;opacity:.72;font-variant-numeric:tabular-nums}
.nav-jos button{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;
width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;font-size:19px;
display:grid;place-items:center}
.nav-jos button svg{width:19px;height:19px;display:block}
.viteza{position:absolute;left:14px;z-index:8;
bottom:calc(env(safe-area-inset-bottom) + 92px);
background:var(--surface);border-radius:14px;padding:8px 13px;text-align:center;
box-shadow:0 3px 14px rgba(19,32,51,.22);min-width:62px}
.viteza[hidden]{display:none}
.viteza .v{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--navy)}
.viteza .u{font-size:10.5px;font-weight:650;color:var(--ink-3)}
/* „Re-centrează" — apare doar după ce omul a mișcat harta cu degetul în timpul
navigației, și o aduce înapoi la vederea de mers. Stă la mijloc, între
cartonașul vitezei (stânga, safe+92) și butoanele rotunde (dreapta,
safe+148), ca să nu calce nici pe unul.
`display:none` la `[hidden]` NU e de prisos: regula implicită a browserului
pentru `[hidden]` are specificitate zero și e bătută de orice clasă cu
`display` — capcana notată la `.rotund[hidden]`. Aici clasa pune
`display:inline-flex`, deci fără rândul următor butonul ar rămâne pe ecran
oricât de „ascuns" l-am declara din JS.
A doua regulă îl scoate când lista de manevre ia ecranul: acolo `body` pierde
clasa `navigheaza`, iar butonul n-ar mai avea ce să re-centreze. */
.recentru{position:absolute;left:50%;transform:translateX(-50%);z-index:9;
bottom:calc(env(safe-area-inset-bottom) + 150px);
display:inline-flex;align-items:center;gap:7px;
appearance:none;border:1px solid var(--linie);border-radius:999px;
background:var(--surface);color:var(--navy);
padding:9px 16px 9px 13px;font:inherit;font-size:14px;font-weight:650;
cursor:pointer;box-shadow:0 3px 14px rgba(19,32,51,.22)}
.recentru[hidden]{display:none}
.recentru:active{transform:translateX(-50%) scale(.95)}
.recentru svg{display:block;flex:none}
body:not(.navigheaza) .recentru{display:none}
/* cât timp navighezi, restul aplicației tace */
/* Scara și fâșia de cifre pleacă și ele în navigație. Scara stă la
`safe+78`, iar cartonașul vitezei la `safe+92` cu `z-index:8` — s-ar fi
suprapus peste cifra ei. Fâșia pornește la `safe+66`, sub cardul de
navigație (`safe+10`, ~77px înalt, opac): prima pastilă ar fi rămas pe
jumătate îngropată. În navigație ecranul e al navigației. */
body.navigheaza .camp-cautare,
body.navigheaza #btnCautare,
body.navigheaza .tabbar,
body.navigheaza .panou,
body.navigheaza .fasie-harta,
body.navigheaza .maplibregl-ctrl-bottom-left{display:none}
body.navigheaza .actiuni{bottom:calc(env(safe-area-inset-bottom) + 148px)}
/* ---------- butoanele plutitoare în navigație ----------
„DOAR in timpul navigarii, ar trebui sa fie afisate doar butoanele Adauga
POI, Inregistrare si Share Location. Restul, sa fie vizibile cu un efect de
fade-in/out cand se iese din navigare." — Bogdan, 3 septembrie.
Cele trei rămase sunt exact cele pe care le apeși DIN BARCĂ, în mers: vezi
ceva și-l însemni, pornești urma, spui alor tăi unde ești. Restul —
fondul hărții, apropierea, legăturile, blocarea — sunt lucruri pe care le
faci așezat, cu harta întreagă în față.
Stingerea se face din `opacity`, nu din `display`, ca să se poată anima. Dar
un buton stins cu `opacity` ocupă mai departe loc în coloană, iar coloana
crește în sus: cele trei rămase ar fi urcat cu vreo 60 px degeaba. De asta
li se ia și înălțimea, și chenarul — și li se dă `margin-bottom:-9px`, care
anulează exact spațiul dintre elemente pe care flex-ul îl pune oricum după
ele. Contribuția netă la coloană devine zero, iar drumul înapoi se animează
la fel de lin ca cel dus.
`visibility` merge împreună cu `opacity` fiindcă un buton complet
transparent rămâne apăsabil; `pointer-events` singur n-ar ajunge pentru
cititoarele de ecran. */
.actiuni .rotund{
transition:opacity .26s, visibility .26s, width .26s, height .26s,
border-radius .26s, margin .26s, border-width .26s}
body.navigheaza .actiuni .rotund{
opacity:0;visibility:hidden;pointer-events:none;
height:0;border-width:0;margin-bottom:-9px}
/* Pătrate cu colțuri rotunjite, de mărimea unei cărți Meniu/Rută (`.tab` are
14 px rotunjire și vreo 58 px înălțime). Mai mari fiindcă se apasă cu mâna
udă, dintr-o barcă în mișcare. */
body.navigheaza .actiuni #btnPoi,
body.navigheaza .actiuni #btnTrack,
body.navigheaza .actiuni #btnLive{
opacity:1;visibility:visible;pointer-events:auto;
width:58px;height:58px;border-radius:16px;border-width:1px;margin-bottom:0}
body.navigheaza .actiuni #btnPoi svg,
body.navigheaza .actiuni #btnTrack svg,
body.navigheaza .actiuni #btnLive svg{width:27px;height:27px}
/* Un buton oprit din motive de rol rămâne oprit: `[hidden]` are `display:none`
pe `.rotund`, iar `display` bate orice `visibility`. Rândul e aici doar ca
să se citească regula, nu ca s-o schimbe. */
body.navigheaza .actiuni .rotund[hidden]{display:none}
/* ---------- indiciul, singura gură a navigației ----------
🔴 SCHIMBARE PE CARE BOGDAN N-A CERUT-O EXPLICIT, deci scrisă aici ca s-o
poată refuza: `.indiciu` era ascuns în navigație, după regula „în navigație
ecranul e al navigației". Regula a fost bună atâta timp cât în navigație
nu avea nimic ce să-ți spună. De când se pot adăuga POI-uri din mers, are:
„Punct adăugat", sau motivul pentru care n-a mers. Ascuns, omul apasă o
categorie și nu se întâmplă nimic pe ecran.
Deci nu mai e ascuns — e MUTAT jos, deasupra barei de navigație și a
pastilei „Re-centrează" (150 px), unde nu calcă nici cardul de sus, nici
cifrele de jos. */
body.navigheaza .indiciu{
top:auto;bottom:calc(env(safe-area-inset-bottom) + 200px)}
/* ---------- ecrane mari ---------- */
@media (min-width:820px){
:root{--panou-w:clamp(340px, 27vw, 420px)}
/* Și aici pleacă din josul ecranului, ca pe telefon — doar că pe ecran mare
rămâne o fișă centrată, nu o fâșie lipită de margine, deci păstrează cei
14 px de aer sub ea. Nu mai lasă loc barei Meniu/Rută: butoanele stau în
colț, iar fișa e îngustă și nu le calcă. */
.panou{left:0;right:0;margin:0 auto;width:var(--panou-w);
bottom:calc(env(safe-area-inset-bottom) + 14px);
border-radius:16px;border:1px solid var(--linie);
padding:0 18px 16px;max-height:min(70vh,700px);
box-shadow:0 6px 30px rgba(19,32,51,.16);
/* aceeași reparație ca la varianta de telefon: procentul singur nu
ridică panoul destul cât să iasă de sub el, indiferent de conținut */
transform:translateY(calc(100% + 100vh))}
.panou.jumatate{transform:translateY(0);max-height:44vh}
.panou.deschis{transform:translateY(0);max-height:min(70vh,700px)}
.cap{margin:0 -18px;padding-left:18px;padding-right:18px;border-radius:16px 16px 0 0}
/* Pe ecran mare, aceeași regulă: coloana pleacă din josul ecranului. */
.actiuni{right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px)}
/* Pe ecran mare, fâșia de căutare nu se întinde cât ecranul: un câmp de
text lat de un metru nu ajută pe nimeni. */
.camp-cautare{left:50%;right:auto;transform:translateX(-50%);width:min(520px,72vw)}
.cautare-rez{left:auto;right:auto;width:min(560px,60vw);left:50%;transform:translateX(-50%)}
.rotund{width:44px;height:44px}
.rotund svg{width:21px;height:21px}
/* Pe ecran mare, butoanele NU se centrează ca vechea bară — rămân la
stânga, cerute explicit așa, indiferent de lățime. */
}
/* ---------- anunțuri ---------- */
.anunt{border:1px solid var(--linie);border-radius:14px;padding:13px 14px;margin-bottom:10px;
background:var(--surface)}
.anunt-cap{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.anunt-cap .et{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px}
.anunt-cap .et.info{background:var(--albastru-pal);color:var(--albastru-tare)}
.anunt-cap .et.atentie{background:#fdf4e3;color:#8a5a08}
.anunt-unelte{margin-left:auto;display:flex;gap:6px}
.anunt-titlu{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
.anunt-corp{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:5px}
.anunt-jos{font-size:12.5px;color:var(--ink-3);margin-top:8px}
/* ---------- Acasă ----------
Ecran întreg, peste hartă. Nu folosește fereastra de jos, și e aceeași
distincție ca la sertar: fereastra aceea e a hărții. Aici nu te uiți la
apă, citești ce au propus alții. */
/* Pleacă acum din chiar josul ecranului, la fel ca panoul și sertarul — nu se
mai oprește deasupra barei Meniu/Rută. Z-index-ul (10) era deja mai mare
decât cel al barei (7), deci stătea deasupra ei în straturi; doar poziția
trebuia coborâtă până la 0. */
.acasa{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;
background:var(--cream);display:flex;flex-direction:column}
.acasa[hidden]{display:none}
/* ---------- antetul de Acasă, ca al paginilor din sertar ----------
Avea sigla la stânga și un × la dreapta, adică arăta a fereastră. Se poartă
însă ca o pagină, iar două feluri de „ieși de-aici" în aceeași aplicație
înseamnă că trebuie să te uiți de fiecare dată ca să afli care e. Acum e
aceeași săgeată, cu același `.meniu-inapoi`, la aceeași distanță de
margine. */
.acasa-cap{display:flex;align-items:center;gap:10px;flex:none;
padding:calc(env(safe-area-inset-top) + 8px) 10px 6px;
background:var(--surface);border-bottom:1px solid var(--linie)}
.acasa-inapoi{flex:1;min-width:0;margin:0;text-align:left}
/* ---------- comutatorul de privire ----------
Două pictograme lipite, una aprinsă. Lățime fixă, deci nu mai crește cu
numele rolului și nu mai urcă peste siglă pe un telefon îngust. */
.comuta-cont{appearance:none;flex:none;display:inline-flex;padding:2px;gap:2px;
border:1px solid var(--linie);border-radius:999px;background:var(--cream);
cursor:pointer;color:var(--ink-3)}
.comuta-cont[hidden]{display:none}
.cc-jum{display:grid;place-items:center;width:30px;height:26px;border-radius:999px;
transition:.14s}
.cc-jum.pe{background:var(--surface);color:var(--albastru-tare);
box-shadow:0 1px 3px rgba(19,32,51,.14)}
.comuta-cont:active{transform:scale(.96)}
/* Taburile se derulează cu degetul pe orizontală. Un membru vede trei, un
administrator vede șase — iar șase pastile nu încap pe 360 px. Înainte se
înghesuiau până deveneau neciteț.
`flex:none` pe pastile e partea care contează: fără el, flexbox le strânge
sub lățimea textului în loc să lase rândul să crească, iar derularea n-are
ce derula. `scrollbar-width:none` scoate bara pe desktop; pe telefon oricum
nu se vede. `scroll-padding` ca tabul ales să nu se lipească de margine
când e adus în ecran. */
.acasa-file{display:flex;gap:8px;flex:none;padding:12px 14px 4px;
background:var(--surface);border-bottom:1px solid var(--linie);
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-inline:14px}
.acasa-file::-webkit-scrollbar{display:none}
.acasa-file .pastila-f{flex:none;scroll-snap-align:start}
/* Padding-ul de jos ține cont acum de zona sigură: ecranul merge până la
marginea telefonului, iar ultimul rând din listă nu trebuie să cadă sub
bara de gesturi. */
.acasa-corp{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
padding:14px 14px calc(env(safe-area-inset-bottom) + 14px)}
/* Taburile de Acasă (Ture / Membri / Știri) n-aveau stil propriu — două
butoane simple treceau neobservat ca butoane crude de browser, dar la al
treilea devenea vizibil. Aceeași formă ca `.cat`, cu starea apăsată marcată
prin culoare, nu doar prin `aria-pressed` invizibil ochiului. */
/* Colțurile: erau 999px, adică pastile rotunde. Bogdan, 25 august: „mai puțin
rotunjite… mai geometric/dreptunghiular". 8px — cât să nu fie o muchie tăiată
cu cuțitul, dar destul cât fila să se citească drept filă, nu drept etichetă.
Aceeași rază ca a cardurilor mici din liste, ca să nu apară a treia formă. */
.pastila-f{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;
padding:8px 13px;border-radius:8px;border:1px solid var(--linie);background:var(--cream);
color:var(--ink-2);transition:.14s}
/* Pictograma filei: mai mică decât în sertar (acolo e un rând întreg, aici
stă lângă un cuvânt), și fără să se lase strânsă când bara se derulează. */
.pastila-f .ico{width:17px;height:17px;flex:none;display:block}
.pastila-f .ico svg{width:100%;height:100%;display:block}
.pastila-f[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pastila-f[hidden]{display:none}
/* Subfilele „Turele mele" / „Toate turele", în corpul filei Ture — nu în
antetul fix, deci fără fundal și margine proprii; se derulează cu restul. */
.sub-file{display:flex;gap:8px;margin-bottom:14px}
/* ---------- cardul unui eveniment ----------
După design-ul „Events List", adus la lățimea unui telefon. Schimbarea care
compactează cu adevărat: poza trece de la bandă 16:9 pe toată lățimea (≈200
px doar ea) la o coloană de 108 px la stânga, pe înălțimea cardului. */
.tura{background:var(--surface);border:1px solid var(--linie);border-radius:16px;
overflow:hidden;margin-bottom:12px;box-shadow:0 1px 4px rgba(19,32,51,.07);
display:flex;align-items:stretch}
/* Un eveniment trecut, în „Turele mele": tot acolo, dar vizibil altfel —
e istoric, nu o ofertă activă. */
.tura.trecuta{opacity:.72}
.tura-stanga{flex:none;width:108px;display:flex;flex-direction:column;
background:var(--albastru-pal)}
.tura-poza{width:100%;flex:1;min-height:84px;object-fit:cover;display:block;
background:var(--albastru-pal)}
.tura-poza.gol{display:grid;place-items:center;color:var(--albastru);opacity:.5}
.tura-poza.gol svg{width:40px;height:40px}
/* Forma traseului, sub poză. Nu peste ea: una spune „cum arată locul",
cealaltă „pe unde mergem" — două întrebări, două locuri. */
.tura-mini-cutie{flex:none;height:56px;display:grid;place-items:center;
background:var(--cream);border-top:1px solid var(--linie);color:var(--albastru-tare)}
.tura-mini{width:52px;height:52px;display:block}
.tura-corp{flex:1;min-width:0;padding:11px 13px 12px;display:flex;
flex-direction:column;gap:7px}
.tura-cap{display:flex;align-items:flex-start;gap:9px}
.tura-cap-txt{flex:1;min-width:0}
.tura-titlu{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.tura-ghid{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.tura-desc{font-size:13.5px;line-height:1.5;color:var(--ink-2);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* O SINGURĂ etichetă de stare, sus-dreapta. Înainte erau până la cinci
pastile amestecate — „trecut", cost, minim, maxim, locuri — din care nu se
citea niciuna dintr-o privire. */
.tura-stare{flex:none;font-size:10.5px;font-weight:700;line-height:1;
padding:5px 8px;border-radius:7px;white-space:nowrap}
.tura-stare.strange{background:var(--albastru-pal);color:var(--albastru-tare)}
.tura-stare.confirmat{background:#e6f4ec;color:#1f6a48}
.tura-stare.plin{background:transparent;color:var(--oprit);
box-shadow:inset 0 0 0 1px var(--oprit);padding:4px 7px}
.tura-stare.trecut{background:var(--linie);color:var(--ink-3)}
/* Faptele ca perechi ETICHETĂ / valoare, ca în design — nu ca pastile.
Eticheta mică deasupra spune CE e numărul, deci numărul poate rămâne gol
de context și scurt. */
.tura-fapte{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:1px}
.tf{display:flex;flex-direction:column;gap:2px;min-width:0}
.tf-et{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);line-height:1}
.tf-val{font-size:13px;font-weight:650;color:var(--ink);line-height:1.25}
.tf-lat{flex:1 1 130px;min-width:120px}
.tf-bara{display:flex;align-items:center;gap:7px}
.tf-bara .sant{flex:1;height:7px;border-radius:999px;background:var(--linie);
overflow:hidden;min-width:46px}
.tf-bara .umplut{display:block;height:100%;border-radius:999px;background:var(--albastru-tare)}
.tura-jos{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:3px}
.tura-jos .buton{margin-top:0;flex:0 1 auto;padding-inline:16px}
.tura-spatiu{flex:1}
.tura-indemn{font-size:12.5px;color:var(--ink-3);line-height:1.4}
/* Acțiunile ghidului, ca pictograme: patru butoane cu text împingeau restul
cardului în jos și repetau, pe fiecare eveniment, cuvinte pe care le înveți
o dată. Titlul rămâne, pentru cine ține degetul pe ele. */
.tura-ic{flex:none;width:32px;height:32px;border-radius:999px;
border:1px solid var(--linie);background:var(--surface);color:var(--ink-2);
display:grid;place-items:center;cursor:pointer;padding:0}
.tura-ic svg{width:15px;height:15px;display:block}
.tura-ic:active{transform:scale(.94)}
.tura-ic.rau{color:var(--oprit)}
/* Participanții, deasupra barei de locuri. Despărțit de comenzile de editare
din josul cardului: lângă creion și coș, un buton cu oameni s-ar fi citit
ca „șterge participanții". */
.tura-membri{display:flex;align-items:center;gap:8px}
.tm-txt{font-size:12.5px;font-weight:650;color:var(--ink-2)}
/* Buton cu semn desenat în cod (nu imagine): semnul la stânga, textul lângă.
Fratele lui `.buton.cu-semn`, care poartă un PNG din `img/nav/`. */
.buton.cu-semn-vector{display:flex;align-items:center;justify-content:center;gap:9px}
.buton.cu-semn-vector svg{width:18px;height:18px;flex:none;display:block}
/* Butonul de propus o tură nu se mai lipește de primul card. */
#turaNoua{margin-bottom:16px}
/* Sub 380 px, coloana din stânga ar strânge textul prea tare. */
@media (max-width:379px){
.tura-stanga{width:88px}
.tura-mini-cutie{height:46px}
.tura-mini{width:42px;height:42px}
}
.acasa-gol{text-align:center;color:var(--ink-3);font-size:14.5px;line-height:1.6;
padding:40px 20px}
/* ---------- tabloul de bord al ghidului ----------
„Turele mele" capătă un salut și, dacă are o tură care urmează, un card
care o scoate în față — restul listei rămâne dedesubt, neschimbată. */
.ghid-salut{font-size:20px;font-weight:700;color:var(--ink);line-height:1.3;margin:2px 0 14px}
.tura-urm{background:var(--albastru-pal);border:1px solid var(--linie);border-radius:16px;
padding:14px 16px 16px;margin-bottom:16px}
.tura-urm-eticheta{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--albastru-tare);margin-bottom:6px}
.tura-urm-titlu{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.3}
.tura-urm-fapte{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}
.tura-urm-fapt{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
font-weight:600;color:var(--albastru-tare)}
.tura-urm-fapt svg{width:16px;height:16px;flex:none}
/* comutatorul Listă / Calendar refolosește exact stilul „mele"/„toate" —
sunt același fel de alegere, doar cu altă pereche de opțiuni */
/* ---------- calendarul turelor ----------
După „Calendar Evenimente.dc.html" din Claude Design, adus la paleta
Aplicația: designul e cald (cremă, teracotă, măsliniu), aplicația e rece
(albastru pe alb). Am luat FORMA — cartea, cercurile, punctul, cartonașele
— nu culorile, ca ecranul să nu arate ca o bucată dintr-o altă aplicație
lipită aici. */
.cal-carte{background:var(--surface);border:1px solid var(--linie);
border-radius:16px;box-shadow:0 1px 3px rgba(19,32,51,.06);
padding:clamp(10px,3.4vw,14px);margin-bottom:16px}
.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cal-nav-luna{flex:1;text-align:center;font-size:clamp(15px,4.4vw,17px);
font-weight:700;color:var(--ink);text-transform:capitalize}
.cal-sageata{appearance:none;border:1px solid var(--linie);background:var(--surface);
color:var(--ink-2);width:32px;height:32px;flex:none;border-radius:50%;cursor:pointer;
display:grid;place-items:center;padding:0}
.cal-sageata:active{transform:scale(.94)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cap{text-align:center;font-size:clamp(9.5px,2.9vw,10.5px);font-weight:700;
letter-spacing:.04em;color:var(--ink-3);padding:4px 0}
/* Cercuri de aceeași mărime, oricât de îngust e ecranul: `aspect-ratio`
leagă înălțimea de lățimea coloanei, deci grătarul nu se deformează. */
.cal-zi{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
position:relative;aspect-ratio:1;border-radius:999px;color:var(--ink);
font:600 clamp(11.5px,3.6vw,13px)/1 inherit;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-zi.goala{visibility:hidden;pointer-events:none}
.cal-zi:active{transform:scale(.92)}
/* Punctul e MEREU în pagină, doar invizibil când nu e nimic — altfel numărul
ar sălta cu 6 px între o zi cu tură și una fără, iar grătarul ar tresări la
fiecare schimbare de lună. Aceeași soluție ca în design (`visibility`). */
.cal-punct{width:5px;height:5px;border-radius:50%;background:var(--albastru-tare);
visibility:hidden}
.cal-zi.are-tura .cal-punct{visibility:visible}
.cal-zi.are-tura{font-weight:750}
.cal-zi.azi{box-shadow:inset 0 0 0 1.5px var(--albastru-tare)}
.cal-zi.aleasa{background:var(--albastru-tare);color:#fff}
/* Punctul din ziua aleasă devine alb: pe cercul plin, albastru pe albastru
ar fi însemnat un punct dispărut exact în ziua la care te uiți. */
.cal-zi.aleasa .cal-punct{background:#fff}
.cal-lista-titlu{font-size:11.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);margin:0 2px 9px}
.cal-lista{display:flex;flex-direction:column;gap:8px}
/* Cartonaș, nu rând despărțit de o linie: se apasă, deci trebuie să arate a
ceva ce se poate apăsa. */
.cal-ev{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;
display:flex;flex-direction:column;gap:3px;
background:var(--surface);border:1px solid var(--linie);border-radius:12px;
padding:10px 13px;box-shadow:0 1px 2px rgba(19,32,51,.05)}
.cal-ev:active{transform:scale(.99)}
.cal-ev-data{font-size:13.5px;font-weight:700;color:var(--albastru-tare);
text-transform:capitalize}
.cal-ev-rand{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cal-ev-nume{font-size:13.5px;font-weight:600;color:var(--ink)}
.cal-ev-loc{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.cal-ev.plina .cal-ev-loc{color:var(--oprit)}
/* „PLIN" ca pastilă conturată, ca în design: o stare, nu un avertisment —
de-aia contur, nu fundal plin. */
.cal-plin{font-size:10px;font-weight:800;letter-spacing:.06em;padding:1px 8px;
border-radius:999px;border:1px solid var(--oprit);color:var(--oprit);white-space:nowrap}
.cal-nimic{text-align:center;color:var(--ink-3);font-size:14px;padding:18px 4px}
/* Clipirea cardului găsit din calendar. Se stinge singură — o evidențiere
rămasă ar continua să spună „uite aici" mult după ce omul a derulat. */
.tura-gasita{box-shadow:0 0 0 2px var(--albastru-tare)}
/* ---------- panoul strâns la antet ----------
A treia treaptă, și singura care lipsea cu adevărat: după ce ai calculat un
traseu vrei harta, dar vrei să vezi și că traseul e încă acolo. Închis de
tot, panoul dispărea sub bara de jos și traseul părea pierdut. */
.panou.mic{transform:translateY(0);max-height:66px;overflow:hidden}
.panou.mic .cap-butoane{display:flex}
.panou.mic .maner{background:var(--linie)}
/* ---------- alegerea ambarcațiunii, varianta strânsă din panoul de rutare ----------
Era un chip: ilustrație și text pe ACEEAȘI linie, într-o pastilă. Forma aia
mergea cu vechea pictogramă din linii, de lățime fixă; cu ilustrațiile e
greșită, și se vedea — caiacul mare, „cel mai scurt" mai mic, barca atât de
mică încât nu se mai vedea desenul.
De ce: pe un rând, `.poza` avea `width:100%` și devenea un element flexibil
lângă etichetă. Etichetele n-au aceeași lungime — „Caiac", „Cel mai scurt",
„Barcă cu motor" — deci fiecare buton lăsa altcât spațiu imaginii, iar cea
cu textul cel mai lung rămânea fără nimic. Trei mărimi diferite pentru trei
butoane care fac același lucru.
Acum e același cartonaș ca după calcul (`.alt-card`), doar mai scund:
ilustrația deasupra, numele dedesubt, lățimi egale. Ce alegi înainte de
calcul arată la fel cu ce alegi după — e aceeași întrebare. */
.ambarcatiuni.mic{gap:7px}
.ambarcatiuni.mic .amb{padding:8px 5px 7px;border-radius:12px;gap:4px;border-width:1.2px}
/* Lățimea imaginii NU mai depinde de cât de lung e numele: `flex:none` o
scoate din negocierea de spațiu, iar `max-width` fix o ține la fel peste
tot. Asta e reparația propriu-zisă. */
.ambarcatiuni.mic .amb .poza{flex:none;width:100%;max-width:44px;margin:0 auto}
.ambarcatiuni.mic .amb .poza .rezerva{width:26px;height:19px;margin:4px auto}
.ambarcatiuni.mic .amb .et{font-size:11.5px;font-weight:600;line-height:1.2}
/* căutarea unui punct de plecare sau de sosire, în panoul de rutare */
.cauta-punct{position:relative;margin:2px 0 10px}
.cauta-punct input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;
padding:10px 12px;border-radius:11px;border:1px solid var(--linie);background:var(--surface)}
.cauta-punct .rez{margin-top:6px;border:1px solid var(--linie);border-radius:11px;
overflow:hidden;background:var(--surface)}
.cauta-punct .rez:empty{display:none}
.cauta-punct .rez-rand{padding:9px 12px}
/* fondul, într-un rând de trei: sunt trei cuvinte, nu au nevoie de un rând
fiecare, iar alegerea se face privind harta de dedesubt */
.fond-rand{display:flex;gap:6px;padding:2px 4px 6px}
.fond-buc{flex:1;appearance:none;font:inherit;font-size:13px;font-weight:650;cursor:pointer;
padding:5px 5px 7px;border-radius:11px;border:1px solid var(--linie);background:var(--surface);
color:var(--ink-2);transition:.14s;display:flex;flex-direction:column;gap:5px;align-items:stretch}
/* miniatura ocupă lățimea butonului; textul rămâne dedesubt, ca la un
comutator de fundal din orice aplicație de hartă */
.fond-proba{display:block;width:100%;height:34px;border-radius:7px}
.fond-buc[aria-pressed="true"]{background:var(--albastru-tare);border-color:var(--albastru-tare);color:#fff}
.fond-buc:active{transform:scale(.96)}
.plutitor .categorii{padding:0 4px 4px;margin:0}
/* ---------- câmpuri de formular în panou ----------
Aceeași formă peste tot (punct de interes, tură, cont): un formular care
arată altfel de la un ecran la altul pare al altei aplicații. */
.camp{display:block;margin-top:10px}
.camp>span{display:block;font-size:13px;color:var(--ink-3);margin-bottom:5px}
.camp input,.camp textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;
padding:10px 12px;border-radius:11px;border:1px solid var(--linie);
background:var(--surface);color:var(--ink);resize:vertical}
.camp input:focus,.camp textarea:focus{outline:none;border-color:var(--albastru-tare)}
.forma-poi{margin-top:6px}
/* porțile prin care trece o legătură până să conteze într-o rută */
.portile{margin-top:12px;border:1px solid var(--linie);border-radius:11px;overflow:hidden}
.poarta{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;font-size:14px}
.poarta + .poarta{border-top:1px solid var(--linie)}
.poarta span{color:var(--ink-3)}
.poarta b{font-variant-numeric:tabular-nums}
.forma-poi .buton{margin-top:12px}
/* numărul de telefon e de apăsat, nu de citit: ținta trebuie să fie mare cât
s-o nimerești cu mâna udă, dintr-o barcă în mișcare */
a.tel{display:inline-block;padding:7px 12px;margin:2px 0;border-radius:10px;
background:var(--albastru-tare);color:#fff;font-weight:650;text-decoration:none}
a.tel:active{opacity:.85}
/* formele de poziție: aceeași structură, alt miez */
/* Marcajul propriei poziții: aceleași desene ca în meniu, la 30 px.
`transform` se pune din JS (azimutul minus orientarea hărții) și de-aia
rotația stă pe `.forma`, nu pe `.eu-punct` — haloul nu trebuie să se
învârtă odată cu barca, el e un cerc și n-are bot. */
.eu-punct .forma{position:relative;width:30px;height:30px;display:block;
transform-origin:50% 50%;transition:transform .25s ease-out}
.eu-punct .forma img{width:100%;height:100%;display:block;
filter:drop-shadow(0 1px 2px rgba(19,32,51,.35))}
.eu-punct.sageata,.eu-punct.caiac,.eu-punct.barca{width:30px;height:30px}
/* ---------- sertarul, pe ecran întreg ----------
Aceeași formă ca Acasă, din același motiv: și meniul e o destinație, nu un
panou care se strecoară peste hartă. Alunecă tot din stânga, de unde a venit
mereu — gestul rămâne, doar suprafața crește. */
.sertar{width:100%;bottom:0;
border-right:0;box-shadow:none}
.sertar-cap{border-bottom:1px solid var(--linie)}
.sertar-corp{padding:4px 14px calc(env(safe-area-inset-bottom) + 18px)}
.sertar-cont{margin:10px 4px 6px}
/* vălul n-are ce întuneca sub o suprafață opacă de ecran întreg */
.voal{display:none}
/* cota, în antetul de Acasă — vezi regula întreagă mai jos.
Aici stătea o a doua definiție, rămasă de pe vremea când era o pastilă
îngustă: `margin:12px 14px 0`. Regula de mai jos a făcut-o `width:100%`, dar
n-a golit marginea — iar `100%` PLUS 14px la stânga și 14px la dreapta
înseamnă 28px peste lățimea ecranului. Din afară arăta exact așa cum a
descris-o Bogdan: margine sus și la stânga, iar în dreapta iese din ecran,
cu viteza vântului lipită de margine. Cele două reguli sunt acum una
singură — două definiții pentru același selector sunt un accident care
așteaptă. */
/* Vremea zilei — a doua linie, sub cotă. Pila era gândită pentru un singur
rând scurt; vremea și vântul nu încap acolo fără să taie ceva din amândouă,
deci aici, doar în Acasă, pila se lasă pe verticală. */
/* ---------- fâșia cu cota și vremea, în Acasă ----------
Era o pastilă rotunjită, îngustă, lipită sub antet. Acum e o fâșie pe toată
lățimea, cu colțuri drepte: se citește ca un panou de informații, nu ca un
buton pe care ai uitat să-l apeși. Marginile laterale dispar, colțurile la
fel, iar linia de jos o desparte de taburi. */
.acasa .cota{display:block;width:auto;max-width:none;border-radius:0;
border:0;border-bottom:1px solid var(--linie);box-shadow:none;
flex:none;align-self:stretch;margin:0;overflow:visible;
padding:clamp(8px,2.6vw,11px) clamp(10px,3.8vw,14px) clamp(9px,2.8vw,12px)}
.acasa .cota .cota-rand{display:flex;gap:8px;align-items:center;max-width:100%;
font-size:clamp(12.5px,3.9vw,14px)}
.acasa .cota .cota-rand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Vremea de acum: desen, temperatură mare, cuvântul, apoi vântul cu săgeată. */
/* Mărimile sunt `clamp()`, nu numere fixe, și nu un prag de ecran ales cu
ochiul. Pe un Samsung A53 (360 px lățime) desenele de 30 și 24 px plus
textul de 21 px umpleau fâșia și împingeau restul afară; pe un ecran lat
arătau bine. `clamp(min, vw, max)` le lasă mari unde e loc și le strânge
singure unde nu e, fără să existe o lățime la care sar dintr-odată. */
.vreme-acum{display:flex;align-items:center;gap:clamp(5px,2vw,8px);
margin-top:clamp(6px,2.2vw,9px);flex-wrap:wrap}
.va-t{font-size:clamp(17px,5.4vw,21px);font-weight:800;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.va-txt{font-size:clamp(11.5px,3.6vw,13px);font-weight:600;color:var(--ink-2)}
/* `margin-left:auto` o duce la marginea din dreapta; cu marginea fâșiei
reparată, „margine" înseamnă acum padding-ul, nu muchia ecranului. */
.va-vant{display:inline-flex;align-items:center;gap:4px;margin-left:auto;
font-size:clamp(11px,3.4vw,12.5px);font-weight:600;color:var(--ink-2);white-space:nowrap}
.va-vant b{font-weight:800;color:var(--ink)}
.sageata-vant{flex:none;color:var(--albastru-tare)}
/* Culorile desenelor stau AICI, nu în SVG: un singur loc de schimbat. */
.semn-vreme{flex:none;display:block}
.semn-vreme .cald{stroke:#E8A33D}
.semn-vreme .nor{stroke:var(--ink-3)}
.semn-vreme .apa{stroke:var(--albastru-tare)}
/* Cele cinci zile, pe un rând. Se strâng singure pe ecran îngust: sunt cinci
coloane egale, nu o listă care se rupe. */
.vreme-zile{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1px,.6vw,2px);
margin-top:clamp(7px,2.6vw,10px);padding-top:clamp(6px,2.4vw,9px);
border-top:1px solid var(--linie)}
.vz{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.8vw,3px);
padding:2px 0;border-radius:9px;min-width:0}
.vz.azi{background:var(--albastru-pal)}
.vz-zi{font-size:clamp(9px,2.9vw,10.5px);font-weight:700;letter-spacing:.03em;
text-transform:uppercase;color:var(--ink-3)}
.vz-t{font-size:clamp(11px,3.4vw,12.5px);font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;white-space:nowrap}
.vz-min{font-weight:600;color:var(--ink-3);margin-left:2px}
/* Desenele poartă `width`/`height` ca ATRIBUTE în SVG (`semnVreme` le scrie
acolo). CSS le bate, iar `height:auto` păstrează raportul din `viewBox`,
deci nu trebuie atinsă nicio mărime din JavaScript. */
.vreme-acum > .semn-vreme{width:clamp(22px,7.2vw,30px);height:auto}
.vz .semn-vreme{width:clamp(17px,5.6vw,24px);height:auto}
@media (min-width:820px){
.sertar{width:min(520px, 100%);left:50%;transform:translateX(-50%) translateY(0);
border-left:1px solid var(--linie);border-right:1px solid var(--linie)}
.sertar.deschis{transform:translateX(-50%)}
.acasa-corp{max-width:720px;margin:0 auto;width:100%}
}
/* explicațiile, într-un singur loc: în Ajutor, nu sub fiecare rând de meniu */
.explicatii{margin-top:14px;border:1px solid var(--linie);border-radius:12px;
background:var(--surface);overflow:hidden}
.explicatii summary{cursor:pointer;padding:12px 14px;font-size:14.5px;font-weight:650;
color:var(--ink);list-style:none}
.explicatii summary::-webkit-details-marker{display:none}
.explicatii summary::after{content:'▾';float:right;color:var(--ink-3)}
.explicatii[open] summary::after{content:'▴'}
.expl{padding:0 14px 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.expl b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
/* ---------- ghidul de folosire ----------
Desen la stânga, text la dreapta. Desenele sunt cele ADEVĂRATE — luate din
butoanele vii, sau aceleași fișiere pe care le vezi în aplicație — deci
rândul din ghid și butonul de pe hartă nu se pot despărți în timp. */
.ghid-titlu{font-size:12px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);margin:22px 0 9px}
.ghid-lista{display:flex;flex-direction:column;gap:2px}
.ghid-rand{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;
border-radius:12px;background:var(--surface);border:1px solid var(--linie)}
.ghid-rand.fara-semn{padding-left:14px}
.ghid-semn{flex:none;width:44px;min-height:34px;display:grid;place-items:center;
color:var(--ink-2)}
.ghid-semn > span{display:grid;place-items:center}
.ghid-semn svg{width:26px;height:26px;display:block}
/* Plasă, dacă butonul de unde vine desenul n-a avut clasă `ic-…`: fără ea,
`var(--c1)` rămâne nerezolvată și pictograma iese cu creionul ridicat. */
.ghid-semn{--c1:var(--ink-2);--c2:var(--ink-2);--c3:var(--ink-3)}
/* Semnele din `img/nav/` sunt albe pe transparent — au nevoie de fundalul
colorat pe care au fost desenate să stea, altfel sunt alb pe alb. */
.ghid-chip{width:36px;height:36px;border-radius:10px;display:grid;
place-items:center;flex:none}
.ghid-txt{min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ghid-txt b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px;
display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* Eticheta de acces, în rând cu titlul. Aceleași două culori ca insignele de
pe butoane: roșu „închis până plătești", teracotă „nu e pentru tine". */
.ghid-et{font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1;
padding:3px 5px;border-radius:5px;flex:none}
.ghid-et.pro{background:var(--oprit);color:#fff}
.ghid-et.ghid{background:#8A5A2B;color:#fff}
/* Pașii, numerotați. Un traseu se face în trei mișcări; scrise ca listă cu
bulină ar fi arătat ca niște observații, nu ca o ordine. */
.ghid-pasi{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.ghid-pas{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;
line-height:1.5;color:var(--ink-2)}
.ghid-pas .nr{flex:none;width:23px;height:23px;border-radius:50%;
background:var(--teal);color:#fff;font-size:12.5px;font-weight:800;
display:grid;place-items:center;margin-top:1px}
/* Trei mostre desenate în CSS, fiindcă n-au fișier propriu nicăieri: bucata
de zonă protejată, canalul de tranzit, și haloul unei buline. */
.ghid-zona{width:30px;height:22px;border-radius:5px;display:block;
background:rgba(199,58,48,.16);border:1.5px solid var(--oprit)}
.ghid-tranzit{width:30px;height:22px;border-radius:5px;display:block;
background:rgba(199,58,48,.16);border:1.5px dashed var(--oprit);
position:relative}
.ghid-tranzit::after{content:'';position:absolute;left:-3px;right:-3px;top:9px;
height:3px;border-radius:2px;background:var(--albastru-tare)}
.ghid-halou{width:26px;height:26px;border-radius:50%;display:block;
background:var(--teal);box-shadow:0 0 0 5px rgba(47,95,150,.22)}
/* proba de formă, în panoul „Cum arăt pe hartă" */
.forma-proba{width:38px;height:38px;display:grid;place-items:center}
.forma-proba img{width:34px;height:34px;display:block}
.miez-proba{width:15px;height:15px;border-radius:50%;background:#16294a;
border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
/* ---------- plăcile desenate din meniuri ----------
Pe hartă, un punct de interes e o siluetă albă pe fundal colorat: trebuie
citit dintr-o privire, în soare, la 17 px, fără text lângă el. În meniu ai
timp să te uiți și scrie numele alături — deci desenul are voie să fie o
ilustrație. Nu e o inconsecvență, e răspunsul la două întrebări diferite.
Culoarea categoriei e firul care leagă cele două înfățișări.
`--placa` stă pe și o mută setarea din meniu. O singură variabilă
pentru toate locurile: schimbi treapta și tot ce e deschis pe ecran se
aliniază, fără să redesenăm vreun meniu. Valoarea de aici e plasa de
siguranță, dacă JS-ul n-a apucat s-o pună — și e chiar treapta implicită. */
:root{--placa:38px}
/* Placa e PĂTRATĂ, cu ilustrație — nu pinul de pe hartă. Vezi comentariul din
02-icoane.js: în meniu ai timp să te uiți la un desen, pe hartă nu. */
.placa{width:var(--placa);height:var(--placa);display:block;border-radius:22%;
/* plăcile sunt ilustrații pe fundal opac; fără umbră par lipite una de alta */
box-shadow:0 1px 3px rgba(19,32,51,.20);object-fit:cover}
/* placa își cere lățimea, deci cutiile fixe ale acului trebuie să cedeze */
.cat .ac-mic:has(.placa){width:auto;height:auto}
.plut-rand .ac:has(.placa){width:auto}
.plut-rand:has(.placa){gap:10px;padding-top:7px;padding-bottom:7px}
.categorii .cat:has(.placa){gap:7px}
/* Categoria stinsă rămâne în lista de vizibilitate, dar spune că e stinsă:
palidă, nu ascunsă. Ascunsă ar însemna „nu există", și ar face punctele ei
rămase pe hartă să pară nefiltrabile. */
.cat.stinsa{opacity:.62}
.cat.stinsa .placa{filter:grayscale(.55)}
/* ---------- alegerea mărimii ----------
Fiecare rând își desenează proba la propria mărime, printr-un `--placa`
local. Vezi rezultatul înainte să-l alegi, nu un număr care îl descrie. */
.marimi{display:flex;flex-direction:column;gap:8px;padding:2px}
.marime-rand{appearance:none;border:1px solid var(--linie);background:var(--surface);
font:inherit;border-radius:14px;padding:10px 12px;display:flex;align-items:center;
gap:12px;cursor:pointer;text-align:left;width:100%}
.marime-rand:active{transform:scale(.99)}
.marime-rand[aria-pressed="true"]{border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent);background:#f4f9ff}
.marime-rand .proba{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.marime-rand .et{flex:none;font-size:14px;font-weight:600;color:var(--ink-2)}
/* comutatorul de nume are aceeași formă cu treptele, ca să se citească drept
parte din aceeași alegere, nu ca o setare de alt fel */
.marime-rand.comutator{margin-top:8px;justify-content:space-between}
.marime-rand.comutator .et{flex:1}
.marime-rand.comutator .stare{flex:none;font-size:13px;color:var(--ink-3)}
.marime-rand.comutator[aria-pressed="true"] .stare{color:var(--accent);font-weight:600}
/* ---------- plăci fără nume ----------
`html.fara-nume` e pusă de setarea din meniu. Totul de aici e comutare de
înfățișare, nu de conținut: numele rămâne în HTML, pe `aria-label` și pe
`title`, deci apăsarea lungă și cititoarele de ecran îl găsesc mai departe.
Dacă l-am scoate din DOM, meniul ar deveni un test de memorie.
Scopul e strict grila de puncte de interes (`.poi-grila`), unde plăcile
pătrate suportă să rămână doar cu iconița. Fără `.poi-grila` în selector,
regula ștergea textul din ORICE `.plut-rand` — inclusiv meniul „Ce fel de
legătură?" și altele care n-au fost gândite să existe fără text — și acolo
rândurile rămâneau goale, cu iconița-bifă invizibilă lângă ele. */
.fara-nume .poi-grila .plut-rand .txt,
.fara-nume .categorii[data-poivis] .cat .txt{display:none}
/* Fără text, butonul n-are ce cadru să poarte: placa ARE deja formă și
fundal. Un dreptunghi rotunjit în jurul unui pătrat rotunjit e doar o a
doua margine care nu spune nimic. */
.fara-nume .poi-grila .plut-rand,
.fara-nume .categorii[data-poivis] .cat{
background:transparent;border:0;border-radius:0;padding:4px;gap:0;
justify-content:center;box-shadow:none}
.fara-nume .poi-grila .plut-rand:hover{background:transparent}
/* Trei coloane, ca cele nouă categorii să încapă fără derulare. Cu numele
pornite, grila se strânge la o coloană — un nume lângă altul, pe trei
coloane, se rupe urât. */
.poi-grila{display:grid;grid-template-columns:1fr;gap:2px}
.fara-nume .poi-grila{grid-template-columns:repeat(3, auto);
gap:6px;justify-content:center;padding:2px}
.fara-nume .categorii[data-poivis]{display:grid;grid-template-columns:repeat(3, auto);
gap:6px;justify-content:center}
/* Apăsat/neapăsat fără cadru: umplerea închisă nu mai există, deci semnul
devine chiar placa — vie când se vede, stinsă când nu. E aceeași convenție
cu restul hărții: ce nu se vede pe hartă e palid și în listă. */
.fara-nume .categorii[data-poivis] .cat[aria-pressed="true"]{background:transparent;color:inherit}
.fara-nume .categorii[data-poivis] .cat[aria-pressed="false"] .placa{
filter:grayscale(1);opacity:.4}
.fara-nume .categorii[data-poivis] .cat[aria-pressed="false"]{opacity:1}
/* ---------- panoul „împrumutat" ca pagină de sertar ----------
Cele șase din „Administrare aplicație" (legături de aprobat, rețea,
feedback, telefon, utilizatori, zone) sunt panouri vechi, gândite pentru
fereastra de jos — cu liste, filtre și butoane proprii, prea multe ca să le
rescriem ca pagini separate fără riscul unei regresii pe undeva. În loc să
le rescriem, `deschidePaginaPanou()` (13-meniu.js) MUTĂ chiar nodul
`#panou` în corpul sertarului: `panouX()` scrie mai departe în
`rezumat`/`detalii`, neschimbat — doar haina din jur se schimbă, din CSS,
cu clasa `.in-pagina`, ca să arate ca o pagină, nu ca o fereastră
plutitoare peste hartă. Regula e pusă la capătul fișierului ca să câștige
sigur în cascadă, inclusiv față de varianta de ecran mare. */
.panou.in-pagina{position:static;transform:none;width:auto;max-width:none;
margin:0;left:auto;right:auto;bottom:auto;max-height:none;overflow:visible;
background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
/* Antetul rămâne — rezumatul spune despre ce pagină e vorba — dar mânerul de
tras și butonul de închidere n-au ce căuta: pagina se închide din „Înapoi",
sus, ca oricare altă pagină a sertarului. */
.panou.in-pagina .cap{position:static;background:transparent;box-shadow:none;
margin:0 0 10px;padding:0 0 10px;border-radius:0;border-bottom:1px solid var(--linie)}
.panou.in-pagina .maner,
.panou.in-pagina .cap-butoane{display:none}
/* ---------- codurile PRO ----------
Trei pagini (20-vouchere.js) împart aceleași cărți: codul sus cu starea
lui la dreapta, faptele dedesubt, nota la urmă. */
.vch-form{margin-top:4px}
/* Două câmpuri pe rând cât încape; sub 340 px se rup singure, ca „Expiră la"
să nu ajungă un câmp de dată de trei centimetri. */
.vch-doua{display:flex;gap:10px;flex-wrap:wrap}
.vch-doua .camp-profil{flex:1 1 130px;min-width:130px}
.vch-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.vch-rand{border:1px solid var(--linie);border-radius:12px;padding:10px 12px;
background:var(--surface)}
.vch-sus{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Monospațiat, cu literele răsfirate: codul se citește cu voce tare pe malul
apei. Alfabetul lui n-are 0/O și 1/I/L tocmai din motivul ăsta — fontul
trebuie să continue treaba, nu s-o strice. */
.vch-cod{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.vch-stare{font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
/* „Consumat" e verde iar „expirat" e roșu: unul e un cod care și-a făcut
treaba, celălalt e un cod pierdut. Culoarea trebuie să spună care e care
fără să citești cuvântul. */
.vch-stare.activa{background:#e8f1fa;color:#1b4b7a;border:1px solid #cfe1f4}
.vch-stare.buna{background:#e7f4ed;color:#186b4b;border:1px solid #c3e4d2}
.vch-stare.rea{background:#fdeeeb;color:#a13122;border:1px solid #f2ccc4}
.vch-fapt{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.vch-de-la{font-size:12px;color:var(--ink-3);margin-top:2px}
.vch-nota{font-size:12.5px;color:var(--ink-2);margin-top:4px;font-style:italic}
.vch-nefolosit{font-size:12px;color:var(--ink-3);margin-top:6px}
.vch-folosit{list-style:none;margin:7px 0 0;padding:7px 0 0;
border-top:1px solid var(--linie);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
/* `.buton` e lat cât rândul, cu 12 px sus și jos — potrivit pentru „Salvează",
prea mult pentru „Oprește codul" în colțul unei cărți. `.mic` îl strânge la
mărimea unei pastile; e definit aici, unde se și folosește. */
.buton.mic{width:auto;font-size:13.5px;padding:7px 14px;margin-top:8px}
.vch-rezumat{margin-top:0}
/* Codurile proaspete: singurul loc din aplicație unde apare codul întreg, și
singura dată. Mari, unul sub altul, ușor de copiat de pe ecran cu mâna. */
.vch-proaspete{margin-bottom:12px}
.vch-coduri{display:flex;flex-direction:column;gap:6px;margin:9px 0 10px}
.vch-coduri code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:17px;font-weight:700;letter-spacing:.08em;color:var(--ink);
background:var(--surface);border:1px solid var(--linie);border-radius:9px;
padding:8px 11px;text-align:center;user-select:all}
.vch-proba .buton{margin-top:10px;width:100%}
/* ---------- pagina de reguli (21-regulament.js) ---------- */
.reg-lista{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.reg-rand{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;
border-bottom:1px solid var(--linie)}
.reg-rand:last-child{border-bottom:0}
.reg-semn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--albastru-pal);color:var(--albastru-tare)}
.reg-semn svg{width:19px;height:19px}
.reg-txt{min-width:0;display:flex;flex-direction:column;gap:3px;
font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.reg-txt b{font-size:14.5px;color:var(--ink)}
/* Cele trei viteze, una sub alta: pe un rând s-ar strânge la trei litere
fiecare exact pe ecranul unde se citesc. */
.reg-viteze{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.reg-v{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.reg-v b{flex:none;min-width:62px;color:var(--albastru-tare);font-size:13px}
/* ---------- cardul compact al unui eveniment (18-ghid.js) ----------
După „Events List Compact". Cardul de dinainte avea ~230 px; ăsta ~150.
Compactarea vine din așezare, nu din text tăiat. */
.tura-poza-col{appearance:none;border:0;padding:0;flex:none;width:112px;position:relative;
display:block;cursor:pointer;background:var(--cream);overflow:hidden}
.tura-poza-col .tura-poza{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tura-poza-col .tura-poza.gol{display:grid;place-items:center;color:var(--ink-3)}
.tura-peste{position:absolute;top:5px;left:5px;right:5px;display:flex;flex-direction:column;
align-items:flex-start;gap:3px;pointer-events:none}
.ev-pastila{font-size:9.5px;font-weight:700;line-height:1.35;padding:3px 7px;border-radius:5px;
white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(19,32,51,.18)}
.ev-pastila.strange{background:#fdf4e3;color:#8a5a08}
.ev-pastila.confirmat,.ev-pastila.bun{background:#e7f4ed;color:#186b4b}
.ev-pastila.plin,.ev-pastila.trecut{background:#fdeeeb;color:#a13122}
.ev-pastila.self{background:var(--albastru-pal);color:#1b4b7a}
.ev-pastila.ghid{background:rgba(255,255,255,.94);color:var(--ink-2);font-weight:600}
/* Titlul e un buton, dar trebuie să arate a titlu: fără chenar, fără fundal. */
.tura-titlu-btn{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
font:inherit;font-size:15px;font-weight:700;line-height:1.2;color:var(--ink);text-align:left}
.tura-titlu-btn:active{opacity:.7}
/* Descrierea, tăiată la două rânduri: cine vrea tot deschide detaliul. */
.tura-desc{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-2);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-rand{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600}
.ev-data{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
.ev-data svg{flex:none;color:var(--albastru-tare)}
.ev-pret{margin-left:auto;color:var(--albastru-tare);white-space:nowrap}
.ev-locuri{display:flex;align-items:center;gap:7px}
.ev-locuri .sant{flex:1;height:6px;border-radius:4px;background:var(--linie);overflow:hidden}
.ev-locuri .umplut{display:block;height:100%;border-radius:4px;background:var(--albastru-tare)}
.ev-locuri .umplut.plin{background:var(--oprit)}
.ev-lt{font-size:10.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ev-lmin{font-size:10px;color:var(--ink-3);white-space:nowrap}
/* Fâșia traseului: miniatura, km și ore, și un lacăt dacă nu e deschis. */
.ev-traseu{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;
display:flex;align-items:center;gap:7px;padding:4px 8px 4px 4px;border:0;border-radius:8px;
background:var(--cream)}
.ev-traseu.deschis{background:var(--albastru-pal)}
.ev-traseu:active{transform:scale(.99)}
.ev-mini{position:relative;width:38px;height:24px;flex:none;border-radius:6px;overflow:hidden;
background:var(--surface);display:grid;place-items:center}
.ev-mini svg{width:100%;height:100%}
/* Miniatura din listă rămâne LIMPEDE, cu lacăt lângă ea. Cerut pe 23 august:
„harta in miniatura poate fi vizibila. Oricum nu se vede cu ochiul liber,
dar sa apara lacat pe ea." Are dreptate — la 38×24 px forma nu spune nimic
pe care să merite s-o ascunzi, iar o pată încețoșată arată a stricăciune.
Blurul rămâne unde chiar contează: pe harta mare din pagina de detaliu. */
.ev-mini{position:relative}
.ev-mini-lacat{position:absolute;right:1px;bottom:1px;width:13px;height:13px;
border-radius:4px;background:rgba(255,255,255,.92);display:grid;place-items:center;
color:var(--ink-2);box-shadow:0 1px 2px rgba(19,32,51,.2)}
.ev-mini-lacat svg{width:8px;height:8px}
.ev-tmeta{min-width:0;display:flex;flex-direction:column;gap:1px}
.ev-tmeta b{font-size:10.5px;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.ev-tmeta span{font-size:9.5px;line-height:1.25;color:var(--ink-3)}
.ev-tsemn{margin-left:auto;flex:none;color:var(--ink-3)}
.ev-traseu.deschis .ev-tsemn{color:var(--albastru-tare)}
/* ---------- pagina de detaliu (22-eveniment.js) ---------- */
.ev-poza{position:relative;height:170px;border-radius:14px;overflow:hidden;
background:var(--cream);margin-bottom:12px}
.ev-poza img{width:100%;height:100%;object-fit:cover;display:block}
.ev-poza-gol{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-3)}
.ev-peste{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:5px}
.ev-titlu{margin:0 0 6px;font-size:19px;line-height:1.25;color:var(--ink)}
.ev-rand-mare{font-size:13px;margin-bottom:8px}
.ev-desc{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
/* Trei cifre pe un rând. Distanța și timpul se văd MEREU. */
.ev-cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.ev-cifra{background:var(--surface);border:1px solid var(--linie);border-radius:12px;
padding:9px 6px;text-align:center;min-width:0}
.ev-cifra b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.ev-cifra span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-harta{position:relative;border:1px solid var(--linie);border-radius:14px;overflow:hidden;
background:var(--cream);aspect-ratio:16/9}
.ev-harta-desen{position:absolute;inset:0;display:grid;place-items:center;
color:var(--albastru-tare);padding:10px}
.ev-tr{width:100%;height:100%}
.ev-tr-cap{fill:var(--albastru-tare)}
.ev-tr-coada{fill:var(--oprit)}
.ev-harta:not(.deschis) .ev-harta-desen{filter:blur(5px)}
.ev-panza{position:absolute;inset:0;display:grid;place-items:center;
background:rgba(238,243,249,.62);padding:14px}
.ev-panza-nota{display:flex;align-items:center;gap:8px;max-width:280px;text-align:left;
background:var(--surface);border:1px solid var(--linie);border-radius:12px;
padding:9px 12px;font-size:12.5px;line-height:1.4;color:var(--ink-2);
box-shadow:0 2px 10px rgba(19,32,51,.12)}
.ev-panza-nota svg{flex:none;color:var(--ink-3)}
.ev-jos{margin-top:14px;padding-top:12px;border-top:1px solid var(--linie)}
/* ---------- aprobările ghidului (tabul Membri) ----------
După „Guide Approvals". Turele sunt toate pe ecran, desfăcute la atingere;
cei care AȘTEAPTĂ sunt sus în fiecare tură, fiindcă aia e treaba nefăcută. */
.gp-cap{font-size:13.5px;color:var(--ink-2);margin:0 2px 10px}
.gp-cap b{color:var(--ink)}
.gp-lista{display:flex;flex-direction:column;gap:8px}
.gp-tura.trecuta{opacity:.62}
.gp-ev{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;
display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--linie);
border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(19,32,51,.05)}
.gp-ev:active{transform:scale(.995)}
/* Ziua ca număr mare: într-o listă de ture, „19" se găsește mai repede decât
„19 sep" citit printre celelalte. */
.gp-zi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:var(--albastru-pal);color:var(--albastru-tare);font-size:15px;font-weight:800}
.gp-ev-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gp-ev-txt b{font-size:14px;line-height:1.25;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-ev-txt span{font-size:11.5px;color:var(--ink-3)}
.gp-nr{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
background:var(--atentie);color:#fff;font-size:11px;font-weight:800;
display:grid;place-items:center}
.gp-sag{flex:none;color:var(--ink-3)}
.gp-membri{display:flex;flex-direction:column;gap:6px;padding:8px 6px 2px}
.gp-rand{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
background:var(--cream)}
.gp-initiala{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--surface);border:1px solid var(--linie);color:var(--ink-2);
font-size:13px;font-weight:700}
.gp-om{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gp-om b{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-om span{font-size:10.5px;color:var(--ink-3)}
.gp-pastila{flex:none;font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;
white-space:nowrap}
.gp-pastila.asteapta{background:#fdf4e3;color:#8a5a08}
.gp-pastila.aprobat{background:#e7f4ed;color:#186b4b}
.gp-pastila.respins{background:#fdeeeb;color:#a13122}
.gp-ib{appearance:none;flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;
border:1px solid var(--linie);background:var(--surface);color:var(--ink-2);
display:grid;place-items:center;padding:0}
.gp-ib.ok{background:var(--albastru-tare);border-color:var(--albastru-tare);color:#fff}
.gp-ib.no{color:var(--oprit)}
.gp-ib:disabled{opacity:.5}
.gp-ib:active{transform:scale(.94)}
/* Pe ecran îngust, pastila de stare pleacă: butoanele spun același lucru, iar
numele are nevoie de tot spațiul rămas. */
@media (max-width:380px){ .gp-pastila{display:none} }
/* ---------- butoanele peste poza unui eveniment ----------
Cerut pe 24 august, după testare pe telefon: „la o rezolutie mica, butonul
de stergere nu se mai vede". Cinci pictograme pe rândul de jos nu încap pe
360 px, iar ultima ieșea din card. Participanții urcă peste poză, unde e
spațiu gol oricum — stânga-jos în listă, dreapta-jos în detaliu. */
.tura-ic.peste-poza{position:absolute;left:5px;bottom:5px;z-index:2;
background:rgba(255,255,255,.94);border-color:transparent;
box-shadow:0 1px 4px rgba(19,32,51,.24)}
.tura-ic.peste-poza.dreapta{left:auto;right:8px;bottom:8px}
.tura{position:relative}
.ev-poza{position:relative}
/* Caseta care spune de ce nu vezi traseul. Nu mai e o hartă încețoșată: fără
date nu se desenează nimic care să semene cu un traseu. */
.ev-inchis{border:1px dashed var(--linie);border-radius:14px;background:var(--cream);
padding:18px 14px;display:grid;place-items:center}
/* ---------- închirieri (23-inchirieri.js) ---------- */
.insigna-op{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:3px 7px;
border-radius:5px;background:#e7f4ed;color:#186b4b;white-space:nowrap;margin-left:6px}
.inc-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.inc-card{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;
display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--linie);
border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(19,32,51,.05)}
.inc-card:active{transform:scale(.995)}
.inc-semn{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:var(--albastru-pal);color:var(--albastru-tare)}
.inc-semn svg{width:19px;height:19px}
.inc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.inc-txt b{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inc-txt span{font-size:11.5px;color:var(--ink-3)}
.inc-cate{flex:none;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.amb-card{border:1px solid var(--linie);border-radius:12px;padding:10px 12px;
background:var(--surface)}
.amb-sus{display:flex;align-items:baseline;gap:8px}
.amb-sus b{font-size:14px;color:var(--ink)}
.amb-fel{margin-left:auto;font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;
background:var(--cream);color:var(--ink-2);white-space:nowrap}
.amb-jos{font-size:12px;color:var(--ink-3);margin-top:3px}
.amb-nota{font-size:12.5px;color:var(--ink-2);margin-top:4px;font-style:italic}
/* Cele trei prețuri, pe un rând. Doar cel de pe mijloc („1 zi") e scris de
operator; celelalte două sunt calculate, și scrie asta dedesubt. */
.amb-preturi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.amb-preturi span{display:flex;flex-direction:column;align-items:center;gap:1px;
background:var(--cream);border-radius:9px;padding:6px 4px;font-size:10px;color:var(--ink-3)}
.amb-preturi b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.amb-orient{font-size:10px;color:var(--ink-3);margin-top:5px;text-align:center}
.amb-card .buton.mic{margin-top:8px}
.inc-form{border-top:1px solid var(--linie);margin-top:14px;padding-top:12px}
/* ---------- ghizii turelor mele (18-ghid.js) ----------
O carte pe ghid, nu un rând: sub fiecare nume stau turele lui și starea
fiecăreia, iar dedesubt butoanele de contact. Rândul simplu, ca la lista
veche de ghizi, n-ar fi avut unde ține trei lucruri diferite. */
.gh-card{border:1px solid var(--linie);border-radius:12px;padding:11px 12px;
background:var(--surface);margin-bottom:10px}
.gh-cap{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.gh-cap b{font-size:15px;color:var(--ink)}
.gh-poza{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
background:var(--cream)}
/* Turele: numele la stânga, starea la dreapta. Starea folosește aceleași
pastile ca la coduri (`.vch-stare`) — aceeași formă pentru același înțeles
(„merge / așteaptă / nu"), ca omul să n-o învețe de două ori. */
.gh-tura-rand{display:flex;align-items:center;gap:9px;padding:7px 0;
border-top:1px solid var(--linie)}
.gh-tura-rand .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gh-tura-rand .nume{font-size:13.5px;color:var(--ink);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.gh-tura-rand .sub{font-size:11.5px;color:var(--ink-3)}
.gh-card .buton{margin-top:8px}
/* ---------- bulina roșie de notificare (13-meniu.js) ----------
Cerută de Bogdan pe 27 august, pentru cererile de ghid/operator. Poartă un
NUMĂR, nu doar un punct: „ai ceva de făcut" e mai puțin util decât „ai trei
lucruri de făcut", iar locul e același.
Roșu, nu albastru: e singurul semn din meniu care spune „cineva așteaptă un
răspuns de la tine". Restul valorilor din rânduri („pornit", „nepus") sunt
stări, nu sarcini — de-aia stau în `.val`, cenușiu. */
.bulina-nou{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
background:var(--oprit);color:#fff;font-size:11.5px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;
font-variant-numeric:tabular-nums;line-height:1}
/* ---------- cererile de rol (13-meniu.js) ---------- */
.cr-card{border:1px solid var(--linie);border-radius:12px;padding:12px;
background:var(--surface);margin-bottom:10px}
.cr-cap{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.cr-cap b{font-size:15px;color:var(--ink)}
.cr-ce{font-size:13px;color:var(--ink-2);line-height:1.5}
.cr-contact{font-size:12.5px;color:var(--ink-3);margin-top:4px;
overflow-wrap:anywhere}
/* Ce a scris omul, cu litere înclinate: e vocea LUI în ecranul tău, nu textul
aplicației. Fără deosebirea asta, un administrator grăbit citește rugămintea
cuiva ca pe o etichetă de interfață. */
.cr-mesaj{font-size:13.5px;color:var(--ink);font-style:italic;line-height:1.5;
margin-top:8px;padding-left:10px;border-left:2px solid var(--linie)}
.cr-card .camp-profil{margin-top:10px}
.cr-card .categorii{margin-top:8px}
/* ---------- punctul roșu de pe fila „Meniu" și pe filele din Acasă ----------
Bogdan, 28 august: „dacă există o bulină oriunde în meniu, să se vadă și pe
iconița meniului."
Cifra vine din `data-nou`, pusă de `aplicaBulinaMeniului()`. E scrisă în
atribut, nu într-un element în plus, dintr-un motiv practic: butonul filei
își rescrie conținutul (`innerHTML`) la fiecare potrivire de rol, iar un
`` copil ar fi fost șters fără ca nimeni să bage de seamă. Un atribut
supraviețuiește, fiindcă nu e conținut.
`position:relative` pe filă e deja pus mai sus, la `.tab`; îl repetăm aici
ca regula să fie de sine stătătoare dacă `.tab` se mută vreodată. */
.tab.are-nou, .pastila-f.are-nou{position:relative}
.tab.are-nou::after, .pastila-f.are-nou::after{
content:attr(data-nou);
position:absolute;top:2px;right:6px;
min-width:17px;height:17px;padding:0 4px;border-radius:999px;
background:var(--oprit);color:#fff;
font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
font-variant-numeric:tabular-nums;
/* Un contur în culoarea fundalului: pe o filă colorată, bulina fără el se
lipește de marginea butonului și nu se mai citește ca ceva separat. */
box-shadow:0 0 0 2px var(--surface);
pointer-events:none}
.pastila-f.are-nou::after{top:-5px;right:-4px}
/* ---------- Costurile rutării (0.58) ----------
Un ecran de administrator cu paisprezece numere pe profil. Fără ritm
vizual, e o listă din care nu se vede nimic; cu el, se citește pe grupe.
`.mutat` marchează ce s-a schimbat față de fabrică — altfel, după o
săptămână, nu mai știi ce-ai atins. */
.cost-profil{border:1px solid var(--linie);border-radius:12px;padding:12px;margin:12px 0}
.cost-cap{font-weight:600;font-size:15px;margin-bottom:8px}
.cost-km{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:13px}
.cost-km td{padding:3px 0;border-bottom:1px solid var(--linie)}
.cost-km td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cost-rand{padding:8px 0;border-top:1px solid var(--linie)}
.cost-rand label{display:flex;align-items:baseline;gap:8px;font-size:14px}
.cost-rand input{width:110px;font:inherit;padding:6px 10px;margin-top:5px;
border-radius:9px;border:1px solid var(--linie);box-sizing:border-box}
.cost-rand.mutat{border-left:3px solid var(--accent);padding-left:9px}
.cost-fabrica{font-size:12px;color:var(--ink-3);font-weight:400}
.cost-ce{font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
/* ---------- accesări: cifrele și graficul pe zile ----------
Graficul e din `div`-uri, nu SVG: coloanele trebuie să se lățească singure
după cât loc are ecranul (7 zile pe un telefon îngust, 90 pe unul lat), iar
`flex:1` face asta fără să calculeze nimeni nimic în JS. */
.acces-perioade{display:flex;gap:8px;padding:2px 6px 10px}
.acces-p{appearance:none;font:inherit;font-size:13.5px;cursor:pointer;
padding:6px 12px;border-radius:999px;background:transparent;color:var(--ink-2);
border:1px solid var(--linie)}
.acces-p.ales{background:var(--albastru-pal);color:var(--accent);
border-color:var(--accent);font-weight:600}
.acces-cifre{display:flex;gap:8px;padding:0 6px 12px}
.acces-cifre>div{flex:1;background:var(--cream);border-radius:11px;
padding:9px 10px;text-align:center}
.acces-cifre b{display:block;font-size:20px;line-height:1.2;color:var(--ink)}
.acces-cifre span{font-size:11.5px;color:var(--ink-3)}
.grafic-acces{display:flex;align-items:stretch;gap:2px;height:150px;
padding:0 6px 4px;margin-bottom:6px}
.grafic-acces .col{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
/* Pista palidă arată unde SE TERMINĂ ziua, nu doar cât de mare e: fără ea, o
zi cu zero deschideri arată la fel ca o zi lipsă din grafic. */
.grafic-acces .pista{flex:1;display:flex;align-items:flex-end;
background:var(--albastru-pal);border-radius:3px;overflow:hidden}
/* `.umplut` e numele folosit deja pentru umplerea unei pisti (`.tf-bara`,
`.ev-locuri`). `.bara` n-ar merge: e clasa antetului scos din aplicație, iar
un verificator cere ca ea să nu mai existe nicăieri, nici în CSS. */
.grafic-acces .umplut{width:100%;background:var(--albastru-tare);
border-radius:3px 3px 0 0}
.grafic-acces .zi{height:16px;line-height:16px;font-size:9.5px;color:var(--ink-3);
text-align:center;white-space:nowrap;overflow:hidden}
/* Pastila „LOCALNIC" din lista de utilizatori. Aceeași formă ca `.insigna-op`,
altă culoare: două pastile verzi una lângă alta, pe același rând, s-ar citi
ca aceeași stare scrisă de două ori. Verdele rămâne al operatorului,
albastrul aplicației e al localnicului — și nu e verde nici din alt motiv:
verdele din interfața asta înseamnă „se poate trece", nu „e cineva". */
.insigna-localnic{background:var(--albastru-pal);color:var(--accent)}