/* WYGLĄD MODUŁU RECEPT.
   Zasada: lekarz ma wystawić receptę w kilkanaście sekund, na laptopie i na telefonie.
   Stąd duże pola (na telefonie 16 px, inaczej iPhone sam przybliża ekran), jeden słupek treści,
   wyraźna kolejność: pacjent → leki → wystaw. Kolory spokojne, medyczne; kolorem oznaczamy
   TYLKO to, co niesie znaczenie (zielony = zrobione, czerwony = błąd, bursztyn = uwaga). */

/* KOLORY TAKIE, JAK W PROGRAMIE FINANSE CEM I NA MATERIAŁACH CENTRUM OCENY ZDROWIA
   (Piotr, 3.09.2026: „zrób jasne kolory jak kolory CEM i COZ").
   Wzięte wprost z tamtych plików: niebieski #2563eb i granat #1b4f9c z wydruków Biovisu,
   szarości z rodziny #0f172a / #64748b / #e2e8f0, tła #f8fafc.
   CIEMNEGO MOTYWU NIE MA -- ma być jasno, tak jak prosił. */
:root {
  color-scheme: light;

  /* KOLORY I KRÓJ PISMA WPROST Z FINANSÓW CEM (css/base.css, components.css) --
     Piotr, 5.09.2026: „weź kolorystykę stamtąd". Dwa programy mają wyglądać jak jeden,
     zwłaszcza że Finanse otwierają się teraz w środku gabinetu. */
  --tlo: #f7f9fc;
  --karta: #ffffff;
  --linia-cicha: #eef2f7;       /* cieńsza kreska wewnątrz kart, tak jak w Finansach */
  --karta-cien: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --tekst: #0f172a;
  --pod: #64748b;
  --linia: #e2e8f0;
  --linia-mocna: #cbd5e1;

  --akcent: #2563eb;            /* ten sam niebieski, co w programie Finanse CEM */
  --akcent-ciemny: #1d4ed8;
  --akcent-tlo: #eff5ff;
  --granat: #1b4f9c;            /* granat z wydruków Centrum Oceny Zdrowia */

  --dobrze: #15803d;
  --dobrze-tlo: #f0fdf4;
  --blad: #b91c1c;
  --blad-tlo: #fef2f2;
  --uwaga: #a16207;
  --uwaga-tlo: #fffbeb;

  --r: 14px;
  --odstep: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* NIC NIE MOŻE BYĆ SZERSZE NIŻ EKRAN.
   Gdy choć jeden element wystaje poza szerokość telefonu, strona daje się przesunąć w bok
   i po prawej widać pusty pasek tła. Najczęściej robią to listy wyboru z długim opisem
   („DZ — dziecko do 18 lat...") i długie numery bez spacji. (Piotr, 4.09.2026) */
html, body { overflow-x: hidden; max-width: 100%; }
input, select, textarea, button { min-width: 0; max-width: 100%; box-sizing: border-box; }
.rzad, .pola, .pola-recepty, .linia-akcji, .naglowek { min-width: 0; }
.pod, td, th, .lek-op, .meta { overflow-wrap: anywhere; }

body {
  margin: 0;
  font: 16px/1.55 Inter, "Segoe UI", Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -.01em; display: flex;
  align-items: center; gap: 8px; color: var(--granat); }
h2::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--akcent);
  display: inline-block;
}
.pod { color: var(--pod); font-size: 14px; margin: 4px 0 14px; }

/* --- pola ------------------------------------------------------------------------------------ */
label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--pod);
  letter-spacing: .01em; }
