/* Identitatea e-Aida, din docs/16-site-public.md § Identitate vizuală.
   Culorile sunt luate exact din machete, nu alese din nou.

   DE FĂCUT ÎN F5: kitul cere fonturile Instrument Sans și IBM Plex Mono
   GĂZDUITE LOCAL, ca browserul să nu facă nicio cerere către Google (GDPR:
   o cerere către Google trimite adresa IP a pacientului acolo). Până atunci
   folosim fonturile din sistem, care nu cer nimic nimănui. Arată puțin
   altfel decât macheta; nu trimite date nimănui. */

:root {
  --teal: #0F5E59;
  --teal-inchis: #0F3E3B;
  --teal-deschis: #E3EFEC;
  --teal-apasat: #0A403C;
  --ink: #14211F;
  --text-secundar: #4F5D5A;
  --fundal: #F4F6F4;
  --margine: #D9E0DD;
  --margine-camp: #B9C6C2;
  --atentie: #C2610C;
  --atentie-text: #8A3B07;
  --atentie-fundal: #FDEBD8;
  --live: #1E4FA8;
  --alb: #FFFFFF;
  --gri-fundal: #ECEFEE;
  --gri-text: #3F4B48;

  --raza: 10px;
  --raza-mare: 14px;
  --atins: 48px;          /* înălțimea minimă a lucrurilor de apăsat */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--fundal);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--teal); }
a:hover { color: var(--teal-apasat); }
button, input, select, textarea { font: inherit; }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- așezarea aplicației personalului ---------- */

