/* ═══════════════════════════════════════════════════════════
   Portal Județean de Contacte — foaie de stil
   Paletă: cobalt / auriu cald / cărămiziu (accente tricolore)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Jetoane de design ─────────────────────────────────── */
:root {
  --cobalt-50:#eef2ff;  --cobalt-100:#dfe6fd; --cobalt-200:#c3cffb;
  --cobalt-400:#6d85ea; --cobalt-500:#4763dd; --cobalt-600:#2948c4;
  --cobalt-700:#1f37a0;
  --auriu-100:#fdf3d8;  --auriu-400:#f0b93c; --auriu-500:#dd9f1c;
  --caramiziu-100:#fde9ec; --caramiziu-500:#d33a4d; --caramiziu-600:#b82639;
  --verde-500:#15a06a; --verde-100:#dcf5ea;

  --fundal:#f4f6fc;
  --fundal-2:#eaeefb;
  --suprafata:#ffffff;
  --suprafata-2:#fafbff;
  --suprafata-3:#f2f5fd;
  --cerneala:#101a33;
  --cerneala-2:#3d4a6b;
  --estompat:#6c7899;
  --contur:#e3e8f5;
  --contur-tare:#ccd5ec;

  --accent:var(--cobalt-600);
  --accent-slab:var(--cobalt-50);
  --accent-contur:var(--cobalt-200);

  --harta-gol:#e4e9f7;
  --harta-gol-contur:#ffffff;
  --harta-putin:#a9bcf4;
  --harta-mult:#5b79e6;

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --u-mic:0 1px 2px rgba(16,26,51,.05), 0 2px 6px rgba(16,26,51,.05);
  --u-mediu:0 2px 6px rgba(16,26,51,.05), 0 10px 24px -8px rgba(16,26,51,.14);
  --u-mare:0 4px 12px rgba(16,26,51,.07), 0 24px 56px -16px rgba(16,26,51,.24);
  --u-accent:0 10px 26px -10px rgba(41,72,196,.55);

  --tranz:200ms cubic-bezier(.22,.7,.35,1);
  --tranz-lent:380ms cubic-bezier(.22,.7,.35,1);
  --lat-max:1240px;

  --h-bara:69px;                      /* înălțimea barei de sus, pentru elementele lipicioase */
  --jos-sigur:env(safe-area-inset-bottom, 0px);
  --stg-sigur:env(safe-area-inset-left, 0px);
  --drp-sigur:env(safe-area-inset-right, 0px);
}

html[data-tema="dark"] {
  --fundal:#080c1a;
  --fundal-2:#0d1428;
  --suprafata:#111a31;
  --suprafata-2:#16203c;
  --suprafata-3:#1b2747;
  --cerneala:#eaeefb;
  --cerneala-2:#c0caea;
  --estompat:#8b97bd;
  --contur:#233056;
  --contur-tare:#32416e;

  --accent:#7d95f2;
  --accent-slab:#1a2547;
  --accent-contur:#33427a;

  --cobalt-50:#18224a; --cobalt-100:#1d2a58; --cobalt-200:#2b3a74;
  --auriu-100:#3a2f12; --caramiziu-100:#3b1720; --verde-100:#1032268c;

  --harta-gol:#1c2746;
  --harta-gol-contur:#0b1226;
  --harta-putin:#3f57ae;
  --harta-mult:#6c8bf0;

  --u-mic:0 1px 2px rgba(0,0,0,.4);
  --u-mediu:0 2px 8px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.6);
  --u-mare:0 8px 20px rgba(0,0,0,.45), 0 28px 64px -18px rgba(0,0,0,.75);
  --u-accent:0 10px 28px -12px rgba(109,133,234,.6);
  color-scheme: dark;
}

/* ── 2. Bază ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
/* Regulile de layout de mai jos folosesc display:grid/flex, care ar învinge
   stilul implicit al atributului [hidden]; îl reimpunem explicit. */
[hidden] { display:none !important; }
html {
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* „clip" taie la fel ca „hidden", dar nu creează un container de derulare —
     altfel position:sticky s-ar raporta la el și barele lipicioase s-ar rupe. */
  overflow-x:hidden; overflow-x:clip;
}
body {
  margin:0; min-height:100vh; max-width:100%;
  overflow-x:hidden; overflow-x:clip;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px; line-height:1.55; color:var(--cerneala);
  background:var(--fundal);
  -webkit-font-smoothing:antialiased;
  transition:background var(--tranz), color var(--tranz);
}
h1,h2,h3 { font-family:'Sora','Manrope',sans-serif; letter-spacing:-.02em; margin:0; line-height:1.15; }
p { margin:0; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection { background:var(--cobalt-200); color:var(--cerneala); }

/* ── 3. Fundal decorativ ──────────────────────────────────── */
.fundal { position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1100px 560px at 78% -8%, var(--fundal-2), transparent 62%),
    radial-gradient(900px 500px at 12% 6%, var(--fundal-2), transparent 60%),
    var(--fundal);
}
.glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.34; }
html[data-tema="dark"] .glow { opacity:.22; }
.glow-a { width:460px; height:460px; top:-170px; left:-90px; background:var(--cobalt-400); }
.glow-b { width:380px; height:380px; top:-120px; right:8%;  background:var(--auriu-400); opacity:.2; }
.glow-c { width:420px; height:420px; bottom:-200px; right:-100px; background:var(--caramiziu-500); opacity:.14; }

/* ── 4. Bara de sus ───────────────────────────────────────── */
.bara-sus {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:color-mix(in srgb, var(--fundal) 78%, transparent);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid color-mix(in srgb, var(--contur) 70%, transparent);
}
.marca { display:inline-flex; align-items:center; gap:11px; color:var(--cerneala); text-decoration:none; }
.marca:hover { text-decoration:none; }
.marca-emblema {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--cobalt-500), var(--cobalt-700));
  box-shadow:var(--u-accent);
  position:relative; overflow:hidden;
}
.marca-emblema::after {
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--cobalt-400) 33%, var(--auriu-400) 33% 66%, var(--caramiziu-500) 66%);
}
.marca-emblema svg { width:23px; height:23px; stroke:none; fill:#fff; }
.marca-emblema .pin-interior { fill:var(--cobalt-700); }
.marca-text { display:flex; flex-direction:column; line-height:1.12; }
.marca-text strong { font-family:'Sora',sans-serif; font-size:15px; letter-spacing:-.02em; }
.marca-text small { font-size:11.5px; color:var(--estompat); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }

.bara-actiuni { display:flex; gap:8px; }
.btn-pictograma {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--cerneala-2); background:var(--suprafata); border:1px solid var(--contur);
  box-shadow:var(--u-mic); transition:var(--tranz);
}
.btn-pictograma:hover { color:var(--accent); border-color:var(--accent-contur); transform:translateY(-1px); box-shadow:var(--u-mediu); }
.btn-pictograma svg { width:18px; height:18px; }
#btn-tema .ic-luna { display:none; }
html[data-tema="dark"] #btn-tema .ic-soare { display:none; }
html[data-tema="dark"] #btn-tema .ic-luna { display:block; }

