/**
 * ghid.css — stilul COMUN al tuturor ghidurilor / manualelor / prezentarilor eRGiss
 *
 *   Un singur fisier pentru toate paginile de documentatie din app.ergiss.ro, ca sa arate ca un
 *   singur produs. Design tokens preluate din www.ergiss.ro/style.css (Inter, albastru #2563eb,
 *   hero navy #0a1628 -> #1a2a4a, carduri albe pe #f8fafc, radius 12, umbre discrete).
 *
 *   CUM SE FOLOSESTE intr-un ghid nou:
 *     <link rel="preconnect" href="https://fonts.googleapis.com">
 *     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
 *     <link rel="stylesheet" href="/ghid.css">
 *   Structura: <header><div class="in"><h1>..</h1><p>subtitlu</p></div></header>
 *              <main> [nav.toc] <section id=".."><h2>..</h2> ... </section> </main>
 *   Blocuri de atentionare: .ok / .tip (verde), .note (chihlimbar), .warn / .bad (rosu),
 *   .inf / .info-box / .box (albastru). Inline: .btn (buton din aplicatie), .k (tasta), .mut (gri mic).
 *   Layout cu bara laterala (manual lung): <body class="sb"> + <aside id="sidebar">.
 *   Clasele vechi din ghidurile existente sunt pastrate ca aliasuri, ca sa nu se rescrie markup-ul.
 *
 * @author  Claude Code
 * @version 1.0
 * @changes
 *   v1.0 2026-09-12 — creat initial (unificarea stilului celor 6 ghiduri + 2 prezentari)
 */

:root{
  --pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#3b82f6; --pri-soft:rgba(37,99,235,.07);
  --hero-a:#0a1628; --hero-b:#1a2a4a;
  --dark:#0f172a; --ink:#334155; --mut:#64748b; --white:#f1f5f9;
  --bg:#f8fafc; --card:#fff; --line:#e2e8f0; --line-s:#eef2f7;
  --ok-f:#f0fdf4; --ok-b:#86efac; --ok-t:#14532d;
  --note-f:#fffbeb; --note-b:#f59e0b; --note-t:#92400e;
  --bad-f:#fef2f2; --bad-b:#fca5a5; --bad-t:#991b1b;
  --inf-f:#eff6ff; --inf-b:#bfdbfe; --inf-t:#1e40af;
  --r:12px; --r-s:8px;
  --sh-s:0 1px 3px rgba(0,0,0,.08); --sh-m:0 4px 12px rgba(0,0,0,.1); --sh-l:0 8px 30px rgba(0,0,0,.12);
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:15.5px;line-height:1.65;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Antet (hero) ─────────────────────────────────────────────── */
header,.top{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;padding:30px 20px 26px;text-align:left}
/* centrarea continutului din hero: `margin:.. auto` intra in FIECARE regula, altfel selectorul
   generic `header>*` (specificitate mica) e batut de regulile pe clasa si titlul fuge la marginea paginii */
header>*,.top>*,header .in{max-width:940px;margin-left:auto;margin-right:auto}
header h1,.top h1{margin:0 auto 6px;max-width:940px;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:#fff}
header p,.top p,.top .s{margin:0 auto;max-width:940px;color:#93b4dd;font-size:14.5px;font-weight:400}
header .logo,.top .logo{font-size:34px;line-height:1;margin:0 auto 4px;max-width:940px}
header .brand,.top .brand{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7aa5d8;margin:0 auto 6px;max-width:940px}
header .tags{margin:14px auto 0;max-width:940px;display:flex;gap:8px;flex-wrap:wrap}
header b,header strong,.top b,.top strong{color:#fff;font-weight:700}
header a,.top a{color:#bfdbfe;text-decoration:underline}
footer,.pgfoot{max-width:940px;margin:0 auto;padding:0 20px 40px;color:var(--mut);font-size:13px;text-align:center}
header .tag{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 12px;font-size:12.5px;color:#dbe7f5}

/* ── Container ────────────────────────────────────────────────── */
main,.pg,.wrap{max-width:940px;margin:0 auto;padding:22px 20px 70px}
.pg{background:transparent}
.body{padding:0}
section,.card,.step,.box,.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin-bottom:16px;box-shadow:var(--sh-s)}

/* ── Titluri ──────────────────────────────────────────────────── */
h1{font-size:26px;font-weight:800;line-height:1.25;margin:0 0 10px;color:var(--dark)}
h2{font-size:20px;font-weight:700;line-height:1.3;margin:0 0 12px;color:var(--dark);letter-spacing:-.01em;
   background:none;padding:0;border:0;border-radius:0}
h2::after{content:"";display:block;width:38px;height:3px;background:var(--pri);border-radius:2px;margin-top:8px}
h3{font-size:16px;font-weight:700;margin:20px 0 8px;color:var(--dark)}
h4{font-size:14.5px;font-weight:600;margin:14px 0 6px;color:var(--ink)}
p{margin:8px 0}
ul,ol{padding-left:22px;margin:8px 0}
li{margin-bottom:6px}
b,strong{font-weight:600;color:var(--dark)}
code,.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--pri-d)}
hr,.sep{border:0;border-top:1px solid var(--line);margin:18px 0;height:0}

/* ── Cuprins ──────────────────────────────────────────────────── */
nav.toc,.toc{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pri);
  border-radius:var(--r);padding:16px 20px;margin:0 0 18px;box-shadow:var(--sh-s)}
nav.toc b,.toc b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);
  margin-bottom:8px;font-weight:700}
