/* 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 */ /* TLO KAFELKA GRUPY W MENU -- wyglad wybrany przez Piotra 21.09.2026. */ --menu-kafel: #f4f6f9; --akcent-ciemny: #1d4ed8; --akcent-tlo: #eff5ff; --granat: #1b4f9c; /* granat z wydruków Centrum Oceny Zdrowia */ --dobrze: #15803d; --dobrze-tlo: #f0fdf4; --blad: #b91c1c; /* ALIAS NA TE SAMA BARWE. Dwa miejsca uzywaly `--zle`, ktore nigdy nie istnialo -- „✕ brak ubezpieczenia" i „NIE ZAPISANO" wychodzily CZARNE zamiast czerwonych. Poprawione 5.09.2026; alias zostaje, zeby ta sama literowka nie kosztowala drugi raz. */ --zle: #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; } /* KRATKA TO KRATKA, NIE POLE (Piotr, 19.09.2026, ze zrzutem okna „Drukuj wizytę": „to w ogóle tego nie da się obsługiwać"). Reguła wyżej daje KAŻDEMU polu 48 px wysokości, 100% szerokości i wewnętrzny odstęp -- i brała też kwadraciki do zaznaczania. Jeden wiersz „Dane pacjenta" zajmował przez to ponad sto pikseli, więc jedenaście pól nie mieściło się na ekranie, a przyciski zostawały pod spodem, poza zasięgiem. Kratki i kółka mają swoją wielkość i basta. */ input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; min-width: 0; padding: 0; flex: 0 0 auto; margin: 0; accent-color: var(--akcent); cursor: pointer; } 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); } /* ZAMKNIĘTA WIZYTA -- „Otwórz ponownie" (Piotr, 22.09.2026: „niech będzie na jakiś pomarańczowy"). */ button.pomaranczowy { background: #ea580c; border-color: #ea580c; color: #fff; } button.pomaranczowy:hover { background: #c2410c; border-color: #c2410c; } 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; } h h h h h 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); } /* Przy każdym leku osobno: „wykupiony 25 września" / „jeszcze niewykupiony" (26.09.2026). */ .lek-p1 { font-size: 11px; margin-right: 6px; color: var(--pod); } .lek-p1.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; } h h /* 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 .recepta-glowa { flex-direction: column; gap: 10px; } .recepta .recepta-glowa > 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) { h 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; } /* DRUGI TELEFON (1.10.2026): mały znaczek kraju przy obcym numerze i cichy „+ drugi numer". */ .kraj-tel { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 0 4px; margin-right: 4px; border: 1px solid var(--linia); border-radius: 4px; color: #4a5a70; background: #f3f6fa; line-height: 15px; vertical-align: 1px; } .pacjent-edycja .dodaj-telefon2 { font-size: 12px; padding: 0; margin: -4px 0 6px; } .pacjent-edycja label.telefon2 .pod { font-weight: normal; } /* 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); } /* USZKODZONA REGUŁA -- NAPRAWIONA 14.09.2026. Stały tu trzy samotne kropki zamiast nazw selektorów. Kropka nie jest selektorem, więc przeglądarka odrzuca taką regułę -- a razem z nią POŁYKA wszystko aż do następnej klamry, czyli cały blok `@media` poniżej. Skutek: na telefonie górny pasek się nie zawijał. Uszkodzenie jest starsze niż wszystkie paczki przywracania (jest już w tej z 10.09), więc oryginalnych nazw nie da się odzyskać. Nie wymyślam ich: reguła „kto wystawia recepty" i tak stoi niżej pod `.menu-kto`, a `header` w `@media` broni się sam. Znalezione przez `sprawdz-styl-sie-parsuje.mjs`, dopisany tego samego dnia. */ @media (max-width: 680px) { 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); } /* ROZPOZNANIE = NIEBIESKIE, LEK = ZIELONY (Piotr, 26.09.2026: gubił się, które pole jest które). Kolor ramki stoi zawsze, nie tylko po najechaniu -- i napis nad polem nie znika przy pisaniu. */ .szukajka-podpis { display: block; font-size: 15px; font-weight: 700; margin: 0 0 6px 2px; } .szukajka-podpis-rozpoznanie { color: var(--akcent); } .szukajka-podpis-lek { color: var(--dobrze); } .szukajka-rozpoznanie input, .szukajka-rozpoznanie input:hover, .szukajka-rozpoznanie input:focus { border-color: var(--akcent); } .szukajka-lek input, .szukajka-lek input:hover, .szukajka-lek input:focus { border-color: var(--dobrze); } .szukajka-lek input:focus { box-shadow: 0 0 0 4px rgba(21, 128, 61, .12), 0 6px 18px rgba(15, 23, 42, .06); } .szukajka-rozpoznanie .szukajka-lupa, .szukajka-lek .szukajka-lupa { opacity: .9; } /* 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. */ h h /* 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; } /* PASEK POD NAZWISKIEM MUSI SIE ZAWIJAC. Stoi w nim piec rzeczy: ubezpieczenie, "sprawdz w eWUS", "Poprzednie wizyty", "Cala dokumentacja" i "Usun wizyte". Kazdy przycisk ma white-space: nowrap, a rzad nie zawijal sie wcale -- wiec na waskim ekranie OSTATNI wypadal poza krawedz. Ostatni byl kosz, dodany 15.09.2026, i Piotr zglosil to tego samego wieczoru: "nie ma kosza". To nie byl brak przycisku, tylko przycisk za krawedzia ekranu. */ .wizyta-ubezp { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .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(--blad); } .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(--blad); 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. */ /* Reguła `#wizyta-zapisz { margin-left:auto }` stała tu od czasów, gdy przycisk siedział w prawym górnym rogu karty. Przycisk wrócił 10.09.2026 na DÓŁ, do rzędu z „Drukuj" i „Poproś o opinię" -- a stara reguła odpychała go na prawy koniec tego rzędu i rwała go na pół. */ .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; } /* RZĄD „DODAJ USŁUGĘ" OPISUJE JEDEN BLOK -- TEN NA KOŃCU PLIKU. Stały tu jego starsze reguły (44 px wysokości, `min-width:90px`), a niżej, w części „DWA RZĘDY DODAJ", stoją te same własności raz jeszcze -- z innymi liczbami. Przy równej sile wygrywa późniejsza, więc ta połowa pliku od dawna niczego nie ustawiała, a przy każdej poprawce wyglądała, jakby ustawiała. Została jedna reguła: wcięcie pod lupę ma większą siłę zapisu i naprawdę działa. */ .dodaj-usluge .szukajka .szukajka-lupa ~ input { padding-left: 34px; } @media (max-width: 760px) { .dodaj-usluge { flex-wrap: wrap; } .dodaj-usluge .pole-usluga { flex: 1 1 100%; } } .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; } /* PASEK „WYSTAW" W JEDNEJ LINII (Piotr, 20.09.2026: „masz pasek wystaw: receptę, leki, skierowanie, badania, BIOVIS, zaświadczenie, zwolnienie. Wszystko ma być w jednej linii. Nie ma być w dwóch liniach"). Było `repeat(auto-fit, minmax(170px, 1fr))` -- przy siedmiu kafelkach to 1262 px, więcej niż szerokość karty, więc ostatnie zjeżdżały do drugiego rzędu. `grid-auto-flow: column` stawia WSZYSTKIE dzieci w jednym rzędzie, ile by ich nie było -- i to jest tu kluczowe, bo liczba kafelków zależy od kupionych klocków (BIOVIS ma nie każdy). Sztywne `repeat(7, ...)` psułoby się przy sześciu i przy ośmiu. Kafelek robi się PIONOWY: ikona na górze, nazwa pod nią. Poziomy (ikona obok nazwy) nie zmieści „Zaświadczenia" w 145 px. CO SIĘ STANIE, JEŚLI TO ZMIENISZ: przy ósmym kafelku zrobi się ciasno -- wtedy skraca się opisy, a nie wraca do zawijania. Na wąskim ekranie (reguła niżej) rząd celowo zawija. */ .narzedzia-wizyty { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .narzedzia-wizyty .narzedzie { grid-template-columns: 1fr; grid-template-areas: 'ikona' 'tytul' 'opis'; text-align: center; align-items: start; gap: 2px; padding: 10px 8px; border-radius: 12px; min-width: 0; } .narzedzia-wizyty .narzedzie .tytul { font-size: 13.5px; } .narzedzia-wizyty .narzedzie .opis { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; } .narzedzia-wizyty .narzedzie.wkrotce { opacity: .55; cursor: default; } .narzedzia-wizyty .narzedzie .ikona { font-size: 19px; } .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; } /* KODY LABORATORIÓW -- po jednym kafelku na laboratorium (19.09.2026). */ .kod-lab-wiersz { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--linia); border-radius: 10px; padding: 10px 12px; margin: 0 10px 10px 0; background: var(--karta); } .kod-lab-wiersz b { font-size: 14px; } /* PANEL ZARZĄDZANIA GABINETEM -- spis po lewej, jedna karta na ekranie (Piotr, 19.09.2026). Na szerokim ekranie spis stoi pionowo przy krawędzi, na telefonie zawija się w rząd pastylek. CO SIĘ STANIE, JEŚLI TO ZMIENISZ: bez `position: sticky` spis ucieka do góry przy dłuższej karcie (certyfikaty, godziny) i trzeba przewijać w górę, żeby przejść do następnej rzeczy. */ .panel-spis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--linia); } .panel-spis button { font: inherit; font-size: 14px; font-weight: 600; color: var(--tekst); background: var(--karta); border: 1.5px solid var(--linia-mocna); border-radius: 999px; padding: 9px 16px; min-height: 42px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .panel-spis button:hover { border-color: var(--akcent); color: var(--akcent); } .panel-spis button.wybrany { background: var(--akcent); border-color: var(--akcent); color: #fff; } /* 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; } /* OKNO WYBORU DO DRUKU -- PRZEBUDOWANE 19.09.2026 (Piotr, ze zrzutem: „to w ogóle tego nie da się obsługiwać (...) ułóż mi to, żeby było prosto, żeby wszystko tam pracowało, przesuwało się sprawnie i żeby to było praktyczne"). Zasada jest jedna: JEDNO MIEJSCE, KTÓRE SIĘ PRZEWIJA. Tytuł stoi na górze, przyciski na dole, a przewija się wyłącznie środek. Pola układają się w dwie kolumny, więc widać je naraz. */ .okienko.okno-druku { max-width: 620px; padding: 0; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .okno-druku > .glowa-okna { padding: 16px 20px 12px; border-bottom: 1px solid var(--linia); flex: 0 0 auto; } .okno-druku > .glowa-okna h3 { margin: 0; font-size: 17px; } .okno-druku > .glowa-okna .pod { margin: 4px 0 0; font-size: 13px; } .okno-druku > .srodek-okna { padding: 12px 20px 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; } .okno-druku > .stopka-okna { padding: 12px 20px 14px; border-top: 1px solid var(--linia); flex: 0 0 auto; display: flex; gap: 10px; align-items: center; background: var(--karta); } .okno-druku > .stopka-okna .rzad-przyciskow { margin: 0; } /* DWIE KOLUMNY PÓL. Wiersz jest niski i cały klikalny -- palec trafia w napis, nie tylko w kwadracik. */ .okno-druku .siatka-pol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; } .okno-druku .siatka-pol .wybor { margin: 0; padding: 7px 8px; border-radius: 8px; font-size: 14.5px; cursor: pointer; } .okno-druku .siatka-pol .wybor:hover { background: var(--tlo); } .okno-druku .osobno { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linia); display: grid; gap: 4px; } .okno-druku .osobno .wybor { margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; } .okno-druku .osobno .wybor:hover { background: var(--tlo); } .okno-druku .wybor-listy { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 14.5px; } .okno-druku .wybor-listy select { width: auto; flex: 1 1 auto; min-height: 40px; padding: 8px 12px; font-size: 15px; } .okno-druku .zaznacz-wszystko { display: flex; gap: 8px; margin: 0 0 8px; } .okno-druku .zaznacz-wszystko button { font-size: 13px; padding: 6px 12px; min-height: 34px; } @media (max-width: 560px) { .okno-druku .siatka-pol { grid-template-columns: 1fr; } .nakladka { padding: 10px; align-items: flex-end; } .okienko.okno-druku { max-height: 92vh; } } @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: 100dvh; } #menu-boczne { grid-row: 1 / -1; width: 216px; position: sticky; top: 0; height: 100dvh; background: #fff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; z-index: 30; } /* ZNAK „SG" ODSWIEZA PROGRAM (Piotr, 13.09.2026) -- wiec ma wygladac na klikalny. */ .menu-marka { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eef2f7; cursor: pointer; } .menu-marka:hover .menu-znak { box-shadow: 0 4px 14px -2px rgba(37, 99, 235, .75); } .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ć. */ /* WSZYSTKO POZA MENU STOI W DRUGIEJ KOLUMNIE -- WPROST, A NIE „SAMO SIĘ UŁOŻY". (Piotr, 14.09.2026: „ani kalendarz się nie wyświetla (...) nic się nie wyświetla".) `#menu-boczne` ma `grid-row: 1 / -1`, ale w siatce BEZ ZDEFINIOWANYCH WIERSZY `-1` znaczy „koniec siatki jawnej", czyli wiersz pierwszy. Menu zajmowało więc jedno pole, a nie całą kolumnę -- i reszta układała się sama, po kolei, wpadając raz do lewej, raz do prawej. Dopóki wszystkie paski ostrzegawcze były schowane, przypadek działał na naszą korzyść. Gdy zapalił się choć JEDEN pasek, `main` lądował w KOLUMNIE MENU: 216 pikseli zamiast 1184. Menu było, treść była -- ale ściśnięta do paska szerokości menu i niewidoczna. Teraz nic nie zależy od kolejności: menu trzyma kolumnę pierwszą, wszystko inne drugą. */ /* MENU TRZYMA CAŁĄ KOLUMNĘ, NIE JEDEN WIERSZ. `1 / -1` liczy się do końca siatki JAWNEJ, a ta nie ma zdefiniowanych wierszy -- więc menu zajmowało jeden wiersz, a wszystko pod nim schodziło NIŻEJ, poza ekran. `span 99` obejmuje każdy wiersz, który się zrobi, niezależnie od tego, ile pasków ostrzegawczych się zapali. */ #program > #menu-boczne { grid-column: 1; grid-row: 1 / span 99; } #program > header, #program > .pasek, #program > main { grid-column: 2; } #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; } /* `dvh` ZAMIAST `vh` -- ROZNICA TO PASEK ADRESU TELEFONU. Znalezisko przegladu telefonicznego 5.09.2026: `100vh` na telefonie liczy sie tak, jakby paska adresu nie bylo, wiec dol ramki (ostatni wiersz tabeli w Finansach) siedzial pod nim i nie dalo sie do niego doskrolowac. `dvh` mierzy to, co widac naprawde. */ /* WYSOKOŚĆ USTAWIA PROGRAM, NIE TA REGUŁA (patrz `dopasujRamkeFinansow` w app.js). Tutaj zostaje tylko pierwsze przybliżenie, zanim skrypt zdąży zmierzyć. Liczba na sztywno zawsze się zestarzeje: gdy nad ramką przybywa paska, ramka wychodzi poza dół okna i trzeba przewijać całą stronę (tak się stało po dodaniu paska rozmowy, 19.09.2026). */ .ramka-finansow { display: block; width: 100%; height: calc(100dvh - 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(100dvh - 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; } /* POLE, KTORE ROSNIE Z TEKSTEM (Piotr, 22.09.2026: „dwie linijki tylko, a jak bede pisal, to bedzie sie rozszerzalo"). Wysokosc ustawia program (`dopasujWysokosc`), wiec: -- `overflow-y: hidden` -- pasek przewijania nigdy nie mignie, bo pole zawsze ma miare tresci; -- `resize: none` -- reczne ciagniecie za rog i tak znikneloby przy nastepnym znaku. */ .wizyta-sekcja textarea.rosnie { overflow-y: hidden; resize: none; } .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} /* ======================================================================================== TELEFON: POLA NIE MOGĄ PRZYBLIŻAĆ EKRANU ======================================================================================== Bazowo pola mają 16 px właśnie po to, żeby telefon nie przybliżał strony przy dotknięciu (patrz komentarz na górze pliku). Ale SIEDEM miejsc nadpisywało to na 14–15,5 px -- i były to akurat te pola, których lekarz dotyka najczęściej: dane pacjenta przy wizycie, dzień i godzina, cały formularz recepty. Każde dotknięcie przybliżało stronę, a iPhone jej potem sam nie oddala. Na komputerze zostaje ciaśniej, tak jak było -- to reguła WYŁĄCZNIE dla małych ekranów. (Znalezisko przeglądu telefonicznego 5.09.2026.) */ @media (max-width: 760px) { input, select, textarea, .krok label input, .krok label select, .wizyta-kiedy input, .wizyta-pola input, .wizyta-pola select, .pasek-gabinetu input, .szukajka.mala input, .przelicznik-pola input { font-size: 16px; } } /* ======================================================================================== TELEFON: WSZYSTKO MA SIĘ DAĆ TRAFIĆ PALCEM ======================================================================================== Palec potrzebuje ok. 44 px. Przegląd telefoniczny 5.09.2026 znalazł kilkanaście miejsc poniżej tej miary -- a wśród nich rzeczy najgroźniejsze: krzyżyki „✕" usuwające usługę, rozpoznanie i załącznik (ok. 20 px) oraz „Usuń receptę". Najbardziej niszczący przycisk w programie był najmniejszy i najcichszy. Kratka godziny w kalendarzu miała 26 px, a kliknięcie w nią zakłada wizytę. Na komputerze nic się nie zmienia -- to reguły WYŁĄCZNIE dla małych ekranów. */ @media (max-width: 760px) { button.cichy, .lek-plakietka button, .lista-rozpoznan button, .lista-zalacznikow button, .surowiec button, .rodzaje button, button.male, .pin-robert button, .zamek-robert, .menu-zamknij { min-height: 44px; min-width: 44px; padding: 10px 12px; font-size: 13px; line-height: 1.2; } /* Hamburger to JEDYNE wejście do menu na telefonie -- nie może być najmniejszym celem. */ .menu-hamburger { width: 44px; height: 44px; font-size: 18px; } #menu-boczne nav button, #menu-boczne nav .link-zewnetrzny { min-height: 44px; font-size: 15px; } /* Kliknięcie w kratkę godziny zakłada wizytę -- ma być trafialne za pierwszym razem. */ .kal-wiersz { min-height: 40px; } .kal-wizyta { min-height: 40px; font-size: 13px; padding: 8px 10px; } /* Zwijane nagłówki („Dane pacjenta", „Podgląd podpisu") też dotyka się palcem. */ .zwijane > summary, .podglad-podpisu > summary, .lek-ciaza > summary { min-height: 44px; display: flex; align-items: center; } /* Niepasujący pacjent po wyszukaniu MA ZOSTAĆ WIDOCZNY. Zgaszony do 35% czyta się na telefonie jak zniknięty -- a znikanie wygląda jak zepsuty program. */ .kal-wizyta.przygaszona { opacity: .55; } } /* Podpis nad kodem dla apteki miał 9,5 px -- a czyta go pacjent przy okienku. Sam kod ma być tym, co na tym ekranie wygrywa. */ @media (max-width: 760px) { .kod-p1 span { font-size: 12px; } .kod-p1 b { font-size: 22px; } } /* ======================================================================================== TELEFON: DODAWANIE USŁUGI I ROZPOZNANIA W DWÓCH WIERSZACH ======================================================================================== Pasek „dodaj usługę" to szukajka + ilość + cena + przycisk, a „dodaj rozpoznanie" to rozpoznanie + kod + uwagi + przycisk. Na ekranie 390 px cztery pola obok siebie rozsypują się w strzępy: nazwa usługi zwęża się do kilku liter, a pole uwag spada w osobny wiersz i zostawia resztę w powietrzu. (Przegląd telefoniczny 5.09.2026.) Układ na telefonie: NAZWA bierze cały pierwszy wiersz -- to ona jest długa i to w nią się pisze. Drugi wiersz to reszta: dwie krótkie liczby i przycisk, każde po 44 px wysokości. */ @media (max-width: 760px) { .dodaj-usluge { gap: 8px; } .dodaj-usluge .szukajka { flex: 1 1 100%; } .dodaj-usluge > input:not(.szeroko) { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; } .dodaj-usluge input.waskie { flex: 0 1 110px; width: auto; } .dodaj-usluge button { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; } /* Uwagi przy rozpoznaniu to zdanie, nie liczba -- należy im się cały wiersz. */ .dodaj-usluge #rozp-uwaga { flex: 1 1 100%; min-height: 44px; } } /* ======================================================================================== TELEFON: TABELA USŁUG JAKO LISTA, NIE PIĘĆ KOLUMN ======================================================================================== Pięć kolumn (nazwa, ilość, cena, kwota, ✕) na 390 px daje po ~70 px na każdą: nazwa usługi rozsypuje się w pionowy słupek liter, a kwota powyżej 999 zł jest ucięta. (Przegląd telefoniczny 5.09.2026.) Na telefonie każda usługa to WIERSZ: nazwa u góry, pod nią „2 × 150,00 zł = 300,00 zł", a krzyżyk po prawej. Bez tabeli i bez ściskania. */ @media (max-width: 760px) { .tabela-uslug, .tabela-uslug tbody, .tabela-uslug tfoot, .tabela-uslug tr, .tabela-uslug td { display: block; width: auto; } .tabela-uslug tr { position: relative; padding: 10px 52px 10px 0; border-bottom: 1px solid var(--linia); } .tabela-uslug td { border: 0; padding: 0; } /* Nazwa -- pierwsza komórka, pełny wiersz, może się łamać. */ .tabela-uslug td:first-child { font-weight: 600; font-size: 15px; white-space: normal; word-break: break-word; margin-bottom: 2px; } /* Ilość, cena i kwota w jednej linii pod nazwą. */ .tabela-uslug td.ile, .tabela-uslug td.kwota { display: inline; text-align: left; white-space: nowrap; font-size: 14px; color: var(--pod); } .tabela-uslug td.kwota:last-of-type { color: var(--tekst); } .tabela-uslug td.kwota:last-of-type::before { content: ' = '; } /* Krzyżyk odsunięty na prawo, pełne 44 px do trafienia. */ .tabela-uslug td:last-child { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .tabela-uslug tfoot tr { padding-right: 0; border-bottom: 0; border-top: 2px solid var(--linia-mocna); } .tabela-uslug tfoot td:first-child { font-weight: 700; } } /* MIEJSCOWOSCI ZNALEZIONE PO KODZIE POCZTOWYM W KARCIE WIZYTY (Piotr, 8.09.2026). Ten sam wyglad, co w Finansach: male, niebieskie, w jednej zawijanej linii, kazda do klikniecia. */ .wizyta-miasta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;margin-top:3px; font-size:11.5px;line-height:1.5;color:#1d4ed8} .wizyta-miasta button{font:inherit;font-size:11.5px;color:#1d4ed8;background:#eff6ff; border:1px solid #bfdbfe;border-radius:6px;padding:1px 6px;margin:0;cursor:pointer; white-space:nowrap} .wizyta-miasta button:hover{background:#dbeafe;border-color:#60a5fa} /* === PASEK ZGÓD NA KARCIE WIZYTY ============================================================ Piotr, 9.09.2026: „jeżeli są zgody już, to powinno się zaznaczyć, że są zgody, żebym nie musiał zaznaczać jeszcze raz zgód o e-mail i wizyty". TRZY STANY, TRZY KOLORY — bo trzeba je rozróżnić jednym spojrzeniem, nie czytaniem: zielony „jest", bursztynowy „nie ma", szary „jeszcze nie wiem". Szary NIGDY nie znaczy „brak zgody”: cisza z drugiego programu to nie odpowiedź. */ .wizyta-zgody{ margin:10px 0 4px; padding:9px 12px; border-radius:8px; font-size:14px; line-height:1.5; border:1px solid transparent; } .wizyta-zgody .pod{color:inherit; opacity:.72; font-size:13px} .wizyta-zgody .wycofana{font-weight:600} .wizyta-zgody.jest{background:#e7f6ec; border-color:#9fd3b0; color:#14532d} .wizyta-zgody.brak{background:#fdf3e0; border-color:#e5c07b; color:#7a4d09} .wizyta-zgody.czekam{background:#f2f4f6; border-color:#dde2e7; color:#5a6672} /* === ZNIŻKA I KWOTA W PRZYCHODACH (karta wizyty) ============================================ Piotr, 9.09.2026: „powinienem móc dać zniżkę, albo procentową, albo kwotową" oraz „jak 2-3 usługi dopiszę, to powinno być w przychodzie odzwierciedlenie". Ten sam zestaw trzech kolorów, co przy zgodach — żeby jeden rzut oka wystarczył. */ /* ZNIŻKA STOI W TEJ SAMEJ LINII, CO DOPISYWANIE USŁUGI (Piotr, 9.09.2026: „usługi i produkty zrób w jednej linii z dodaniem zniżki"). To jedna czynność, nie dwie. */ /* ZNIZKA: WASKO. Dwa male pola obok siebie -- „%” albo „zl” i ile. Razem niecale 130px, zeby caly rzad zmiescil sie w jednej linii i zostalo miejsce na kwote koncowa. */ .dodaj-znizka{display:flex; align-items:stretch; gap:5px} .dodaj-znizka select{width:66px; padding:10px 6px; font:inherit; border:1.5px solid var(--linia); border-radius:10px; background:#fbfcfd} .dodaj-znizka input[type=number]{width:62px} /* RACHUNEK: cena wyjściowa, ile schodzi, ile zostaje -- wszystkie trzy liczby obok siebie. */ .rachunek-uslug{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin-top:10px; padding-top:9px; border-top:1px solid var(--linia); font-size:14.5px; } .rachunek-uslug b{font-variant-numeric:tabular-nums} .rachunek-uslug .znizka-znak{color:#b54708} .rachunek-uslug .do-zaplaty b{font-size:16px} .wizyta-przychod{ margin-top:10px; padding:9px 12px; border-radius:8px; font-size:14px; line-height:1.5; border:1px solid transparent; } .wizyta-przychod .pod{color:inherit; opacity:.72; font-size:13px} .wizyta-przychod.jest{background:#e7f6ec; border-color:#9fd3b0; color:#14532d} .wizyta-przychod.brak{background:#fdf3e0; border-color:#e5c07b; color:#7a4d09} .wizyta-przychod.czekam{background:#f2f4f6; border-color:#dde2e7; color:#5a6672} /* ZAPŁACONE NA ZIELONO (Piotr, 19.09.2026: „zielone to jest zapłacone"). Mocniejsza zieleń niż `.jest`: tamto znaczy „kwota stoi w przychodach", a to -- „pieniądze już są". Dwie różne wiadomości nie mogą wyglądać tak samo. */ .wizyta-przychod.zaplacone{background:#d6f0de; border-color:#4fae74; color:#0f4025} .wizyta-przychod .zaplacone-znak{color:#0f4025; letter-spacing:.02em} /* ZDANIE „ta wizyta jest już zapłacona — kwotę zmień w Finansach" pisane ZWYKŁYMI literami (Piotr, 20.09.2026). Zielone tło już mówi, że pieniądze są; pogrubienie dokładało krzyk. */ .wizyta-przychod .powod-przychodu{font-weight:400} /* Wcześniejsze recepty pacjenta — panel pod przyciskiem ℞ na karcie wizyty (Piotr, 9.09.2026: „jak naciskam na receptę, to powinno być, jakie były wcześniej wystawione recepty"). */ .wizyta-wczesniejsze { margin-top: 12px; } .wizyta-wczesniejsze h3 { margin-top: 0; } /* === MIKROFON PRZY POLU WIZYTY ============================================================== Piotr, 9.09.2026: „chciałbym, żeby ten wywiad mógł być nagrywany, czyli jakąś ikonkę mikrofonu (...) planowanie tak samo", „i w planowaniu zrób". PIOTR MA W SYSTEMIE WŁĄCZONE OGRANICZENIE ANIMACJI i to jest tu istotne: „słucham" ma być widoczne SAMYM KOLOREM I NAPISEM, a puls jest dodatkiem. Przy ograniczeniu animacji puls zwalnia, ale NIE ZNIKA — inaczej zostałby sam kolor i nie byłoby wiadomo, że program słucha (to samo ustalenie, co przy pulsowaniu wpisu w kalendarzu Finansów). */ .wizyta-sekcja h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mikrofon { font-size: 13px; font-weight: 500; padding: 6px 12px; min-height: 36px; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); color: var(--tekst); cursor: pointer; white-space: nowrap; } .mikrofon:hover { border-color: var(--akcent); background: var(--akcent-tlo); } .mikrofon.mowi { background: #d92d20; border-color: #d92d20; color: #fff; animation: mikrofon-puls 1.4s ease-in-out infinite; } @keyframes mikrofon-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55); } 50% { box-shadow: 0 0 0 7px rgba(217, 45, 32, 0); } } @media (prefers-reduced-motion: reduce) { .mikrofon.mowi { animation-duration: 2.6s; } } .mikrofon-slychac { margin: 6px 0 4px; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; background: #f2f4f6; color: #5a6672; min-height: 20px; } .mikrofon-slychac.nie-umie { background: #fdf3e0; color: #7a4d09; } /* MIEJSCE NA „SŁYCHAĆ" STOI ZAWSZE (Piotr, 17.09.2026: „zakończ jakoś tak, żeby potem ten edytor nie przeskakiwał w dół"). Pasek pojawiał się i znikał, a pole pod nim skakało o dwa centymetry w chwili, gdy lekarz właśnie w nie celował. Teraz miejsce jest zarezerwowane, zmienia się tylko widoczność. */ .wizyta-sekcja .mikrofon-slychac[hidden], .pole-z-edytorem .mikrofon-slychac[hidden] { display: block; visibility: hidden; } /* Przycisk „Mów" nigdy nie chowa się za paskiem: stoi pierwszy i się nie zwija. */ .wizyta-sekcja > h3 .mikrofon, .pole-z-edytorem .etykieta-pola .mikrofon { flex: 0 0 auto; min-height: 30px; padding: 4px 12px; } .wizyta-sekcja > h3 .mikrofon.mowi, .pole-z-edytorem .etykieta-pola .mikrofon.mowi { font-weight: 700; } /* Skierowanie i zaświadczenie — formularz w karcie wizyty (Piotr, 9.09.2026: „dorób mi skierowanie na zabieg (...) zaświadczenie lekarskie też mi dorób"). */ .wizyta-dokument { margin-top: 12px; } .wizyta-dokument h3 { margin-top: 0; } .wizyta-blad { color: #b42318; font-size: 13.5px; align-self: center; } /* Po zapisaniu skierowania albo zaświadczenia — potwierdzenie i droga do następnego (Piotr, 9.09.2026: „jak dodać kolejne skierowanie czy kolejne zaświadczenie?"). */ .wizyta-dokument.zapisane { background: #e7f6ec; border-color: #9fd3b0; } .wizyta-dokument.zapisane p { margin-top: 0; color: #14532d; } /* === SKIEROWANIA I ZAŚWIADCZENIA -- LISTA, BO JEST ICH KILKA ================================= Piotr, 9.09.2026: „czasami piszę kilka zaświadczeń i kilka skierowań", a potem „nadal nie widzę możliwości wystawienia kilku skierowań oddzielnych na jednej wizycie". Numer przy każdym mówi wprost, że to lista, a nie pojedyncza czynność. */ .lista-dokumentow { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; } .lista-dokumentow li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--linia); border-radius: 12px; background: var(--karta); } .lista-dokumentow li:hover { border-color: var(--akcent); } /* NUMER W KÓŁKU -- widać jednym spojrzeniem, ile ich jest i że to lista, a nie jedna kartka. */ .lista-dokumentow .numer { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--akcent-tlo); color: var(--akcent); font-size: 13px; font-weight: 700; } .lista-dokumentow .co { flex: 1 1 auto; min-width: 0; } .lista-dokumentow .co b { display: block; font-weight: 600; overflow-wrap: anywhere; } .lista-dokumentow .co .pod { display: block; font-size: 12.5px; margin-top: 1px; } .lista-dokumentow .co-z-tym { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; } /* === DWA RZĘDY „DODAJ" -- NA SAMYM KOŃCU PLIKU, ŻEBY NIC ICH NIE NADPISAŁO =================== Piotr, 9.09.2026: „usługi w jednej linii — rząd łamie się!!!" oraz „rozpoznanie ma być w jednej osobnej wierszu". DLACZEGO NA KOŃCU. Reguły dla `.dodaj-usluge` stały w połowie pliku, a NIŻEJ, w części o szerokości karty wizyty, siedziało `.dodaj-usluge .szukajka { flex: 1 1 320px }`. W CSS wygrywa ta późniejsza — więc pole nazwy dostawało 320 px podstawy i rząd się rozłaził. Trzymamy więc oba rzędy razem, na końcu, i wtedy widać, że rządzą właśnie one. */ /* --- USŁUGI: nazwa, ilość, cena, zniżka, Dodaj -- JEDNA LINIA -------------------------------- */ .dodaj-usluge { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-end; margin: 8px 0; } .dodaj-usluge > label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dodaj-usluge .podpis { font-size: 11.5px; line-height: 1.2; color: var(--pod); white-space: nowrap; } .dodaj-usluge .pole-usluga { flex: 1 1 auto; min-width: 0; } .dodaj-usluge .szukajka { flex: 1 1 auto; margin: 0; display: block; min-width: 0; } .dodaj-usluge .szukajka input { width: 100%; min-width: 0; padding-left: 12px; font-size: 15px; } .dodaj-usluge .pole-male { flex: 0 0 auto; } .dodaj-usluge .pole-male input[type=number] { width: 84px; } .dodaj-usluge .pole-znizka { flex: 0 0 auto; } .dodaj-usluge button { flex: 0 0 auto; width: auto; white-space: nowrap; } /* POLA NIŻSZE (Piotr, 9.09.2026: „napisy rozpoznanie usługi mają za wysokie pola!!!"). 38px zamiast 44 -- wciąż wygodnie się w nie trafia myszką, a rząd przestaje być pasem. */ .dodaj-usluge input, .dodaj-usluge select, .dodaj-usluge button, .dodaj-usluge .szukajka input { min-height: 38px; height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; } /* --- ROZPOZNANIE: WŁASNY WIERSZ, niezależny od usług ----------------------------------------- */ .dodaj-rozpoznanie { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-end; margin: 8px 0; } .dodaj-rozpoznanie > label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dodaj-rozpoznanie .podpis { font-size: 11.5px; line-height: 1.2; color: var(--pod); white-space: nowrap; } .dodaj-rozpoznanie input { width: 100%; min-width: 0; padding: 0 12px; font: inherit; font-size: 15px; border: 1.5px solid var(--linia); border-radius: 9px; background: #fbfcfd; min-height: 38px; height: 38px; box-sizing: border-box; } .dodaj-rozpoznanie input:focus { border-color: var(--akcent); background: #fff; } .dodaj-rozpoznanie .pole-rozp { flex: 2 1 0; min-width: 0; } .dodaj-rozpoznanie .pole-kod { flex: 0 0 104px; } .dodaj-rozpoznanie .pole-uwaga { flex: 1 1 0; min-width: 0; } .dodaj-rozpoznanie button { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 38px; height: 38px; padding: 0 16px; } /* NA TELEFONIE JEDNA LINIA SIĘ NIE MIEŚCI -- tam oba rzędy zawijają się jak dotąd. */ @media (max-width: 760px) { .dodaj-usluge, .dodaj-rozpoznanie { flex-wrap: wrap; } .dodaj-usluge .pole-usluga, .dodaj-rozpoznanie .pole-rozp { flex: 1 1 100%; } .dodaj-rozpoznanie .pole-uwaga { flex: 1 1 100%; } } /* Wystawione skierowania i zaświadczenia — zwarta grupa pod klockami w karcie „Wystaw" (Piotr, 9.09.2026: „wolę skierowania i zaświadczenia mieć w klockach jak recepta"). Nagłówek grupy jest mniejszy niż nagłówek sekcji — to lista W ŚRODKU „Wystaw", nie osobna część karty wizyty. */ .dokumenty-grupa { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia); } .dokumenty-grupa h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; } .dokumenty-grupa > .pod { margin: 0 0 6px; font-size: 12.5px; } /* PRZYCISKI POD WIZYTĄ MÓWIĄ, CO ZOSTAŁO DO ZROBIENIA. Piotr, 10.09.2026: „te wszystkie przyciski powinny być podświetlone (…) jak nacisnę, to powinny się wyszarzać. Oprócz drukuj — ten powinien być cały czas aktywny". Niebieski znaczy „to jest do zrobienia", szary — „zrobione albo jeszcze nie teraz". Jedno spojrzenie na dół karty mówi, czy coś zostało: prośba o opinię po wysłaniu gaśnie, a zamknięcie wizyty zapala się dopiero, gdy jest co zamykać. */ .wizyta-sekcja.rzad-przyciskow button[disabled] { background: var(--tlo); border-color: var(--linia); color: var(--pod); cursor: default; opacity: .75; } .wizyta-sekcja.rzad-przyciskow button { min-height: 40px; padding: 0 18px; font-weight: 600; } /* SEKCJA ROZWINIĘTA POD KAFELKAMI WIZYTY. Piotr, 10.09.2026: „żeby ono się rozsuwało w dół. Czyli na całą tą szerokość strony". Formularz recepty i ekran leków są tu PRZENIESIONE, nie skopiowane — mają własne obsługi i własne pola, a druga kopia rozjechałaby się przy pierwszej zmianie. */ .wizyta-rozwiniete { margin: 12px 0 0; width: 100%; } .wizyta-rozwiniete > section { display: block; width: 100%; max-width: none; margin: 0; } .wizyta-rozwiniete > section > h2:first-child { margin-top: 0; } /* DZIEŃ TYGODNIA OBOK DATY WIZYTY (Piotr, 10.09.2026: „przy otwartej wizycie dopisz jeszcze dzień tygodnia"). Sama data nie mówi, czy to był poniedziałek, czy sobota — a przy przeglądaniu wizyt wstecz to pierwsza rzecz, po której człowiek się orientuje. To NIE jest pole do wpisywania: program liczy go z daty, więc wygląda jak podpis, nie jak rubryka do wypełnienia. */ .wizyta-dzien-tygodnia { align-self: end; padding: 0 0 9px 2px; font-size: 14px; font-weight: 600; color: var(--pod); white-space: nowrap; } /* PODPISY NAD POLAMI TO PODPISY, A NIE RAMKI. Piotr, 10.09.2026: „Usługa albo produkt / Cena / Zniżka — te napisy, tło niebieskie, jest za wysokie to pole. Rozjeżdża się to. Podobnie rozpoznania". Klasa `.podpis` powstała do CZEGO INNEGO: to pudełko z podglądem pieczątki — 16 px marginesu wewnątrz, niebieskie tło, ramka, odstęp półtorej linijki. Rzędy „dodaj usługę" i „dodaj rozpoznanie" wzięły ją dla samego słowa nad polem i odziedziczyły całe pudełko: stąd niebieskie prostokąty wyższe od pól obok i rozjeżdżający się rząd. Nazwy nie zmieniam — chodzi po całym programie. Zdejmuję pudełko tam, gdzie to ma być zwykły podpis. */ .dodaj-usluge .podpis, .dodaj-rozpoznanie .podpis { border: 0; background: none; border-radius: 0; padding: 0; margin: 0; line-height: 1.25; text-align: left; } .dodaj-usluge .podpis { font-size: 12px; } .dodaj-rozpoznanie .podpis { font-size: 11.5px; } /* POLE DO UZUPEŁNIENIA — CZERWONE TŁO. Piotr, 10.09.2026: „jak nie są uzupełnione, to wtedy ma być rozwinięte i pola z tłem czerwonym do uzupełniania". Czerwień jest tu OSTRZEŻENIEM, a nie błędem: nikt nic nie zepsuł, po prostu tej rzeczy jeszcze nie ma. Dlatego jest to blade tło i wyraźna obwódka, a nie krzyk. */ input.do-uzupelnienia, textarea.do-uzupelnienia { background: #fff4f2; border-color: #f0a08f; } input.do-uzupelnienia:focus, textarea.do-uzupelnienia:focus { background: #fff; } /* ZWINIĘTY PANEL DANYCH mówi w nagłówku to, po co się do niego zagląda. */ .wizyta-dane > summary .dane-skrot { margin-left: 10px; font-weight: 400; color: var(--pod); } .wizyta-dane > summary .brak-danych { margin-left: 10px; font-weight: 600; font-size: 13px; color: #a33a22; background: #fff4f2; border: 1px solid #f0a08f; border-radius: 999px; padding: 1px 10px; } /* ODMOWA ZAPISU DOKUMENTU MA BYĆ WIDOCZNA. Piotr, 10.09.2026: „nie ma możliwości wystawienia kolejnych skierowań i zaświadczeń" — a w bazie nie było ANI JEDNEGO dokumentu, więc pierwszy nigdy się nie zapisał. Mały czerwony napis obok przycisku ginął: człowiek patrzy w pole, które wypełnia, a nie w rząd przycisków. */ .wizyta-blad.widoczny { display: inline-block; font-weight: 600; color: #a33a22; background: #fff4f2; border: 1px solid #f0a08f; border-radius: 8px; padding: 6px 12px; } /* === KARTA WIZYTY, 10.09.2026 ================================================================ Poprawki z jednego wieczoru: rząd „dodaj usługę" w jednej linii, czytelne nagłówki, centymetr życia, poprzednie wizyty i opisane załączniki. Wszystko na końcu pliku, bo w tym pliku o „dodaj usługę" i o nagłówkach kart mówi się w kilku miejscach, a rządzi ostatnie. */ /* --- „DODAJ" WRACA DO LINII PÓL -------------------------------------------------------------- Piotr, 10.09.2026: „przycisk dodaj nie jest w jednej linii". Powód był niewidoczny gołym okiem i zmierzony w przeglądarce: `label` w tym programie ma `margin-bottom: 14px`, a `align-items: flex-end` wyrównuje MARGINESY, nie krawędzie pól. Pola kończyły się na 372 px, przycisk na 386 -- równo co do piksela, tylko nie tam, gdzie patrzy oko. Zdejmujemy ten margines w obu rzędach. */ .dodaj-usluge > label, .dodaj-rozpoznanie > label, .dodaj-zalacznik > label { margin-bottom: 0; } /* NAZWA USŁUGI TROCHĘ WIĘKSZA (Piotr, 10.09.2026: „nieco powiększ usługa lub produkt"). Pole, w które wpisuje się najwięcej, ma też być tym, które najlepiej widać. */ .dodaj-usluge .szukajka input { font-size: 16px; } .dodaj-usluge .szukajka input, .dodaj-usluge .pole-usluga input { min-height: 42px; height: 42px; } /* --- NAGŁÓWKI KART: JEDNA CZCIONKA, JEDNA WAGA, JEDEN ODSTĘP ------------------------------- Piotr, 10.09.2026: „dane pacjenta powinny być wygrubione (...) potem rozpoznania, wywiad, wszystko dokładnie, właśnie żeby to było estetyczne". Do tej pory nagłówek zwijanego panelu („Dane pacjenta") był `summary` i miał wagę tekstu, a nagłówki kart -- `h3` -- swoją własną. Dwa różne kroje jednej rzeczy. Teraz wszystkie mówią tym samym głosem. */ .wizyta-sekcja > h3, .wizyta-dane > summary, .historia-pacjenta > summary { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--tekst); margin: 0 0 10px; } .wizyta-sekcja > h3 { display: flex; align-items: center; gap: 10px; } .wizyta-dane > summary, .historia-pacjenta > summary { margin-bottom: 0; cursor: pointer; } .wizyta-dane[open] > summary, .historia-pacjenta[open] > summary { margin-bottom: 12px; } /* Przycisk w nagłówku (mikrofon, „z poprzedniej wizyty") ma stać z prawej, nie w tytule. */ .wizyta-sekcja > h3 > button { margin-left: auto; } .wizyta-sekcja > h3 > button + button { margin-left: 8px; } /* --- CENTYMETR ŻYCIA: 0–100 LAT ------------------------------------------------------------ Piotr, 10.09.2026: „zrób taki centymetr do 100 lat i pokaż też wizualnie". Kreska co dziesięć lat, podpis co dwadzieścia, znacznik z wiekiem tam, gdzie stoi pacjent. */ .centymetr { margin: 16px 0 6px; max-width: 520px; } .centymetr .tasma { position: relative; height: 26px; border-radius: 999px; background: linear-gradient(90deg, #eaf2fb 0%, #dbe8f7 55%, #f3e6e2 100%); border: 1px solid var(--linia); } .centymetr .kreska { position: absolute; top: 6px; width: 1px; height: 7px; background: #9fb2c7; } .centymetr .kreska.duza { top: 4px; height: 11px; background: #7b8fa6; } .centymetr .liczba { position: absolute; top: 15px; transform: translateX(-50%); font-size: 9.5px; color: var(--pod); font-variant-numeric: tabular-nums; } .centymetr .teraz { position: absolute; top: -5px; transform: translateX(-50%); width: 2px; height: 36px; background: var(--akcent); border-radius: 2px; } .centymetr .teraz b { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); background: var(--akcent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.5; } /* --- POPRZEDNIE WIZYTY: PANEL NASUNIĘTY NA KARTĘ (wariant B) -------------------------------- Piotr, 10.09.2026: „poprzednie wizyty muszę podglądać, mając otwartą aktualną wizytę", potem po zobaczeniu wariantu A (druga kolumna): „wersja A mi się nie podoba — zrób B". Panel leży POZA układem strony (`position: fixed`), więc dopóki jest zamknięty, nie zajmuje ani piksela i nic przez niego nie skacze. Otwarty wysuwa się z prawej i przykrywa część karty; wizyta pod spodem zostaje dokładnie tam, gdzie była — razem z kursorem w polu, w którym się właśnie pisało. */ .cien-panelu { position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .28); } .panel-historii { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(460px, 92vw); overflow-y: auto; background: var(--karta); border-left: 1px solid var(--linia); box-shadow: -18px 0 44px rgba(15, 23, 42, .18); padding: 16px 18px 24px; animation: panel-wjezdza .16s ease-out; } @keyframes panel-wjezdza { from { transform: translateX(24px); opacity: .4; } } /* Strona pod panelem nie przewija się razem z nim. */ body.panel-otwarty { overflow: hidden; } .historia-pacjenta > h3 { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; } .historia-pacjenta > h3 .ile { min-width: 22px; text-align: center; background: var(--akcent-tlo); color: var(--akcent); border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 1px 8px; } .historia-pacjenta > h3 .zamknij-panel { margin-left: auto; width: auto; min-height: 30px; padding: 0 10px; font-size: 15px; } .historia-pacjenta .niepewne { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #8a5a20; background: #fdf4e6; border: 1px solid #edd3a6; border-radius: 8px; padding: 5px 10px; } .historia-pacjenta .leki-razem { margin: 0 0 12px; } .historia-pacjenta .leki-razem h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--pod); text-transform: uppercase; letter-spacing: .06em; } .historia-pacjenta .leki-razem ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; } .historia-pacjenta .leki-razem li { background: #f2f7ff; border: 1px solid #d8e6f8; border-radius: 8px; padding: 3px 9px; font-size: 13px; } .lista-historii { list-style: none; margin: 0; padding: 0; } .wizyta-z-historii { border-top: 1px solid var(--linia); } .wizyta-z-historii > details > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 9px 2px; font-size: 13.5px; } .wizyta-z-historii > details > summary::-webkit-details-marker { display: none; } .wizyta-z-historii .kiedy { flex: 0 0 auto; white-space: nowrap; } .wizyta-z-historii .kiedy .pod { margin-left: 5px; font-size: 11.5px; } .wizyta-z-historii .tytul { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pod); } .wizyta-z-historii > details[open] > summary { font-weight: 600; } .wizyta-z-historii .co { display: grid; gap: 6px; padding: 0 2px 12px; } .wizyta-z-historii .rozp { display: flex; flex-wrap: wrap; gap: 5px; } .wizyta-z-historii .rozp-znak { background: var(--akcent-tlo); color: var(--akcent); border-radius: 7px; padding: 1px 8px; font-size: 12.5px; } .wizyta-z-historii .leki-wiersz { font-size: 13px; } /* UCZULENIA, CHOROBY PRZEWLEKLE, LEKI STALE (decyzja 14a, 14.09.2026). Nad wywiadem, na czerwono -- to ma byc pierwsza rzecz, na ktora pada wzrok. PUSTE TEZ WIDAC, tylko szaro: brak paska znaczylby i "nie ma uczulen", i "nikt nie pytal". */ .pasek-zdrowia { margin: 0 0 10px; } .pasek-zdrowia .zdrowie-pusto { font-size: 13px; color: #6b6b6b; background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; } .pasek-zdrowia .zdrowie-karta { background: #fdf0f0; border: 1px solid #f0c8c8; border-left: 4px solid #c0392b; border-radius: 8px; padding: 8px 12px; } .pasek-zdrowia .zdrowie-wiersz { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; } .pasek-zdrowia .zdrowie-wiersz .co { color: #a03028; font-weight: 700; flex: 0 0 auto; min-width: 128px; } .pasek-zdrowia .zdrowie-wiersz .tresc { color: #3a2020; } .pasek-zdrowia .zdrowie-stopka { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .pasek-zdrowia .zdrowie-stopka .pod { font-size: 11px; color: #8a6a6a; } .pasek-zdrowia .zdrowie-pole { display: block; margin-bottom: 6px; } .pasek-zdrowia .zdrowie-pole span { display: block; font-size: 12px; font-weight: 700; color: #a03028; } .pasek-zdrowia .zdrowie-pole textarea { width: 100%; font-size: 13px; } /* AWARIA NIE MOZE WYGLADAC JAK "NIC NIE MA" -- pusty pasek czyta sie jako "pacjent zdrowy". */ .pasek-zdrowia .zdrowie-awaria { font-size: 13px; background: #fff6e5; border: 1px solid #f0d8a8; border-radius: 8px; padding: 6px 10px; color: #7a5a10; } /* OSTRZEZENIE PRZY RECEPCIE -- NAD lista lekow, nie pod. */ #ostrzezenia-zdrowia { margin: 0 0 8px; } #ostrzezenia-zdrowia .zdrowie-alarm { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; background: #fdf0f0; border: 1px solid #f0c8c8; border-left: 4px solid #c0392b; border-radius: 8px; padding: 7px 11px; margin-bottom: 5px; } #ostrzezenia-zdrowia .zdrowie-alarm .znak { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 700; text-align: center; line-height: 18px; font-size: 12px; } #ostrzezenia-zdrowia .zdrowie-alarm-pod { font-size: 11px; color: #8a6a6a; padding-left: 11px; } /* SKIEROWANIA, ZASWIADCZENIA I ZALACZNIKI W HISTORII (decyzja 14c, 14.09.2026). Kazdy dokument w osobnej ramce, zeby przy trzech nie zlewaly sie w jedno zdanie. WYCENA JEST SZARA, nie niebieska -- to nie jest wystawiony dokument, tylko pytanie o cene. */ .wizyta-z-historii .dok-wiersz { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .wizyta-z-historii .dok-znak { font-size: 12px; line-height: 1.35; padding: 2px 7px; border-radius: 9px; background: #eaf2fb; color: #1d4f7c; border: 1px solid #cfe0f2; } .wizyta-z-historii .dok-znak.wycena { background: #f2f2f2; color: #5c5c5c; border-color: #dcdcdc; font-style: italic; } .wizyta-z-historii .zal-wiersz { font-size: 13px; margin-top: 4px; } /* PODPISANE ZGODY W HISTORII (13.10.2026) -- opis i przyciski „Pokaż” / „Drukuj” w jednej linii. */ .wizyta-z-historii .zgody-wiersz { font-size: 13px; margin-top: 4px; } .wizyta-z-historii .zgoda-z-historii { padding: 6px 0; border-top: 1px dashed #e2e8f0; } .wizyta-z-historii .zgoda-z-historii:first-child { border-top: 0; } .wizyta-z-historii .zg-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .wizyta-z-historii .zg-kiedy { color: #64748b; font-size: 12px; margin-right: 4px; } .wystawione-spis li button.male { margin-left: 6px; } .wizyta-z-historii .zalec { font-size: 13px; color: var(--tekst); background: #fbfcfd; border-left: 3px solid #d8e6f8; padding: 5px 10px; border-radius: 0 8px 8px 0; white-space: pre-wrap; } .wizyta-z-historii .co > .pod { font-size: 12px; } .wizyta-z-historii .co-z-tym { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } /* --- ZAŁĄCZNIKI: CO TO JEST, JAK SIĘ NAZYWA, Z KTÓREGO DNIA -------------------------------- Piotr, 10.09.2026: „ładniejsze pole załączniki i wybierz pliki (...) zdjęcia, wypisy ze szpitala, badania laboratoryjne, badania obrazowe". */ .dodaj-zalacznik { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 4px 0 10px; } .dodaj-zalacznik > label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dodaj-zalacznik .podpis { border: 0; background: none; border-radius: 0; padding: 0; margin: 0; font-size: 11.5px; line-height: 1.2; color: var(--pod); white-space: nowrap; text-align: left; } .dodaj-zalacznik .pole-rodzaj { flex: 0 0 190px; } .dodaj-zalacznik .pole-opis { flex: 1 1 220px; } .dodaj-zalacznik .pole-data { flex: 0 0 165px; } .dodaj-zalacznik .pole-plik { flex: 0 0 auto; cursor: pointer; } .dodaj-zalacznik input, .dodaj-zalacznik select { width: 100%; min-width: 0; padding: 0 12px; font: inherit; font-size: 15px; border: 1.5px solid var(--linia); border-radius: 9px; background: #fbfcfd; min-height: 40px; height: 40px; box-sizing: border-box; } .dodaj-zalacznik input:focus, .dodaj-zalacznik select:focus { border-color: var(--akcent); background: #fff; } /* WŁASNY PRZYCISK ZAMIAST SZAREGO „Choose Files" -- tamten każda przeglądarka rysuje inaczej i po angielsku. Prawdziwe pole jest schowane, klika w nie ta etykieta. */ .przycisk-pliku { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 9px; background: var(--akcent); color: #fff; font-weight: 600; border: 1.5px solid var(--akcent); white-space: nowrap; } .przycisk-pliku:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); } /* „Zrób zdjęcie" w załącznikach to