/* ── 5. Pagini ────────────────────────────────────────────── */
#continut { max-width:var(--lat-max); margin:0 auto; padding:clamp(20px,3.4vw,40px) clamp(16px,4vw,40px) 72px; }
.pagina { display:none; }
.pagina[data-activa="true"] { display:block; animation:intrare-pagina 420ms cubic-bezier(.22,.7,.35,1) both; }
@keyframes intrare-pagina { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ── 6. Erou ──────────────────────────────────────────────── */
.erou { text-align:center; max-width:660px; margin:clamp(8px,2vw,26px) auto clamp(26px,3.4vw,40px); }
.fanion {
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 7px; border-radius:999px;
  background:var(--suprafata); border:1px solid var(--contur);
  box-shadow:var(--u-mic);
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--cerneala-2);
}
.dungi { width:22px; height:14px; border-radius:4px; overflow:hidden; display:block;
  background:linear-gradient(90deg, var(--cobalt-600) 33.3%, var(--auriu-400) 33.3% 66.6%, var(--caramiziu-500) 66.6%); }
.erou h1 { font-size:clamp(34px,5.4vw,60px); margin:18px 0 14px; font-weight:700; }
.erou h1 em {
  font-style:normal;
  background:linear-gradient(100deg, var(--cobalt-600), var(--cobalt-400) 45%, var(--auriu-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-tema="dark"] .erou h1 em { background:linear-gradient(100deg,#8ea4f8,#b9c8ff 45%,var(--auriu-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.erou-descriere { color:var(--estompat); font-size:clamp(14.5px,1.5vw,17px); max-width:540px; margin:0 auto; }

.statistici { display:inline-flex; align-items:center; gap:clamp(14px,3vw,30px); margin-top:26px;
  padding:12px clamp(16px,3vw,26px); border-radius:var(--r-l);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mediu); }
.stat { display:flex; flex-direction:column; align-items:center; min-width:64px; }
.stat b { font-family:'Sora',sans-serif; font-size:clamp(20px,2.4vw,26px); line-height:1.1; color:var(--cerneala); font-variant-numeric:tabular-nums; }
.stat span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--estompat); font-weight:700; margin-top:3px; }
.stat-separator { width:1px; height:30px; background:var(--contur); }

/* ── 7. Panoul hărții ─────────────────────────────────────── */
.panou-harta { position:relative; }
.cautare-judet { position:relative; max-width:560px; margin:0 auto 20px; z-index:20; }
.camp-cautare {
  display:flex; align-items:center; gap:10px;
  background:var(--suprafata); border:1px solid var(--contur); border-radius:var(--r-m);
  padding:0 12px; height:50px; box-shadow:var(--u-mediu);
  transition:border-color var(--tranz), box-shadow var(--tranz);
}
.camp-cautare:focus-within { border-color:var(--accent); box-shadow:var(--u-mediu), 0 0 0 4px var(--accent-slab); }
.camp-cautare .ic-lupa { width:18px; height:18px; color:var(--estompat); flex:none; }
.camp-cautare input { flex:1; min-width:0; border:0; background:none; outline:none; font-size:15px; }
.camp-cautare input::placeholder { color:var(--estompat); }
.camp-cautare kbd {
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--estompat);
  border:1px solid var(--contur); border-bottom-width:2px; border-radius:6px;
  padding:2px 7px; background:var(--suprafata-3);
}
.camp-cautare-mic { height:44px; box-shadow:var(--u-mic); }
.sterge-filtru { color:var(--estompat); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; transition:var(--tranz); }
.sterge-filtru:hover { background:var(--suprafata-3); color:var(--cerneala); }
.sterge-filtru svg { width:14px; height:14px; }

.sugestii {
  position:absolute; inset:auto 0 auto 0; top:calc(100% + 8px);
  margin:0; padding:6px; list-style:none; max-height:330px; overflow-y:auto;
  background:var(--suprafata); border:1px solid var(--contur); border-radius:var(--r-m);
  box-shadow:var(--u-mare); z-index:30;
  animation:cadere 160ms cubic-bezier(.22,.7,.35,1) both;
}
@keyframes cadere { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.sugestii li {
  display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:var(--r-s);
  cursor:pointer; transition:background 120ms;
}
.sugestii li[aria-selected="true"], .sugestii li:hover { background:var(--accent-slab); }
.sug-cod {
  flex:none; width:34px; height:28px; border-radius:7px; display:grid; place-items:center;
  background:var(--suprafata-3); border:1px solid var(--contur);
  font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--cerneala-2);
}
.sugestii li[aria-selected="true"] .sug-cod { background:var(--accent); border-color:var(--accent); color:#fff; }
.sug-nume { font-weight:600; }
.sug-meta { margin-left:auto; font-size:12px; color:var(--estompat); white-space:nowrap; }
.sug-gol { padding:16px; text-align:center; color:var(--estompat); font-size:13.5px; }

.rama-harta {
  position:relative; border-radius:var(--r-xl);
  background:linear-gradient(170deg, var(--suprafata-2), var(--suprafata));
  border:1px solid var(--contur); box-shadow:var(--u-mare);
  padding:clamp(10px,2vw,22px); overflow:hidden;
}
.rama-harta::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cobalt-600) 5%, transparent), transparent 22%),
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--cobalt-400) 7%, transparent), transparent 70%);
}
.rama-harta::after {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--cobalt-600) 33.3%, var(--auriu-400) 33.3% 66.6%, var(--caramiziu-500) 66.6%);
  opacity:.85;
}
.harta-invelis { position:relative; }
#harta { display:block; width:100%; height:auto; overflow:visible; }