nav.toc ol,.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
nav.toc li,.toc li{margin-bottom:4px;break-inside:avoid}
nav.toc a,.toc a{color:var(--ink)}
nav.toc a:hover,.toc a:hover{color:var(--pri)}
nav:not(.toc){background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;
  margin-bottom:16px;font-size:14px;box-shadow:var(--sh-s)}
nav:not(.toc) a{margin-right:16px}

/* ── Blocuri de atentionare ───────────────────────────────────── */
.ok,.tip,.note,.warn,.bad,.inf,.info-box,.nou{border-radius:var(--r-s);padding:12px 16px;margin:12px 0;
  font-size:14.5px;border:1px solid;box-shadow:none}
.ok,.tip{background:var(--ok-f);border-color:var(--ok-b);color:var(--ok-t)}
.note{background:var(--note-f);border-color:var(--note-b);color:var(--note-t)}
.warn,.bad{background:var(--bad-f);border-color:var(--bad-b);color:var(--bad-t)}
.inf,.info-box{background:var(--inf-f);border-color:var(--inf-b);color:var(--inf-t)}
.nou{background:var(--inf-f);border-color:var(--pri);color:var(--inf-t);border-left-width:4px}
.ok b,.tip b,.note b,.warn b,.bad b,.inf b,.info-box b,.nou b{color:inherit}
.box{background:var(--inf-f);border-color:var(--inf-b);color:var(--inf-t);box-shadow:none;padding:12px 16px;margin:12px 0}

/* ── Text auxiliar ────────────────────────────────────────────── */
.lead,.big{font-size:17px;line-height:1.6;color:var(--ink)}
.mut,.small,.cap,.foot{color:var(--mut);font-size:13px}
.cap{text-align:center;margin-top:6px}
.foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}

/* ── Elemente inline ──────────────────────────────────────────── */
.btn{display:inline-block;background:var(--pri-soft);border:1px solid rgba(37,99,235,.25);color:var(--pri-d);
  border-radius:6px;padding:1px 9px;font-weight:600;font-size:13.5px;white-space:nowrap}
.btn.play{display:inline-block;background:var(--pri);color:#fff;border-color:var(--pri);padding:10px 18px;
  font-size:15px;border-radius:var(--r-s);margin:8px 0;box-shadow:var(--sh-s)}