input, select, textarea {
  /* POLA MAJĄ BYĆ WIDOCZNE (Piotr, 4.09.2026: „nadal pola są toporne, słabo ich widać").
     Białe pole na białej karcie znikało -- widać było tylko cienką kreskę. Teraz pole ma własne,
     jasnoszare tło i wyraźniejszą obwódkę, a po kliknięciu robi się białe z niebieską ramką
     i delikatną poświatą: od razu widać, gdzie stoi kursor. */
  width: 100%;
  font: inherit; font-size: 16px; font-weight: 500;   /* 16 px = telefon nie przybliża ekranu */
  color: var(--tekst);
  background: #f6f8fb;
  border: 1.5px solid var(--linia-mocna);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input::placeholder { color: var(--pod); opacity: .6; }
input:hover, select:hover { border-color: var(--linia-mocna); background: #f1f5f9; }
input:focus, select:focus, textarea:focus {
  outline: none; background: #fff; border-color: var(--akcent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
input[type="file"] { padding: 10px; background: var(--tlo); }

/* --- przyciski ------------------------------------------------------------------------------- */
/* PRZYCISK TAKI SAM JAK W FINANSACH: delikatny gradient, cienka ramka, miękki cień.
   (Tam: `.cem-btn` w components.css.) */
button {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 18px; min-height: 46px;
  border-radius: 10px; border: 1px solid #dbe2ea;
  background: linear-gradient(180deg, #fff, #f8fafc); color: var(--tekst);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s, transform .05s;
}
button:hover { background: #f1f5f9; border-color: #c7d2fe;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .09); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--akcent) 40%, transparent);
  outline-offset: 2px; }
button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
button.glowny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
button.cichy { border: none; background: none; color: var(--akcent); min-height: 0; padding: 2px 6px; }
button.male { font-size: 13px; padding: 7px 12px; min-height: 38px; }
button[disabled] { background: var(--tlo); border-color: var(--linia); color: var(--pod);
  cursor: default; }
button[disabled]:hover { background: var(--tlo); border-color: var(--linia); }

/* --- logowanie ------------------------------------------------------------------------------- */
.ekran-logowania { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.ekran-logowania .karta { width: min(420px, 100%); }
.ekran-logowania h1 { text-align: center; }
.ekran-logowania .pod { text-align: center; }
.ekran-logowania button { width: 100%; }

/* --- nagłówek i zakładki --------------------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--karta);
  border-bottom: 1px solid var(--linia);
  position: sticky; top: 0; z-index: 20;
}
header > strong { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
header nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header nav button {
  white-space: nowrap; border: none; background: none; color: var(--pod);
  padding: 8px 14px; min-height: 40px; border-radius: 999px;
}
header nav button:hover { background: var(--akcent-tlo); color: var(--akcent); }
header nav button.aktywna { background: var(--akcent); color: #fff; }

main { max-width: 860px; margin: 20px auto 96px; padding: 0 16px; }

/* --- karty ------------------------------------------------------------------------------------ */
.karta {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  box-shadow: var(--karta-cien); padding: 20px; margin: 0 0 var(--odstep);
}
.rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.rzad-przyciskow { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

/* --- komunikaty -------------------------------------------------------------------------------- */
.blad { color: var(--blad); font-size: 14px; margin-top: 10px; min-height: 20px; }
.blad:not(:empty) { background: var(--blad-tlo); border-radius: 8px; padding: 10px 12px; }
.dobrze { color: var(--dobrze); }
.blad:has(.dobrze) { background: var(--dobrze-tlo); color: var(--dobrze); }
/* Gdyby przeglądarka nie znała `:has()`, komunikat o sukcesie i tak jest zielonym tekstem
   -- traci tylko zielone tło. */
.pasek { background: var(--uwaga-tlo); color: var(--uwaga); border-bottom: 1px solid var(--linia);
  padding: 10px 16px; font-size: 14px; text-align: center; }

/* --- wyszukiwarka leków ------------------------------------------------------------------------ */
.wynik { border: 1px solid var(--linia); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  transition: border-color .15s, background .15s; }
.wynik:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.wynik b { font-size: 16px; }
.wynik .meta { color: var(--pod); font-size: 13px; margin-top: 2px; }
.wynik .opak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wynik .opak button { font-size: 13px; padding: 8px 12px; min-height: 40px; }

/* --- pozycje recepty --------------------------------------------------------------------------- */
.pozycja { border: 1px solid var(--linia); border-left: 4px solid var(--akcent);
  border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--karta); }
.pozycja .gora { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pozycja .gora b { font-size: 16px; }
.pozycja .gora button { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.pozycja .pola { display: grid; grid-template-columns: 1fr 110px 170px; gap: 0 12px; }
.pola-recepty { display: grid; grid-template-columns: 1fr 110px 110px; gap: 0 12px; }
/* ODPLATNOSC: wszystkie mozliwosci widoczne naraz, jedno klikniecie zamiast rozwijania listy. */
.odplatnosci { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.odplatnosci button.wybrana { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.wyliczenie { background: var(--dobrze-tlo); color: var(--dobrze); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
/* Puste miejsce na rachunek nie ma być zielonym paskiem znikąd. */
.wyliczenie:empty, .kwota-opis:empty { display: none; }
.meta.pod b { color: var(--akcent); font-weight: 700; }

/* --- lista wystawionych -------------------------------------------------------------------------
   JEDNA RECEPTA = JEDNA KARTA z paskiem stanu po lewej: zielony -- wystawiona i ma kod dla
   apteki, bursztynowy -- jeszcze niewysłana, czerwony -- anulowana. Kolor widać kątem oka,
   więc na długiej liście nie trzeba czytać, żeby wiedzieć, co jest do zrobienia. */
/* ROZWIJA SIĘ NAZWISKO, nie pojedyncza recepta. Strzałkę rysujemy sami -- domyślny trójkąt
   przeglądarki psuje układ nagłówka. */
.grupa-pacjenta > summary { list-style: none; cursor: pointer; position: relative; }
.grupa-pacjenta > summary::-webkit-details-marker { display: none; }
.grupa-pacjenta > summary::after { content: '⌄'; position: absolute; right: 16px; top: 16px;
  color: var(--pod); font-size: 20px; line-height: 1; transition: transform .15s ease; }
.grupa-pacjenta[open] > summary::after { transform: rotate(180deg); }
.grupa-pacjenta > summary:hover h3 { color: var(--akcent); }
.grupa-pacjenta > summary .pacjent-karta { margin-bottom: 0; }
.grupa-pacjenta[open] > summary .pacjent-karta { border-radius: var(--r) var(--r) 0 0; }
.grupa-srodek { border: 1px solid var(--linia); border-top: none;
  border-radius: 0 0 var(--r) var(--r); padding: 14px 16px 6px; margin-bottom: 22px;
  background: var(--tlo); }
.recepta { position: relative; overflow: hidden;
  background: var(--karta); border: 1px solid var(--linia); border-radius: 10px;
  padding: 9px 12px 8px 16px; margin-bottom: 8px; box-shadow: none;
  transition: border-color .15s ease; }
.recepta:hover { border-color: var(--linia-mocna); }
.recepta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--linia-mocna); }
.recepta-wystawiona::before { background: var(--dobrze); }
.recepta-niewyslana::before { background: #d97706; }
.recepta-anulowana::before { background: var(--blad); }
.recepta-anulowana { background: #fffafa; }
.recepta-anulowana .leki { opacity: .55; }

.recepta-glowa { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.recepta-kto { min-width: 0; flex: 1 1 260px; }
.recepta-kto h3 { margin: 0; font-size: 14px; font-weight: 700; display: inline; }
.recepta-kto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.recepta-meta { font-size: 12px; color: var(--pod); line-height: 1.45; }
.recepta-meta.cichsza { color: #94a3b8; }
.recepta-stan { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* KOD DLA APTEKI -- jedyna rzecz, którą pacjent podaje w okienku. Duży, w odstępach, żeby dało
   się go przeczytać przez telefon bez pomyłki. */
.kod-p1 { text-align: right; line-height: 1.15; }
.kod-p1 span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pod); line-height: 1.2; }
.kod-p1 b { font-size: 17px; font-weight: 800; letter-spacing: .08em; color: var(--dobrze);
  font-variant-numeric: tabular-nums; }
.kod-brak b { font-size: 13px; font-weight: 700; letter-spacing: 0; color: #b45309; }
.plakietka { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; background: var(--uwaga-tlo); color: var(--uwaga); white-space: nowrap; }
.plakietka-zla { background: var(--blad-tlo); color: var(--blad); }

/* LEKI -- lista, nie tabela. Tabela z czterema nagłówkami zabierała pół karty na same napisy. */
.leki { list-style: none; margin: 6px 0 7px; padding: 0; }
.lek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 4px 0; border-top: 1px solid var(--linia); }
.lek-nazwa { font-size: 13.5px; }
.lek-pod { font-size: 12px; color: var(--pod); }
.lek-kat { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; background: var(--akcent-tlo); color: var(--akcent); vertical-align: 1px; }

/* KARTA OSOBY nad jej receptami -- gdy w polu szukania stoi nazwisko. */
.pacjent-karta { background: var(--karta); border: 1px solid var(--linia); border-left: 4px solid var(--akcent);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--karta-cien); }
.pacjent-glowa { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; }
.pacjent-glowa h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }

/* CZY PACJENTOWI SKOŃCZYŁ SIĘ LEK -- jedno spojrzenie: zielono, gdy zapas się skończył (czyli
   pora na nową receptę), bursztynowo, gdy lek jeszcze mu został. */
.zapas { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; white-space: nowrap; }
.zapas i { font-style: normal; font-weight: 400; opacity: .75; }
.zapas-jest { background: var(--uwaga-tlo); color: var(--uwaga); }
.zapas-konczy { background: var(--akcent-tlo); color: var(--akcent); }
.zapas-brak { background: var(--dobrze-tlo); color: var(--dobrze); }
.zapas-skad { margin-left: 6px; font-size: 11px; color: var(--pod); }
.wykupiona { color: var(--dobrze); }
.grupa-pacjenta { margin-bottom: 26px; }
.grupa-pacjenta .recepta { margin-left: 14px; }

/* OSTATNIA RECEPTA PACJENTA -- przy wypisywaniu nowej. */
.poprzednio { border: 1px solid var(--linia); border-left: 4px solid var(--akcent);
  border-radius: 10px; background: var(--akcent-tlo); padding: 12px 14px; margin: 4px 0 14px; }
.poprzednio-glowa { font-size: 13px; color: var(--pod); margin-bottom: 8px; }
.poprzednio-leki { list-style: none; margin: 0; padding: 0; }
.poprzednio-leki li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 5px 0; border-top: 1px solid rgba(37, 99, 235, .12); font-size: 13.5px; }
.poprzednio-leki li:first-child { border-top: none; }
.pl-nazwa { font-weight: 700; }
.pl-ds { color: var(--pod); font-size: 12.5px; }

/* RODZAJ LEKU do wyboru -- małe klawisze, wybrany podświetlony. */
.filtr-rodzaju { margin: -4px 0 12px; }
.rodzaje { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.rodzaje button { font-size: 11.5px; padding: 3px 9px; }
.uwaga-rodzaju { font-size: 12px; color: var(--uwaga); background: var(--uwaga-tlo);
  border-radius: 8px; padding: 6px 10px; margin: 6px 0 2px; }

/* ZAKŁADKA „LEKI" -- wyszukiwarka i pełna charakterystyka. */
.szukajka.duza input { padding: 16px 18px 16px 46px; font-size: 17px; }
.szukajka.duza .szukajka-lupa { font-size: 19px; }
.lista-lekow { display: grid; gap: 6px; margin: 10px 0 4px; }
.lek-wiersz { text-align: left; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.lek-wiersz:hover { border-color: var(--akcent); }
.lek-wiersz .meta { font-size: 12px; color: var(--pod); margin-top: 2px; }

.wiedza-glowa { margin: 22px 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--linia); }
.wiedza-glowa h2 { margin: 0 0 3px; font-size: 20px; letter-spacing: -.01em; }

.punkt-chpl { border: 1px solid var(--linia); border-radius: 12px; margin-bottom: 8px;
  background: var(--karta); overflow: hidden; }
.punkt-chpl > summary { cursor: pointer; padding: 12px 16px; list-style: none;
  display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.punkt-chpl > summary::-webkit-details-marker { display: none; }
.punkt-chpl > summary:hover { background: var(--akcent-tlo); }
.punkt-chpl[open] > summary { border-bottom: 1px solid var(--linia); }
.punkt-chpl .numer { font-size: 11.5px; color: var(--pod); background: var(--tlo);
  padding: 2px 8px; border-radius: 999px; }
.punkt-chpl pre { margin: 0; padding: 14px 18px; white-space: pre-wrap; word-wrap: break-word;
  font: 14px/1.65 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--tekst); max-height: none; }
.zrodlo { font-size: 12.5px; color: var(--pod); margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linia); }

/* INTERAKCJE -- podsumowanie na kolorowo. Kolor mówi, jak pilne, a nie jak groźne:
   czerwony = producent napisał „przeciwwskazane" albo „nie zaleca się". */
.interakcje-blok { border: 1px solid var(--linia); border-radius: 12px; padding: 14px 16px;
  margin: 12px 0; background: var(--tlo); }
.interakcje-samodzielne { margin-bottom: 14px; }

.podsumowanie-interakcji { border-radius: 12px; padding: 12px 16px; margin: 12px 0 10px;
  font-size: 15px; }
.podsumowanie-interakcji.zielone { background: var(--dobrze-tlo); color: var(--dobrze); }
.podsumowanie-interakcji.czerwone { background: var(--blad-tlo); color: var(--blad); }
.podsumowanie-interakcji.pomaranczowe { background: var(--uwaga-tlo); color: var(--uwaga); }
.podsumowanie-interakcji.szare { background: #f1f4f8; color: var(--pod); }
.podsumowanie-interakcji .pod { margin-top: 4px; font-weight: 400; }

.para-interakcji { border: 1px solid var(--linia); border-left: 5px solid var(--linia-mocna);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; background: var(--karta); }
.para-interakcji.czerwony { border-left-color: var(--blad); background: #fffafa; }
.para-interakcji.pomaranczowy { border-left-color: #d97706; background: #fffdf7; }
.para-interakcji.szary { border-left-color: var(--linia-mocna); }
.para-nazwy { font-size: 14.5px; margin-bottom: 6px; }
.znalezisko { margin-top: 6px; }
.znalezisko .skad { font-size: 11.5px; color: var(--pod); margin-bottom: 3px; }
/* OPAKOWANIE: opis po lewej, rodzaj podpisany z prawej. Rodzaj inny niż wybrany jest
   widoczny, ale odróżniony -- nic się nie chowa. (Piotr, 5.09.2026) */
.opak button { display: inline-flex; align-items: center; gap: 8px; }
.opak-opis { flex: 1 1 auto; text-align: left; }
.opak-rodzaj { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); }
.opak-rodzaj.inny { background: #f1f4f8; color: var(--pod); }
.opak button.inny-rodzaj { border-style: dashed; }
.legenda-skrotow { font-size: 11.5px; color: var(--pod); margin: 10px 0 0; padding-top: 8px;
  border-top: 1px solid var(--linia); line-height: 1.6; }

.zrodlo-mocne { background: var(--dobrze-tlo); color: var(--dobrze); font-weight: 700;
  padding: 1px 7px; border-radius: 999px; }
.zrodlo-slabe { background: #f1f4f8; color: var(--pod); font-weight: 700;
  padding: 1px 7px; border-radius: 999px; }
.znalezisko .cytat { font-size: 13px; line-height: 1.55; background: var(--tlo);
  border-radius: 8px; padding: 8px 11px; }

/* ZAKŁADKA LEKI -- dwa narzędzia obok siebie, jednakowe i widoczne od razu. */
.karta-lekow { padding-top: 22px; }
.narzedzia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 14px 0 6px; }
.narzedzie { display: grid; grid-template-columns: 40px 1fr; grid-template-areas:
  'ikona tytul' 'ikona opis'; gap: 0 12px; align-items: center; text-align: left;
  background: var(--karta); border: 1px solid var(--linia); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.narzedzie:hover { border-color: var(--akcent); transform: translateY(-1px); }
.narzedzie .ikona { grid-area: ikona; font-size: 22px; }
.narzedzie .tytul { grid-area: tytul; font-size: 15px; font-weight: 700; }
.narzedzie .opis { grid-area: opis; font-size: 12.5px; color: var(--pod); }

.panel-interakcji { border: 1px solid var(--linia); border-radius: var(--r);
  background: var(--tlo); padding: 18px 20px; margin: 14px 0; }
.panel-interakcji h3 { margin: 0 0 4px; font-size: 16px; }
.panel-interakcji > .pod { margin-bottom: 12px; }

/* CIĄŻA -- ostrzeżenie tuż nad przyciskiem wystawiania, żeby nie dało się go minąć. */
.ciaza-blok { border-radius: 14px; padding: 16px 18px; margin: 14px 0; border: 2px solid; }
.ciaza-blok.czerwony { background: var(--blad-tlo); border-color: #f2b8b5; }
.ciaza-blok.pomaranczowy { background: var(--uwaga-tlo); border-color: #f3dfa8; }
.ciaza-naglowek { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ciaza-naglowek .znak { font-size: 22px; line-height: 1.2; }
.ciaza-blok.czerwony .ciaza-naglowek b { color: var(--blad); }
.ciaza-blok.pomaranczowy .ciaza-naglowek b { color: var(--uwaga); }

.lek-ciaza { background: var(--karta); border-radius: 10px; padding: 10px 13px; margin-bottom: 7px;
  border-left: 4px solid var(--linia-mocna); }
.lek-ciaza.czerwony { border-left-color: var(--blad); }
.lek-ciaza.pomaranczowy { border-left-color: #d97706; }
.lek-ciaza.nieznany { border-left-color: var(--linia-mocna); }
.lek-ciaza-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lek-ciaza .etykieta { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: #f1f4f8; color: var(--pod); }
.lek-ciaza.czerwony .etykieta { background: var(--blad-tlo); color: var(--blad); }
.lek-ciaza.pomaranczowy .etykieta { background: var(--uwaga-tlo); color: var(--uwaga); }
.lek-ciaza summary { cursor: pointer; font-size: 12px; color: var(--pod); margin-top: 6px; }
.lek-ciaza .cytat { font-size: 13px; line-height: 1.55; background: var(--tlo);
  border-radius: 8px; padding: 8px 11px; margin-top: 5px; }
.lek-ciaza .skad { font-size: 11px; color: var(--pod); margin-top: 4px; }
.ciaza-reszta > summary, .ciaza-cicha > summary { cursor: pointer; font-size: 12.5px;
  color: var(--pod); padding: 8px 0; }
.ciaza-cicha { border-top: 1px solid var(--linia); margin: 10px 0; }
.ciaza-cicha > summary:hover { color: var(--akcent); }
.ciaza-spokojnie { font-size: 12.5px; color: var(--dobrze); background: var(--dobrze-tlo);
  border-radius: 10px; padding: 8px 13px; margin: 10px 0; }

/* WERDYKT -- pierwsze, co widać. Duży znak, jedno zdanie, kolor zgodny z powagą. */
.werdykt { display: flex; align-items: flex-start; gap: 14px; border-radius: 12px;
  padding: 14px 18px; margin: 12px 0 10px; font-size: 15.5px; }
.werdykt .znak { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; font-weight: 800; font-size: 17px; background: rgba(255,255,255,.65); }
.werdykt .pod { font-weight: 400; font-size: 13px; margin-top: 2px; opacity: .85; }
.werdykt.zielone { background: var(--dobrze-tlo); color: var(--dobrze); }
.werdykt.czerwone { background: var(--blad-tlo); color: var(--blad); }
.werdykt.pomaranczowe { background: var(--uwaga-tlo); color: var(--uwaga); }
.werdykt.szare { background: #f1f4f8; color: var(--pod); }

.dzial-interakcji { margin-top: 14px; }
.dzial-interakcji h4 { margin: 0 0 7px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pod); font-weight: 700; }
.dzial-zwiniety { margin-top: 14px; }
.dzial-zwiniety > summary { cursor: pointer; font-size: 13px; color: var(--pod); padding: 6px 0; }

.para-nazwy .plus { color: var(--pod); font-weight: 400; margin: 0 8px; }
.para-zalecenie { font-size: 14px; font-weight: 600; margin-top: 2px; }
.para-interakcji.czerwony .para-zalecenie { color: var(--blad); }
.para-interakcji.pomaranczowy .para-zalecenie { color: #b45309; }
.para-cytat > summary { cursor: pointer; font-size: 12px; color: var(--pod); margin-top: 8px; }
.para-cytat > summary:hover { color: var(--akcent); }
.stopka-interakcji { font-size: 12px; color: var(--pod); margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--linia); }

/* WYBÓR LEKU Z REJESTRU -- podpowiedzi i plakietki wybranych. */
.podpowiedzi-lekow { display: grid; gap: 4px; margin: 6px 0; }
.podpowiedz-leku { text-align: left; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 9px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.podpowiedz-leku:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.podpowiedz-leku .meta { display: block; font-size: 11.5px; color: var(--pod); }
.wybrane-leki { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.lek-plakietka { display: inline-flex; align-items: center; gap: 6px; background: var(--akcent-tlo);
  color: var(--akcent); border-radius: 999px; padding: 5px 6px 5px 13px; font-size: 13px;
  font-weight: 600; }
.lek-plakietka button { padding: 0 6px; font-size: 13px; line-height: 1; color: var(--akcent); }

/* UKŁADY JEDEN POD DRUGIM -- spis treści, nie rozsypane kafelki. */
.lista-ukladow { display: grid; gap: 6px; margin-top: 10px; }
.uklad { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  text-align: left; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 12px; padding: 11px 14px; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease; }
.uklad:hover { border-color: var(--akcent); transform: translateX(2px); }
.uklad .litera { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--akcent-tlo); color: var(--akcent);
  font-weight: 800; font-size: 14px; }
.uklad .opis { font-size: 14.5px; font-weight: 600; }
.uklad .ile { font-size: 12px; color: var(--pod); font-variant-numeric: tabular-nums; }

/* Wyniki w przeglądarce: lek pod lekiem, opakowania w jednym rzędzie pod nazwą. */
.przegladarka-tresc .wynik { background: var(--karta); border: 1px solid var(--linia);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 6px; }
.przegladarka-tresc .wynik .opak { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* URYWEK ZE WSKAZAŃ -- fragment, w którym naprawdę pada szukane słowo. */
.urywek { font-size: 12.5px; color: var(--pod); background: var(--tlo); border-radius: 8px;
  padding: 7px 10px; margin-top: 6px; line-height: 1.5; }
.urywek mark { background: #fff3bf; color: var(--tekst); padding: 0 2px; border-radius: 3px;
  font-weight: 600; }

/* DZIAŁY WYNIKÓW SZUKANIA -- choroby, układy, substancje, leki. */
.dzial-wynikow { margin-top: 16px; }
.dzial-wynikow h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pod); font-weight: 700; }

/* PRZELICZNIK DAWKI -- przy punkcie o dawkowaniu. */
.przelicznik { border-top: 1px solid var(--linia); background: var(--tlo);
  padding: 14px 18px 16px; }
.przelicznik-tytul { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.przelicznik-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; }
.przelicznik-pola label { display: block; font-size: 12px; color: var(--pod); margin: 0; }
.przelicznik-pola input { width: 100%; margin-top: 3px; padding: 9px 11px; font-size: 14px; }
.przelicznik-wynik { margin-top: 12px; font-size: 15px; line-height: 1.5;
  background: var(--dobrze-tlo); color: var(--dobrze); border-radius: 10px; padding: 10px 14px; }
.przelicznik-wynik.pod { background: none; color: var(--pod); padding: 6px 0; font-size: 13px; }

/* PRZEGLĄDANIE LEKÓW -- układy, problemy, substancje, listy bezpłatnych. */
#przegladarka { border: 1px solid var(--linia); border-radius: var(--r); background: var(--tlo);
  padding: 14px 16px; margin: 0 0 14px; }
.przegladarka-menu { margin-bottom: 12px; }
.przegladarka-tresc { max-height: 60vh; overflow-y: auto; }
.tytul-przegladania { margin: 10px 0 6px; font-size: 15px; }

.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kafelek { display: block; text-align: left; background: var(--karta);
  border: 1px solid var(--linia); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease; }
.kafelek:hover { border-color: var(--akcent); transform: translateY(-1px); }
.kafelek .litera { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--akcent-tlo); color: var(--akcent);
  font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.kafelek .opis { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.kafelek .ile { display: block; font-size: 11.5px; color: var(--pod); margin-top: 3px; }

/* Grupa ATC ma szerszy kwadracik, bo mieści kod w rodzaju „R03", a nie jedną literę.
   Nazwy grup rejestr podaje tylko kodem -- w środku wiersza stoją więc przykładowe
   substancje, bo one mówią, co to za grupa. */
/* Problem i substancja nie mają kwadracika z literą -- treść zaczyna się od lewej. */
.uklad.problem-wiersz { grid-template-columns: 1fr auto; }
.uklad.problem-wiersz .opis { font-weight: 500; font-size: 14px; line-height: 1.4; }

.uklad.grupa { grid-template-columns: 56px 1fr auto; }
.uklad.grupa .litera { width: 52px; font-size: 13px; letter-spacing: .02em; }
.uklad.grupa .opis { font-weight: 400; font-size: 13px; color: var(--pod); line-height: 1.4; }

.problemy { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.problem { text-align: left; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; }
.problem:hover { border-color: var(--akcent); color: var(--akcent); }
.problem .ile, .grupa .ile { color: var(--pod); font-size: 11.5px; }
.szukajka.mala input { padding: 9px 12px 9px 34px; font-size: 14px; }

/* LEK ROBIONY -- surowiec i ilość obok siebie, tak jak pisze się na recepcie. */
.recepturowy { background: var(--tlo); border: 1px solid var(--linia); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 12px; }
.recepturowy > .pod { margin: 8px 0 4px; }
.surowiec { display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto auto;
  gap: 6px; align-items: center; margin-bottom: 6px; }
.surowiec .male { font-size: 11.5px; padding: 4px 8px; white-space: nowrap; }
@media (max-width: 680px) {
  .surowiec { grid-template-columns: 1fr 1fr; }
  .surowiec input:first-child { grid-column: 1 / -1; }
}
.surowiec input { margin: 0; }
.surowiec button { padding: 4px 8px; line-height: 1; }

.pusto { color: var(--pod); text-align: center; padding: 28px 0; margin: 0; }
.linia-akcji button { margin-left: 0; }
.znacznik { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px;
  border-radius: 999px; background: var(--uwaga-tlo); color: var(--uwaga); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pod); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linia); vertical-align: top; }
tr:last-child td { border-bottom: none; }

/* --- podpis i certyfikaty ------------------------------------------------------------------------ */
/* GRUBA KRESKA NAD PODPISEM ZDJĘTA (Piotr, 4.09.2026: „usuń tą grubą linię ponad").
   Podgląd podpisu jest teraz w zwijanym bloku i sam nagłówek wystarczy za oddzielenie --
   trzypunktowa krecha nad nim robiła z niego drugi nagłówek strony. */
.podpis { border: 1px solid var(--linia);
  padding: 16px; margin: 8px 0 14px; background: var(--akcent-tlo); border-radius: 12px;
  line-height: 1.8; font-size: 15px; text-align: center; }
.podpis b { display: block; font-size: 16px; }
.cert { border: 1px solid var(--linia); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.cert .stan { font-size: 14px; font-weight: 600; margin: 4px 0 8px; }
.wybor-miasta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 14px; }

/* PRZYCISKI PRZY RECEPCIE W JEDNEJ LINII -- BEZ PRZEWIJANIA.
   Mieszczą się dzięki temu, że same się zwężają: mniejsza czcionka i ciaśniejsze odstępy.
   Na wąskim telefonie kurczą się dalej, ale nigdy nie schodzą do drugiego wiersza. */
.linia-akcji { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.recepta .linia-akcji button { font-size: 11.5px; padding: 3px 7px; }
.linia-akcji button { white-space: nowrap; font-size: 12px; padding: 5px 8px; min-width: 0;
  flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.linia-akcji .znacznik { font-size: 11px; padding: 3px 6px; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- TELEFON: JEDEN KOMPLET REGUŁ ---------------------------------------------------------------
   Wszystko, co dotyczy małego ekranu, stoi TUTAJ i w jednym miejscu. Wcześniej te same rzeczy
   ustawiały trzy osobne bloki w różnych częściach pliku i wygrywał ten ostatni, a nie ten
   właściwy -- stąd „poprawki, które nic nie dawały". (Piotr, 4.09.2026) */
@media (max-width: 680px) {
  main { padding: 0 12px; margin-bottom: 24px; }
  .karta { padding: 16px; border-radius: 12px; margin-bottom: 12px; }
  h1 { font-size: 24px; }
  h2 { font-size: 17px; }

  /* PASEK ZAKŁADEK: pięć sztuk dzieli szerokość po równo, bez przewijania w bok. */
  header { padding: 8px 10px; gap: 6px; }
  header nav { gap: 4px; overflow-x: visible; width: 100%; }
  header nav button { padding: 9px 6px; font-size: 13px; flex: 1 1 0; min-width: 0;
    white-space: nowrap; }

  /* FORMULARZ: jedna kolumna. Dwa wąskie pola obok siebie są nie do trafienia kciukiem. */
  .rzad { grid-template-columns: 1fr; }
  .pozycja .pola { grid-template-columns: 1fr; }
  .pola-recepty { grid-template-columns: 1fr 1fr; }
  .pola-recepty label:first-child { grid-column: 1 / -1; }

  /* ZAKŁADKA „NOWA": wszystko na pełną szerokość, nic nie wystaje poza ekran. */
  label { display: block; margin-bottom: 12px; }
  input, select, textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  /* Listy wyboru mają długie opisy („DZ — dziecko do 18 lat...") -- niech tekst się nie rozpycha. */
  select { text-overflow: ellipsis; padding-right: 34px; }
  /* Przyciski pod polami (dodaj lek, weź z poprzedniej) na całą szerokość -- łatwiej trafić. */
  .rzad-przyciskow { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Na telefonie przyciski dodawania leku stoją OBOK SIEBIE, przy lewej krawędzi -- pełna
     szerokość robiła z nich dwa pasy przez cały ekran. (Piotr, 4.09.2026: „niech będzie
     z lewej".) Reszta rzędów zostaje jak była. */
  .rzad-przyciskow button { flex: 1 1 100%; min-height: 46px; }
  .rzad-przyciskow.rzad-lewo { justify-content: flex-start; }
  .rzad-przyciskow.rzad-lewo button { flex: 0 1 auto; }
  .zwijane summary, .podglad-podpisu summary { padding: 6px 0; font-size: 14px; }

  /* WYSZUKIWANIE LEKÓW: opakowania i odpłatności jako duże kafelki. */
  .wynik .opak button { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .odplatnosci button { flex: 1 1 calc(33% - 8px); min-height: 44px; }

  /* LISTA RECEPT: dane pacjenta nad przyciskami, przyciski po dwa w rzędzie. */
  .recepta { padding: 14px; }
  .recepta .naglowek { flex-direction: column; gap: 10px; }
  .recepta .naglowek > div:first-child { width: 100%; }
  .linia-akcji { width: 100%; flex-wrap: wrap; gap: 8px; }
  .linia-akcji button { flex: 1 1 calc(50% - 8px); font-size: 14px; min-height: 44px;
    padding: 10px 12px; overflow: visible; text-overflow: clip; }
  .linia-akcji button.glowny { flex: 1 1 100%; }
  .linia-akcji .znacznik { flex: 1 1 100%; text-align: center; font-size: 12px; padding: 6px 10px; }

  /* TABELE: łamią długie nazwy zamiast rozpychać stronę w bok. */
  table { font-size: 13px; table-layout: fixed; }
  td, th { word-break: break-word; }
  th { font-size: 11px; }

  /* „WYSTAW RECEPTĘ" JAKO ZWYKŁY PRZYCISK NA KOŃCU FORMULARZA.
     Przyklejony do dolnej krawędzi zasłaniał treść i wyglądał, jakby unosił się nad stroną.
     Teraz stoi tam, gdzie kończy się wypełnianie -- na dole, jak ostatnie pole. (Piotr, 4.09.2026) */
  #wystaw { position: static; width: 100%; font-size: 17px; min-height: 52px; margin-top: 4px; }
  #zakladka-nowa { padding-bottom: 8px; }
}

@media (min-width: 681px) {
  #wystaw { width: 100%; font-size: 16px; }
}

/* --- bardzo wąskie telefony --------------------------------------------------------------------- */
@media (max-width: 380px) {
  header nav button { padding: 8px 4px; font-size: 12px; }
  main { padding: 0 8px; }
  .karta { padding: 13px; }
  .linia-akcji button { font-size: 13px; padding: 10px 8px; }
}

/* --- wydruk ------------------------------------------------------------------------------------------ */
@media print {
  header, .pasek, #zakladka-nowa, #zakladka-certyfikaty, #zakladka-ustawienia, button {
    display: none !important;
  }
  body { background: #fff; }
  .karta, .recepta { border: none; box-shadow: none; }
}

/* SCHOWANE ZNACZY SCHOWANE. Klasa z `display:grid` jest mocniejsza niż domyślna reguła
   przeglądarki dla atrybutu `hidden` -- bez tego ekran logowania zostawał na wierzchu
   po zalogowaniu (zgłoszone przez Piotra 3.09.2026). */
[hidden] { display: none !important; }

/* Opakowanie z refundacja -- zielona ramka, zeby bylo widac je od razu na liscie wynikow. */
.wynik .opak button.refundowany { border-color: var(--dobrze); background: var(--dobrze-tlo); }
.wynik .opak button.refundowany:hover { background: #dcf5e6; }

/* Tanszy odpowiednik -- podpowiedz, nie nakaz. Stoi pod lekiem, z przyciskiem do podmiany. */
.tansze { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }
.tansze .tanszy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.tansze .tanszy button { margin-left: auto; }

/* TABLICZKA Z KWOTA: jedna duza liczba -- ile pacjent zaplaci -- i drobiazgi pod spodem. */
.kwota { background: var(--dobrze-tlo); border: 1px solid #bbf7d0; border-left: 5px solid var(--dobrze);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.kwota-duza { font-size: 15px; color: var(--dobrze); }
.kwota-duza b { font-size: 24px; letter-spacing: -.02em; }
.kwota-opis { font-size: 13px; color: var(--pod); margin-top: 6px; line-height: 1.6; }
.kwota-opis b { color: var(--tekst); }
.kwota-uwaga { font-size: 13px; color: var(--blad); font-weight: 600; margin-top: 4px; }
.kwota-pelna { background: #fff7ed; border-color: #fed7aa; border-left-color: var(--uwaga); }
.kwota-pelna .kwota-duza { color: var(--uwaga); }

/* Ten sam sklad, inna nazwa -- lista lekow zamiennych skladem, takze nierefundowanych. */
.podobne { background: var(--akcent-tlo); border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }
.podobne .tanszy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.podobne .tanszy button { margin-left: auto; }

/* Ta sama substancja, inaczej zapisana dawka -- podpowiedz do RECZNEJ oceny, stad zolte tlo. */
.podobne.inna-miara { background: var(--uwaga-tlo); border-color: #fde68a; }

/* PODPIS LEKARZA DO WGLĄDU -- zwinięty pod przyciskiem „Wystaw receptę". */
.podglad-podpisu { margin-top: 14px; }
.podglad-podpisu summary { cursor: pointer; color: #5b6b7f; font-size: 13px; }
.podglad-podpisu[open] summary { margin-bottom: 8px; }

/* POLA RZADKO UŻYWANE -- zwinięte, żeby nie odsuwały przycisku „Wystaw receptę". */
.zwijane { margin: 10px 0; }
.zwijane summary { cursor: pointer; color: #5b6b7f; font-size: 13px; }
.zwijane[open] summary { margin-bottom: 8px; }

/* Na wąskim telefonie przyciski przy recepcie ZOSTAJĄ duże i czytelne -- wcześniej stała tu
   reguła zmniejszająca je do 11 px i to ona wygrywała z ustawieniami wyżej. (Piotr, 4.09.2026) */

/* Poprawianie danych pacjenta na liście. */
.pacjent-edycja { border-top: 1px solid var(--linia); margin-top: 10px; padding-top: 12px; }
.pacjent-edycja .rzad-przyciskow { align-items: center; }

/* eWUŚ: kolor mówi wszystko, zanim ktokolwiek przeczyta napis. */
.stan-ewus:empty { display: none; }
.stan-ewus { margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: var(--tlo); color: var(--pod); }
.stan-ewus.zielony { background: var(--dobrze-tlo); color: var(--dobrze); font-weight: 600; }
.stan-ewus.czerwony { background: var(--blad-tlo); color: var(--blad); font-weight: 600; }
.stan-ewus.nieznany { background: var(--uwaga-tlo); color: var(--uwaga); }

/* Wybór leków z poprzedniej recepty. */
.wybor-lekow { border: 1px solid var(--linia); border-radius: 12px; padding: 14px; margin: 4px 0 14px; }
.wybor-glowa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wybor-lek { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px;
  border-radius: 8px; cursor: pointer; }
.wybor-lek:hover { background: var(--tlo); }
.wybor-lek input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }
.wybor-lek span { display: block; }
.wybor-lek em { display: block; font-style: normal; font-size: 13px; color: var(--pod); }
.wybor-lek.juz-jest { opacity: .55; cursor: default; }
.wybor-lek em.juz { color: var(--uwaga); }

/* Kto wystawia recepty -- w górnym pasku, przy zakładkach. */
.kto-wystawia { font-size: 13px; color: var(--pod); white-space: nowrap; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; }
.kto-wystawia b { color: var(--tekst); font-weight: 600; }
@media (max-width: 680px) {
  .kto-wystawia { flex-basis: 100%; margin-left: 0; text-align: center; font-size: 12px;
    white-space: normal; }
  header { flex-wrap: wrap; }
}
.stan-ewus { cursor: pointer; }
.ewus-ponow { display: block; font-style: normal; font-size: 12px; opacity: .75; margin-top: 2px;
  font-weight: 400; }

/* Jeden przycisk w rzędzie -- na środku, żeby nie wisiał przy lewej krawędzi. */
.rzad-przyciskow.rzad-srodek { justify-content: center; }
.rzad-przyciskow.rzad-lewo { justify-content: flex-start; }

/* ZŁY PESEL WIDAĆ NA POLU -- czerwona ramka i delikatne tło. Podpis pod spodem mówi, co jest
   nie tak, ale samo pole musi rzucać się w oczy, zanim recepta pójdzie do P1. */
input.pole-zle { border-color: #d33 !important; background: #fff5f5 !important; }
input.pole-zle:focus { box-shadow: 0 0 0 3px rgba(211, 51, 51, .18) !important; }

/* --- CERTYFIKATY W GABINECIE -------------------------------------------------------------------
   Trzy kafelki obok siebie na komputerze, jeden pod drugim na telefonie. Plakietka w rogu mówi
   stan, zanim ktokolwiek przeczyta tabelkę: zielona „ważny", żółta „kończy się…", szara „brak". */
/* JEDEN POD DRUGIM (Piotr, 4.09.2026) -- trzy kafelki obok siebie ściskały tabelkę z danymi
   certyfikatu do dwóch wąskich kolumn; w pionie każdy ma całą szerokość. */
.siatka-certyfikatow { display: flex; flex-direction: column; gap: 12px; }
.cert { border: 1px solid var(--linia); border-radius: 12px; padding: 16px; background: var(--karta); }
.cert.jest { border-left: 4px solid var(--dobrze); }
.cert.brak { border-left: 4px solid var(--linia); background: var(--tlo); }
.cert-glowa { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 8px; }
.cert-glowa b { font-size: 15px; }
.cert table { font-size: 13px; margin-top: 8px; }
.cert th { font-weight: 500; color: var(--pod); padding-right: 10px; white-space: nowrap; }
.cert td { word-break: break-word; }
.cert .stan { font-size: 12px; }
.plakietka { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  white-space: nowrap; }
.plakietka.dobrze { background: var(--dobrze-tlo); color: var(--dobrze); }
.plakietka.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.plakietka.brak { background: var(--tlo); color: var(--pod); }
.plakietka.zle { background: var(--blad-tlo); color: var(--blad); }
.cert.po-terminie { border-left: 4px solid var(--blad); }
.cert-alarm { background: var(--blad-tlo); color: var(--blad); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; margin: 8px 0; }
.cert-alarm.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }

/* Sprawdzenie połączenia: jedna linia — opis, wybór środowiska, przycisk. */
.polaczenie-p1 { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--linia); margin-top: 16px; padding-top: 16px; }
.polaczenie-p1 > div:first-child { flex: 1; min-width: 200px; }
.polaczenie-p1 p { margin: 2px 0 0; }
.polaczenie-p1 label { margin: 0; }
@media (max-width: 680px) {
  .polaczenie-p1 { flex-direction: column; align-items: stretch; }
  .polaczenie-p1 button { width: 100%; }
}
/* Pasek przypomnienia o certyfikatach -- żółty, a po terminie czerwony. */
.pasek-uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.pasek-zle { background: var(--blad-tlo); color: var(--blad); font-weight: 600; }

/* ================================================================================================
   WARSZTAT WYSTAWIANIA RECEPTY -- układ dwukolumnowy (Piotr, 4.09.2026).
   Po lewej praca: pacjent, wyszukiwarka, leki. Po prawej gotowa recepta, przyklejona do ekranu.
   Zasada wizualna: mniej ramek, więcej powietrza i hierarchii. Ramka zostaje tylko tam, gdzie
   coś jest osobnym przedmiotem (lek, certyfikat, pacjent); reszta oddziela się odstępem
   i wielkością pisma.
   ============================================================================================== */
/* Jedna kolumna -- panel po prawej zdjęty 4.09.2026. Szerokość wraca do czytelnej miary:
   ~50-70 znaków w wierszu to najwygodniejsze czytanie. */

/* KROK: cienka linia z numerem zamiast kolejnej ramki. Numer mówi kolejność bez tłumaczenia. */
.krok { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 18px; }
.krok-glowa, .panel-glowa { display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linia); }
.krok-glowa h2, .panel-glowa h2 { margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--pod); }
.krok-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; background: var(--akcent-tlo); color: var(--akcent);
  font-size: 13px; font-weight: 700; }

/* Etykiety drobne i szare, wartości duże -- hierarchia zamiast obwódek. */
.krok label { font-size: 12.5px; color: var(--pod); letter-spacing: .01em; }
.krok label input, .krok label select { font-size: 15.5px; color: var(--tekst); }

/* PANEL RECEPTY -- przyklejony, wąski, spokojny. */
.panel-recepty { position: sticky; top: 76px; }
.panel-srodek { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: 20px; box-shadow: var(--karta-cien); }
.p-osoba { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linia); margin-bottom: 12px; }
.p-osoba b { font-size: 17px; letter-spacing: -.01em; }
.p-osoba em { font-style: normal; font-size: 12.5px; color: var(--pod); }
.p-osoba .plakietka { align-self: flex-start; margin-top: 6px; }
.p-pusto { color: var(--pod); font-size: 13.5px; padding: 10px 0; }
.p-leki { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-leki li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.p-lek b { display: block; font-size: 14px; line-height: 1.35; }
.p-lek em { display: block; font-style: normal; font-size: 12px; color: var(--pod); margin-top: 2px; }
.p-kwota { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.p-suma { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia);
  font-size: 12.5px; color: var(--pod); }
.panel-srodek .blad { margin-top: 10px; }
.panel-srodek #wystaw { width: 100%; margin-top: 14px; font-size: 16px; min-height: 52px; }

/* Na telefonie i wąskim laptopie: jedna kolumna, panel na dole. */
@media (max-width: 1000px) {
  .warsztat { grid-template-columns: minmax(0, 1fr); }
  .panel-recepty { position: static; }
  .krok { padding: 18px; }
}

/* Etykieta nad polem: drobna, wielkimi literami, wyraźnie oddzielona od wartości. */
.krok label { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pod); }
.krok label input, .krok label select, .krok label textarea { margin-top: 6px; }

/* Wystawienie recepty -- osobny blok na dole kolumny, żeby przycisk nie zlewał się z listą. */
.wystawienie { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: 18px 24px 22px; }
.wystawienie #wystaw { width: 100%; min-height: 54px; font-size: 17px; }

/* WYSZUKIWARKA LEKÓW -- pierwsze pole, od którego zaczyna się recepta. Większe od pozostałych,
   z lupą i wyraźniejszą ramką; po kliknięciu podnosi się delikatnym cieniem. */
.szukajka { position: relative; margin-bottom: 16px; }
.szukajka-lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 18px; opacity: .5; pointer-events: none; }
.szukajka input {
  font-size: 17px; font-weight: 500; min-height: 58px; padding: 14px 16px 14px 48px;
  background: #fff; border: 2px solid var(--linia-mocna); border-radius: 12px;
}
.szukajka input::placeholder { color: #94a3b8; font-weight: 400; }
.szukajka input:hover { border-color: var(--akcent); background: #fff; }
.szukajka input:focus { border-color: var(--akcent); background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 6px 18px rgba(15, 23, 42, .06); }

/* PYTANIE O LEK -- odpowiedź złożona z cytatów.
   Cytat ma wyglądać jak cytat: wcięcie, kreska z boku, treść czytelna jak w książce.
   Znalezione słowo podkreślamy żółtym, żeby oko trafiało w nie od razu, bez czytania
   całego akapitu. Nazwa leku i numer punktu stoją nad cytatem -- bez nich nie da się
   sprawdzić w źródle, a to jest tu warunek. */
.problem.aktywny { border-color: var(--akcent); background: var(--akcent-tlo);
  color: var(--akcent); font-weight: 600; }

.odp-ile { color: var(--pod); font-size: 13px; margin: 14px 0 10px; }

.cytat-chpl { border-left: 3px solid var(--akcent); background: var(--karta);
  border-radius: 0 10px 10px 0; padding: 12px 14px; margin: 0 0 10px; }
.cytat-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin-bottom: 6px; }
.cytat-glowa b { font-size: 15px; }
.cytat-glowa .pod { font-size: 13px; }
/* NAZWA KLASY MUSI BYC INNA NIZ `.punkt-chpl` ze strony z wiedza o leku. Ta sama nazwa
   pomalowala tam wszystkie naglowki punktow na niebiesko. (Piotr, 5.09.2026: „usun te
   niebieskie tlo".) */
.cytat-punkt { margin-left: auto; background: var(--akcent-tlo); color: var(--akcent);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  white-space: nowrap; }
.cytat-tresc { margin: 0 0 8px; font-size: 14.5px; line-height: 1.62; }
.cytat-tresc mark { background: #fef3c7; color: inherit; border-radius: 3px; padding: 0 2px; }
.cytat-chpl .cichy { padding: 4px 0; font-size: 13px; }

/* NA TELEFONIE numer punktu przechodzi pod nazwę -- inaczej ściska nazwę leku do dwóch liter. */
@media (max-width: 560px) {
  .cytat-punkt { margin-left: 0; }
}

/* ŚWIEŻO WYSTAWIONA RECEPTA -- ta, którą przed chwilą kliknięto „Wystaw".
   Lista pokazuje same nazwiska, więc bez tego nowa recepta chowa się w grupie i lekarz
   szuka przycisku „Wyślij do P1". Obwódka gaśnie sama po kilku sekundach. */
.recepta.recepta-swieza {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 12px;
  animation: swieza-gasnie 6s ease-out forwards;
}
@keyframes swieza-gasnie {
  0%, 60% { outline-color: var(--akcent); }
  100% { outline-color: transparent; }
}

/* PRZEJŚCIE DO FINANSÓW -- to osobny program, więc i wygląda inaczej niż zakładki: nie jest
   zakładką, tylko wyjściem na zewnątrz. */
header nav .link-zewnetrzny { display: inline-flex; align-items: center; padding: 8px 14px;
  border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--pod); border: 1px solid var(--linia); background: var(--karta); }
header nav .link-zewnetrzny:hover { color: var(--akcent); border-color: var(--akcent); }

/* WIZYTA. Jedna kolumna, sekcje jak kartki, duże pola do pisania. Nagłówek z pacjentem
   przykleja się do góry: przy długim wywiadzie zawsze ma być widać, czyja to wizyta. */
.lista-wizyt { display: grid; gap: 8px; margin-top: 12px; }
.wizyta-wiersz { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center;
  text-align: left; background: var(--karta); border: 1px solid var(--linia); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font: inherit; }
.wizyta-wiersz:hover { border-color: var(--akcent); }
.wizyta-wiersz .kiedy { display: flex; flex-direction: column; }
.wizyta-wiersz .kiedy b { font-size: 14px; }
.wizyta-wiersz .kiedy span { font-size: 12.5px; color: var(--pod); }
.wizyta-wiersz .kto b { font-size: 15px; }
.wizyta-wiersz .kto .pod { display: block; font-size: 12px; }
.wizyta-wiersz .czym { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.wizyta-glowa { position: sticky; top: 0; z-index: 5; background: var(--tlo);
  border-bottom: 1px solid var(--linia); padding: 10px 0 12px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.wizyta-glowa .wizyta-kto { flex: 1 1 260px; }
.wizyta-glowa h2 { margin: 4px 0 2px; font-size: 21px; letter-spacing: -.01em; }
.wizyta-ubezp { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ubezp { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 12px; }
.ubezp.tak { background: var(--dobrze-tlo); color: var(--dobrze); }
.ubezp.nie { background: #fef2f2; color: var(--zle); }
.ubezp.nieznane { background: var(--tlo); color: var(--pod); }
.wizyta-kiedy { display: flex; gap: 10px; align-items: flex-end; }
.wizyta-kiedy label { font-size: 12px; color: var(--pod); display: flex; flex-direction: column; gap: 4px; }
.wizyta-kiedy input { padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--linia); border-radius: 9px; background: var(--karta); }
.wizyta-zapis { font-size: 12px; color: var(--dobrze); padding-bottom: 10px; }
.wizyta-zapis.pisze { color: var(--pod); }
.wizyta-zapis.blad { color: var(--zle); font-weight: 600; }
/* „Zapisz wizytę" stoi w jednej linii z dniem, godziną i napisem o zapisie -- na końcu paska,
   żeby nie rozpychał pól. Autozapis działa dalej; ten przycisk jest do zapisania świadomie. */
#wizyta-zapisz { margin-left: auto; margin-bottom: 2px; }

.wizyta-sekcja { margin-bottom: 14px; }
.wizyta-sekcja h3 { margin: 0 0 4px; font-size: 16px; }
.wizyta-sekcja textarea { width: 100%; margin-top: 8px; padding: 12px 14px; font: inherit;
  font-size: 15px; line-height: 1.6; border: 1.5px solid var(--linia); border-radius: 12px;
  background: #fbfcfd; resize: vertical; }
.wizyta-sekcja textarea:focus { outline: none; border-color: var(--akcent); background: #fff; }
.wizyta-pola { display: grid; gap: 12px; }
.wizyta-pola.dwa { grid-template-columns: 1fr 1fr; }
.wizyta-pola label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  color: var(--pod); }
.wizyta-pola input { padding: 10px 12px; font: inherit; font-size: 15px; color: var(--tekst);
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fbfcfd; }

.dodaj-usluge { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.dodaj-usluge .szukajka { flex: 1 1 260px; margin: 0; }
.dodaj-usluge input[type=number] { width: 92px; padding: 10px 12px; font: inherit;
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fbfcfd; }
.dodaj-usluge input.waskie { width: 120px; padding: 10px 12px; font: inherit;
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fbfcfd; }
.dodaj-usluge button { width: auto; }

.tabela-uslug { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14.5px; }
.tabela-uslug td { padding: 8px 6px; border-bottom: 1px solid var(--linia); }
.tabela-uslug td.ile, .tabela-uslug td.kwota { text-align: right; white-space: nowrap; }
.tabela-uslug tfoot td { border-bottom: none; border-top: 2px solid var(--linia-mocna);
  font-size: 15px; }

.lista-rozpoznan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-rozpoznan li { display: flex; align-items: center; gap: 8px; background: var(--tlo);
  border-radius: 9px; padding: 8px 12px; font-size: 14.5px; }
.lista-rozpoznan .kod { font-weight: 700; color: var(--akcent); }
.lista-rozpoznan button, .lista-zalacznikow button { margin-left: auto; width: auto; padding: 2px 8px; }

.narzedzia-wizyty { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.narzedzia-wizyty .narzedzie.wkrotce { opacity: .55; cursor: default; }
.narzedzia-wizyty .narzedzie .ikona { font-size: 20px; }
.lista-recept-wizyty { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-recept-wizyty li { background: var(--tlo); border-radius: 9px; padding: 8px 12px;
  font-size: 14px; }
.lista-zalacznikow { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-zalacznikow li { display: flex; align-items: center; gap: 10px; background: var(--tlo);
  border-radius: 9px; padding: 8px 12px; font-size: 14px; }

/* OKIENKO WYBORU PÓL DO DRUKU. */
.nakladka { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.okienko { background: var(--karta); border-radius: 16px; padding: 22px 24px; max-width: 420px;
  width: 100%; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); }
.okienko h3 { margin: 0 0 4px; font-size: 18px; }
.okienko .wybor { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 8px 0; }
.okienko .wybor input { width: auto; }

@media (max-width: 560px) {
  .wizyta-wiersz { grid-template-columns: 1fr; gap: 6px; }
  .wizyta-wiersz .czym { justify-content: flex-start; }
  .wizyta-pola.dwa { grid-template-columns: 1fr; }
  .wizyta-glowa { position: static; }
}

/* ============================================================================================
   MENU Z BOKU -- PRZEPISANE JEDEN DO JEDNEGO Z FINANSÓW CEM (css/sidebar.css).
   Piotr, 5.09.2026: „miałeś zrobić nam w menu po lewej stronie identyczne jak mamy w finanse".
   Te same wymiary (216 px), ta sama marka z kwadratem, te same KAFELKI pozycji (białe, cienka
   ramka, zaokrąglenie 9 px) i ta sama zasada koloru: wybrana zakładka bierze kolor swojej
   rodziny, a nie jeden niebieski dla wszystkiego. Poniżej 760 px menu wjeżdża jako szufladka.
   ============================================================================================ */
#program { display: grid; grid-template-columns: 216px minmax(0, 1fr);
  align-items: start; min-height: 100vh; }

#menu-boczne { grid-row: 1 / -1; width: 216px; position: sticky; top: 0; height: 100vh;
  background: #fff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;
  overflow: hidden; z-index: 30; }
.menu-marka { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid #eef2f7; }
.menu-znak { width: 34px; height: 34px; flex: none; border-radius: 10px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8 65%, #1e3a8a);
  box-shadow: 0 4px 10px -3px rgba(37, 99, 235, .5); }
.menu-tytul { font-weight: 700; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em;
  color: #0f172a; }
.menu-kto { font-size: 11px; color: #2563eb; font-weight: 600; line-height: 1.3; }
.menu-zamknij { display: none; margin-left: auto; width: auto; border: 0; background: none;
  color: #94a3b8; font-size: 20px; line-height: 1; padding: 4px; }

#menu-boczne nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 0; scrollbar-width: none; -ms-overflow-style: none; }
#menu-boczne nav::-webkit-scrollbar { display: none; }
.menu-grupa { border-bottom: 1px solid #f1f5f9; padding: 0 10px 4px; }
.menu-grupa:last-of-type { border-bottom: 0; }
.menu-grupa-tytul { padding: 6px 6px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }

/* KAFELEK POZYCJI -- dokładnie ten sam co w Finansach. */
#menu-boczne nav button, #menu-boczne nav .link-zewnetrzny {
  position: relative; width: 100%; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #edf1f6; padding: 7px 12px; margin: 0 0 3px;
  font: inherit; font-size: 13.5px; line-height: 1.25; color: #334155; text-align: left;
  text-decoration: none; border-radius: 9px; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease; }
#menu-boczne nav button:hover, #menu-boczne nav .link-zewnetrzny:hover {
  background: #f8fafc; border-color: #dde5ef; }
#menu-boczne nav button span, #menu-boczne nav .link-zewnetrzny span {
  width: 20px; flex: none; text-align: center; font-size: 13px; }
/* Wybrana zakładka bierze kolor swojej rodziny -- tak jak w Finansach. */
#menu-boczne nav button.aktywna {
  background: color-mix(in srgb, var(--sekcja, #2563eb) 8%, #fff);
  border-color: color-mix(in srgb, var(--sekcja, #2563eb) 35%, #edf1f6);
  color: var(--sekcja, #2563eb); font-weight: 600; }
#menu-boczne #wyloguj { margin: 0; width: 100%; border-radius: 0; border: 0;
  border-top: 1px solid #eef2f7; padding: 12px 16px; text-align: center; }

.pasek-gorny { display: none; }
.menu-cien { display: none; }
.menu-hamburger { display: none; }

/* TREŚĆ BIERZE CAŁĄ STRONĘ. Do 5.09.2026 stał tu słupek 900 px -- dobry na telefonie, ale na
   laptopie zostawiał pół ekranu pustego. (Piotr: „zakładka wizyta, gabinet są małe na stronie
   -- powinny się dopasować do strony".) Czytelność linijki pilnujemy tam, gdzie się PISZE:
   pola tekstowe i karty mają własne szerokości. */
#program main { min-width: 0; max-width: none; margin: 22px 0 96px; padding: 0 24px; }
/* Paski ostrzegawcze zostają widoczne -- certyfikat po terminie zatrzymuje wystawianie recept
   w środku dnia przyjęć, więc to ostatnia rzecz, którą wolno schować. */
#program > .pasek { margin: 0; }

@media (max-width: 760px) {
  #program { display: block; }
  #menu-boczne { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: 82vw;
    max-width: 300px; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 10px 0 40px rgba(15, 23, 42, .22); border-right: 0; }
  #menu-boczne.otwarte { transform: translateX(0); }
  #menu-boczne nav button, #menu-boczne nav .link-zewnetrzny { padding-top: 10px;
    padding-bottom: 10px; font-size: 14.5px; }
  .menu-zamknij { display: block; }
  .menu-cien { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .32);
    z-index: 25; }
  .pasek-gorny { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 20; }
  .pasek-gorny-tytul { font-weight: 700; font-size: 16px; }
  .menu-hamburger { display: flex; align-items: center; justify-content: center; width: 38px;
    height: 38px; flex: none; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
    font-size: 17px; color: #334155; }
  #program main { margin: 16px auto 96px; padding: 0 14px; }
}

/* SKĄD TU JESTEŚ -- pasek nad formularzem recepty, gdy powstaje ona do konkretnej wizyty. */
.pasek-wizyty { display: flex; align-items: center; gap: 12px; background: var(--akcent-tlo);
  color: var(--akcent-ciemny); border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.pasek-wizyty button { width: auto; margin-left: auto; }

/* FINANSE JAKO PODPIĘTY MODUŁ -- ich zakładki w naszym menu, ale jako odnośniki.
   Nagłówek oddziela je od tego, co rysuje sam gabinet: żeby było wiadomo, że klik otwiera
   drugi program w nowej karcie. */
.menu-naglowek-modulu { margin: 10px 10px 2px; padding: 8px 10px 4px; border-top: 1px solid #e2e8f0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #b45309; }
.menu-grupa-finanse .link-zewnetrzny { font-size: 13px; color: #475569; }

/* FINANSE W ŚRODKU GABINETU -- ta sama strona, to samo menu po lewej.
   Ramka zajmuje całą wysokość okna poniżej paska, żeby wyglądała jak zwykła zakładka,
   a nie jak okienko w okienku. */
.pasek-modulu { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pod);
  padding: 0 0 8px; }
.pasek-modulu b { color: var(--tekst); }
.pasek-modulu a { margin-left: auto; font-size: 12.5px; color: var(--pod); text-decoration: none;
  border: 1px solid var(--linia); border-radius: 999px; padding: 4px 12px; }
.pasek-modulu a:hover { color: var(--akcent); border-color: var(--akcent); }
/* NA CZAS FINANSÓW TREŚĆ IDZIE NA CAŁĄ SZEROKOŚĆ. Ich tabele (przychody, koszty, KSeF) nie
   mieszczą się w słupku 900 px -- na laptopie wyglądało to jak patrzenie przez dziurkę. */
#program main.na-caly-ekran { max-width: none; margin: 0; padding: 10px 14px 0; }
.ramka-finansow { display: block; width: 100%; height: calc(100vh - 56px);
  border: 1px solid var(--linia); border-radius: 12px; background: #fff; }
#zakladka-finanse { margin-bottom: 0; }
@media (max-width: 760px) {
  #program main.na-caly-ekran { padding: 8px 10px 0; }
  .ramka-finansow { height: calc(100vh - 108px); }
}

/* SZEROKIE EKRANY: WIZYTA I LEKI KORZYSTAJĄ Z CAŁEGO LAPTOPA.
   (Piotr, 5.09.2026: „nowa wizyta powinna dopasować się do ekranu", „leki tak samo".)
   Formularz recepty i Gabinet zostają w wąskim słupku -- tam czyta się wiersz po wierszu
   i szeroka linijka tylko męczy oczy. */
#program main.na-caly-ekran { max-width: none; }

/* WIZYTA JEDNYM SŁUPKIEM, NA CAŁĄ SZEROKOŚĆ STRONY.
   Dwa słupki wyglądały porządnie, ale każde pole miało wtedy pół ekranu -- a przy wywiadzie
   i badaniu liczy się miejsce na pisanie. (Piotr, 5.09.2026: „jak dodaję wizytę, to pole jest
   na połowę strony, a powinno dopasowywać się do strony".) */
}

/* PIN ROBERTA W MENU -- ta sama zasłona co w Finansach (jego liczby nie mają świecić przez
   ramię). Nie jest to zabezpieczenie danych, tylko kurtyna na ekran. */
/* PIN JEDEN POD DRUGIM. Słupek menu ma 216 px i ucina to, co się nie mieści -- pole obok
   przycisku nie miało gdzie stanąć i wyglądało, jakby go w ogóle nie było.
   (Piotr, 5.09.2026: „nie ma miejsca na pin".) */
.pin-robert { display: block; padding: 2px 0 6px; }
.pin-robert input { display: block; width: 100%; max-width: 100%; box-sizing: border-box;
  min-width: 0; border: 1px solid var(--linia-mocna); border-radius: 8px; padding: 8px 10px;
  margin: 0 0 6px; font: inherit; font-size: 15px; letter-spacing: .25em; text-align: center;
  background: #fff; }
.pin-robert input.pole-zle { border-color: var(--blad); background: var(--blad-tlo); }
.pin-robert button { display: block; width: 100%; min-height: 34px; padding: 6px 12px;
  font-size: 13px; }
.zamek-robert { width: 100%; background: none; border: 1px dashed var(--linia-mocna);
  color: var(--pod); font-size: 12.5px; min-height: 34px; box-shadow: none; }

/* Pozycje Finansów nie mają ikon -- tak jak w oryginale. Wyrównujemy je do tekstu naszych
   zakładek, żeby słupek czytało się jednym rzutem oka. (Piotr, 5.09.2026: „po co te kropki".) */
.menu-grupa-finanse button { padding-left: 12px; }

/* SZEROKI EKRAN: KARTY UKŁADAJĄ SIĘ OBOK SIEBIE.
   Gabinet ma kilkanaście osobnych kart (dane praktyki, lekarz, certyfikaty, P1, poczta, eWUŚ) --
   jedna pod drugą robiła z tego kilometr do przewijania. Recepty i wizyty zostają w jednym
   słupku tam, gdzie się je składa. */
/* GABINET: JEDEN SŁUPEK, ALE NA CAŁĄ SZEROKOŚĆ STRONY.
   Karty idą jedna pod drugą, tak jak było (Piotr: „po co zmieniałeś w 2 piony") -- i zajmują
   całą stronę, bo o to poprosił zaraz potem („zakładkę gabinet dopasuj do szerokości strony").
   Same pola w środku kart mają swoje szerokości, więc nie rozjeżdżają się na całą linijkę. */
#zakladka-ustawienia { max-width: none; }

@media (min-width: 1180px) {
  #zakladka-lista .karta, #zakladka-leki .karta { max-width: none; }
  /* Formularz recepty zostaje czytelnym słupkiem -- tam wpisuje się wiersz po wierszu. */
  #zakladka-nowa { max-width: 980px; }
}

/* Podpowiedź pod „Otwórz Finanse" -- widoczna tylko do pierwszego zalogowania w ramce. */
.pod-menu { padding: 4px 12px 2px; font-size: 11.5px; line-height: 1.35; color: var(--pod); }

/* WIZYTA NA CAŁĄ SZEROKOŚĆ STRONY (Piotr, 5.09.2026: „nowa wizyta ma dostosować się do całej
   szerokości strony"). Sekcje rozciągają się razem z oknem, a pola w środku razem z sekcjami --
   nic nie zostaje przyklejone do lewej krawędzi ze sztywną szerokością. */
#zakladka-wizyta, #wizyta-widok, #wizyty-lista-widok { width: 100%; max-width: none; }
#wizyta-widok .karta { width: auto; }
.wizyta-sekcja textarea { width: 100%; box-sizing: border-box; }
.dodaj-usluge .szukajka { flex: 1 1 320px; }
.tabela-uslug { width: 100%; }

/* ZNACZEK PRZY POZYCJI MENU -- ten sam co w Finansach (`.cem-nav-icon`): mały kwadracik
   w kolorze rodziny zakładek. Kolor niesie znaczenie: niebieski przychód, zielony pieniądze
   pacjentów, bursztyn koszty, fiolet ludzie, pomarańczowy Robert. */
.ikona-menu { width: 20px; height: 20px; flex: none; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 11px; }
#menu-boczne nav button .ikona-menu { width: 20px; }
/* Nasze własne zakładki dostają taki sam kwadracik, w kolorze swojej sekcji. */
#menu-boczne .menu-grupa > button > span:first-child {
  width: 20px; height: 20px; flex: none; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  background: var(--sekcja, #64748b); color: #fff; }

/* KALENDARZ WIZYT. Miesiąc, tydzień albo dzień -- ta sama treść, inny krok.
   Dzień dzisiejszy ma obwódkę, dni z sąsiednich miesięcy są przygaszone, a wizyta w kratce
   to mały wiersz: godzina, nazwisko i numer gabinetu. */
.pasek-kalendarza { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 10px; }
.pasek-kalendarza strong { font-size: 17px; margin-left: 6px; }
.pasek-kalendarza .uklady { display: flex; gap: 6px; }
.pasek-kalendarza button.aktywna { background: var(--akcent); border-color: var(--akcent);
  color: #fff; }
.pasek-gabinetu { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 10px 0 14px; border-bottom: 1px solid var(--linia); margin-bottom: 12px; }
.pasek-gabinetu .etykieta { font-size: 13px; font-weight: 600; color: var(--pod);
  text-transform: uppercase; letter-spacing: .05em; align-self: center; }
.pasek-gabinetu label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--pod); }
.pasek-gabinetu input { width: 130px; padding: 8px 10px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--linia); border-radius: 9px; background: #fbfcfd; }
.pasek-gabinetu .pod { align-self: center; }

.kal-naglowki { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pod);
  padding: 0 2px 6px; }
.kal-siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-siatka.tydzien .kal-komorka { min-height: 220px; }
.kal-komorka { min-height: 108px; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 10px; padding: 6px; cursor: pointer; display: flex; flex-direction: column;
  gap: 4px; }
.kal-komorka:hover { border-color: var(--akcent); }
.kal-komorka.obcy { background: var(--tlo); opacity: .55; }
.kal-komorka.dzis { border-color: var(--akcent); box-shadow: 0 0 0 2px var(--akcent-tlo); }
.kal-numer { font-size: 12.5px; font-weight: 700; color: var(--tekst); }
.kal-numer .pod { font-weight: 400; }
.kal-wizyta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; width: 100%;
  text-align: left; font: inherit; font-size: 12.5px; min-height: 0; padding: 4px 7px;
  border-radius: 7px; border: 1px solid var(--akcent-tlo); background: var(--akcent-tlo);
  color: var(--akcent-ciemny); box-shadow: none; }
.kal-wizyta:hover { border-color: var(--akcent); background: #fff; }
.kal-wizyta.zamknieta { background: var(--dobrze-tlo); border-color: var(--dobrze-tlo);
  color: var(--dobrze); }
.kal-wizyta .godz { font-weight: 700; }
.kal-wizyta .kto { flex: 1 1 auto; overflow-wrap: anywhere; }
.kal-wizyta .gab { font-size: 11px; color: var(--pod); }
.kal-dzien { display: grid; gap: 8px; max-width: 640px; }
.kal-dzien .kal-wizyta { font-size: 15px; padding: 12px 14px; }
.kal-dodaj { margin-top: 8px; width: auto; justify-self: start; }

@media (max-width: 760px) {
  .kal-naglowki { display: none; }
  .kal-siatka { grid-template-columns: 1fr; }
  .kal-komorka { min-height: 0; }
  .kal-komorka.obcy { display: none; }
}

/* SIATKA GODZIN W DNIU I TYGODNIU. Wiersz = jedna kratka czasu (5-30 minut, do wyboru).
   Klik w pustą kratkę zakłada wizytę na tę godzinę; zapisana wizyta otwiera się dwuklikiem. */
.kal-godziny { display: grid; gap: 0; border: 1px solid var(--linia); border-radius: 12px;
  overflow: hidden; background: var(--karta); }
.kal-wiersz { display: grid; grid-template-columns: 62px repeat(var(--dni, 1), 1fr);
  border-bottom: 1px solid var(--linia-cicha); min-height: 26px; }
.kal-wiersz:last-child { border-bottom: 0; }
.kal-godzina { font-size: 11.5px; color: var(--pod); padding: 2px 8px; text-align: right;
  border-right: 1px solid var(--linia); }
.kal-kratka { border-right: 1px solid var(--linia-cicha); padding: 1px 3px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; }
.kal-kratka:last-child { border-right: 0; }
.kal-kratka:hover { background: var(--akcent-tlo); }
.kal-kratka.zajeta { cursor: default; }
.kal-kratka.zajeta:hover { background: none; }
.kal-godziny-naglowek { display: grid; grid-template-columns: 62px repeat(7, 1fr); gap: 0;
  font-size: 12px; color: var(--pod); padding: 0 0 6px; text-align: center; }
.kal-godziny-naglowek .dzis { color: var(--akcent); font-weight: 700; }

/* Szukany pacjent świeci, reszta przygasa -- chodzi o to, ŻEBY GO ZOBACZYĆ w miesiącu. */
.kal-wizyta.znaleziona { background: #fef3c7; border-color: #fcd34d; color: #92400e;
  font-weight: 600; }
.kal-wizyta.przygaszona { opacity: .35; }
.kal-wizyta.wybrana { outline: 2px solid var(--akcent); outline-offset: 1px; }
.szukajka-kal { flex: 1 1 260px; max-width: 340px; margin: 0; }
#kal-skala .etykieta { font-size: 11.5px; color: var(--pod); text-transform: uppercase;
  letter-spacing: .05em; align-self: center; margin-right: 4px; }

@media (max-width: 760px) {
  .kal-wiersz { grid-template-columns: 48px repeat(var(--dni, 1), 1fr); }
  .kal-godziny-naglowek { grid-template-columns: 48px repeat(7, 1fr); font-size: 10.5px; }
}

/* GABINET POKAZANY W RAMCE INNEGO PROGRAMU (np. kalendarz w Finansach u Oli).
   Chowamy własne menu i pasek górny -- tamten program ma swoje, a dwa obok siebie tylko mylą. */
body.w-ramce #menu-boczne, body.w-ramce .pasek-gorny, body.w-ramce .menu-cien { display: none; }
body.w-ramce #program { display: block; }
body.w-ramce #program main { margin: 12px auto 24px; padding: 0 14px; }

/* MIESIĄC: nazwisko w jednej linijce z godziną, urwane kropkami, gdy się nie mieści.
   Kratka dnia rośnie do pięciu wizyt, potem sama się przewija -- dzień z dziesięcioma wizytami
   nie ma rozpychać całego miesiąca. */
.kal-siatka:not(.tydzien) .kal-komorka { min-height: 118px; max-height: 190px; overflow-y: auto; }
.kal-siatka:not(.tydzien) .kal-wizyta { display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.kal-siatka:not(.tydzien) .kal-wizyta .godz { margin-right: 5px; }
.kal-siatka:not(.tydzien) .kal-wizyta .kto { display: inline; }
.kal-siatka:not(.tydzien) .kal-wizyta .gab { display: none; }

/* Zgoda na wiadomości w danych pacjenta -- jedna kratka w linii, jak w „Dodaj przychód". */
.wybor-w-linii { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px;
  font-size: 14px; color: var(--tekst); }
.wybor-w-linii input { width: auto; margin-top: 3px; }
.wizyta-pola select { padding: 10px 12px; font: inherit; font-size: 15px; color: var(--tekst);
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fbfcfd; }

/* GWIAZDKA PRZY PACJENCIE -- ta sama informacja, co w Finansach („widok czy to vip czy nie").
   Gabinet jej nie liczy: dostaje samo tak/nie w adresie, bez kwot. */
.plakietka-vip{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:#fef3c7;color:#92400e;font-size:11.5px;font-weight:700;vertical-align:middle}

/* Ten sam wiersz mowi i o bledzie, i o powodzeniu -- zielony znaczy „zrobione". */
.blad.dobrze{color:var(--dobrze)}
/* Ekran „Wczytuję…" -- stoi przez ulamek sekundy miedzy wejsciem a programem. */
#wczytywanie p{margin:0;font-size:14px}

/* Pacjent to jedno pole na cale nazwisko i imie -- bierze cala szerokosc wiersza. */
.wizyta-pola.dwa .szeroko{grid-column:1 / -1}

/* „Jest w P1, bez kodu" -- recepta wystawiona naprawde, ale bez kodu dla pacjenta.
   Nie ma przy niej przycisku wysylki: drugie klikniecie zrobiloby druga prawdziwa recepte. */
.plakietka-uwaga{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}