.judet { cursor:pointer; transition:fill 180ms ease, filter 180ms ease; }
.judet .forma {
  fill:var(--harta-gol); stroke:var(--harta-gol-contur); stroke-width:1.1;
  vector-effect:non-scaling-stroke;   /* graniţele rămân subţiri şi la mărire */
  stroke-linejoin:round; transition:fill 200ms ease, stroke 200ms ease, transform 220ms cubic-bezier(.22,.7,.35,1);
}
.judet[data-densitate="putin"] .forma { fill:var(--harta-putin); }
.judet[data-densitate="mult"]  .forma { fill:var(--harta-mult); }
.judet .cod-judet {
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; letter-spacing:.03em;
  fill:var(--cerneala-2); text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; opacity:.68; transition:fill 200ms, opacity 200ms;
  /* contur subtil pe culoarea hărții, ca sigla să rămână lizibilă pe orice umplere */
  stroke:var(--harta-gol-contur); stroke-width:2.6; paint-order:stroke fill;
}
.judet[data-densitate="mult"] .cod-judet,
.judet[data-densitate="putin"] .cod-judet { fill:#0b153a; opacity:.85; }
html[data-tema="dark"] .judet[data-densitate="mult"] .cod-judet,
html[data-tema="dark"] .judet[data-densitate="putin"] .cod-judet { fill:#eaf0ff; }

.judet:hover .forma, .judet.evidentiat .forma {
  fill:var(--cobalt-600); stroke:#fff; stroke-width:1.6;
  filter:drop-shadow(0 6px 14px rgba(41,72,196,.4));
}
html[data-tema="dark"] .judet:hover .forma,
html[data-tema="dark"] .judet.evidentiat .forma { fill:#7d95f2; stroke:#0b1226; }
.judet:hover .cod-judet, .judet.evidentiat .cod-judet { fill:#fff; opacity:1; stroke-width:0; }
.judet[data-densitate="mult"] .cod-judet { stroke-width:0; }
html[data-tema="dark"] .judet:hover .cod-judet,
html[data-tema="dark"] .judet.evidentiat .cod-judet { fill:#0b1226; }
.judet:active .forma { fill:var(--cobalt-700); }
.judet:focus { outline:none; }
.judet:focus-visible .forma { stroke:var(--auriu-400); stroke-width:2.6; }

.pastila-contor {
  fill:var(--caramiziu-500); stroke:#fff; stroke-width:1.6;
  transition:transform 200ms cubic-bezier(.22,.7,.35,1);
}
html[data-tema="dark"] .pastila-contor { stroke:#0b1226; }
.text-contor { fill:#fff; stroke:none; font-size:9.5px; font-weight:800;
  text-anchor:middle; dominant-baseline:middle; font-family:'Manrope',sans-serif; pointer-events:none; }

.indiciu-harta {
  position:absolute; right:6px; bottom:2px; font-size:12px; color:var(--estompat);
  display:flex; align-items:center; gap:7px; font-weight:600; pointer-events:none;
}
.indiciu-harta::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--verde-500);
  box-shadow:0 0 0 0 rgba(21,160,106,.6); animation:puls 2.2s infinite; }
@keyframes puls { 0%{box-shadow:0 0 0 0 rgba(21,160,106,.5);} 70%{box-shadow:0 0 0 9px rgba(21,160,106,0);} 100%{box-shadow:0 0 0 0 rgba(21,160,106,0);} }

/* ── 7b. Mărire / deplasare hartă ──────────────────────────── */
.harta-invelis { touch-action:pan-y; }
.harta-invelis.blocat { touch-action:none; }
/* La mărire conținutul depășește viewBox-ul, așa că îl tăiem; la scara 1
   lăsăm umbra de la hover să iasă în afara conturului. */
.harta-invelis.blocat #harta { overflow:hidden; }
#strat-harta { transition:transform 260ms cubic-bezier(.22,.7,.35,1); }
#strat-harta.trage { transition:none; }

.unelte-harta {
  position:absolute; right:8px; top:8px; z-index:22;
  display:flex; flex-direction:column; gap:6px;
}
.unelte-harta button {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--suprafata); color:var(--cerneala-2);
  border:1px solid var(--contur); box-shadow:var(--u-mic);
  transition:var(--tranz);
}
.unelte-harta button svg { width:17px; height:17px; }
.unelte-harta button:hover { color:var(--accent); border-color:var(--accent-contur); }
.unelte-harta button:active { transform:scale(.92); background:var(--accent-slab); }
.unelte-harta button:disabled { opacity:.38; cursor:default; transform:none; }

/* ── 6b. Selector nativ de județ (fallback pe telefoane) ───── */
.selector-nativ { display:none; margin-top:10px; }
.selector-nativ label {
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--estompat); margin-bottom:6px; padding-left:2px;
}
.invelis-select { position:relative; }
.invelis-select select {
  width:100%; height:50px; padding:0 42px 0 14px;
  border-radius:var(--r-m); border:1px solid var(--contur);
  background:var(--suprafata); color:var(--cerneala);
  font-size:16px; font-weight:600; box-shadow:var(--u-mic);
  appearance:none; -webkit-appearance:none; outline:none;
}
.invelis-select select:focus { border-color:var(--accent); box-shadow:var(--u-mic), 0 0 0 4px var(--accent-slab); }
.invelis-select svg {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--estompat); pointer-events:none;
}

/* ── 17b. Insignă de selecție (mobil) ──────────────────────── */
.insigna-selectie {
  position:fixed; z-index:55;
  left:max(12px, var(--stg-sigur)); right:max(12px, var(--drp-sigur));
  bottom:calc(12px + var(--jos-sigur));
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:var(--r-l);
  background:var(--suprafata); border:1px solid var(--contur);
  box-shadow:var(--u-mare);
  animation:insigna-intra 300ms cubic-bezier(.22,.7,.35,1) both;
}
@keyframes insigna-intra { from { opacity:0; transform:translateY(22px) scale(.96); } to { opacity:1; transform:none; } }
.insigna-selectie.iese { animation:insigna-iese 200ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes insigna-iese { to { opacity:0; transform:translateY(16px) scale(.97); } }
.insigna-stema {
  flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(145deg, var(--cobalt-500), var(--cobalt-700));
  box-shadow:var(--u-accent);
}
.insigna-text { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.insigna-text b { font-family:'Sora',sans-serif; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.insigna-text small { font-size:12px; color:var(--estompat); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.insigna-selectie .btn { flex:none; }
.insigna-inchide {
  position:absolute; top:-11px; right:-6px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:var(--estompat);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mic);
}
.insigna-inchide svg { width:13px; height:13px; }
.insigna-inchide:active { transform:scale(.9); }
body.cu-insigna .stiva-notificari { bottom:calc(92px + var(--jos-sigur)); }

.tooltip-harta {
  position:absolute; z-index:25; pointer-events:none; left:0; top:0;
  padding:8px 13px; border-radius:var(--r-s);
  background:var(--cerneala); color:#fff; box-shadow:var(--u-mare);
  display:flex; flex-direction:column; gap:1px; white-space:nowrap;
  opacity:0; transform:translate(-50%,-124%) scale(.94);
  transition:opacity 140ms ease, transform 180ms cubic-bezier(.22,.7,.35,1);
}
html[data-tema="dark"] .tooltip-harta { background:var(--suprafata-3); border:1px solid var(--contur-tare); }
.tooltip-harta.vizibil { opacity:1; transform:translate(-50%,-118%) scale(1); }
.tooltip-harta::after {
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--cerneala);
}
html[data-tema="dark"] .tooltip-harta::after { border-top-color:var(--suprafata-3); }
.tt-nume { font-weight:700; font-size:13.5px; font-family:'Sora',sans-serif; }
.tt-detaliu { font-size:11.5px; opacity:.72; }

.legenda { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:center;
  margin-top:16px; font-size:12.5px; color:var(--estompat); font-weight:600; }
.leg { display:inline-flex; align-items:center; gap:7px; }
.pastila { width:13px; height:13px; border-radius:4px; border:1px solid var(--contur-tare); display:block; }
.pastila-gol { background:var(--harta-gol); }
.pastila-putin { background:var(--harta-putin); }
.pastila-mult { background:var(--harta-mult); }
.leg-nota { margin-left:auto; opacity:.7; font-weight:500; font-size:11.5px; }

/* ── 8. Antet județ ───────────────────────────────────────── */
.antet-judet { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.titlu-judet { display:flex; align-items:center; gap:14px; min-width:0; }
.stema-judet {
  width:54px; height:54px; border-radius:15px; flex:none; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:17px; letter-spacing:.02em; color:#fff;
  background:linear-gradient(145deg, var(--cobalt-500), var(--cobalt-700));
  box-shadow:var(--u-accent); position:relative; overflow:hidden;
}
.stema-judet::after { content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--cobalt-400) 33.3%, var(--auriu-400) 33.3% 66.6%, var(--caramiziu-500) 66.6%); }
.titlu-judet h2 { font-size:clamp(22px,3vw,31px); }
.sub-judet { color:var(--estompat); font-size:13.5px; font-weight:600; margin-top:2px; }
.punct { opacity:.5; margin:0 6px; }

.insigna-numar {
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px;
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mic);
  font-size:13.5px; color:var(--cerneala-2); font-weight:600;
}
.insigna-numar svg { width:17px; height:17px; color:var(--accent); }
.insigna-numar b { font-family:'Sora',sans-serif; font-size:16px; color:var(--cerneala); font-variant-numeric:tabular-nums; }

/* ── 9. Butoane ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--r-m);
  font-size:14px; font-weight:700; letter-spacing:-.005em; white-space:nowrap;
  border:1px solid transparent; transition:var(--tranz);
}
.btn svg { width:17px; height:17px; flex:none; }
.btn-mic { height:38px; padding:0 14px; font-size:13.5px; border-radius:var(--r-s); }
.btn-mic svg { width:15px; height:15px; }

.btn-principal { background:linear-gradient(145deg, var(--cobalt-500), var(--cobalt-600)); color:#fff; box-shadow:var(--u-accent); }
.btn-principal:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(41,72,196,.62); filter:saturate(1.08); }
.btn-principal:active { transform:translateY(0); }

.btn-secundar { background:var(--suprafata); color:var(--cerneala); border-color:var(--contur); box-shadow:var(--u-mic); }
.btn-secundar:hover { border-color:var(--accent-contur); color:var(--accent); transform:translateY(-1px); box-shadow:var(--u-mediu); }

.btn-fantoma { background:transparent; color:var(--estompat); }
.btn-fantoma:hover { background:var(--suprafata-3); color:var(--cerneala); }

.btn-pericol { background:var(--caramiziu-500); color:#fff; box-shadow:0 10px 24px -12px rgba(211,58,77,.7); }
.btn-pericol:hover { background:var(--caramiziu-600); transform:translateY(-1px); }
.btn-pericol-slab { background:var(--caramiziu-100); color:var(--caramiziu-500); border-color:transparent; }
.btn-pericol-slab:hover { background:var(--caramiziu-500); color:#fff; }
html[data-tema="dark"] .btn-pericol-slab { color:#ff8f9e; }

.btn-inapoi { background:var(--suprafata); border-color:var(--contur); color:var(--cerneala); box-shadow:var(--u-mic); }
.btn-inapoi:hover { border-color:var(--accent-contur); color:var(--accent); box-shadow:var(--u-mediu); }
.btn-inapoi:hover svg { transform:translateX(-3px); }
.btn-inapoi svg { transition:transform var(--tranz); }

/* ── 10. File (tab-uri) ───────────────────────────────────── */
.file {
  position:relative; display:inline-flex; gap:4px; padding:5px;
  background:var(--suprafata); border:1px solid var(--contur);
  border-radius:var(--r-m); box-shadow:var(--u-mic); margin-bottom:22px;
}
.fila {
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-s);
  font-size:14px; font-weight:700; color:var(--estompat); transition:color var(--tranz);
}
.fila svg { width:16px; height:16px; }
.fila:hover { color:var(--cerneala); }
.fila[aria-selected="true"] { color:#fff; }
.fila-indicator {
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px; width:0;
  border-radius:var(--r-s); background:linear-gradient(145deg, var(--cobalt-500), var(--cobalt-600));
  box-shadow:var(--u-accent);
  transition:transform 320ms cubic-bezier(.5,.05,.2,1), width 320ms cubic-bezier(.5,.05,.2,1);
}
.tab-continut { animation:intrare-tab 300ms cubic-bezier(.22,.7,.35,1) both; }
@keyframes intrare-tab { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── 11. Unelte listă ─────────────────────────────────────── */
.unelte-lista { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.unelte-lista .camp-cautare { flex:1; min-width:240px; }
.unelte-drept { display:flex; gap:10px; align-items:center; }
.comutator-vizualizare {
  display:flex; gap:2px; padding:3px; border-radius:var(--r-s);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mic);
}
.comutator-vizualizare button {
  width:34px; height:30px; border-radius:7px; display:grid; place-items:center;
  color:var(--estompat); transition:var(--tranz);
}
.comutator-vizualizare button svg { width:16px; height:16px; }
.comutator-vizualizare button:hover { color:var(--cerneala); }
.comutator-vizualizare button.activ { background:var(--accent-slab); color:var(--accent); }

/* ── 12. Carduri persoane ─────────────────────────────────── */
.grila-persoane { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(285px,1fr)); }
.card-persoana {
  position:relative; display:flex; flex-direction:column; gap:13px;
  padding:17px; border-radius:var(--r-l);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mic);
  transition:transform var(--tranz), box-shadow var(--tranz), border-color var(--tranz);
  animation:intrare-card 380ms cubic-bezier(.22,.7,.35,1) both;
  animation-delay:var(--intarziere, 0ms);
}
@keyframes intrare-card { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
.card-persoana:hover { transform:translateY(-3px); box-shadow:var(--u-mare); border-color:var(--accent-contur); }
.card-persoana.iese { animation:iesire-card 280ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes iesire-card { to { opacity:0; transform:scale(.93) translateY(-6px); } }

.card-sus { display:flex; align-items:center; gap:13px; min-width:0; cursor:pointer; }
.avatar {
  width:52px; height:52px; border-radius:16px; flex:none; overflow:hidden;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px;
  font-family:'Sora',sans-serif; letter-spacing:.01em;
  box-shadow:0 6px 14px -6px rgba(16,26,51,.45); position:relative;
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,.22); }
.card-identitate { min-width:0; flex:1; }
.card-nume {
  font-family:'Sora',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--tranz);
}
.card-sus:hover .card-nume { color:var(--accent); }
.card-email { font-size:12.5px; color:var(--estompat); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.linie-telefon {
  display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--r-s);
  background:var(--suprafata-3); border:1px solid transparent; transition:var(--tranz);
}
.linie-telefon:hover { border-color:var(--contur-tare); }
.linie-telefon .ic-tel { width:15px; height:15px; color:var(--estompat); flex:none; }
.numar {
  flex:1; font-size:14px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  white-space:nowrap; transition:filter 260ms ease, color 260ms ease; user-select:none;
}
.numar.ascuns { filter:blur(4.5px); color:var(--estompat); cursor:pointer; }
.numar.dezvaluit { user-select:text; }
.ochi {
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  color:var(--estompat); transition:var(--tranz);
}
.ochi:hover { background:var(--accent-slab); color:var(--accent); }
.ochi svg { width:16px; height:16px; }
.ochi .ic-inchis { display:none; }
.linie-telefon.deschis .ochi .ic-inchis { display:block; }
.linie-telefon.deschis .ochi .ic-deschis { display:none; }