.cap {
  background: var(--teal-inchis);
  color: var(--fundal);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cap a { color: #DCE8E5; text-decoration: none; }
.cap a:hover { color: var(--alb); }

.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }

.marca-semn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--teal-deschis);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.meniu { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.meniu-dreapta { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; }
.cap-unitate { font-size: 13px; color: #9FBDB7; }

.cuprins { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
h1 { font-size: 28px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; }
.sub { color: var(--text-secundar); font-size: 15px; margin: 0 0 24px; }

/* ---------- cutii ---------- */

.cutie {
  background: var(--alb);
  border: 1px solid var(--margine);
  border-radius: var(--raza-mare);
  padding: 20px;
  margin-bottom: 20px;
}

.cutie-titlu { font-weight: 600; margin: 0 0 12px; }

.nota {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--alb);
  border: 1px solid var(--margine);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--gri-text);
  margin-bottom: 16px;
}

.nota strong { color: var(--ink); }
.nota-atentie { background: var(--atentie-fundal); border-color: #F0D4B4; color: var(--atentie-text); }
.nota-atentie strong { color: var(--atentie-text); }

/* ---------- formulare ---------- */

.camp { margin-bottom: 18px; }
.eticheta { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ajutor { font-size: 13px; color: var(--text-secundar); margin-top: 6px; }

.intrare {
  width: 100%;
  min-height: var(--atins);
  border: 1px solid var(--margine-camp);
  border-radius: var(--raza);
  padding: 0 14px;
  background: var(--alb);
  color: var(--ink);
}

.intrare:focus-visible, .buton:focus-visible, .buton2:focus-visible, a:focus-visible {
  outline: 3px solid var(--live);
  outline-offset: 2px;
}

.cod-intrare {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}

.buton {
  min-height: var(--atins);
  border-radius: var(--raza);
  padding: 0 18px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--alb);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.buton:hover { background: var(--teal-apasat); border-color: var(--teal-apasat); }

.buton2 {
  min-height: var(--atins);
  border-radius: var(--raza);
  padding: 0 18px;
  border: 1px solid var(--margine-camp);
  background: var(--alb);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.buton-mic { min-height: 36px; padding: 0 12px; font-size: 14px; width: auto; }
.buton-linie { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.greseala {
  background: var(--atentie-fundal);
  color: var(--atentie-text);
  border: 1px solid #F0D4B4;
  border-radius: var(--raza);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* ---------- tabele ---------- */

.tabel-cutie {
  background: var(--alb);
  border: 1px solid var(--margine);
  border-radius: var(--raza-mare);
  overflow-x: auto;
  margin-bottom: 24px;
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #E1E7E4; font-size: 14px; }
th { font-size: 13px; color: var(--text-secundar); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* ---------- pastile ---------- */

.pastila {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pastila-ok { background: var(--teal-deschis); color: #0B4A46; }
.pastila-atentie { background: var(--atentie-fundal); color: var(--atentie-text); }
.pastila-stins { background: var(--gri-fundal); color: var(--gri-text); }
.pastile { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- ecranele de autentificare (după docs/mockups/Main.html) ---------- */

.intrare-ecran { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--fundal); }

.intrare-panou {
  flex: 1 1 400px;
  background: var(--teal-inchis);
  color: var(--fundal);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.intrare-panou h1 {
  /* Se micșorează singur când panoul e îngust, ca titlul să nu se rupă în
     patru rânduri pe ecranele mici. */
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.08;
  margin: 0 0 18px;
  font-weight: 600;
  text-wrap: balance;
}

.intrare-panou p { font-size: 17px; line-height: 1.55; margin: 0; color: #C9DBD7; max-width: 440px; }
.intrare-pentru { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #DCE8E5; }
.intrare-pentru-titlu {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #9FBDB7;
}

.intrare-parte { flex: 999 1 520px; min-width: 0; padding: 56px 48px; }
.intrare-formular { max-width: 420px; }

.deconectat {
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-secundar);
}

/* ---------- codul QR și codurile de recuperare ---------- */

.qr {
  background: var(--alb);
  border: 1px solid var(--margine);
  border-radius: 12px;
  padding: 16px;
  width: max-content;
  margin-bottom: 14px;
}

.qr svg { display: block; }

.cheie-scrisa {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  word-break: break-all;
  background: var(--gri-fundal);
  border-radius: 8px;
  padding: 10px 12px;
}

.coduri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  margin: 16px 0;
}

.coduri span {
  background: var(--gri-fundal);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.link-o-data {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  word-break: break-all;
  background: var(--teal-deschis);
  border: 1px solid #BCD6D1;
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
}

/* ---------- lista de permisiuni ---------- */

.permisiuni { display: flex; flex-wrap: wrap; gap: 6px; }

.permisiuni code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  background: var(--gri-fundal);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--gri-text);
}

/* ---------- telefon ---------- */

@media (max-width: 760px) {
  .intrare-panou { padding: 32px 20px; gap: 24px; }
  .intrare-panou h1 { font-size: 32px; }
  .intrare-panou .intrare-pentru { display: none; }
  .intrare-parte { padding: 28px 20px; }
  .cuprins { padding: 20px 16px 48px; }
  .cap { padding: 12px 16px; gap: 12px; }
  .meniu-dreapta { margin-left: 0; width: 100%; }
}

/* ============================================================
   Paginile pacientului: telefon în mână, conexiune proastă.
   ============================================================ */

body.pacient { background: #F6F8F7; }

.pac-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; background: #fff;
  border-bottom: 1px solid #DCE5E2; position: sticky; top: 0; z-index: 5;
}
/* Numele cabinetului se scurtează, nu împinge meniul pe al doilea rând:
   pe un telefon îngust, meniul trebuie să rămână la îndemână. */
.pac-unitate {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pac-meniu {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; font-size: 14px;
}
.pac-meniu a { color: #0F5E59; text-decoration: none; white-space: nowrap; }
.pac-meniu form { margin: 0; }

.pac-corp { max-width: 720px; margin: 0 auto; padding: 16px; }
.pac-centru { max-width: 420px; margin: 24px auto; }
.pac-subsol {
  max-width: 720px; margin: 0 auto; padding: 16px;
  color: #5A6B67; font-size: 13px;
}

.cod-mare { font-size: 28px; letter-spacing: 6px; text-align: center; }

.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }

.bula {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bula-aida { background: #fff; border: 1px solid #DCE5E2; align-self: flex-start; }
.bula-eu { background: #0F5E59; color: #fff; align-self: flex-end; }
.bula-fix { border-left: 3px solid #B3261E; }

.optiuni { display: flex; flex-wrap: wrap; gap: 8px; }
.optiuni form { margin: 0; }

.card-confirmare {
  background: #fff; border: 2px solid #0F5E59; border-radius: 14px;
  padding: 16px; align-self: stretch;
}
.card-confirmare h2 { margin: 0 0 10px; font-size: 17px; }
.card-confirmare dl {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px;
}
.card-confirmare dt { color: #5A6B67; }
.card-confirmare dd { margin: 0; font-weight: 500; }
.card-butoane { display: flex; gap: 8px; flex-wrap: wrap; }
.card-butoane form { margin: 0; }

.chat-scrie {
  display: flex; gap: 8px; position: sticky; bottom: 0;
  background: #F6F8F7; padding: 10px 0;
}
/* Câmpul ia tot ce rămâne, butonul doar cât îi trebuie. Fără asta,
   `.buton` (care e lat cât pagina) nu lasă loc de scris. */
.chat-scrie .intrare { flex: 1 1 auto; min-width: 0; width: auto; }
.chat-scrie .buton { flex: 0 0 auto; width: auto; padding: 0 20px; }

.programare {
  background: #fff; border: 1px solid #DCE5E2; border-radius: 12px;
  padding: 14px; margin-bottom: 10px;
}
.programare-cand { font-weight: 600; font-size: 17px; }
.programare-ce { margin: 2px 0 6px; }

.vizual-ascuns {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 480px) {
  .bula { max-width: 92%; }
  .pac-corp { padding: 12px; }
}

/* Rândul de pus pe site-ul cabinetului, gata de copiat. */
.cod-de-copiat {
  background: #14211F; color: #D6E4E0; padding: 12px 14px;
  border-radius: 10px; overflow-x: auto; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* În cadrul de pe site-ul clinicii: fără antet greu, totul e mai strâns. */
body.in-cadru .pac-cap { padding: 8px 12px; font-size: 14px; }
body.in-cadru .pac-corp { padding: 12px; }
body.in-cadru .pac-subsol { padding: 8px 12px; font-size: 12px; }

.nota-ok { border-left: 3px solid #0F5E59; background: #EEF5F3; }

/* ============================================================
   Agenda medicului (F3). Macheta: docs/mockups/DoctorAgenda.html
   ============================================================ */

.agenda-cap {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.agenda-zi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda-zi h1 { margin: 0; font-size: 22px; }
.agenda-sageata {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--margine);
  border-radius: 8px; background: var(--alb); color: var(--ink);
  text-decoration: none; font-size: 16px;
}
.agenda-sageata:hover { background: var(--gri-fundal); }

/* Cifrele de sus */
.cifre { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.cifra {
  flex: 1 1 140px; background: var(--alb); border: 1px solid var(--margine);
  border-radius: var(--raza); padding: 12px 14px;
}
.cifra-numar { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.cifra-nume { display: block; font-size: 13px; color: var(--text-secundar); margin-top: 2px; }
.cifra-live .cifra-numar { color: var(--live); }

/* Programul zilei */
.agenda-coloane { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.agenda-program { flex: 999 1 540px; min-width: 0; }
.agenda-latura { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.rand-liber td { color: var(--text-secundar); font-style: italic; }
.rand-acum { background: #EEF3FC; }
.rand-gata td { color: var(--gri-text); }

.agenda-ora { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.agenda-pacient { font-weight: 500; }
.agenda-motiv { color: var(--text-secundar); font-size: 13px; }

.pastila-live { background: #DDE7FA; color: var(--live); }

/* Pacientul curent */
.curent { background: var(--alb); border: 1px solid var(--margine); border-radius: var(--raza); padding: 14px; }
.curent-eticheta {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secundar); margin-bottom: 6px;
}
.curent-nume { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.curent-detaliu { font-size: 14px; color: var(--text-secundar); margin: 0 0 2px; }

/* Activitate live */
.activitate { background: var(--alb); border: 1px solid var(--margine); border-radius: var(--raza); padding: 14px; }
.activitate ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.activitate li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.activitate time { color: var(--text-secundar); font-variant-numeric: tabular-nums; white-space: nowrap; }
.activitate-goala { color: var(--text-secundar); font-size: 14px; margin: 10px 0 0; }

.semn-viu {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secundar);
}
.semn-viu::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); flex: none;
}

@media (max-width: 640px) {
  .agenda-coloane { flex-direction: column; }
  .cifra { flex: 1 1 calc(50% - 10px); }
  .agenda-ascunde-mic { display: none; }

  /* Pe telefon tabelul se desface în cartonașe. Într-o coloană de 90 de
     pixeli, „Damian Ilie · Consultație cardiologie" se rupe în patru
     rânduri și nu se mai citește nimic. Medicul se uită în agendă de pe
     telefon, între doi pacienți — trebuie să vadă dintr-o privire. */
  .agenda-program table,
  .agenda-program tbody,
  .agenda-program tr,
  .agenda-program td { display: block; width: auto; }

  .agenda-program thead { display: none; }

  .agenda-program tbody tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--margine);
  }
  .agenda-program tbody tr:last-child { border-bottom: 0; }

  .agenda-program td { border: 0; padding: 1px 0; }

  /* Ce se ascunde pe telefon rămâne ascuns: `display: block` de mai sus are
     aceeași greutate ca `display: none` de la clasele astea, și câștigă cine
     e scris ultimul. De-aia se repetă aici, după. */
  .agenda-program .agenda-ascunde-mic,
  .agenda-program .celula-goala,
  .agenda-program td:empty { display: none; }

  .agenda-program .agenda-ora { font-size: 16px; margin-bottom: 2px; }
  .agenda-program .buton-linie { margin-top: 6px; }
  .agenda-program .pastila { margin-top: 2px; }

  /* Fără margini negative: ar împinge rândul în afara chenarului și i-ar
     tăia ora. Fundalul ajunge ca să se vadă cine e înăuntru acum. */
  .agenda-program .rand-acum { padding-left: 8px; padding-right: 8px; }
}

/* Chatul personalului (F3) — se așază peste stilurile de chat ale
   pacientului, care sunt deja bune. Doar ce diferă. */
.chat-titlu { margin-bottom: 4px; }
.chat-exemple { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.chat-exemplu {
  font-size: 13px; color: var(--text-secundar);
  background: var(--gri-fundal); border-radius: 8px; padding: 6px 10px;
  align-self: flex-start;
}
.buton-dictare { flex: 0 0 auto; width: auto; padding: 0 14px; font-size: 18px; }
.dictare-activa { background: var(--live); border-color: var(--live); color: #fff; }

/* Cartonașele din Administrare.
   ============================================================
   Lipseau cu totul: șablonul le cerea din F1, foaia de stil nu le-a avut
   niciodată, așa că pagina arăta ca o înșiruire de linkuri subliniate.
   Prinsă dintr-o poză a ecranului, nu dintr-un test — un test vede că
   pagina răspunde 200, nu că e de necitit. */
.carduri {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 24px;
}
.card-admin {
  flex: 1 1 220px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--alb); border: 1px solid var(--margine);
  border-radius: var(--raza); padding: 16px;
  text-decoration: none; color: var(--ink);
  min-height: var(--atins);
}
.card-admin:hover { border-color: var(--teal); background: var(--teal-deschis); }
.card-numar { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--teal); }
.card-nume { font-weight: 600; font-size: 16px; }
.card-ajutor { font-size: 13px; color: var(--text-secundar); line-height: 1.45; }

@media (max-width: 640px) {
  .card-admin { flex: 1 1 100%; }
}

/* Rânduri de formular puse unul lângă altul: serviciu + durată, cod + minute.
   Fără asta, cele două câmpuri cad unul sub altul și formularul se lungește
   cât ecranul. Altă clasă cerută de șabloane și uitată din foaie. */
.rand-serviciu {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.rand-serviciu .intrare { width: auto; }

/* Nota de informare de sub formularele pacientului: e tot un text de ajutor,
   dar se cheamă pe nume ca să se poată găsi din docs/06 § Transparență. */
.nota-informare { max-width: 60ch; }

/* Grila recepției: medicii pe coloane, orele pe rânduri.
   Se derulează pe orizontală, fiindcă la opt medici nu încape altfel —
   dar coloana orelor rămâne pe loc, altfel nu mai știi la ce oră te uiți. */
.grila-sul { overflow-x: auto; }
.grila { min-width: 640px; }
.grila th, .grila td { vertical-align: top; }
.grila td { font-size: 13px; line-height: 1.4; }
.grila .agenda-pacient { display: block; }
.grila .pastila { margin-top: 3px; }
.celula-fara { background: var(--gri-fundal); }
.celula-gol { color: var(--margine-camp); }

.sosiri { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sosiri li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; font-size: 14px; }
.sosiri form { margin: 0; }

details.cutie summary { cursor: pointer; }
details.cutie summary::marker { color: var(--teal); }

/* Predările: firele care așteaptă un om. */
.predari { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.predare {
  background: var(--alb); border: 1px solid var(--margine);
  border-radius: var(--raza); padding: 14px;
}
.predare-urgenta { border-color: var(--atentie); border-left-width: 4px; }
.predare-cap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.predare-motiv { margin: 0 0 10px; font-size: 14px; color: var(--text-secundar); }

/* Mesajul scris de un om de la recepție: altă culoare decât al Aidei,
   fiindcă pacientul trebuie să vadă că i-a răspuns cineva. */
.bula-om { background: var(--teal-deschis); border: 1px solid #BFD8D3; align-self: flex-start; }

/* Numărul de lângă „Conversații" din meniu: câte fire așteaptă un om. */
.numar-asteptare {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--atentie); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* Pagina din SMS-ul de reminder: un singur lucru de făcut pe ea. */
.reminder-cand { font-size: 20px; margin: 0 0 8px; }

/* Rapoarte: bare simple, fără bibliotecă de grafice. La treizeci de zile
   nu merită 100 KB de JavaScript ca să desenezi treizeci de dreptunghiuri. */
.bare { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bare li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bara-zi { flex: 0 0 92px; color: var(--text-secundar); }
.bara-sina { flex: 1 1 auto; background: var(--gri-fundal); border-radius: 4px; height: 14px; }
.bara { display: block; height: 14px; background: var(--teal); border-radius: 4px; min-width: 2px; }
.bara-numar { flex: 0 0 32px; text-align: right; font-weight: 600; }

/* ============================================================
   Site-ul public (F5). Macheta: docs/16-site-public.md
   ============================================================ */

.site { background: var(--alb); }

.site-cap {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 16px 20px; max-width: 1100px; margin: 0 auto;
  border-bottom: 1px solid var(--margine);
}
.site-cap .marca { color: var(--ink); text-decoration: none; }
.site-meniu { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.site-meniu a { color: var(--text-secundar); text-decoration: none; font-size: 15px; }
.site-meniu a:hover { color: var(--teal); }
.site-meniu a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-meniu .buton2 { color: var(--ink); }

.site-corp { max-width: 1100px; margin: 0 auto; padding: 0 20px 48px; }

/* Capul paginii de acasă: text în stânga, chat în dreapta. */
.erou {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
  padding: 48px 0 24px;
}
.erou-text { flex: 1 1 380px; min-width: 0; }
.erou-text h1 { font-size: 40px; line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.5px; }
.erou-sub { font-size: 18px; line-height: 1.55; color: var(--text-secundar); margin: 0 0 22px; max-width: 46ch; }

.erou-chat {
  flex: 1 1 360px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fundal); border: 1px solid var(--margine);
  border-radius: var(--raza-mare); padding: 16px;
}
.erou-chat .card-confirmare { margin-top: 2px; }
.erou-chat .buton, .erou-chat .buton2 { cursor: default; }

.site-sectiune { padding: 36px 0; border-top: 1px solid var(--margine); }
.site-sectiune h2 { font-size: 26px; margin: 0 0 14px; }
.site-text { font-size: 17px; line-height: 1.6; color: var(--text-secundar); max-width: 68ch; margin: 0 0 12px; }
.site-sectiune-inchisa { background: var(--fundal); border-radius: var(--raza-mare); padding: 28px 24px; border-top: 0; }
.site-ingust { max-width: 620px; }
.site-chemare { text-align: center; }
.site-chemare .site-text { margin-left: auto; margin-right: auto; }

.exemple-chat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.intrebare {
  border-bottom: 1px solid var(--margine); padding: 12px 0;
}
.intrebare summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.intrebare p { color: var(--text-secundar); line-height: 1.6; margin: 10px 0 0; max-width: 68ch; }

.site-subsol {
  border-top: 1px solid var(--margine); background: var(--fundal);
  padding: 28px 20px;
}
.site-subsol-randuri {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
}
.site-subsol-meniu { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.site-subsol-meniu a { color: var(--text-secundar); font-size: 14px; }
.site-ciorna { max-width: 1100px; margin: 18px auto 0; font-size: 12px; }

@media (max-width: 640px) {
  .erou { padding: 28px 0 16px; }
  .erou-text h1 { font-size: 30px; }
  .erou-sub { font-size: 16px; }
  .site-meniu { gap: 12px; font-size: 14px; }
}

/* Butoanele care sunt de fapt linkuri: fără subliniere, și late cât
   textul lor, nu cât rândul. `.buton` e lat 100% fiindcă în formulare
   așa trebuie; într-un rând de îndemnuri, nu. */
a.buton, a.buton2 { text-decoration: none; }
.buton-linie .buton,
.buton-linie .buton2 { width: auto; min-width: 0; padding-left: 22px; padding-right: 22px; }

/* Titlul de pe prima pagină se rupe unde vrem noi, nu unde se nimerește. */
.erou-text h1 .rand { display: block; }

/* Paginile juridice: text lung, de citit. Rândul scurt și aerul dintre
   rânduri contează mai mult aici decât oriunde altundeva pe site. */
.site-juridic { max-width: 72ch; }
.site-juridic h2 { font-size: 24px; margin: 32px 0 12px; }
.site-juridic h3 { font-size: 19px; margin: 24px 0 8px; }
.site-juridic h4 { font-size: 16px; margin: 18px 0 6px; color: var(--text-secundar); }
.site-juridic p { line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.site-juridic li { line-height: 1.7; margin-bottom: 6px; }
.site-juridic ul, .site-juridic ol { padding-left: 22px; margin: 0 0 14px; }
.site-juridic blockquote { margin: 0 0 20px; }
.site-juridic hr { border: 0; border-top: 1px solid var(--margine); margin: 28px 0; }
.site-juridic code { font-size: 13px; background: var(--gri-fundal); padding: 1px 5px; border-radius: 4px; }
.site-juridic .tabel-cutie { margin: 0 0 20px; overflow-x: auto; }
.site-juridic table { font-size: 14px; }

/* „De unde încep": pașii până la primul pacient. */
.pasi { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pas {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--alb); border: 1px solid var(--margine);
  border-radius: var(--raza); padding: 14px;
}
.pas-semn {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--margine-camp);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--alb);
}
.pas-gata { border-color: var(--teal-deschis); background: #FBFDFC; }
.pas-gata .pas-semn { background: var(--teal); border-color: var(--teal); }
.pas-text { flex: 1 1 auto; min-width: 0; }
.pas-text p { margin: 4px 0 0; }
.pas-buton { flex: 0 0 auto; }

@media (max-width: 640px) {
  .pas { flex-wrap: wrap; }
  .pas-buton { flex: 1 1 100%; }
}