.btn.play:hover{background:var(--pri-d);text-decoration:none}
.k{display:inline-block;background:var(--dark);color:#fff;border-radius:5px;padding:1px 8px;font-weight:600;font-size:13px}
.tag{display:inline-block;background:var(--pri-soft);color:var(--pri-d);border:1px solid rgba(37,99,235,.2);
  border-radius:999px;padding:1px 10px;font-size:12.5px;font-weight:600}
.pill,.st,.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;background:#e2e8f0;color:#475569}
.badge-blue,.st.b,.pill.b{background:#dbeafe;color:#1e40af}
.badge-green,.st.f,.pill.f,.p-v{background:#dcfce7;color:#166534}
.badge-red,.st.r,.pill.r,.p-x{background:#fee2e2;color:#991b1b}
.st.o,.pill.o,.p-a{background:#fef3c7;color:#92400e}
.st.p,.pill.p,.p-i{background:#ede9fe;color:#5b21b6}
.st.g,.pill.g,.p-e{background:#e2e8f0;color:#475569}
.ico{display:inline-block;min-width:1.4em}

/* ── Tabele ───────────────────────────────────────────────────── */
table,table.t{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
th{text-align:left;background:var(--bg);color:var(--mut);font-size:11.5px;text-transform:uppercase;
   letter-spacing:.05em;font-weight:700;padding:8px 10px;border:1px solid var(--line)}
td{padding:8px 10px;border:1px solid var(--line);vertical-align:top}
tr:nth-child(even) td{background:#fcfdfe}
td.r,th.r{text-align:right}
.tbl-wrap{overflow-x:auto}

/* ── Pasi numerotati ──────────────────────────────────────────── */
.steps{counter-reset:pas;padding-left:0;list-style:none;margin:12px 0}
.steps>li{position:relative;padding-left:38px;margin-bottom:12px;list-style:none}
.steps>li::before{counter-increment:pas;content:counter(pas);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.step{position:relative;padding-top:24px}
.step .num{position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:50%;background:var(--pri);
  color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-s)}
.step h2{margin-top:4px}
.path,.t{font-weight:600;color:var(--pri-d)}
b.t{color:inherit}

/* ── Intrebari si raspunsuri ──────────────────────────────────── */
.qa{padding:0;overflow:hidden}
.qa .it,.it{border-bottom:1px solid var(--line-s);padding:14px 20px}
.qa .it:last-child,.it:last-child{border-bottom:0}
.q{font-weight:700;color:var(--dark);margin-bottom:4px}
.d{color:var(--ink)}
.menu{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:1px 8px;font-size:13px;font-weight:600;color:var(--ink)}
.field-row{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-s)}
.field-row:last-child{border-bottom:0}
.field-name{min-width:190px;font-weight:600;color:var(--dark)}
.field-desc{color:var(--ink);flex:1}
.card-title{font-size:16px;font-weight:700;color:var(--dark);margin:0 0 10px}
.sec-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:700;margin:18px 0 6px}

/* ── Grile de dale (prezentari) ───────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:14px 0}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--bg)}
.tile b{display:block;font-size:15px;margin-bottom:4px;color:var(--pri-d)}
.tile span{font-size:13.5px;color:var(--mut)}
.flow{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin:14px 0}
.flow .step{flex:1 1 124px;background:var(--pri-soft);border:1px solid rgba(37,99,235,.18);border-radius:var(--r-s);
  padding:10px 12px;font-size:13.5px;margin:0;box-shadow:none;position:static}
.flow .step b{display:block;color:var(--pri-d);font-size:14px;margin-bottom:2px}
.flow .step small{color:var(--mut)}

/* ── Bara laterala (manuale lungi) ────────────────────────────── */
body.sb{display:flex;min-height:100vh;align-items:flex-start}
body.sb #sidebar{width:266px;min-width:266px;background:var(--hero-a);color:#fff;position:sticky;top:0;
  height:100vh;overflow-y:auto;padding:0 0 24px}
body.sb #sidebar h1{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border-bottom:2px solid var(--pri);
  padding:18px 16px;font-size:15px;line-height:1.4;color:#fff;margin:0}
body.sb #sidebar h1 span{display:block;font-size:12px;opacity:.75;font-weight:400;margin-top:3px;color:#93b4dd}
body.sb #sidebar nav{background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
body.sb #sidebar nav a{display:block;padding:7px 16px 7px 18px;color:rgba(255,255,255,.78);font-size:13px;
  border-left:3px solid transparent;margin:0}
body.sb #sidebar nav a:hover{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--pri-l);text-decoration:none}
body.sb #sidebar nav a.active{color:#fff;background:rgba(37,99,235,.28);border-left-color:var(--pri);font-weight:600}
body.sb #sidebar .sec-head{padding:12px 16px 3px;color:rgba(255,255,255,.45);margin:6px 0 0}
body.sb main{flex:1;max-width:900px;margin:0;padding:26px 32px 70px;min-width:0}
body.sb header{margin:-26px -32px 22px}

/* ── Machete de telefon / documente (prezentari) ──────────────── */
.phones{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.phone{flex:0 1 272px;max-width:300px;margin:0 auto;background:var(--hero-a);color:#e8eef7;border-radius:26px;
  padding:16px 14px;font-size:13px;box-shadow:var(--sh-l)}
.phone .row{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.phone .row span:last-child{text-align:right}
.phone .ttl{font-weight:700;font-size:14px;padding:8px 8px 4px;color:#8ab4f8}
.phone .b{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.45);border-radius:12px;padding:11px;
  text-align:center;font-weight:800;margin-top:8px}
.phone .b.g{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);opacity:.5}
.phone .b.go{background:rgba(52,199,89,.18);border-color:rgba(52,199,89,.5)}
.phone .b.warn{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.5);color:#e8eef7;margin:8px 0 0}
.phone .in{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:7px 9px;margin:6px 0;color:#cbd5e1;display:flex;justify-content:space-between;max-width:none}
.phone .in i{color:#93b4dd;font-style:normal;font-size:12px}
.phone .chip{display:inline-block;border-radius:999px;padding:0 8px;font-size:11px;font-weight:700}
.phone .chip.o{background:#f59e0b;color:#1a1200}.phone .chip.f{background:#22c55e;color:#04200d}
.phone .chip.b{background:var(--pri);color:#fff}.phone .chip.g{background:#475569;color:#fff}
.phone .photo{height:64px;border-radius:8px;border:1px dashed rgba(255,255,255,.35);display:flex;
  align-items:center;justify-content:center;color:#93b4dd;margin:6px 0;font-size:12px}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:760px){
  body{font-size:15px}
  header,.top{padding:24px 16px 20px}
  header h1,.top h1{font-size:22px}
  main,.pg,.wrap{padding:16px 14px 50px}
  section,.card,.step,.qa{padding:16px 16px}
  nav.toc ol,.toc ol{columns:1}
  table{font-size:13px}
  body.sb{display:block}
  body.sb #sidebar{width:auto;min-width:0;height:auto;position:static}
  body.sb #sidebar nav{max-height:210px;overflow-y:auto}
  body.sb main{padding:18px 14px 50px;max-width:none}
  body.sb header{margin:-18px -14px 18px}
}

/* ── Tiparire ─────────────────────────────────────────────────── */
@media print{
  body{background:#fff;font-size:11.5pt;color:#000}
  header,.top{background:#fff;color:#000;border-bottom:2.5pt solid var(--hero-a);padding:0 0 10px;margin-bottom:14px}
  header h1,.top h1{color:#000}header p,.top p,.top .s,header .brand{color:#333}
  header .tag{border-color:#999;color:#333;background:none}
  section,.card,.step,.qa,nav.toc,.toc{box-shadow:none;break-inside:avoid;border-color:#bbb}
  a{color:#000;text-decoration:none}
  .phone{background:#fff;color:#000;border:1pt solid #999;box-shadow:none}
  .phone .ttl{color:#000}
  body.sb{display:block}body.sb #sidebar{display:none}body.sb main{padding:0;max-width:none}
  h2::after{background:#000}
}

/* ── Aliasuri de layout pentru ghidurile existente ────────────── */
#content{flex:1;max-width:900px;margin:0;padding:26px 32px 70px;min-width:0}
.pg{max-width:none;margin:0;padding:0;background:transparent}
.pg .body{max-width:940px;margin:0 auto;padding:22px 20px 70px}
@media (max-width:760px){
  #content{padding:18px 14px 50px;max-width:none}
  .pg .body{padding:16px 14px 50px}
}
@media print{ #content{padding:0;max-width:none} }