.card-jos { display:flex; gap:8px; }
.card-jos .btn { flex:1; height:36px; font-size:13px; border-radius:var(--r-s); }
.btn-editeaza { background:var(--suprafata-3); color:var(--cerneala-2); }
.btn-editeaza:hover { background:var(--accent-slab); color:var(--accent); }
.btn-sterge { background:var(--suprafata-3); color:var(--estompat); }
.btn-sterge:hover { background:var(--caramiziu-100); color:var(--caramiziu-500); }
html[data-tema="dark"] .btn-sterge:hover { color:#ff8f9e; }

/* ── 13. Vizualizare tabel ────────────────────────────────── */
.grila-persoane.tabel { display:block; overflow-x:auto; border-radius:var(--r-l);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mic); }
.tabel-persoane { width:100%; border-collapse:collapse; min-width:720px; }
.tabel-persoane th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--estompat); font-weight:800; padding:13px 16px;
  border-bottom:1px solid var(--contur); background:var(--suprafata-2); white-space:nowrap;
}
.tabel-persoane td { padding:11px 16px; border-bottom:1px solid var(--contur); vertical-align:middle; }
.tabel-persoane tr:last-child td { border-bottom:0; }
.tabel-persoane tbody tr { transition:background var(--tranz); }
.tabel-persoane tbody tr:hover { background:var(--suprafata-2); }
.tabel-persoane .avatar { width:38px; height:38px; border-radius:11px; font-size:13px; }
.celula-nume { display:flex; align-items:center; gap:11px; cursor:pointer; }
.celula-nume .card-nume { font-size:14.5px; }
.tabel-persoane .linie-telefon { background:none; padding:0; }
.tabel-actiuni { display:flex; gap:6px; justify-content:flex-end; }
.tabel-actiuni button {
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  color:var(--estompat); background:var(--suprafata-3); transition:var(--tranz);
}
.tabel-actiuni button svg { width:15px; height:15px; }
.tabel-actiuni .act-edit:hover { background:var(--accent-slab); color:var(--accent); }
.tabel-actiuni .act-sterge:hover { background:var(--caramiziu-100); color:var(--caramiziu-500); }

/* ── 14. Stare goală ──────────────────────────────────────── */
.stare-goala {
  text-align:center; padding:clamp(36px,6vw,64px) 24px;
  background:var(--suprafata); border:1px dashed var(--contur-tare); border-radius:var(--r-xl);
  animation:intrare-tab 300ms cubic-bezier(.22,.7,.35,1) both;
}
.stare-goala-ilustratie svg { width:112px; height:112px; }
.cerc-fundal { fill:var(--accent-slab); stroke:none; }
.silueta { stroke:var(--accent); stroke-width:3.4; opacity:.55; }
.scanteie { stroke:var(--auriu-500); stroke-width:3; }
.stare-goala h3 { font-size:19px; margin:14px 0 7px; }
.stare-goala p { color:var(--estompat); max-width:400px; margin:0 auto 22px; font-size:14px; }

/* ── 15. Formular ─────────────────────────────────────────── */
.formular {
  background:var(--suprafata); border:1px solid var(--contur); border-radius:var(--r-xl);
  box-shadow:var(--u-mediu); overflow:hidden;
}
.formular-antet { padding:22px clamp(18px,3vw,30px); border-bottom:1px solid var(--contur); background:var(--suprafata-2); }
.formular-antet h3 { font-size:19px; }
.formular-antet p { color:var(--estompat); font-size:13.5px; margin-top:4px; }
.obligatoriu { color:var(--caramiziu-500); font-weight:800; }
html[data-tema="dark"] .obligatoriu { color:#ff8f9e; }
.optional { color:var(--estompat); font-weight:500; font-size:12.5px; }

.formular-corp { display:grid; grid-template-columns:210px 1fr; gap:clamp(20px,3vw,34px); padding:clamp(20px,3vw,30px); }
.coloana-poza { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.previzualizare-poza {
  width:140px; height:140px; border-radius:26px; overflow:hidden;
  display:grid; place-items:center; position:relative;
  background:var(--suprafata-3); border:2px dashed var(--contur-tare);
  color:var(--estompat); font-family:'Sora',sans-serif; font-weight:700; font-size:36px;
  transition:var(--tranz);
}
.previzualizare-poza.are-imagine { border-style:solid; border-color:transparent; box-shadow:var(--u-mediu); }
.previzualizare-poza img { width:100%; height:100%; object-fit:cover; }
.previzualizare-poza .semn-gol svg { width:34px; height:34px; stroke-width:1.5; opacity:.6; }
.actiuni-poza { display:flex; flex-direction:column; gap:8px; width:100%; }
.actiuni-poza .btn { width:100%; }
.ajutor-poza { font-size:11.5px; color:var(--estompat); line-height:1.45; }

.coloana-campuri { display:flex; flex-direction:column; gap:16px; }
.rand-campuri { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.camp {
  display:flex; flex-direction:column; gap:6px; min-width:0;
  /* bara lipicioasă nu trebuie să acopere câmpul adus în vizor de tastatură */
  scroll-margin-top:calc(var(--h-bara) + 120px);
  scroll-margin-bottom:24px;
}
.camp label { font-size:12.5px; font-weight:700; color:var(--cerneala-2); letter-spacing:.01em; }
.camp input, .camp textarea {
  width:100%; padding:11px 13px; border-radius:var(--r-s);
  border:1px solid var(--contur); background:var(--suprafata-2); color:var(--cerneala);
  outline:none; transition:var(--tranz); font-size:14.5px; resize:vertical;
}
.camp input::placeholder, .camp textarea::placeholder { color:var(--estompat); opacity:.8; }
.camp input:hover, .camp textarea:hover { border-color:var(--contur-tare); }
.camp input:focus, .camp textarea:focus { border-color:var(--accent); background:var(--suprafata); box-shadow:0 0 0 4px var(--accent-slab); }
.camp.invalid input, .camp.invalid textarea { border-color:var(--caramiziu-500); background:var(--caramiziu-100); }
.camp.invalid input:focus { box-shadow:0 0 0 4px rgba(211,58,77,.16); }
.eroare { font-size:12px; color:var(--caramiziu-500); font-weight:600; min-height:0; display:none; }
html[data-tema="dark"] .eroare { color:#ff8f9e; }
.camp.invalid .eroare { display:block; animation:tremur 340ms cubic-bezier(.36,.07,.19,.97); }
@keyframes tremur { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-3px);} 40%,60%{transform:translateX(3px);} }

.formular-subsol {
  display:flex; justify-content:flex-end; gap:10px;
  padding:18px clamp(18px,3vw,30px); border-top:1px solid var(--contur); background:var(--suprafata-2);
}

/* ── 16. Sertar detalii ───────────────────────────────────── */
.voal {
  position:fixed; inset:0; z-index:50; background:rgba(10,16,34,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:aparitie 220ms ease both;
}
@keyframes aparitie { from { opacity:0; } to { opacity:1; } }
.voal.iese { animation:disparitie 200ms ease both; }
@keyframes disparitie { to { opacity:0; } }

.sertar {
  position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(428px, 100%);
  display:flex; flex-direction:column;
  background:var(--suprafata); border-left:1px solid var(--contur);
  box-shadow:var(--u-mare);
  animation:sertar-intra 340ms cubic-bezier(.22,.7,.35,1) both;
}
@keyframes sertar-intra { from { transform:translateX(100%); } to { transform:none; } }
.sertar.iese { animation:sertar-iese 260ms cubic-bezier(.5,0,.75,0) both; }
@keyframes sertar-iese { to { transform:translateX(100%); } }

.sertar-maner { display:none; }

.sertar-inchide {
  position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); transition:var(--tranz);
}
.sertar-inchide:hover { background:rgba(255,255,255,.3); transform:rotate(90deg); }
.sertar-inchide svg { width:16px; height:16px; }

.sertar-erou {
  padding:30px 26px 24px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--cobalt-600), var(--cobalt-700) 70%, #16246b);
}
.sertar-erou::after { content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--cobalt-400) 33.3%, var(--auriu-400) 33.3% 66.6%, var(--caramiziu-500) 66.6%); }
.sertar-avatar {
  width:88px; height:88px; margin:0 auto 14px; border-radius:26px; overflow:hidden;
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:29px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6); border:3px solid rgba(255,255,255,.22);
}
.sertar-avatar img { width:100%; height:100%; object-fit:cover; }
.sertar-erou h3 { font-size:22px; }
.sertar-rol { font-size:13px; opacity:.8; margin-top:4px; font-weight:600; }

.sertar-corp { flex:1; overflow-y:auto; padding:8px 26px 20px; }
.detaliu { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--contur); }
.detaliu:last-child { border-bottom:0; }
.detaliu-eticheta { flex:none; width:112px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; font-weight:800; color:var(--estompat); }
.detaliu-valoare { flex:1; min-width:0; font-size:14.5px; font-weight:600; word-break:break-word; }
.detaliu-actiune { display:flex; align-items:center; gap:8px; }
.detaliu-note { align-items:flex-start; }
.detaliu-note .detaliu-valoare { font-weight:500; color:var(--cerneala-2); font-size:13.5px; line-height:1.55; }
.mini-btn { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  color:var(--estompat); background:var(--suprafata-3); transition:var(--tranz); }
.mini-btn:hover { background:var(--accent-slab); color:var(--accent); }
.mini-btn svg { width:14px; height:14px; }
.sertar-subsol { display:flex; gap:10px; padding:16px 26px; border-top:1px solid var(--contur); background:var(--suprafata-2); }
.sertar-subsol .btn { flex:1; }

/* ── 17. Modale ───────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px;
  background:rgba(10,16,34,.5); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:aparitie 200ms ease both; }
.modal.iese { animation:disparitie 180ms ease both; }
.modal-cutie {
  width:min(430px,100%); padding:30px 28px 24px; text-align:center;
  background:var(--suprafata); border:1px solid var(--contur); border-radius:var(--r-xl);
  box-shadow:var(--u-mare);
  animation:modal-intra 320ms cubic-bezier(.22,.7,.35,1) both;
}
.modal-cutie-lat { width:min(520px,100%); text-align:left; }
@keyframes modal-intra { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
.modal-pictograma {
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  margin:0 auto 16px; background:var(--accent-slab); color:var(--accent);
}
.modal-cutie-lat .modal-pictograma { margin:0 0 16px; }
.modal-pictograma svg { width:26px; height:26px; }
.modal-pictograma-pericol { background:var(--caramiziu-100); color:var(--caramiziu-500); }
html[data-tema="dark"] .modal-pictograma-pericol { color:#ff8f9e; }
.modal-cutie h3 { font-size:19px; margin-bottom:8px; }
.modal-cutie p { color:var(--estompat); font-size:14px; }
.modal-cutie code { background:var(--suprafata-3); padding:1px 6px; border-radius:5px; font-size:12.5px; }
.modal-actiuni { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
.modal-cutie:not(.modal-cutie-lat) .modal-actiuni .btn { flex:1; }

.date-rezumat { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.chip-judet {
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--accent-slab); border:1px solid var(--accent-contur);
  font-size:12.5px; font-weight:700; color:var(--accent);
}
.chip-judet b { font-variant-numeric:tabular-nums; }
.date-optiuni { display:grid; gap:10px; margin-top:18px; }
.date-optiuni .btn { width:100%; justify-content:flex-start; }

/* ── 18. Notificări ───────────────────────────────────────── */
.stiva-notificari {
  position:fixed; z-index:90; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; gap:10px; align-items:center;
  pointer-events:none; width:calc(100% - 32px); max-width:420px;
}
.notificare {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:13px 16px; border-radius:var(--r-m);
  background:var(--suprafata); border:1px solid var(--contur); box-shadow:var(--u-mare);
  font-size:14px; font-weight:600; pointer-events:auto;
  animation:notif-intra 360ms cubic-bezier(.22,.7,.35,1) both;
}
@keyframes notif-intra { from { opacity:0; transform:translateY(22px) scale(.94); } to { opacity:1; transform:none; } }
.notificare.iese { animation:notif-iese 260ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes notif-iese { to { opacity:0; transform:translateY(14px) scale(.95); } }
.notif-pictograma { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex:none; }
.notif-pictograma svg { width:16px; height:16px; stroke-width:2.4; }
.notificare[data-tip="succes"] .notif-pictograma { background:var(--verde-100); color:var(--verde-500); }
.notificare[data-tip="info"]   .notif-pictograma { background:var(--accent-slab); color:var(--accent); }
.notificare[data-tip="eroare"] .notif-pictograma { background:var(--caramiziu-100); color:var(--caramiziu-500); }
.notif-text { flex:1; min-width:0; }
.notif-text small { display:block; font-weight:500; color:var(--estompat); font-size:12.5px; }

/* ── 19. Feedback tactil & ținte de atingere ──────────────────
   Pe dispozitivele fără hover, efectele de :hover nu se pot vedea —
   rolul lor îl preiau stările :active, cu o scalare scurtă la apăsare. */
@media (hover: none) {
  .btn:active, .btn-pictograma:active, .mini-btn:active,
  .comutator-vizualizare button:active, .sterge-filtru:active { transform:scale(.95); }
  .card-persoana:active { transform:scale(.988); box-shadow:var(--u-mediu); }
  .card-sus:active .card-nume { color:var(--accent); }
  .fila:active { opacity:.75; }
  .sugestii li:active { background:var(--accent-contur); }
  .linie-telefon:active { border-color:var(--accent-contur); background:var(--accent-slab); }
  .tabel-persoane tbody tr:active { background:var(--suprafata-2); }
  .detaliu-actiune a:active { opacity:.6; }
  /* efectele de hover nu au sens fără mouse */
  .btn-principal:hover, .btn-secundar:hover, .btn-inapoi:hover,
  .card-persoana:hover, .btn-pictograma:hover { transform:none; }
}

/* Minim 44×44 px pentru orice element apăsabil cu degetul. */
@media (pointer: coarse) {
  .btn { min-height:46px; padding:0 20px; }
  .btn-mic { min-height:44px; padding:0 16px; }
  .btn-pictograma { width:44px; height:44px; }
  .ochi { width:44px; height:44px; }
  .mini-btn { width:44px; height:44px; }
  .sterge-filtru { width:40px; height:40px; }
  .sertar-inchide { width:44px; height:44px; }
  .insigna-inchide { width:36px; height:36px; }
  .comutator-vizualizare button { width:46px; height:42px; }
  .unelte-harta button { width:46px; height:46px; }
  .fila { min-height:46px; }
  .camp-cautare { height:52px; }
  .camp-cautare-mic { height:48px; }
  .sugestii li { min-height:52px; padding:11px; }
  .tabel-actiuni button { width:40px; height:40px; }
  .detaliu { padding:15px 0; }
  /* Pe ecrane tactile, marginile județelor primesc o zonă de atingere mai lată,
     ca județele mici să poată fi nimerite cu degetul. */
  .judet .forma { stroke-width:1.4px; }
}

/* ── 20. Responsiv ────────────────────────────────────────── */

/* Tablete în format portret și ferestre înguste */
@media (max-width:900px) {
  /* fără împingerea la dreapta: dacă insigna trece pe rândul următor,
     e mai ordonat să rămână aliniată la titlu */
  .insigna-numar { margin-left:0; }
  .formular-corp { grid-template-columns:1fr; }
  .coloana-poza { flex-direction:row; align-items:center; text-align:left; flex-wrap:wrap; }
  .previzualizare-poza { width:104px; height:104px; border-radius:22px; font-size:28px; }
  .actiuni-poza { width:auto; flex:1; min-width:180px; }
  .ajutor-poza { flex-basis:100%; }
}

/* ── Prag principal pentru telefoane și tablete mici ───────── */
@media (max-width:760px) {
  :root { --h-bara:57px; }

  #continut { padding:14px clamp(14px,4vw,20px) calc(40px + var(--jos-sigur)); }

  /* Bară de sus compactă */
  .bara-sus { padding:9px max(14px, var(--stg-sigur)) 9px max(14px, var(--drp-sigur)); }
  .marca-emblema { width:38px; height:38px; border-radius:11px; }
  .marca-emblema svg { width:21px; height:21px; }
  .marca-text strong { font-size:14px; }
  .marca-text small { font-size:10px; }

  /* Erou */
  .erou { margin-bottom:20px; }
  .erou h1 { font-size:clamp(30px,8.2vw,42px); margin:14px 0 10px; }
  .erou-descriere { font-size:15px; }
  .statistici { width:100%; justify-content:space-between; gap:6px; padding:12px 14px; margin-top:20px; }
  .stat b { font-size:22px; }
  .stat span { font-size:10px; letter-spacing:.05em; }

  /* Căutare + selector nativ */
  .cautare-judet { max-width:none; margin-bottom:16px; }
  .selector-nativ { display:block; }
  /* Pe telefon lista de sugestii devine o foaie de jos, la îndemâna degetului. */
  .sugestii {
    position:fixed; inset:auto 0 0 0; top:auto;
    max-height:min(62vh, 460px); border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:8px 10px calc(12px + var(--jos-sigur));
    box-shadow:0 -12px 40px -8px rgba(10,16,34,.35);
    animation:foaie-intra 260ms cubic-bezier(.22,.7,.35,1) both;
  }
  .sugestii::before {
    content:""; display:block; width:42px; height:4px; border-radius:99px;
    background:var(--contur-tare); margin:2px auto 10px;
  }
  @keyframes foaie-intra { from { transform:translateY(100%); } to { transform:none; } }

  /* Harta */
  .rama-harta { padding:8px; border-radius:var(--r-l); }
  /* Pe telefon uneltele coboară sub hartă: orice colț ales le-ar suprapune
     peste un județ, iar harta e deja mică. */
  .unelte-harta {
    position:static; flex-direction:row; justify-content:center;
    gap:8px; margin-top:8px; padding-top:8px;
    border-top:1px solid color-mix(in srgb, var(--contur) 70%, transparent);
  }
  .unelte-harta button { flex:0 0 auto; }
  .legenda { justify-content:flex-start; gap:12px; font-size:12px; margin-top:12px; }
  .leg-nota { margin-left:0; flex-basis:100%; }
  .judet .cod-judet { font-size:14px; stroke-width:3.4px; }
  .pastila-contor { r:10; }
  .text-contor { font-size:11px; }
  .tooltip-harta { display:none; }          /* pe mobil o înlocuiește insigna de jos */

  /* Antet județ + file: o singură bandă lipicioasă sub bara de sus */
  .zona-lipicioasa {
    position:sticky; top:var(--h-bara); z-index:30;
    margin:-14px calc(-1 * clamp(14px,4vw,20px)) 16px;
    padding:9px clamp(14px,4vw,20px) 10px;
    background:color-mix(in srgb, var(--fundal) 88%, transparent);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border-bottom:1px solid color-mix(in srgb, var(--contur) 75%, transparent);
  }
  .antet-judet {
    display:grid; grid-template-columns:auto auto 1fr auto; align-items:center;
    gap:10px; margin-bottom:9px;
  }
  .btn-inapoi { min-height:44px; padding:0 13px; font-size:13.5px; }
  .doar-lat { display:none; }
  .titlu-judet { gap:10px; min-width:0; }
  .stema-judet { width:40px; height:40px; border-radius:12px; font-size:14px; }
  .titlu-judet h2 { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sub-judet { display:none; }
  .insigna-numar { margin-left:0; padding:0 12px; height:40px; font-size:0; gap:6px; }
  .insigna-numar svg { width:16px; height:16px; }
  .insigna-numar b { font-size:15px; }
  #eticheta-contacte { display:none; }

  /* File pe toată lățimea, ca un control segmentat */
  .file { width:100%; margin-bottom:0; }
  .fila { flex:1; justify-content:center; padding:0 8px; font-size:13.5px; }
  .fila svg { width:15px; height:15px; }

  /* Unelte listă */
  .unelte-lista { gap:10px; margin-bottom:14px; }
  .unelte-lista .camp-cautare { flex:1 1 100%; min-width:0; }
  .unelte-drept { width:100%; }
  .unelte-drept .btn-principal { flex:1; }

  /* Carduri */
  .grila-persoane { gap:11px; }
  .card-persoana { padding:14px; border-radius:var(--r-m); gap:11px; }
  .avatar { width:46px; height:46px; border-radius:14px; font-size:15px; }
  .card-nume { font-size:15px; }
  .card-jos { gap:8px; }
  .card-jos .btn { min-height:44px; font-size:13px; }
  .linie-telefon { padding:6px 6px 6px 11px; }

  /* Formular: 16 px minim, ca iOS să nu mai facă zoom la focus */
  .camp input, .camp textarea, .invelis-select select { font-size:16px; padding:13px 14px; }
  .camp label { font-size:13px; }
  .formular { border-radius:var(--r-l); }
  .formular-subsol { flex-direction:column-reverse; gap:8px; padding-bottom:calc(18px + var(--jos-sigur)); }
  .formular-subsol .btn { width:100%; }

  /* Sertar → foaie care urcă de jos */
  .sertar {
    top:auto; left:0; right:0; bottom:0; width:100%;
    max-height:92vh; max-height:92dvh;
    border-left:0; border-top:1px solid var(--contur);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    animation:foaie-urca 340ms cubic-bezier(.22,.7,.35,1) both;
    touch-action:pan-y;
  }
  @keyframes foaie-urca { from { transform:translateY(100%); } to { transform:none; } }
  .sertar.iese { animation:foaie-coboara 260ms cubic-bezier(.5,0,.75,0) both; }
  @keyframes foaie-coboara { to { transform:translateY(100%); } }
  .sertar.trage { animation:none; transition:none; }
  .sertar-maner {
    display:block; position:absolute; top:0; left:0; right:0; z-index:4;
    padding:9px 0 4px; text-align:center; cursor:grab; touch-action:none;
  }
  .sertar-maner span {
    display:inline-block; width:44px; height:4px; border-radius:99px;
    background:rgba(255,255,255,.45);
  }
  .sertar-erou { padding:34px 22px 20px; border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .sertar-avatar { width:74px; height:74px; border-radius:22px; font-size:25px; margin-bottom:11px; }
  .sertar-erou h3 { font-size:20px; }
  .sertar-inchide { top:10px; right:10px; }
  .sertar-corp { padding:6px 20px 14px; -webkit-overflow-scrolling:touch; }
  .detaliu-eticheta { width:96px; font-size:11px; }
  .sertar-subsol { padding:14px 20px calc(14px + var(--jos-sigur)); }

  /* Modale ancorate jos, ca foi */
  .modal { align-items:flex-end; padding:0; }
  .modal-cutie, .modal-cutie-lat {
    width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:26px 20px calc(20px + var(--jos-sigur));
    animation:foaie-urca 320ms cubic-bezier(.22,.7,.35,1) both;
  }
  .modal-actiuni { flex-direction:column-reverse; }
  .modal-actiuni .btn { width:100%; }
  .date-optiuni .btn { min-height:50px; }

  .stiva-notificari { bottom:calc(14px + var(--jos-sigur)); }
}

/* ── Telefoane ─────────────────────────────────────────────── */
@media (max-width:600px) {
  .grila-persoane { grid-template-columns:1fr; }
  .rand-campuri { grid-template-columns:1fr; }   /* două câmpuri pe rând sunt prea înguste */
  .indiciu-harta { display:none; }          /* s-ar suprapune peste hartă */
  .camp-cautare kbd { display:none; }
  .statistici { border-radius:var(--r-m); }
  .unelte-drept { display:grid; grid-template-columns:auto 1fr; gap:10px; }
  /* tabelul rămâne derulabil pe orizontală, în interiorul propriei rame */
  .grila-persoane.tabel { border-radius:var(--r-m); }
  .tabel-persoane { min-width:660px; }
}

@media (max-width:400px) {
  .erou h1 { font-size:29px; }
  .fila { font-size:12.5px; gap:6px; }
  .insigna-text b { font-size:14px; }
  .insigna-selectie { gap:9px; padding:10px; }
  .insigna-stema { width:40px; height:40px; }
  .card-jos .btn { font-size:12.5px; padding:0 10px; }
}

/* Telefon în format peisaj: bara lipicioasă ar mânca tot ecranul. */
@media (max-height:520px) and (orientation:landscape) {
  .zona-lipicioasa { position:static; margin-bottom:14px; }
  .bara-sus { position:static; }
  .sertar { max-height:100vh; max-height:100dvh; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media print {
  .bara-sus, .fundal, .unelte-lista, .file, .card-jos, .indiciu-harta { display:none !important; }
  body { background:#fff; }
}