/* WYGLĄD MODUŁU RECEPT. Zasada: lekarz ma wystawić receptę w kilkanaście sekund, na laptopie i na telefonie. Stąd duże pola (na telefonie 16 px, inaczej iPhone sam przybliża ekran), jeden słupek treści, wyraźna kolejność: pacjent → leki → wystaw. Kolory spokojne, medyczne; kolorem oznaczamy TYLKO to, co niesie znaczenie (zielony = zrobione, czerwony = błąd, bursztyn = uwaga). */ /* KOLORY TAKIE, JAK W PROGRAMIE FINANSE CEM I NA MATERIAŁACH CENTRUM OCENY ZDROWIA (Piotr, 3.09.2026: „zrób jasne kolory jak kolory CEM i COZ"). Wzięte wprost z tamtych plików: niebieski #2563eb i granat #1b4f9c z wydruków Biovisu, szarości z rodziny #0f172a / #64748b / #e2e8f0, tła #f8fafc. CIEMNEGO MOTYWU NIE MA -- ma być jasno, tak jak prosił. */ :root { color-scheme: light; /* KOLORY I KRÓJ PISMA WPROST Z FINANSÓW CEM (css/base.css, components.css) -- Piotr, 5.09.2026: „weź kolorystykę stamtąd". Dwa programy mają wyglądać jak jeden, zwłaszcza że Finanse otwierają się teraz w środku gabinetu. */ --tlo: #f7f9fc; --karta: #ffffff; --linia-cicha: #eef2f7; /* cieńsza kreska wewnątrz kart, tak jak w Finansach */ --karta-cien: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); --tekst: #0f172a; --pod: #64748b; --linia: #e2e8f0; --linia-mocna: #cbd5e1; --akcent: #2563eb; /* ten sam niebieski, co w programie Finanse CEM */ --akcent-ciemny: #1d4ed8; --akcent-tlo: #eff5ff; --granat: #1b4f9c; /* granat z wydruków Centrum Oceny Zdrowia */ --dobrze: #15803d; --dobrze-tlo: #f0fdf4; --blad: #b91c1c; /* 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; } input::placeholder { color: var(--pod); opacity: .6; } input:hover, select:hover { border-color: var(--linia-mocna); background: #f1f5f9; } input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--akcent); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } input[type="file"] { padding: 10px; background: var(--tlo); } /* --- przyciski ------------------------------------------------------------------------------- */ /* PRZYCISK TAKI SAM JAK W FINANSACH: delikatny gradient, cienka ramka, miękki cień. (Tam: `.cem-btn` w components.css.) */ button { font: inherit; font-size: 15px; font-weight: 600; padding: 11px 18px; min-height: 46px; border-radius: 10px; border: 1px solid #dbe2ea; background: linear-gradient(180deg, #fff, #f8fafc); color: var(--tekst); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s, transform .05s; } button:hover { background: #f1f5f9; border-color: #c7d2fe; box-shadow: 0 2px 6px rgba(15, 23, 42, .09); } button:active { transform: translateY(1px); } button:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; } button:focus-visible { outline: 3px solid color-mix(in srgb, var(--akcent) 40%, transparent); outline-offset: 2px; } button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; } button.glowny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); } button.cichy { border: none; background: none; color: var(--akcent); min-height: 0; padding: 2px 6px; } button.male { font-size: 13px; padding: 7px 12px; min-height: 38px; } button[disabled] { background: var(--tlo); border-color: var(--linia); color: var(--pod); cursor: default; } button[disabled]:hover { background: var(--tlo); border-color: var(--linia); } /* --- logowanie ------------------------------------------------------------------------------- */ .ekran-logowania { display: grid; place-items: center; min-height: 100dvh; padding: 20px; } .ekran-logowania .karta { width: min(420px, 100%); } .ekran-logowania h1 { text-align: center; } .ekran-logowania .pod { text-align: center; } .ekran-logowania button { width: 100%; } /* --- nagłówek i zakładki --------------------------------------------------------------------- */ header { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--karta); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 20; } header > strong { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; } 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); } .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; } /* 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); } /* 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; } .wizyta-ubezp { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .ubezp { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 12px; } .ubezp.tak { background: var(--dobrze-tlo); color: var(--dobrze); } .ubezp.nie { background: #fef2f2; color: var(--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; } .narzedzia-wizyty { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .narzedzia-wizyty .narzedzie.wkrotce { opacity: .55; cursor: default; } .narzedzia-wizyty .narzedzie .ikona { font-size: 20px; } .lista-recept-wizyty { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .lista-recept-wizyty li { background: var(--tlo); border-radius: 9px; padding: 8px 12px; font-size: 14px; } .lista-zalacznikow { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .lista-zalacznikow li { display: flex; align-items: center; gap: 10px; background: var(--tlo); border-radius: 9px; padding: 8px 12px; font-size: 14px; } /* OKIENKO WYBORU PÓL DO DRUKU. */ .nakladka { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; } .okienko { background: var(--karta); border-radius: 16px; padding: 22px 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); } .okienko h3 { margin: 0 0 4px; font-size: 18px; } .okienko .wybor { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 8px 0; } .okienko .wybor input { width: auto; } @media (max-width: 560px) { .wizyta-wiersz { grid-template-columns: 1fr; gap: 6px; } .wizyta-wiersz .czym { justify-content: flex-start; } .wizyta-pola.dwa { grid-template-columns: 1fr; } .wizyta-glowa { position: static; } } /* ============================================================================================ MENU Z BOKU -- PRZEPISANE JEDEN DO JEDNEGO Z FINANSÓW CEM (css/sidebar.css). Piotr, 5.09.2026: „miałeś zrobić nam w menu po lewej stronie identyczne jak mamy w finanse". Te same wymiary (216 px), ta sama marka z kwadratem, te same KAFELKI pozycji (białe, cienka ramka, zaokrąglenie 9 px) i ta sama zasada koloru: wybrana zakładka bierze kolor swojej rodziny, a nie jeden niebieski dla wszystkiego. Poniżej 760 px menu wjeżdża jako szufladka. ============================================================================================ */ #program { display: grid; grid-template-columns: 216px minmax(0, 1fr); align-items: start; min-height: 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. */ .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; } .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} /* 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; } /* 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; } .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); } .lista-zalacznikow { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; } .lista-zalacznikow li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 2px; border-top: 1px solid var(--linia); } .lista-zalacznikow .rodzaj { flex: 0 0 auto; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--akcent-tlo); color: var(--akcent); } .lista-zalacznikow .rodzaj.obrazowe { background: #eef4ff; color: #2f5bbd; } .lista-zalacznikow .rodzaj.laboratoryjne { background: #eaf7ef; color: #1f7a45; } .lista-zalacznikow .rodzaj.wypis { background: #fdf1e8; color: #9a5b1c; } .lista-zalacznikow .rodzaj.zdjecie { background: #f4eefc; color: #6b3aa8; } .lista-zalacznikow .co { flex: 1 1 220px; min-width: 0; } .lista-zalacznikow .co a { font-weight: 600; overflow-wrap: anywhere; } .lista-zalacznikow .co .pod { display: block; font-size: 12px; } .lista-zalacznikow .co-z-tym { flex: 0 0 auto; display: flex; gap: 4px; } .lista-zalacznikow .opisywanie { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 2px; } .lista-zalacznikow .opisywanie select { flex: 0 0 190px; } .lista-zalacznikow .opisywanie input[type=date] { flex: 0 0 165px; } .lista-zalacznikow .opisywanie input { flex: 1 1 200px; } .lista-zalacznikow .opisywanie select, .lista-zalacznikow .opisywanie input { padding: 0 12px; font: inherit; font-size: 14.5px; min-height: 36px; height: 36px; border: 1.5px solid var(--linia); border-radius: 9px; background: #fbfcfd; box-sizing: border-box; } /* SKĄD SIĘ WZIĘŁY ZALECENIA -- linijka nad polem, spokojna, nie ostrzeżenie. */ .skad-zalecenia { font-size: 13px; color: #2f5bbd; background: #eef4ff; border: 1px solid #d8e6f8; border-radius: 8px; padding: 5px 12px; margin: 0 0 8px; } /* KWOTA PO ZNIŻCE W RZĘDZIE „DODAJ USŁUGĘ" (Piotr, 10.09.2026: „musi być też kwota po zniżce"). Wygląda jak pole, ale nim nie jest -- program to liczy, nikt tego nie wpisuje. Stąd inne tło i brak obwódki, którą oko czyta jako „tu można kliknąć". */ .dodaj-usluge .pole-po-znizce { flex: 0 0 auto; } .dodaj-usluge #usluga-po-znizce { display: flex; align-items: center; justify-content: flex-end; min-width: 108px; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1.5px solid transparent; border-radius: 9px; background: #f1f6ec; color: #2c5c2f; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- DZIEŃ, GODZINA, DZIEŃ TYGODNIA I „zapisane" W JEDNEJ LINII ------------------------------ Piotr, 10.09.2026: „Dzień i godzina rozjechały się". Zmierzone w przeglądarce: pola „Dzień" i „Godzina" kończyły się na wysokości 74 px, a napisy obok nich — „środa" i „zapisane 10:16" — zaczynały się na 74 i 76. Czyli oba wisiały PONIŻEJ pól, zamiast stać z nimi równo. Przyczyna jest ta sama, co w rzędzie „dodaj usługę": `label` w tym programie ma `margin-bottom: 14px`, a `align-items: flex-end` wyrównuje MARGINESY, nie widoczne krawędzie. Pola siadały więc 14 px wyżej niż dół rzędu, a napisy — dosuwane wcześniej ręcznym wcięciem od dołu (9 i 10 px) — trafiały obok, bo takie wcięcie zgaduje liczbę zamiast ją znać. Zdejmujemy margines w tym rzędzie i kasujemy oba zgadywane wcięcia. Teraz wszystko cztery stoi na jednej linii, bo stoi na tej samej krawędzi. */ .wizyta-kiedy > label { margin-bottom: 0; } .wizyta-kiedy .wizyta-dzien-tygodnia { padding: 0 0 9px 2px; } .wizyta-kiedy .wizyta-zapis { padding-bottom: 9px; } /* === WYGLĄD KARTY WIZYTY, 10.09.2026 po południu ============================================ Piotr: „zrób ładniejszy centymetr", „Dzień i godzina zrób ładniejsze pola", „zrób to estetycznie", „Wystawienie recepty / Cena / Zniżka / Do zapłaty — zrób to w jednej linii". */ /* --- DZIEŃ I GODZINA: JEDEN WĄSKI PASEK ------------------------------------------------------ Piotr, 10.09.2026: „Dzień i godzina są bez sensu, zrób to, żeby nie zajmowało tyle miejsca". Poprzednia wersja miała podpisy NAD polami i ramkę dookoła — trzy poziomy wysokości na dwie liczby, które i tak same się tłumaczą (kalendarzyk i zegar rysuje przeglądarka). Teraz podpis stoi OBOK pola, w jednej linii, a cały pasek ma wysokość jednego pola. */ .wizyta-kiedy { gap: 8px; align-items: center; background: none; border: 0; padding: 0; flex-wrap: wrap; } .wizyta-kiedy > label { flex-direction: row; align-items: center; gap: 6px; margin-bottom: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pod); } .wizyta-kiedy input { padding: 4px 8px; font-size: 14px; font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums; border: 1.5px solid var(--linia); border-radius: 8px; background: var(--karta); min-height: 32px; height: 32px; box-sizing: border-box; } .wizyta-kiedy input:focus { outline: none; border-color: var(--akcent); background: #fff; } .wizyta-kiedy .wizyta-dzien-tygodnia { padding: 0; font-size: 13px; font-weight: 700; color: var(--akcent); text-transform: lowercase; } .wizyta-kiedy .wizyta-zapis { padding: 0; font-size: 11.5px; } /* --- CENTYMETR ŻYCIA: JAK PRAWDZIWA MIARKA ------------------------------------------------- Drobna kreska co rok (jednym tłem — sto elementów spowalniałoby każde przerysowanie karty), dłuższa co pięć lat, najdłuższa i podpisana co dziesięć. Przeżyte lata są wypełnione, reszta pusta, a chorągiewka z wiekiem stoi dokładnie na swojej kresce. */ .centymetr { position: relative; margin: 14px 0 4px; max-width: 560px; padding-top: 22px; } .centymetr .tasma { position: relative; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--linia); overflow: hidden; } /* KRESKI CO ROK RYSUJE TŁO, nie sto elementów -- ale MUSZĄ leżeć NAD wypełnieniem przeżytych lat, inaczej lewa połowa miarki jest gładka, a prawa prążkowana. */ .centymetr .tasma::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background-image: repeating-linear-gradient(90deg, rgba(95, 120, 147, .45) 0 1px, transparent 1px 1%); pointer-events: none; } .centymetr .przezyte { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, #e8f0fb 0%, #d7e6f8 100%); } .centymetr .kreska { position: absolute; bottom: 0; width: 1px; height: 9px; background: #8ea4bd; } .centymetr .kreska.duza { height: 14px; width: 1.5px; background: #5f7893; } .centymetr .liczby { position: relative; height: 14px; margin-top: 3px; } .centymetr .liczba { position: absolute; transform: translateX(-50%); top: 0; font-size: 10px; color: var(--pod); font-variant-numeric: tabular-nums; } /* Znacznik wystaje ponad taśmę, a taśma tnie to, co z niej wychodzi (`overflow: hidden` trzyma wypełnienie w zaokrąglonych rogach). Dlatego znacznik stoi W TAŚMIE na całą jej wysokość, a chorągiewka wisi nad nim we własnej warstwie. */ .centymetr .teraz { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--akcent); z-index: 2; } .centymetr .chorag { position: absolute; top: 0; transform: translateX(-50%); background: var(--akcent); color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 11px; line-height: 1.5; white-space: nowrap; } .centymetr .chorag b { font-weight: 800; } /* Chorągiewka przy samym końcu miarki nie może wyjść poza kartę. */ .centymetr .chorag[style*="left:0%"] { left: 0 !important; transform: none; } .centymetr .chorag[style*="left:100%"] { left: auto !important; right: 0; transform: none; } /* --- USŁUGA I RACHUNEK W JEDNEJ LINII ------------------------------------------------------- Piotr, 10.09.2026. Przy jednej usłudze „Cena" i kwota przy usłudze to ta sama liczba pisana dwa razy pod sobą — w jednej linii od razu widać, co z czego wychodzi. */ .uslugi-jedna-linia, .wiersz-uslugi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-top: 8px; font-size: 14.5px; background: #fbfcfd; border: 1px solid var(--linia); border-radius: 10px; } .uslugi-jedna-linia .nazwa, .wiersz-uslugi .nazwa { flex: 1 1 160px; min-width: 0; font-weight: 600; } .uslugi-jedna-linia .kwota-uslugi, .wiersz-uslugi .kwota-uslugi { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .uslugi-jedna-linia > button, .wiersz-uslugi > button { flex: 0 0 auto; width: auto; } .uslugi-jedna-linia .rachunek { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding-left: 14px; border-left: 1px solid var(--linia); } .lista-uslug { display: grid; gap: 4px; } .rachunek-uslug, .uslugi-jedna-linia .rachunek { font-size: 14px; } .rachunek-uslug { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; padding: 2px 12px; } .rachunek-uslug .rachunek-czesc, .uslugi-jedna-linia .rachunek-czesc { white-space: nowrap; color: var(--pod); } .rachunek-uslug b, .uslugi-jedna-linia .rachunek b { color: var(--tekst); font-variant-numeric: tabular-nums; } .rachunek-uslug .znizka-znak, .uslugi-jedna-linia .znizka-znak { color: #b54708; } .rachunek-uslug .znizka-znak b, .uslugi-jedna-linia .znizka-znak b { color: #b54708; } .rachunek-uslug .do-zaplaty b, .uslugi-jedna-linia .do-zaplaty b { font-size: 16px; } /* --- „INNE" ZNACZY „NAPISZ, CO TO JEST" ------------------------------------------------------ */ .dodaj-zalacznik .pole-inne { flex: 1 1 180px; } .lista-zalacznikow .opisywanie .pole-inne-wiersz { flex: 0 0 180px; } /* === EDYTOR TEKSTU W WYWIADZIE, BADANIU I ZALECENIACH ======================================= Piotr, 10.09.2026: „Zalecenia — brak edytora tekstu". Pole ma wyglądać dokładnie tak, jak wyglądało zwykłe — z paskiem sześciu przycisków nad nim. Nic w karcie wizyty nie ma się przez to przesunąć. */ .pasek-edytora { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; } .pasek-edytora button { width: auto; min-height: 30px; height: 30px; padding: 0 11px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--pod); background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; } .pasek-edytora button:hover { color: var(--tekst); border-color: var(--linia-mocna); background: #fff; } .pasek-edytora button b, .pasek-edytora button i, .pasek-edytora button u { font-size: 14px; } .wizyta-sekcja .edytor { width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 132px; max-height: 460px; overflow-y: auto; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.65; color: var(--tekst); border: 1.5px solid var(--linia); border-radius: 10px; background: #fbfcfd; } .wizyta-sekcja .edytor:focus { outline: none; border-color: var(--akcent); background: #fff; } /* `contenteditable` nie zna `placeholder` -- podpowiedź rysujemy sami, gdy pole jest puste. */ .wizyta-sekcja .edytor.puste::before { content: attr(data-podpowiedz); color: var(--pod); pointer-events: none; } /* Odstępy w środku pola: akapity ciasno, listy z wcięciem takim jak w wydruku. */ .wizyta-sekcja .edytor p { margin: 0 0 6px; } .wizyta-sekcja .edytor p:last-child { margin-bottom: 0; } .wizyta-sekcja .edytor ul, .wizyta-sekcja .edytor ol { margin: 4px 0 8px; padding-left: 24px; } .wizyta-sekcja .edytor li { margin: 2px 0; } /* --- PASEK EDYTORA: KOLORY, TŁA, ZDJĘCIE ---------------------------------------------------- Piotr, 10.09.2026: „do edytora dodaj kolory, tła, przekreślenie, podkreślenie, dodanie zdjęcia". Kolory i tła to kropki, nie lista rozwijana — widać od razu, co jest do wyboru. */ .pasek-edytora .rozdzielacz { width: 1px; height: 20px; background: var(--linia); margin: 0 3px; align-self: center; } /* DWA WYBIERAKI KOLORU -- litery i tło. Każdy ma jako pierwszą pozycję powrót do zwykłego tekstu, osiem gotowych kolorów i własny wybór na końcu (Piotr, 10.09.2026: „zrób mi lepszy edytor, z wyborem koloru czcionki, z wyborem tła"). */ .pasek-edytora .wybierak { position: relative; display: inline-flex; } .pasek-edytora .otworz-wybierak { width: auto; min-height: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; } .pasek-edytora .otworz-wybierak .litera { font-size: 14px; font-weight: 800; color: #1f2937; } .pasek-edytora .otworz-wybierak .plama { width: 15px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); background: linear-gradient(90deg, #fff3a3 0 50%, #dbeafe 50% 100%); } .pasek-edytora .otworz-wybierak .strzalka { font-size: 9px; color: var(--pod); } .pasek-edytora .paleta { position: absolute; top: calc(100% + 5px); left: 0; z-index: 6; display: flex; flex-direction: column; gap: 7px; width: 196px; padding: 9px; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .16); } .pasek-edytora .paleta .zeruj { width: 100%; min-height: 28px; height: 28px; font-size: 12.5px; font-weight: 600; color: var(--pod); background: var(--tlo); border: 1px solid var(--linia); border-radius: 7px; } .pasek-edytora .paleta .kropki { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .pasek-edytora .paleta .kropka { width: 18px; min-width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .15); } .pasek-edytora .paleta .kropka:hover { outline: 2px solid var(--akcent); outline-offset: 1px; } .pasek-edytora .paleta .wlasny { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--pod); } .pasek-edytora .paleta .wlasny input[type=color] { width: 46px; height: 26px; padding: 0; border: 1px solid var(--linia); border-radius: 6px; background: none; cursor: pointer; } /* Tła i zdjęcia W POLU wyglądają tak samo jak na wydruku -- ten sam odcień w obu miejscach. */ .wizyta-sekcja .edytor .tlo-zolte { background: #fff3a3; } .wizyta-sekcja .edytor .tlo-zielone { background: #d9f2df; } .wizyta-sekcja .edytor .tlo-niebieskie { background: #dbeafe; } .wizyta-sekcja .edytor .tlo-rozowe { background: #fbdce6; } .wizyta-sekcja .edytor img { max-width: 100%; height: auto; display: block; margin: 6px 0; border-radius: 8px; border: 1px solid var(--linia); } /* WEJŚCIE DO POPRZEDNICH WIZYT -- widoczny przycisk, nie cichy odnośnik. Piotr, 10.09.2026: „a gdzie są poprzednie wizyty?". Stał jako blady napis obok „sprawdź w eWUŚ" i najczęściej w ogóle go nie było, bo chował się przy pacjencie z jedną wizytą. Teraz jest zawsze i wygląda jak coś, w co się klika. */ .wejscie-historii { width: auto; min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--pod); background: var(--karta); border: 1px solid var(--linia); border-radius: 999px; white-space: nowrap; } .wejscie-historii.sa { color: var(--akcent); border-color: #cfe0f5; background: var(--akcent-tlo); } .wejscie-historii:hover { border-color: var(--linia-mocna); } .historia-pacjenta .pusto-historia { margin: 0; font-size: 14px; line-height: 1.6; } /* --- CAŁA STARA WIZYTA W PANELU ------------------------------------------------------------- Piotr, 10.09.2026: „»otwórz całą« też chcę, żeby się otwierała w panelu bocznym, cały czas mam być na aktualnej wizycie". To WIDOK, nie formularz — stąd inny rytm niż w karcie wizyty: krótkie nagłówki sekcji, treść bez ramek, nic, co wygląda jak pole do wpisywania. */ .stara-wizyta .wroc-do-listy { width: auto; padding: 0 10px; min-height: 28px; font-size: 12.5px; } .stara-wizyta .kiedy-starej { margin: 10px 0 12px; font-size: 15px; font-weight: 700; } .stara-wizyta .kiedy-starej .pod { font-weight: 400; font-size: 12.5px; } .blok-starej { margin: 0 0 14px; } .blok-starej h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; color: var(--pod); text-transform: uppercase; letter-spacing: .06em; } .tresc-starej { font-size: 13.5px; line-height: 1.6; } .tresc-starej p { margin: 0 0 5px; } .tresc-starej ul, .tresc-starej ol { margin: 4px 0 6px; padding-left: 22px; } .tresc-starej img { max-width: 100%; height: auto; border-radius: 8px; margin: 5px 0; } .tresc-starej .tlo-zolte { background: #fff3a3; } .tresc-starej .tlo-zielone { background: #d9f2df; } .tresc-starej .tlo-niebieskie { background: #dbeafe; } .tresc-starej .tlo-rozowe { background: #fbdce6; } .leki-starej, .uslugi-starej, .dokumenty-starej, .zalaczniki-starej { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } .leki-starej li, .uslugi-starej li, .dokumenty-starej li, .zalaczniki-starej li { padding: 3px 0; border-bottom: 1px solid var(--linia); } .uslugi-starej li { display: flex; justify-content: space-between; gap: 10px; } .uslugi-starej .kwota-uslugi { font-weight: 700; font-variant-numeric: tabular-nums; } .stara-wizyta .co-z-tym { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .jak-przycisk { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--linia); border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--pod); text-decoration: none; background: var(--karta); } .jak-przycisk:hover { border-color: var(--linia-mocna); color: var(--tekst); } /* --- STARA WIZYTA W PANELU JEST DO POPRAWIENIA ---------------------------------------------- Piotr, 10.09.2026: „podgląd — zrób, żebym też mógł ją edytować i dopisać". Dwie wizyty do pisania na jednym ekranie muszą się różnić na pierwszy rzut oka — stąd pasek z datą u góry panelu i inny, cieplejszy odcień tła pól. */ .uwaga-stara { margin: 8px 0 10px; font-size: 12.5px; color: #8a5a20; background: #fdf4e6; border: 1px solid #edd3a6; border-radius: 8px; padding: 6px 10px; } .stan-starej { margin: 0 0 10px; font-size: 12px; color: var(--dobrze); min-height: 14px; } .stan-starej.blad { color: var(--blad); font-weight: 600; } .stan-starej:empty { min-height: 0; margin: 0; } .stara-wizyta .edytor.stara-tresc { width: 100%; box-sizing: border-box; margin-top: 5px; min-height: 88px; max-height: 320px; overflow-y: auto; padding: 9px 11px; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--tekst); border: 1.5px solid #edd3a6; border-radius: 9px; background: #fffdf8; } .stara-wizyta .edytor.stara-tresc:focus { outline: none; border-color: #d9a441; background: #fff; } .stara-wizyta .edytor.stara-tresc.puste::before { content: attr(data-podpowiedz); color: var(--pod); pointer-events: none; } .stara-wizyta .edytor.stara-tresc p { margin: 0 0 5px; } .stara-wizyta .edytor.stara-tresc ul, .stara-wizyta .edytor.stara-tresc ol { margin: 4px 0 6px; padding-left: 22px; } .stara-wizyta .edytor.stara-tresc img { max-width: 100%; height: auto; border-radius: 8px; } .stara-wizyta .edytor.stara-tresc .tlo-zolte { background: #fff3a3; } .stara-wizyta .edytor.stara-tresc .tlo-zielone { background: #d9f2df; } .stara-wizyta .edytor.stara-tresc .tlo-niebieskie { background: #dbeafe; } .stara-wizyta .edytor.stara-tresc .tlo-rozowe { background: #fbdce6; } /* Pasek edytora w panelu jest ciaśniejszy — szerokość słupka jest mniejsza niż karty. */ .stara-wizyta .pasek-edytora { gap: 3px; margin-top: 4px; } .stara-wizyta .pasek-edytora button { min-height: 26px; height: 26px; padding: 0 8px; font-size: 12px; } .stara-wizyta .pasek-edytora .otworz-wybierak { min-height: 26px; height: 26px; } /* --- MINIATURKA ZDJĘCIA PRZY ZAŁĄCZNIKU ----------------------------------------------------- Piotr, 10.09.2026: „jak dodaję zdjęcie, to chciałbym, żeby się ukazywała miniaturka tego zdjęcia oraz podpis, co to za zdjęcie". Zmniejsza je przeglądarka — plik na dysku zostaje pełnej wielkości i otwiera się po kliknięciu. */ .lista-zalacznikow .miniaturka { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--linia); background: var(--tlo); } .lista-zalacznikow .miniaturka img { width: 100%; height: 100%; object-fit: cover; display: block; } .lista-zalacznikow .miniaturka:hover { border-color: var(--akcent); } /* MIKROFON PRZY PODPISIE ZDJĘCIA jest mniejszy niż ten przy wywiadzie — stoi w etykiecie nad polem, a nie w nagłówku sekcji. */ .dodaj-zalacznik .podpis { display: inline-flex; align-items: center; gap: 6px; } .dodaj-zalacznik .mikrofon, .lista-zalacznikow .opisywanie .mikrofon { width: auto; min-height: 22px; height: 22px; padding: 0 7px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid var(--linia); background: var(--karta); color: var(--pod); } .lista-zalacznikow .opisywanie .mikrofon { min-height: 36px; height: 36px; padding: 0 10px; } .dodaj-zalacznik .mikrofon:hover, .lista-zalacznikow .opisywanie .mikrofon:hover { border-color: var(--akcent); color: var(--akcent); } /* --- UWAGI GABINETU: NIE DLA PACJENTA ------------------------------------------------------- Piotr, 10.09.2026: „dodaj jeszcze do wizyt pole uwagi — tylko widoczne dla mnie i dla recepcji". Inny, ciepły kolor niż reszta karty — żeby jednym spojrzeniem było widać, że to notatka robocza, a nie część dokumentacji, którą pacjent zobaczy. */ .wizyta-sekcja.uwagi-gabinetu { background: #fffdf6; border: 1px solid #f0e2c0; } .wizyta-sekcja.uwagi-gabinetu > h3::after { content: 'widzi lekarz i recepcja, nie pacjent'; margin-left: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8a5a20; background: #fdf4e6; border: 1px solid #edd3a6; border-radius: 999px; padding: 1px 9px; } .wizyta-sekcja.uwagi-gabinetu .edytor { background: #fffdf6; border-color: #f0e2c0; } .wizyta-sekcja.uwagi-gabinetu .edytor:focus { background: #fff; border-color: #d9a441; } /* === OKNO WYSYŁKI WIZYTY DO PACJENTA ========================================================== Piotr, 10.09.2026: „wysyłając chcę zaznaczyć, jakie pola chcę wysłać i zobaczyć podgląd przed wysłaniem". Po lewej wybór i adresy, po prawej podgląd — ten sam dokument, który pójdzie. */ .okno-wysylki { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .okno-wysylki .cien-okna { position: absolute; inset: 0; background: rgba(15, 23, 42, .34); } .pudlo-wysylki { /* SZERSZE OKNO, ŻEBY PODGLĄD BYŁ W SKALI 1:1. Kartka ma 210 mm (794 px); przy oknie 1060 px prawa kolumna miała 670 px i podgląd zmniejszał się do 82% -- litery robiły się dziesięciopunktowe. Przy 1220 px kolumna ma 830 px i dokument stoi w naturalnej wielkości. */ position: relative; z-index: 1; width: min(1220px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--karta); border-radius: 14px; padding: 18px 20px 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); } .pudlo-wysylki > h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; display: flex; align-items: center; } .pudlo-wysylki > h3 .zamknij-panel { margin-left: auto; width: auto; min-height: 30px; padding: 0 10px; } .srodek-wysylki { display: flex; gap: 20px; min-height: 0; flex: 1 1 auto; } .lewa-wysylki { flex: 0 0 330px; overflow-y: auto; } .prawa-wysylki { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .srodek-wysylki h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--pod); text-transform: uppercase; letter-spacing: .07em; } .lewa-wysylki h4:not(:first-child) { margin-top: 18px; } .pola-wysylki { display: grid; gap: 3px; } .pola-wysylki label { margin: 0; font-size: 14px; font-weight: 500; color: var(--tekst); } .uwaga-wysylki { margin: 8px 0 0; font-size: 12px; } .pole-wysylki { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--pod); text-transform: uppercase; letter-spacing: .04em; } .pole-wysylki input { padding: 9px 12px; font: inherit; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tekst); border: 1.5px solid var(--linia); border-radius: 9px; background: #fbfcfd; } .pole-wysylki input:focus { outline: none; border-color: var(--akcent); background: #fff; } #podglad-wysylki { flex: 1 1 auto; width: 100%; min-height: 420px; border: 1px solid var(--linia); border-radius: 10px; background: #eef1f5; } .stan-wysylki { margin: 10px 0 0; font-size: 13.5px; min-height: 16px; } .stan-wysylki.dobrze { color: var(--dobrze); } .stan-wysylki.blad { color: var(--blad); font-weight: 600; } .stan-wysylki .haslo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .12em; background: var(--akcent-tlo); color: var(--akcent); border-radius: 6px; padding: 1px 8px; } @media (max-width: 900px) { .srodek-wysylki { flex-direction: column; overflow-y: auto; } .lewa-wysylki { flex: 0 0 auto; overflow: visible; } #podglad-wysylki { min-height: 320px; } } /* Kratki w jednej linii z napisem — `.wybor-w-linii` jest tu z innej części programu i sama z siebie stawia kratkę pod tekstem. */ .pola-wysylki label { display: flex; align-items: center; gap: 9px; padding: 2px 0; cursor: pointer; } .pola-wysylki label input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; } /* „Wyślij" ma być widoczny bez przewijania — przykleja się do dołu lewej kolumny. */ .lewa-wysylki .rzad-przyciskow { position: sticky; bottom: 0; background: var(--karta); padding: 10px 0 0; margin: 14px 0 0; border-top: 1px solid var(--linia); } /* Lista pól przewija się sama, a adresy i „Wyślij" stoją zawsze na widoku — bez tego ostatnie pole chowało się pod przyklejonym rzędem przycisków. */ .lewa-wysylki { overflow: visible; } .pola-wysylki { max-height: 250px; overflow-y: auto; padding-right: 4px; } .lewa-wysylki .rzad-przyciskow { position: static; border-top: 0; } /* CZY KOD POSZEDŁ DO PACJENTA (Piotr, 12.09.2026: „chciałbym wiedzieć, czy to w ogóle wyszło"). Trzy stany, trzy kolory: zielony -- poszło, czerwony -- nie poszło i wiadomo dlaczego, szary -- nikt jeszcze nie próbował. Przycisk stoi przy każdym. */ .wysylka { border-top: 1px solid var(--linia); margin-top: 8px; padding-top: 8px; } .wysylka > summary { cursor: pointer; font-size: 13px; list-style: none; } .wysylka > summary::-webkit-details-marker { display: none; } .wysylka > summary::after { content: ' ▾'; color: var(--pod); } .wysylka[open] > summary::after { content: ' ▴'; } .wysylka[open] > summary { margin-bottom: 8px; } .wysylka > .wysylka-wiersz + .wysylka-wiersz { margin-top: 6px; } .wysylka-wiersz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .wysylka-wiersz button { margin-left: auto; } .wysylka-ok { color: var(--dobrze); font-weight: 600; } .wysylka-zle { color: var(--blad); font-weight: 600; } .wysylka-nic { color: var(--pod); } /* POLE, KTÓREGO NIE WOLNO ZOSTAWIĆ PUSTEGO (Piotr, 12.09.2026: „niech to pole dawkowania będzie zaznaczone na taki czerwony, różowy, pomarańczowy kolor"). Pomarańcz, nie czerwień: czerwień w tym programie znaczy „błąd", a to jest „jeszcze niewypełnione". */ input.pole-wymagane { border-color: #ea580c; background: #fff7ed; } input.pole-wymagane:focus { box-shadow: 0 0 0 3px rgba(234, 88, 12, .18); } .psychotrop-uwaga { color: #b91c1c; font-weight: 600; font-size: 13px; margin: 8px 0 4px; } /* Zwinięte szczegóły ceny i zamienniki -- rozwija je lekarz, gdy ich potrzebuje. */ .kwota-wiecej summary, .zamienniki summary { cursor: pointer; color: var(--pod); font-size: 13px; padding: 2px 0; } .kwota-wiecej[open] summary, .zamienniki[open] summary { margin-bottom: 4px; } .zamienniki { margin-top: 8px; } /* UWAGA PRYWATNA O PACJENCIE -- PASEK U GORY KARTY WIZYTY (Piotr, 12.09.2026: „powinna byc w karcie caly czas i w kolejnych wizytach (...) widzimy ja i po prostu kreseczka musimy usunac"). Ten sam cieply kolor, co pole „Uwagi prywatne" nizej -- bo to jest to samo. */ .pasek-uwagi-pacjenta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; background: #fffdf6; border: 1px solid #f0e2c0; border-radius: 10px; color: #6b4b16; font-size: 14px; } .pasek-uwagi-pacjenta .znak { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #d9a441; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; } .pasek-uwagi-pacjenta .tresc { flex: 1 1 auto; min-width: 0; font-weight: 600; } .pasek-uwagi-pacjenta .pod { flex: none; font-size: 11.5px; color: #9a7a45; } .pasek-uwagi-pacjenta .zdejmij { flex: none; border: 1px solid #edd3a6; background: #fff; color: #8a5a20; border-radius: 8px; padding: 2px 9px; cursor: pointer; font-size: 13px; } .pasek-uwagi-pacjenta .zdejmij:hover { background: #fdf4e6; } /* === SŁUPEK FINANSÓW: ZWIJANE SEKCJE I PASEK OSOBY ========================================== Piotr, 13.09.2026: „naprawdę nie widzę tego, nie działa to". I nie miał jak zobaczyć. Ten słupek NIE jest słupkiem Finansów -- to nasz własny, rysowany z tego, co Finanse przyślą. Wysyłały samą treść, więc każda zmiana wyglądu zrobiona po tamtej stronie (zwijane sekcje, pasek osoby) zostawała u nich. Teraz jadą razem z menu, a to jest ich wygląd po naszej stronie -- ten sam, co tam. */ /* ZWINIĘTA SEKCJA WYGLĄDA JAK PRZYCISK, BO NIM JEST (Piotr, 13.09.2026: „z tych zakładek zrób takie przyciski, takie panele fajne"). Ten sam kafelek, co w Finansach -- słupek jest jeden, więc i wygląd musi być jeden. */ #menu-boczne nav .menu-grupa-finanse.grupa-zwijana > .menu-grupa-tytul { cursor: pointer; display: flex; align-items: center; gap: 9px; width: 100%; margin: 0 0 3px; padding: 9px 12px; border: 1px solid #e8edf3; border-radius: 9px; background: #fff; font-size: 11.5px; letter-spacing: .05em; color: color-mix(in srgb, var(--sekcja, #64748b) 82%, #1f2937); transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; } #menu-boczne nav .menu-grupa-finanse.grupa-zwijana > .menu-grupa-tytul::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sekcja, #64748b); } #menu-boczne nav .menu-grupa-finanse.grupa-zwijana > .menu-grupa-tytul:hover { background: color-mix(in srgb, var(--sekcja, #2563eb) 6%, #fff); border-color: color-mix(in srgb, var(--sekcja, #2563eb) 32%, #e8edf3); box-shadow: 0 1px 3px color-mix(in srgb, var(--sekcja, #2563eb) 16%, transparent); } #menu-boczne nav .menu-grupa-finanse.grupa-zwijana > .menu-grupa-tytul:focus-visible { outline: 2px solid var(--sekcja, #2563eb); outline-offset: 2px; } /* Otwarta ma wyglądać na wciśniętą -- inaczej po rozwinięciu kafelek udaje, że nic się nie stało. */ #menu-boczne nav .menu-grupa-finanse.grupa-zwijana:not(.grupa-zwinieta) > .menu-grupa-tytul { background: color-mix(in srgb, var(--sekcja, #2563eb) 9%, #fff); border-color: color-mix(in srgb, var(--sekcja, #2563eb) 30%, #e8edf3); font-weight: 700; } .grupa-strzalka { margin-left: auto; font-size: 10px; opacity: .7; } /* SILNIEJ NIZ REGULA BAZOWA -- i to nie jest ozdoba. `#menu-boczne nav button` (id + dwa elementy) ustawia `display: flex` i BIJE zwykly zapis z dwoma klasami. Zwinieta sekcja rysowala wiec strzalke „w prawo", a pozycje zostawaly na ekranie: program mowil „zwiniete", arkusz pokazywal „otwarte" (Piotr, 13.09.2026: „nie ma zwiniętych, tak jak powinno być" -- i na zrzucie widac strzalke przy otwartej liscie). Prefiks `#menu-boczne nav` wyrownuje sile. */ #menu-boczne nav .menu-grupa-finanse.grupa-zwinieta > button, #menu-boczne nav .menu-grupa-finanse.grupa-zwinieta > a { display: none; } /* Kolor osoby przy pozycji -- „Przychody Piotr" i „Przychody Robert" różnią się jednym słowem NA KOŃCU napisu, więc czyta się je dopiero po kliknięciu. Pasek mówi to samo wcześniej. */ /* Ta sama sila co regula bazowa (id + dwa elementy), inaczej `padding: 7px 12px` wygrywa i pasek osoby wchodzi pod ikonke. */ #menu-boczne nav button.ma-osobe { position: relative; padding-left: 17px; } #menu-boczne nav button.ma-osobe::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--osoba, transparent); } /* ================================================================================================ SKIEROWANIE NA BADANIA (13.09.2026) ------------------------------------------------------------------------------------------------ Ustalenia: docs/skierowanie-alab-propozycja-2026-09-13.md (w Finansach). Trzy lampki JEDNA POD DRUGĄ, nie obok siebie — recepcjonistka, 13.09.2026: „trzy rzeczy świecące na jednym wierszu to już plama, nie informacja". ============================================================================================== */ .lista-skierowan { list-style: none; margin: 0; padding: 0; } .skierowanie-wiersz { border: 1px solid var(--linia); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--karta); } .naglowek-skierowania { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .skierowanie-wiersz:hover { border-color: var(--linia-mocna); } .naglowek-skierowania .co { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; } .naglowek-skierowania .co .pod { margin: 2px 0 0; } /* DŁUGIE NAZWISKO NIE ROZPYCHA WIERSZA I NIE ŁAMIE SIĘ NA TRZY LINIJKI -- ucina się kropkami, a całe widać po najechaniu (Piotr, 13.09.2026: „może skróć nazwisko"). */ .naglowek-skierowania .co > b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .naglowek-skierowania .co .pod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } /* PRZYCISKI PRZY WIERSZU -- JEDNA RODZINA, NIE CZTERY (Piotr, 13.09.2026: „te przyciski powinny być ładniejsze"). Do tej pory stały obok siebie: pełny niebieski, dwa szare i goły krzyżyk bez ramki -- każdy innej wysokości. Teraz mają jedną wysokość, jedno zaokrąglenie i ten sam sposób reagowania; różni je WYŁĄCZNIE waga: „Drukuj" jest pełny, reszta w ramce, a „Usuń" czerwienieje dopiero pod kursorem. */ .naglowek-skierowania .co-z-tym { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: none; } .naglowek-skierowania .co-z-tym button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 36px; padding: 7px 13px; font-size: 13.5px; border-radius: 9px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .naglowek-skierowania .co-z-tym button .ikona { font-size: 13px; line-height: 1; opacity: .85; } .naglowek-skierowania .co-z-tym button.glowny .ikona { opacity: 1; } .naglowek-skierowania .co-z-tym button:not(.glowny):not(.bad-usun) { background: var(--karta); border: 1px solid var(--linia-mocna); color: var(--tekst); } .naglowek-skierowania .co-z-tym button:not(.glowny):not(.bad-usun):hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); } /* „Usuń" ma być najtrudniejszy do naciśnięcia przez przypadek: bez ramki, bez koloru -- aż do chwili, gdy ktoś naprawdę na nim stanie. */ .naglowek-skierowania .co-z-tym button.bad-usun { border: 1px solid transparent; background: none; box-shadow: none; color: var(--pod); padding: 7px 10px; font-size: 15px; min-width: 36px; justify-content: center; } .naglowek-skierowania .co-z-tym button.bad-usun:hover { background: var(--blad-tlo); border-color: #fecaca; color: var(--blad); } .stan-skierowania { display: grid; gap: 7px; margin: 11px 0 0; } .stan-skierowania .lampka, .bad-karta .lampka { display: flex; gap: 11px; align-items: flex-start; border: 1px solid transparent; border-radius: 11px; padding: 10px 13px; font-size: 14px; } .stan-skierowania .lampka .kropka { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; margin-top: 5px; } .stan-skierowania .lampka .tresc { flex: 1; min-width: 0; } .stan-skierowania .lampka b { display: block; font-size: 14.5px; } .stan-skierowania .lampka .drobne { color: var(--pod); font-size: 13px; margin-top: 2px; display: block; } .stan-skierowania .lampka .obok { flex: 0 0 auto; align-self: center; } .stan-skierowania .l-czerwona { background: var(--blad-tlo); border-color: #fecaca; } .stan-skierowania .l-czerwona b { color: var(--blad); } .stan-skierowania .l-czerwona .kropka { background: var(--blad); animation: puls-skierowania 1.2s ease-in-out infinite; } @keyframes puls-skierowania { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } } /* Kto wyłączył animacje w systemie, ten ich tu nie dostanie — kolor zostaje. */ @media (prefers-reduced-motion: reduce) { .stan-skierowania .l-czerwona .kropka { animation: none; } } .stan-skierowania .l-zolta { background: var(--uwaga-tlo); border-color: #fde68a; } .stan-skierowania .l-zolta b { color: var(--uwaga); } .stan-skierowania .l-zolta .kropka { background: var(--uwaga); } .stan-skierowania .l-szara { background: var(--tlo); border-color: var(--linia); } .stan-skierowania .l-szara b { color: var(--pod); font-weight: 600; } .stan-skierowania .l-szara .kropka { background: var(--linia-mocna); } .badania-w-wierszu { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; } .badania-w-wierszu li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linia-cicha); } .badania-w-wierszu li:last-child { border-bottom: none; } .badania-w-wierszu .bad-kwota { font-variant-numeric: tabular-nums; color: var(--pod); white-space: nowrap; } /* ——— formularz ——— */ .bad-gora { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .bad-gora h3 { margin: 0; } .bad-lab { color: var(--granat); } .bad-ile { font-variant-numeric: tabular-nums; color: var(--pod); font-size: 14px; } .bad-szukaj { position: relative; margin: 12px 0 10px; } .bad-podpowiedzi { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: 12px; box-shadow: var(--karta-cien); max-height: 320px; overflow-y: auto; padding: 5px; } .bad-podpowiedzi button { display: flex; width: 100%; gap: 10px; align-items: baseline; text-align: left; border: none; background: none; border-radius: 9px; padding: 9px 11px; min-height: 0; } .bad-podpowiedzi button:hover { background: var(--akcent-tlo); } .bad-podpowiedzi .n { flex: 1; min-width: 0; } .bad-podpowiedzi .h { font-size: 11.5px; color: var(--granat); background: var(--akcent-tlo); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .bad-podpowiedzi .c { font-variant-numeric: tabular-nums; color: var(--pod); white-space: nowrap; } .bad-podpowiedzi .nic { padding: 11px; color: var(--pod); font-size: 14px; } .bad-podpis { margin: 0 0 7px; } .bad-karta .pastylki { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .bad-karta .pastylka { border: 1px solid var(--linia-mocna); background: var(--karta); border-radius: 999px; padding: 7px 15px; font-size: 14px; min-height: 0; } .bad-karta .pastylka .ile { color: var(--pod); } .bad-karta .pastylka.nowy { border-style: dashed; color: var(--akcent); } .bad-tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; } .bad-tabela td { padding: 9px 8px; border-bottom: 1px solid var(--linia-cicha); vertical-align: top; } .bad-tabela tr:last-child td { border-bottom: none; } .bad-tabela .pr { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .bad-tabela .nazwa { font-weight: 600; } .bad-tabela .kod { display: block; font-size: 12px; color: var(--pod); font-weight: 400; } .bad-tabela .bylo { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--granat); background: var(--akcent-tlo); border-radius: 6px; padding: 2px 8px; } .bad-suma { display: flex; justify-content: flex-end; gap: 14px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--linia); } .bad-suma b { font-size: 19px; color: var(--granat); font-variant-numeric: tabular-nums; } .bad-suma .oszczednosc { color: var(--dobrze); font-size: 13px; } .bad-cykl { background: var(--akcent-tlo); border: 1px solid #c7ddff; border-radius: 11px; padding: 13px 15px; margin: 16px 0 0; } .bad-cykl .naglowek { font-size: 14.5px; font-weight: 600; color: var(--granat); } .bad-cykl .drobne { font-size: 13px; color: var(--pod); margin: 3px 0 11px; } .bad-cykl .cykl-pola { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; } .bad-cykl .krotkie { flex: 0 0 160px; } /* KWADRACIK JEST WSPOLNY, nie tylko w karcie skierowania. Gdy regula stala wylacznie pod `.bad-karta`, ptaszek na ekranie recepcji bral szerokosc 100% z reguly bazowej i rozdymal sie na caly kafelek. */ .kwadracik { display: flex; gap: 8px; align-items: center; font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--tekst); font-weight: 400; margin: 0; } .bad-karta .kwadraciki { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; } .bad-gdzie { margin-top: 16px; grid-template-columns: 2fr 1fr 1fr; align-items: end; } @media (max-width: 720px) { .bad-gdzie { grid-template-columns: 1fr; } } @media (max-width: 720px) { .naglowek-skierowania .co-z-tym { width: 100%; } .naglowek-skierowania .co-z-tym button { flex: 1 1 auto; } /* ✕ nie rozpycha sie na caly wiersz -- inaczej spada pod przyciski i stoi sam posrodku. */ .naglowek-skierowania .co-z-tym button.bad-usun { flex: 0 0 auto; } .stan-skierowania .lampka { flex-wrap: wrap; } .stan-skierowania .lampka .obok { width: 100%; margin-top: 9px; } .bad-cykl .krotkie { flex: 1 1 100%; } /* NA TELEFONIE TABELA BADAN PRZESTAJE BYC TABELA -- ta sama poprawka, co na kartce. Inaczej nazwa lamie sie na trzy wiersze, a notka „to badanie bylo…" robi sie waskim slupkiem po jednym slowie. */ .bad-tabela, .bad-tabela tbody, .bad-tabela tr, .bad-tabela td { display: block; width: 100%; } .bad-tabela tr { border: 1px solid var(--linia); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; position: relative; } .bad-tabela td { border: none; padding: 0; } .bad-tabela .nazwa { padding-right: 34px; } .bad-tabela .pr { text-align: left; margin-top: 6px; } .bad-tabela td.pr:last-child { position: absolute; top: 6px; right: 6px; width: auto; margin: 0; } } /* ——— co ten pacjent już miał (skierowania ze wszystkich wizyt) ——— */ .bad-poprzednie-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linia); } .bad-poprzednie-panel h4 { margin: 0 0 8px; font-size: 14px; } .bad-poprzednie { list-style: none; margin: 0; padding: 0; font-size: 14px; } .bad-poprzednie li { display: flex; gap: 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--linia-cicha); } .bad-poprzednie li:last-child { border-bottom: none; } .bad-poprzednie .data { font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 92px; } .bad-poprzednie .lab { font-size: 12px; color: var(--pod); border: 1px solid var(--linia); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .bad-poprzednie .co { flex: 1; min-width: 0; color: var(--pod); } .bad-poprzednie .kw { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } @media (max-width: 720px) { .bad-poprzednie li { flex-wrap: wrap; } .bad-poprzednie .co { flex: 1 1 100%; order: 3; } .bad-poprzednie .kw { margin-left: auto; } } /* Treść dla laboratorium — pole tylko do skopiowania. */ #lab-tresc { width: 100%; font: inherit; font-size: 14px; line-height: 1.55; padding: 12px 14px; border: 1px solid var(--linia-mocna); border-radius: 11px; background: var(--tlo); color: var(--tekst); resize: vertical; } /* ——— ekran „Badania" (recepcja) ——— */ /* Piotr, 13.09.2026: „te przyciski powinny być ładniejsze (...) po prawej nowa wycena, albo to jakoś ustaw lepiej". Zasada całego tego ekranu: JEDNA rzecz, którą się ZACZYNA („Nowa wycena"), stoi po prawej i jest jedynym pełnym przyciskiem u góry. Wszystko inne jest ciche, dopóki nie będzie potrzebne. */ .bad-ekran-gora { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linia); } .bad-ekran-gora h2 { margin: 0 0 3px; } .bad-ekran-gora .pod { margin: 0; max-width: 56ch; } /* „+ Nowa wycena" — pełny, wypukły przycisk. Plus w kółku mówi „tu się coś zaczyna". */ .bad-nowa { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; padding: 11px 20px 11px 15px; border-radius: 11px; box-shadow: 0 2px 5px -1px rgba(37, 99, 235, .35), 0 8px 18px -8px rgba(37, 99, 235, .55); transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; } /* ZNACZEK PROBÓWKI, NIE PLUS (Piotr, 13.09.2026: „Nowa wycena powinna mieć ten znaczek właśnie probówki"). Ten sam znak stoi przy zakładce „Badania" w słupku -- przycisk i menu mówią o tej samej rzeczy, więc mają ten sam znak. */ .bad-nowa .plus { font-size: 16px; line-height: 1; flex: none; display: inline-flex; align-items: center; } .bad-nowa:hover { box-shadow: 0 3px 7px -1px rgba(37, 99, 235, .4), 0 12px 24px -8px rgba(37, 99, 235, .6); } .bad-nowa:active { transform: translateY(1px); } /* ——— POLA PACJENTA: SZEROKOŚĆ WEDŁUG TEGO, CO SIĘ W NIE WPISUJE ——— Piotr, 13.09.2026: „zrób szersze na nazwisko i imię, na PESEL zrób mniejsze o połowę, na telefon o połowę, a adres, ulica i kod większe". Osiem kolumn: nazwisko bierze cztery, PESEL i telefon po dwie (czyli po połowie tego, co nazwisko), a adres całą szerokość — bo mieści ulicę, numer, kod i miasto naraz. Wcześniej wszystkie cztery pola były równe, więc PESEL miał tyle miejsca, co nazwisko, a adres nie mieścił się nigdy. */ /* WSZYSTKO W JEDNEJ LINII (Piotr, 13.09.2026: „nazwisko, imię, PESEL, telefon i adres powinny być w jednej linii na górze. Tylko PESEL po prostu zmniejsz, a telefon do połowy"). Dwanaście kolumn: nazwisko 4, PESEL 2, telefon 2, adres 4. PESEL ma jedenaście cyfr i szersze pole jest mu do niczego; adres mieści ulicę, numer, kod i miasto. */ .bad-e-pacjent { grid-template-columns: repeat(12, 1fr); margin-bottom: 4px; gap: 10px; } .bad-e-pacjent .pole-nazwisko { grid-column: span 4; } .bad-e-pacjent .pole-pesel { grid-column: span 2; } .bad-e-pacjent .pole-telefon { grid-column: span 2; } .bad-e-pacjent .pole-adres { grid-column: span 4; } /* Przy węższym oknie łamiemy na dwa wiersze, a nie na cztery. */ @media (max-width: 1150px) { .bad-e-pacjent { grid-template-columns: repeat(8, 1fr); } .bad-e-pacjent .pole-nazwisko { grid-column: span 4; } .bad-e-pacjent .pole-pesel, .bad-e-pacjent .pole-telefon { grid-column: span 2; } .bad-e-pacjent .pole-adres { grid-column: span 8; } } @media (max-width: 760px) { .bad-e-pacjent { grid-template-columns: repeat(2, 1fr); } .bad-e-pacjent .pole-nazwisko, .bad-e-pacjent .pole-adres { grid-column: span 2; } .bad-e-pacjent .pole-pesel, .bad-e-pacjent .pole-telefon { grid-column: span 1; } } /* SZUKAJKA I PRZEŁĄCZNIK W JEDNEJ LINII: pole rośnie, przełącznik trzyma swoją szerokość. */ .bad-ekran-filtry { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 16px 0 18px; } /* SZUKAJKA: NIZSZA I Z ODDECHEM PRZY LUPIE. `.szukajka.mala` zmniejsza tylko czcionke i wciecie, a wysokosc 58 px zostawala z reguly bazowej -- wychodzilo wielkie pole z malym napisem przyklejonym do lupy. */ .bad-szukajka { flex: 1 1 260px; min-width: 0; margin-bottom: 0; } .bad-szukajka input { min-height: 46px; padding: 11px 14px 11px 44px; font-size: 15px; font-weight: 400; border-width: 1.5px; border-radius: 11px; } .bad-szukajka .szukajka-lupa { left: 15px; font-size: 15px; opacity: .45; } /* ——— pusta lista badań ——— */ /* Jedno zdanie, nic więcej (Piotr, 13.09.2026: „jak nikt nie czeka na decyzję, jest strasznie. Po co to w ogóle jest?"). U recepcji pusta lista to normalny stan, a nie zdarzenie. */ .bad-nic { color: var(--pod); font-size: 14.5px; margin: 4px 0 2px; } @media (max-width: 720px) { .bad-ekran-gora { flex-direction: column; } .bad-gora-guziki { width: 100%; } .bad-nowa { flex: 1; justify-content: center; } .bad-ekran-filtry { flex-direction: column; align-items: stretch; } .bad-pastylki-filtr { width: 100%; } .bad-pastylki-filtr .pastylka { flex: 1; } } /* ——— konta w gabinecie ——— */ .lista-kont { list-style: none; margin: 0 0 16px; padding: 0; } .lista-kont li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--linia-cicha); } .lista-kont li:last-child { border-bottom: none; } .lista-kont .kto { display: flex; flex-direction: column; min-width: 0; } .lista-kont .kto .pod { margin: 2px 0 0; } .konto-nowe { border-top: 1px solid var(--linia); padding-top: 14px; } .konto-pola { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .konto-klocki { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; } /* Powrót do Finansów — widoczny tylko dla konta, które stamtąd przyszło. */ #menu-boczne nav button.wroc-finanse { color: var(--akcent); font-weight: 600; border-bottom: 1px solid var(--linia); margin-bottom: 6px; padding-bottom: 10px; } /* Podpowiedź badania: ile zostaje i odpowiednik Biovis — to samo, co w zakładce ALAB. */ .bad-podpowiedzi .bv { display: block; font-size: 12px; color: var(--pod); margin-top: 2px; } .bad-podpowiedzi .bv b { font-variant-numeric: tabular-nums; color: var(--tekst); font-weight: 600; } .bad-podpowiedzi .bv b.zysk { color: var(--dobrze); } .bad-podpowiedzi .bv b.strata { color: var(--blad); } .bad-podpowiedzi button { align-items: flex-start; } .bad-podpowiedzi .c { font-size: 15px; font-weight: 600; color: var(--granat); } .bad-gora-guziki { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* „Nowa karta" to drobiazg obok, nie drugi przycisk tej samej wagi — dlatego sama ramka. */ .bad-gora-guziki .bad-nowa-karta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--pod); font-size: 13.5px; text-decoration: none; border: 1px solid var(--linia); border-radius: 10px; padding: 10px 13px; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .bad-gora-guziki .bad-nowa-karta:hover { color: var(--akcent); border-color: var(--akcent); background: var(--akcent-tlo); } /* ——— badania osadzone w Finansach ——— */ /* Menu jest już na ekranie — tylko tamto, z Finansów. Dwa słupki obok siebie to hałas. */ body.w-ramce #menu-boczne { display: none !important; } body.w-ramce #program main { margin-left: 0 !important; padding: 0 !important; max-width: none; } body.w-ramce .bad-ekran-gora { padding-top: 4px; } /* JEDEN PRZEŁĄCZNIK O DWÓCH POŁOŻENIACH, a nie dwa osobne przyciski. Wybrane położenie jest białe na szarym torze — to samo, co w telefonie przy „wszystkie / nieprzeczytane". */ .bad-pastylki-filtr { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: #eef2f7; border: 1px solid var(--linia); flex: none; } .bad-pastylki-filtr .pastylka { border: 1px solid transparent; background: none; border-radius: 9px; padding: 8px 15px; font-size: 14px; color: var(--pod); min-height: 0; white-space: nowrap; transition: color .15s ease, background-color .15s ease; } .bad-pastylki-filtr .pastylka:hover { color: var(--tekst); } .bad-pastylki-filtr .pastylka.wybrana { background: var(--karta); border-color: var(--linia); color: var(--granat); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .07); } /* „Recepcja może to wydrukować" — decyzja przy każdym dokumencie z osobna. */ .wizyta-dokument .dok-dla-recepcji { margin: 14px 0 4px; } /* „Program się uruchamia" — jedno zdanie zamiast fałszywego ekranu logowania. */ .ekran-czekamy { position: fixed; top: 0; left: 0; right: 0; z-index: 999; margin: 0; padding: 12px 16px; text-align: center; background: var(--uwaga-tlo); color: var(--uwaga); border-bottom: 1px solid #fde68a; font-size: 14.5px; font-weight: 600; } /* ——— SZUKANIE BADANIA: układ przepisany z zakładki ALAB w Finansach ——— Piotr, 13.09.2026, przysyłając dwa zrzuty: „to jest bardzo dobra zakładka z tymi procentami, ze zniżkami, ze wszystkim. Taka zakładka ma być". */ .bad-szukaj-blok { border: 1px solid var(--linia); border-radius: 14px; padding: 16px 16px 4px; margin: 18px 0 16px; background: var(--karta); } .bad-szukaj-tytul { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); margin-bottom: 8px; } .bad-szukaj-duza { margin-bottom: 6px; } .bad-szukaj-duza input { min-height: 56px; font-size: 19px; padding-left: 52px; } .bad-szukaj-duza .szukajka-lupa { left: 18px; font-size: 19px; } .bad-o-cenniku { font-size: 13px; color: var(--pod); margin: 0 0 12px; } /* PASEK RABATU. Progi w jednej linii, pola „inny / kwotowa / ma zapłacić" obok. */ /* WSZYSTKO W JEDNYM RZĘDZIE (Piotr, 13.09.2026: „te procenty umieść w jednym rzędzie, i tak inny, i kwotowa. Tam jeszcze dorobić po kosztach tylko pracownik"). Gdy rząd się nie mieści, przewija się w bok — nie łamie na trzy linijki, bo wtedy przestaje być jednym paskiem. */ /* BEZ PASKA PRZEWIJANIA (Piotr, 13.09.2026: „usun pasek przewijania, tam gdzie jest rabat. To ma byc na calej stronie, dostosowywac sie do wielkosci strony"). Pasek zawija sie więc naturalnie, a progi trzymają się razem — łamie się między grupami, nie w środku procentów. */ .bad-rabat { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--linia); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } .bad-progi { flex-wrap: wrap; } .bad-rabat .bad-prog { padding: 7px 13px; } .bad-rabat .bad-inny input { width: 74px; } /* „Pacjent ma zapłacić" — osobno i na środku (Piotr, 13.09.2026: „pole na środku ma zapłacić tyle i tyle"). To nie jest kolejny rabat: tam wpisuje się, ile OPUŚCIĆ, a tu — ile ma WYJŚĆ. */ .bad-cel-rzad { display: flex; justify-content: center; margin: 0 0 12px; } .bad-cel { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--granat); text-transform: none; letter-spacing: 0; background: var(--akcent-tlo); border: 1px solid #c7ddff; border-radius: 999px; padding: 8px 18px 8px 20px; } .bad-cel input { width: 118px; min-height: 38px; padding: 6px 12px; font-size: 16px; font-weight: 700; text-align: right; border-radius: 10px; border: 1.5px solid #c7ddff; background: var(--karta); color: var(--granat); font-variant-numeric: tabular-nums; } .bad-cel input:focus { border-color: var(--akcent); background: #fff; } .bad-cel-zl { font-weight: 600; color: var(--pod); } .bad-rabat-etykieta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pod); } .bad-progi { display: flex; gap: 6px; flex-wrap: wrap; } .bad-prog { border: 1px solid var(--linia-mocna); background: var(--karta); border-radius: 999px; padding: 7px 15px; font-size: 14px; min-height: 0; color: var(--tekst); box-shadow: none; } .bad-prog:hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); } .bad-prog.jest-wybrany { background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600; } .bad-inny { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--pod); margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; } .bad-inny input { width: 86px; min-height: 36px; padding: 6px 10px; font-size: 14px; border-radius: 999px; border: 1px solid var(--linia-mocna); background: var(--karta); text-align: center; } .bad-inny.jest-wybrany input { border-color: var(--akcent); background: var(--akcent-tlo); } /* ZIELONY NA STAŁE, nie dopiero po wybraniu (Piotr, 16.08.2026). To ma być widoczne jako osobna, wyjątkowa rzecz, a nie kolejny próg obok „50%". */ .bad-prog-pracownik { border-color: #86efac; color: var(--dobrze); background: #f0fdf4; font-weight: 600; } .bad-prog-pracownik:hover { border-color: var(--dobrze); background: #dcfce7; color: var(--dobrze); } .bad-prog-pracownik.jest-wybrany { background: var(--dobrze); border-color: var(--dobrze); color: #fff; } .bad-uwaga-tryb { flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; color: var(--dobrze); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 8px 11px; } /* TABELA WYNIKÓW. Kolumny Biovisu na własnym, jaśniejszym tle — tak samo jak w ALAB-ie. */ .bad-ile-wynikow { font-size: 13.5px; color: var(--pod); margin: 2px 0 6px; } .bad-wyniki-przewij { overflow-x: auto; margin: 0 -4px 12px; padding: 0 4px; } .bad-tabela-wyniki { font-size: 14px; } .bad-tabela-wyniki th { font-size: 12.5px; font-weight: 600; color: var(--pod); text-align: left; padding: 8px; border-bottom: 1px solid var(--linia); white-space: nowrap; } .bad-tabela-wyniki th.pr, .bad-tabela-wyniki td.pr { text-align: right; } .bad-tabela-wyniki th.bv, .bad-tabela-wyniki td.bv { background: #f5f8ff; color: var(--granat); } .bad-tabela-wyniki th.bv { color: var(--akcent); } .bad-tabela-wyniki tbody tr:hover td { background: #f8fafc; } .bad-tabela-wyniki tbody tr:hover td.bv { background: #eef3ff; } .bad-kod-kol { color: var(--pod); font-size: 13px; white-space: nowrap; } .bad-szary { color: var(--pod); } .bad-mocna { font-weight: 700; } .bad-zysk { color: var(--dobrze); font-weight: 600; } .bad-nieznany { color: var(--uwaga); font-size: 12.5px; } .bad-hormon { font-size: 11px; color: var(--granat); background: var(--akcent-tlo); border-radius: 999px; padding: 2px 7px; white-space: nowrap; } /* PTASZEK MA BYĆ PTASZKIEM, NIE POLEM (Piotr, 13.09.2026: „jak zaznaczam ten fistaszek, to od razu robisz taki prostokąt jakiś naokoło (...) taki od góry do dołu się robi"). I słusznie: reguła bazowa dla `input` dawała mu ramkę, wyściółkę i 48 px wysokości, więc wokół kratki rysował się wysoki prostokąt. Zdejmujemy to wszystko. */ .bad-ptaszek, .kwadracik input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; accent-color: var(--akcent); cursor: pointer; } .bad-ptaszek:hover, .bad-ptaszek:focus, .kwadracik input[type="checkbox"]:hover, .kwadracik input[type="checkbox"]:focus { background: none; box-shadow: none; border: 0; } /* Obrys zostaje dla klawiatury — ale cienki i przy samej kratce, a nie na cały wiersz. */ .bad-ptaszek:focus-visible, .kwadracik input[type="checkbox"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } /* CZERWONY CAŁY WIERSZ, nie sama liczba — czerwona kwota w szarym wierszu ginie przy przewijaniu kilkudziesięciu pozycji (Piotr, 16.08.2026). */ .bad-strata td { background: var(--blad-tlo) !important; } .bad-strata .bad-zysk { color: var(--blad); } /* Własna zniżka przy pojedynczej pozycji — dwa wąskie pola obok siebie. */ .bad-wlasna { white-space: nowrap; } /* POLA ZNIZKI PRZY POZYCJI -- WIEKSZE (Piotr, 13.09.2026: „zrób większe pola do wpisywania zniżek, zarówno procentowych, jak i kwotowych"). Wpisuje sie w nie przy pacjencie, czesto w pospiechu -- male okienko to chybione klikniecie i cyfra w zlym polu. */ .bad-mini { width: 78px; min-height: 40px; padding: 7px 9px; font-size: 15px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 9px; border: 1.5px solid var(--linia-mocna); margin-left: 5px; background: #fbfcfd; } .bad-mini:hover { border-color: var(--akcent); background: #fff; } .bad-mini:focus { border-color: var(--akcent); background: #fff; } /* Wpisana liczba ma byc od razu widoczna -- puste pole zostaje ciche. */ .bad-mini:not(:placeholder-shown) { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--granat); } .bad-tabela-szeroka th { font-size: 12.5px; font-weight: 600; color: var(--pod); text-align: left; padding: 8px; border-bottom: 1px solid var(--linia); white-space: nowrap; } .bad-tabela-szeroka th.pr { text-align: right; } .bad-suma .bad-bylo { color: var(--pod); font-size: 13px; margin-right: auto; } @media (max-width: 900px) { .bad-rabat { gap: 7px; } .bad-inny input { width: 66px; } .bad-cel { width: 100%; justify-content: space-between; border-radius: 12px; } } /* Wybór pieczątki stoi w tym samym rzędzie, co ptaszki „ceny / kod" — to jedna decyzja: jak ma wyglądać kartka. */ .bad-znaki { gap: 9px; } .bad-znaki select { min-height: 36px; padding: 6px 10px; font-size: 14px; border-radius: 9px; border: 1px solid var(--linia-mocna); background: var(--karta); width: auto; } .bad-karta .kwadraciki { align-items: center; } /* ——— WYCENA MA SIĘ MIEŚCIĆ NA EKRANIE ——— Piotr, 13.09.2026: „to jest takie wszystko rozciągnięte od góry do dołu. Weź to jakoś skomasuj, żeby to nie zajmowało tyle miejsca". Każdy odstęp niżej jest ścięty, a nie wycięty: nic nie znika, tylko przestaje stać osobno. */ .bad-karta { padding: 14px 16px; } .bad-karta .bad-gora { margin-bottom: 10px; } .bad-karta .bad-e-pacjent { gap: 8px; margin-bottom: 2px; } .bad-karta .bad-e-pacjent label { margin: 0; } .bad-karta .bad-e-pacjent input { min-height: 40px; padding: 8px 12px; } .bad-szukaj-blok { padding: 12px 12px 2px; margin: 12px 0 10px; } .bad-szukaj-tytul { margin-bottom: 6px; } .bad-szukaj-duza { margin-bottom: 4px; } .bad-szukaj-duza input { min-height: 44px; font-size: 16px; padding-left: 44px; } .bad-szukaj-duza .szukajka-lupa { left: 15px; font-size: 16px; } .bad-o-cenniku { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; } .bad-rabat { padding: 8px 10px; margin-bottom: 8px; } .bad-rabat .bad-prog { padding: 6px 12px; font-size: 13.5px; } .bad-cel-rzad { margin: 0 0 8px; } .bad-cel { padding: 6px 14px 6px 16px; font-size: 14px; } .bad-cel input { min-height: 34px; width: 104px; font-size: 15px; } /* Wyniki: niższe wiersze i własne przewijanie, żeby długa lista nie spychała wyceny poza dolną krawędź ekranu. */ .bad-wyniki-przewij { max-height: 46vh; overflow-y: auto; } .bad-tabela-wyniki td { padding: 6px 8px; } .bad-tabela-wyniki th { padding: 6px 8px; } .bad-ile-wynikow { margin: 0 0 4px; } /* „W tej wycenie" — widać, dokąd przechodzą zaznaczone badania. */ .bad-wycena-tytul { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--linia); } .bad-lista .bad-tabela td { padding: 6px 8px; } .bad-suma { margin-top: 8px; padding-top: 8px; } .bad-karta .kwadraciki { margin: 10px 0 0; gap: 14px; } .bad-karta .rzad-przyciskow { margin-top: 10px; } /* ——— TRZY KOLORY, TRZY ZNACZENIA ——— Piotr, 13.09.2026: „na zielono zaznacz, ile zostaje. Koszt na czerwono. Pacjent płaci na czarno". To nie jest ozdoba: recepcja przebiega wzrokiem kilkadziesiąt wierszy i kolor ma od razu powiedzieć, na co patrzy — co WYCHODZI z gabinetu (czerwone), co WCHODZI od pacjenta (czarne) i co z tego ZOSTAJE (zielone). */ .bad-koszt { color: var(--blad); font-variant-numeric: tabular-nums; } .bad-mocna { color: var(--tekst); font-weight: 700; font-variant-numeric: tabular-nums; } .bad-zysk { color: var(--dobrze); font-weight: 600; font-variant-numeric: tabular-nums; } /* W czerwonym wierszu (zniżka zjadła zarobek) „zostaje" przestaje być zielone — bo nie zostaje. */ .bad-strata .bad-zysk { color: var(--blad); font-weight: 700; } .bad-mocna .kod { color: var(--pod); font-weight: 400; } /* Przyciski wiersza stoją teraz POD badaniami, a nie przy nazwisku (Piotr, 13.09.2026). */ .skierowanie-wiersz > .co-z-tym { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linia-cicha); } .skierowanie-wiersz > .co-z-tym button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 36px; padding: 7px 13px; font-size: 13.5px; border-radius: 9px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .skierowanie-wiersz > .co-z-tym button .ikona { font-size: 13px; line-height: 1; opacity: .85; } .skierowanie-wiersz > .co-z-tym button.glowny .ikona { opacity: 1; } .skierowanie-wiersz > .co-z-tym button:not(.glowny):not(.bad-usun) { background: var(--karta); border: 1px solid var(--linia-mocna); color: var(--tekst); } .skierowanie-wiersz > .co-z-tym button:not(.glowny):not(.bad-usun):hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); } .skierowanie-wiersz > .co-z-tym button.bad-usun { border: 1px solid transparent; background: none; box-shadow: none; color: var(--pod); padding: 7px 10px; font-size: 15px; min-width: 36px; justify-content: center; margin-left: auto; } .skierowanie-wiersz > .co-z-tym button.bad-usun:hover { background: var(--blad-tlo); border-color: #fecaca; color: var(--blad); } /* Wybór terminu pobrania — pasek w wierszu, zamiast okienek przeglądarki (Piotr, 13.09.2026). */ .bad-termin { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; padding: 11px 13px; background: var(--akcent-tlo); border: 1px solid #c7ddff; border-radius: 11px; } .bad-termin-tytul { flex: 1 1 100%; font-size: 14px; font-weight: 600; color: var(--granat); } .bad-termin label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--pod); text-transform: none; letter-spacing: 0; font-weight: 600; } .bad-termin input { min-height: 38px; padding: 7px 11px; font-size: 14.5px; border-radius: 9px; border: 1.5px solid #c7ddff; background: var(--karta); width: auto; } .bad-termin .bad-termin-blad { flex: 1 1 100%; } @media (max-width: 720px) { .bad-termin label, .bad-termin input { width: 100%; } } /* ——— „DO ZAPŁATY" NA SAMEJ GÓRZE ——— Piotr, 13.09.2026: „na górze powinno być »do zapłaty«. Pacjent ma zapłacić »do zapłaty« na górze, a potem szukaj badania, potem rabaty". To jedyna liczba, która pada na głos przy ladzie — więc stoi pierwsza i jest największa. */ /* ——— „DO ZAPŁATY": CIEMNY PASEK, NIE BLADONIEBIESKI ——— Piotr, 13.09.2026: „to się zlewa teraz z tym do zapłaty". I zlewało się: karteczki z nazwiskami dostały jasnoniebieskie tło, a ten pasek miał dokładnie takie samo. To jedyna liczba na tym ekranie, którą mówi się pacjentowi na głos — więc ma być najmocniej widoczna ze wszystkiego. Granat z białą kwotą nie pomyli się z niczym innym. JEDNA LINIJKA, NIE TRZY (jego wcześniejsza uwaga: „ten pasek jest za wysoki"). */ .bad-doplaty { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 10px 0 8px; padding: 9px 16px; background: var(--granat); border: 1px solid var(--granat); border-radius: 10px; box-shadow: 0 2px 8px -3px rgba(27, 79, 156, .5); } .bad-doplaty-napis { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .bad-doplaty > b { font-size: 23px; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .bad-doplaty > em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .78); } .bad-doplaty > em b { font-variant-numeric: tabular-nums; color: #fff; } /* „zostaje" -- jaśniejsze odcienie, żeby czytało się na granacie. */ .bad-doplaty > em b.zysk { color: #86efac; } .bad-doplaty > em b.strata { color: #fca5a5; } /* ——— CO IDZIE NA WYDRUK ——— Piotr, 13.09.2026: „popraw to, pieczątka i to, bo mi się to nie podoba". Zamiast dwóch ptaszków i rozwijanej listy — jeden pasek z tytułem i trzema wyborami obok siebie. */ .bad-wydruk { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--linia); border-radius: 12px; background: #f8fafc; } .bad-wydruk-tytul { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pod); margin-bottom: 9px; } .bad-wydruk-rzad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .bad-wydruk-rzad .kwadracik { background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: 999px; padding: 7px 15px 7px 13px; font-size: 14px; gap: 8px; } .bad-wydruk-rzad .kwadracik:hover { border-color: var(--akcent); } .bad-znaki { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tekst); } .bad-znaki select { min-height: 36px; padding: 6px 34px 6px 12px; font-size: 14px; border-radius: 999px; border: 1px solid var(--linia-mocna); background-color: var(--karta); width: auto; } /* ——— PYTANIE O SKASOWANIE ——— Piotr, 13.09.2026: „te komunikaty o usunięciu zrób ładniejsze, tak aby były widoczne na jakimś czerwonym tle". Szare okienko przeglądarki wygląda tak samo przy „zapisać?" i przy „skasować na dobre?" — więc przestaje cokolwiek znaczyć. */ /* WSZYSTKO NA JEDNEJ LINII (Piotr, 13.09.2026: „poprzeczka »skasuj« jest wyżej niż powinna być, wyrównaj to wszystko"). Pole hasła ma nad sobą podpis, więc jest wyższe od guzików — przy `align-items:center` guziki wisiały w połowie jego wysokości. Równamy do DOLNEJ krawędzi: pole i oba przyciski stoją wtedy na jednej linii, tak jak w każdym innym pasku w programie. */ .bad-kasowanie { display: flex; gap: 11px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; padding: 11px 14px; background: var(--blad-tlo); border: 1px solid #fecaca; border-radius: 11px; } .bad-kasowanie > .bad-kasowanie-znak, .bad-kasowanie > .bad-kasowanie-tresc { align-self: center; } .bad-kasowanie-znak { font-size: 18px; color: var(--blad); line-height: 1; } .bad-kasowanie-tresc { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .bad-kasowanie-tresc b { color: var(--blad); font-size: 14.5px; } .bad-kasowanie-tresc span { color: var(--pod); font-size: 13px; } .bad-kasowanie-tak { background: var(--blad); border-color: var(--blad); color: #fff; font-weight: 600; min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 9px; } /* „Zostaw" ma tę samą wysokość, co „Tak, skasuj" — inaczej dwa guziki obok siebie nie stoją równo. */ .bad-kasowanie-nie { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 9px; } .bad-kasowanie-tak:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; } .bad-kasowanie-nie { color: var(--pod); } @media (max-width: 720px) { .bad-kasowanie button { flex: 1; } } /* ——— PIĘĆ KAFELKÓW AKCJI — przepisane z zakładki ALAB ——— Piotr, 13.09.2026: „było: zapisz, drukuj z cenami, drukuj z jedną zniżką, drukuj bez cen, tylko zapisz, wyczyść. I to było fajne". Każdy kafelek to gotowa decyzja — pod nazwą stoi, co z niego wyjdzie. */ .bad-akcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 4px; } .bad-akcja { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; min-height: 0; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--linia-mocna); background: var(--karta); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .bad-akcja b { font-size: 15px; font-weight: 700; color: var(--tekst); line-height: 1.25; } .bad-akcja small { font-size: 12.5px; color: var(--pod); line-height: 1.35; font-weight: 400; } .bad-akcja:hover { border-color: var(--akcent); background: var(--akcent-tlo); } .bad-akcja:hover b { color: var(--granat); } /* Ten, którym drukuje się najczęściej — pełny, żeby ręka trafiała w niego sama. */ .bad-akcja.jest-glowna { background: var(--akcent); border-color: var(--akcent); box-shadow: 0 2px 5px -1px rgba(37, 99, 235, .35), 0 10px 20px -10px rgba(37, 99, 235, .6); } .bad-akcja.jest-glowna b { color: #fff; } .bad-akcja.jest-glowna small { color: rgba(255, 255, 255, .85); } .bad-akcja.jest-glowna:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); } .bad-akcja.jest-glowna:hover b { color: #fff; } /* „Wyczyść" — przerywana ramka, bo to jedyny kafelek, który nic nie tworzy. */ .bad-akcja.jest-czysc { border-style: dashed; background: none; box-shadow: none; } .bad-akcja.jest-czysc b { color: var(--pod); } .bad-akcja.jest-czysc:hover { border-color: var(--blad); background: var(--blad-tlo); } .bad-akcja.jest-czysc:hover b { color: var(--blad); } /* ——— BADANIE BEZ CENY DLA GABINETU ——— Tak samo jak w zakładce ALAB: czerwony znak zamiast kratki i plakietka „BRAK". Skierowanie z badaniem o nieznanym koszcie to skierowanie, przy którym nie wiadomo, czy się zarabia, czy dopłaca. */ .bad-brak-znak { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blad); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; cursor: help; } .bad-brak { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--blad); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; } /* Powrót do listy — osobno od „Wyczyść", bo to dwie różne rzeczy. */ .bad-gora { align-items: center; } .bad-wroc { color: var(--akcent); font-weight: 600; font-size: 14px; margin-right: auto; } .bad-gora h3 { order: 2; } .bad-wroc { order: 1; flex: 1 1 100%; text-align: left; padding: 0 0 6px; } /* ——— PASEK RABATU W JEDNEJ LINII ——— Piotr, 13.09.2026: „w jednej linii umieść jeszcze po kosztach tylko pracownik". Po zdjęciu „ma zapłacić" rząd mieści się bez zawijania na zwykłym ekranie; przy wąskim oknie zawija się dalej, bo lepiej złamać niż uciąć. */ .bad-rabat { gap: 8px; } .bad-rabat .bad-prog { padding: 6px 11px; font-size: 13px; } .bad-rabat .bad-inny { font-size: 13px; gap: 6px; } .bad-rabat .bad-inny input { width: 62px; min-height: 32px; padding: 5px 8px; font-size: 13px; } .bad-rabat .bad-prog-pracownik { margin-left: auto; } @media (max-width: 1100px) { .bad-rabat .bad-prog-pracownik { margin-left: 0; } } /* ——— PUSTE POLE, KTÓRE TRZYMA WYDRUK ——— Piotr, 13.09.2026: „nie pisz, że do wypełnienia pozostały trzy pola, tylko po prostu podświetl, jak nie będzie wypełnione, i nie będzie można wydrukować". Czerwień stoi TAM, gdzie trzeba coś zrobić — zdanie obok kazało czytać, potem szukać które pole, i tak samo znikało. */ .bad-e-pacjent label.puste > input { border-color: #f4a6ad; background: #fff5f6; } .bad-e-pacjent label.puste { color: var(--blad); } .bad-e-pacjent label.puste > input:focus { border-color: var(--akcent); background: #fff; } /* „Pobranie krwi · DOKŁADANE SAMO" — plakietka przy pozycji, której nikt nie dodawał ręcznie. */ .bad-samo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; } /* Dzień cyklu u recepcji — pokazuje się sam, gdy w wycenie stoi hormon płciowy. */ .bad-e-cykl { margin: 12px 0 0; } .bad-e-cykl .cykl-pola { align-items: center; } /* ——— PODPOWIEDŹ PACJENTA: JEDNA LINIJKA NA OSOBĘ ——— Piotr, 13.09.2026: „na nazwisku jest PESEL i nie mogę wybrać". Nazwisko miało `flex: 1`, ale nie miało gdzie się skończyć — długie wychodziło poza swoje miejsce i PESEL rysował się na nim. Teraz nazwisko ucina się kropkami, a PESEL i telefon trzymają swoją szerokość i nigdy nie wchodzą na nie. */ .bad-podpowiedzi-pacjent button { align-items: center; gap: 12px; } .bad-podpowiedzi-pacjent .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--tekst); } .bad-podpowiedzi-pacjent .h { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12px; } .bad-podpowiedzi-pacjent .c { flex: 0 0 auto; font-size: 13.5px; font-weight: 400; color: var(--pod); } /* Ta sama ostrożność w liście badań — nazwa też nie ma prawa wejść na cenę. */ .bad-podpowiedzi .n { overflow: hidden; } /* ——— SZUKANIE PACJENTA: KARTECZKI, JAK W KARCIE PACJENTA ——— Piotr, 13.09.2026: „zrób takie wyszukiwanie, jak jest w karcie pacjenta. To jest najlepsze". Rozwijana lista kładła się na formularzu, a nazwisko, PESEL i telefon walczyły o tę samą linijkę — długie nazwisko wchodziło pod PESEL i nie dało się wybrać. Karteczka ma nazwisko grubo w pierwszej linijce, a pod nim równo ułożone szczegóły. Cała jest klikalna. */ .bad-osoby { margin: 4px 0 2px; } .bad-ilu { margin: 0 0 8px; font-size: 13.5px; color: var(--pod); } .bad-osoby-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* Karteczka wypełnia cały wiersz siatki — osoba bez telefonu ma tę samą wysokość, co osoba z telefonem, i rząd nie wygląda na porwany. */ .bad-osoby-lista li { padding: 0; display: grid; } /* KARTECZKA MA SIĘ RZUCAĆ W OCZY, ALE DELIKATNIE (Piotr, 13.09.2026: „żeby się podświetlały, żeby były bardziej widoczne te do wyboru, tak delikatnie"). Jasnoniebieskie tło i niebieski pasek przy lewej krawędzi — tyle, żeby wzrok trafiał w nazwiska od razu, a nie tyle, żeby krzyczały. Pod kursorem karteczka robi się biała i lekko się unosi: widać, na której stoi ręka. */ .bad-osoba { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%; height: 100%; text-align: left; min-height: 0; padding: 10px 12px 10px 14px; border-radius: 12px; border: 1px solid #d9e6fb; background: #f5f9ff; border-left: 3px solid var(--akcent); box-shadow: none; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .08s ease; } .bad-osoba:hover { border-color: var(--akcent); background: #fff; box-shadow: 0 2px 10px -2px rgba(37, 99, 235, .28); transform: translateY(-1px); } .bad-osoba:active { transform: none; } .bad-osoba:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } .bad-o-nazwa { font-weight: 700; font-size: 15.5px; color: var(--granat); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .bad-osoba:hover .bad-o-nazwa { color: var(--akcent-ciemny); } .bad-o-pod { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--pod); font-variant-numeric: tabular-nums; max-width: 100%; } .bad-o-adres { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ——— WIERSZ WYCENY: ZWINIĘTY, DOPÓKI NIE TRZEBA ——— Piotr, 13.09.2026: „niech tylko będzie nazwisko (...) a jak przyjdzie pacjent, to się rozwija te badania". Recepcja przegląda tę listę szukając nazwiska, a nie czyta po kolei kilkunastu badań przy każdej osobie. */ .bad-rozwin { margin-top: 10px; } .bad-rozwin > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--akcent); padding: 5px 11px; border-radius: 999px; background: var(--akcent-tlo); border: 1px solid #d9e6fb; user-select: none; } .bad-rozwin > summary::-webkit-details-marker { display: none; } .bad-rozwin > summary::before { content: "▸"; font-size: 11px; line-height: 1; } .bad-rozwin[open] > summary::before { content: "▾"; } .bad-rozwin > summary:hover { border-color: var(--akcent); background: #e6efff; } .bad-rozwin[open] > summary { margin-bottom: 10px; } /* Kwota w zwiniętym wierszu — to ona decyduje, czy recepcja w ogóle rozwija. */ .bad-kwota-wiersza { color: var(--granat); font-variant-numeric: tabular-nums; } .bad-opust { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* Tabela po rozwinięciu: ile normalnie, ile zniżki, ile do zapłaty — przy KAŻDYM badaniu. */ .bad-tabela-wiersza { font-size: 14px; } .bad-tabela-wiersza th { font-size: 12px; font-weight: 600; color: var(--pod); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linia); white-space: nowrap; } .bad-tabela-wiersza th.pr, .bad-tabela-wiersza td.pr { text-align: right; } .bad-tabela-wiersza td { padding: 6px 8px; } .bad-tabela-wiersza tfoot td { border-top: 1.5px solid var(--linia-mocna); border-bottom: none; font-weight: 700; padding-top: 9px; } .bad-opust-kom { color: var(--dobrze); font-variant-numeric: tabular-nums; } .bad-opust-zl { color: var(--pod); font-weight: 400; font-size: 12px; } /* „Pokaż…" / „Ukryj…" — napis mówi, co się stanie po kliknięciu (Piotr, 13.09.2026). */ .bad-rozwin > summary .bad-ukryj { display: none; } .bad-rozwin[open] > summary .bad-pokaz { display: none; } .bad-rozwin[open] > summary .bad-ukryj { display: inline; } /* „Usuń" przy prawej krawędzi zwiniętego wiersza (Piotr, 13.09.2026). */ .naglowek-skierowania > .bad-usun { margin-left: auto; flex: 0 0 auto; border: 1px solid transparent; background: none; box-shadow: none; color: var(--pod); padding: 6px 10px; font-size: 15px; min-width: 34px; min-height: 34px; border-radius: 9px; } .naglowek-skierowania > .bad-usun:hover { background: var(--blad-tlo); border-color: #fecaca; color: var(--blad); } /* Hasło przy kasowaniu — chroni przed cudzą ręką, nie przed rozpędem (to robi pytanie obok). */ .bad-kasowanie-haslo { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--blad); text-transform: none; letter-spacing: 0; } .bad-kasowanie-pole { min-height: 40px; padding: 8px 11px; font-size: 14px; width: 160px; border: 1.5px solid #fecaca; border-radius: 9px; background: #fff; } .bad-kasowanie-pole:focus { border-color: var(--blad); background: #fff; } .bad-kasowanie-blad { flex: 1 1 100%; } /* ✕ obok „Pacjent się zdecydował" — czerwony od razu, żeby nie pomylić go z tamtym (Piotr, 13.09.2026). Kasowanie pyta jeszcze o hasło, więc odruch nic nie zniszczy. */ .bad-usun-czerwony { flex: 0 0 auto; align-self: center; margin-left: 6px; border: 1px solid #fecaca; background: var(--blad-tlo); box-shadow: none; color: var(--blad); font-size: 15px; font-weight: 700; min-width: 36px; min-height: 36px; padding: 6px 10px; border-radius: 9px; } .bad-usun-czerwony:hover { background: var(--blad); border-color: var(--blad); color: #fff; } .stan-skierowania .lampka .bad-usun-czerwony { align-self: center; } /* Potwierdzenie po umówieniu pobrania — zielone, na chwilę, zamiast znikającego wiersza. */ .bad-termin-gotowe { background: #f0fdf4; border-color: #bbf7d0; align-items: center; } .bad-termin-gotewe, .bad-termin-gotowe b { color: #15803d; font-size: 14.5px; } .bad-termin-znak { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--dobrze); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; } .bad-termin-gdzie { display: block; color: var(--pod); font-size: 13px; margin-top: 2px; } /* „Pokaż N badań bez ceny dla gabinetu" — jedno zdanie na dole zamiast czerwonych wierszy w środku listy (Piotr, 13.09.2026: „mnie to denerwuje"). */ .bad-bez-ceny { margin: 2px 0 10px; min-height: 0; padding: 6px 13px; font-size: 13px; border-radius: 999px; border: 1px dashed #fecaca; background: var(--blad-tlo); color: var(--blad); box-shadow: none; font-weight: 600; } .bad-bez-ceny:hover { background: #fee2e2; border-color: var(--blad); color: var(--blad); } /* „Nie przyszedł — cofnij do wyceny" — pytanie w wierszu, bo znika termin z grafiku. Niebieskie, nie czerwone: nic nie ginie na dobre, wszystko wraca tam, skąd przyszło. */ .bad-cofniecie { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 11px 14px; background: var(--akcent-tlo); border: 1px solid #c7ddff; border-radius: 11px; } .bad-cofniecie-znak { font-size: 18px; color: var(--akcent); line-height: 1; } .bad-cofniecie-tresc { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .bad-cofniecie-tresc b { color: var(--granat); font-size: 14.5px; } .bad-cofniecie-tresc span { color: var(--pod); font-size: 13px; } .bad-cofniecie-blad { flex: 1 1 100%; } /* ——— WOLNE GODZINY PRZY UMAWIANIU POBRANIA ——— Piotr, 13.09.2026: „muszę podejrzeć wizyty w kalendarzu (...) jakie są wolne, i dopiero wtedy wpiszę". Grafik stoi w Finansach — tu widać z niego sam dzień, bez wychodzenia. */ .bad-godziny { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .bad-godziny-tytul { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pod); } .bad-godziny-tytul em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; } .bad-godziny-czekaj, .bad-godziny-zamkniete { font-size: 13px; color: var(--pod); } .bad-godziny-zamkniete { color: var(--uwaga); font-weight: 600; } .bad-godziny-lista { display: flex; flex-wrap: wrap; gap: 5px; max-height: 116px; overflow-y: auto; padding: 1px; } .bad-godzina { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: 999px; border: 1px solid #c7ddff; background: var(--karta); color: var(--granat); box-shadow: none; font-variant-numeric: tabular-nums; } .bad-godzina:hover { border-color: var(--akcent); background: var(--akcent-tlo); } .bad-godzina.wybrana { background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 700; } /* ——— PASEK TERMINU: JEDEN RZĄD ——— Piotr, 13.09.2026: „zrób w jednym ciągu (...) z boku w jednej linii: załóż wizytę, kalendarz Piotr, a rezygnację zaznacz na czerwono. To jest na takim samym do naciskania". Trzy przyciski tej samej wysokości; różni je kolor, nie rozmiar. */ .bad-termin-rzad { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1 1 100%; } .bad-termin-guzik { min-height: 42px; padding: 9px 16px; font-size: 14.5px; font-weight: 600; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1.5px solid var(--linia-mocna); background: var(--karta); color: var(--tekst); } .bad-termin-guzik:hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); } .bad-termin-guzik.glowny { border-color: var(--akcent); } .bad-termin-guzik.glowny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); color: #fff; } /* „Rezygnuję" -- jedyny, który nic nie zakłada. Czerwony od razu, żeby nie mylił się z „Załóż wizytę" stojącym obok. */ .bad-termin-guzik.bad-termin-rezygnuj { border-color: #fecaca; background: var(--blad-tlo); color: var(--blad); } .bad-termin-guzik.bad-termin-rezygnuj:hover { background: var(--blad); border-color: var(--blad); color: #fff; } .bad-termin-rzad label { flex: 0 0 auto; } @media (max-width: 760px) { .bad-termin-rzad label, .bad-termin-guzik { flex: 1 1 100%; justify-content: center; } } /* „← Wróć do badań" nad grafikiem (Piotr, 13.09.2026: „Ola musi mieć możliwość przejścia z grafiku do badań"). Stoi pierwszy w pasku, po lewej — tam, gdzie wzrok wraca. */ .pasek-modulu .wroc-do-badan { min-height: 0; padding: 5px 13px; margin-right: 12px; font-size: 13.5px; font-weight: 600; border-radius: 999px; border: 1px solid #c7ddff; background: var(--akcent-tlo); color: var(--granat); box-shadow: none; display: inline-flex; align-items: center; gap: 6px; } .pasek-modulu .wroc-do-badan:hover { background: var(--akcent); border-color: var(--akcent); color: #fff; } /* Guziki w pasku cofnięcia — ta sama wysokość, co reszta pasków. */ .bad-cofniecie-tak, .bad-cofniecie-nie { min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 9px; } /* === BADANIA: PASTYLKI Z LICZNIKIEM I ZDANIE „CO ZROBIC" ==================================== */ /* Piotr, 14.09.2026: „bez migania, ze słowami". Recepcja, zapytana wprost: „Kropka nic nie mówi. Nie mówi, co mam zrobić, czy ktoś już dzwonił, czy pacjent się odezwał". Lekarz: „Siedzę przy tym ekranie osiem godzin. Miganie to kara, nie informacja". Dlatego tu NIE MA ani jednej animacji. Kolor mówi JAK PILNE, a zdanie obok mówi CO ZROBIĆ. */ .pastylka-ile { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: rgba(0, 0, 0, .10); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .pastylka.wybrana .pastylka-ile { background: rgba(255, 255, 255, .25); } /* PO TERMINIE WIDAC OD RAZU -- ale kolorem, nie ruchem. */ .pastylka-pilna { color: #b91c1c; } .pastylka-pilna .pastylka-ile { background: #fee2e2; color: #b91c1c; } .pastylka.wybrana.pastylka-pilna { background: #b91c1c; color: #fff; } .lampka.l-pomarancz { background: #fff7ed; border-color: #fed7aa; } .lampka.l-pomarancz .kropka { background: #ea580c; } .lampka.l-zielona { background: #f0fdf4; border-color: #bbf7d0; } .lampka.l-zielona .kropka { background: #16a34a; } /* CO USTALILISMY -- jedno pole i data powrotu, w jednej linii. */ .bad-notatka { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; } .bad-notatka label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #475569; } .bad-notatka-tresc { flex: 1 1 260px; } .bad-notatka input { height: 34px; padding: 0 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; } .bad-notatka-zapisz { height: 34px; } .bad-notatka-podpis { font-size: 11px; color: #64748b; align-self: center; } /* KTO USTAWIL ZNIZKE -- zeby recepcja nie musiala przerywac lekarzowi wizyty. */ .bad-podpis-znizki { margin: 6px 0 10px; padding: 7px 11px; font-size: 12px; color: #475569; background: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 0 7px 7px 0; } /* KIEDY POBRANIE -- przyciski „za tydzień / za 3 miesiące" i data obok. */ /* JEDNA LINIA, NIE DWIE (Piotr, 14.09.2026: „ma być po prostu »kiedy pobranie« i w jednej linii tam, gdzie jest napisane »kiedy pobranie« (...) ale ma być on teraz za wysoki"). Napis miał wcześniej `width: 100%` i spychał przyciski do drugiego rzędu -- pasek był przez to dwa razy wyższy, niż musi. Teraz wszystko stoi obok siebie i łamie się dopiero wtedy, gdy naprawdę brakuje miejsca (wąski ekran, telefon). */ .bad-termin-badan { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 12px 0; padding: 8px 13px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; } .bad-termin-badan-tytul { font-size: 11px; color: #475569; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; white-space: nowrap; } .bad-termin-albo { font-size: 12px; color: #94a3b8; margin: 0 2px; } .bad-za { height: 32px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; } .bad-za:hover { border-color: #94a3b8; } .bad-za.jest-wybrany { background: #0f172a; border-color: #0f172a; color: #fff; } /* POLE DATY OTWIERA KALENDARZ PRZEGLĄDARKI -- razem z ikonką po prawej. */ .bad-termin-data { height: 32px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 13px; color: #0f172a; cursor: pointer; } .bad-termin-data:hover { border-color: #94a3b8; } .bad-termin-data:focus { outline: 2px solid #0f172a; outline-offset: 1px; } /* === WYDRUKI SKIEROWANIA: JEDEN RZĄD, DELIKATNE PRZEGRODY =================================== */ /* Piotr, 14.09.2026: „usuń ten znaczek »drukuj«, tylko napisz »drukuj z jedną zniżką« oraz »ze zniżkami« i to wszystko w jednej linii, tylko delikatnie od siebie oddzielone". Słowo „Drukuj" pada RAZ, na początku rzędu. Przegrody są cienkie i szare -- mają mówić „to jest jedna rodzina, cztery postacie tej samej kartki", a nie dzielić ekran kreskami. */ .bad-wydruki { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 3px 5px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; } /* PRZEGRODA MIĘDZY POSTACIAMI WYDRUKU -- nie przed pierwszą i nie po ostatniej. */ .bad-wydruki > button + button { position: relative; margin-left: 7px; } .bad-wydruki > button + button::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: #e2e8f0; } .bad-wydruki > button { margin: 0; } /* LEKARZ NIE PRZYJMUJE, ALE POBRAĆ MOŻNA -- mówimy to szeptem, a nie zamykamy dnia. */ .bad-godziny-uwaga { display: block; margin: 4px 0 6px; font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 5px 9px; } /* === WIZYTA KONTROLNA PRZY POBRANIU ======================================================== */ /* Piotr, 14.09.2026: „jak pobiera krew, umawiamy wizytę za dwa, trzy tygodnie" -- i, zapytany wprost, czy ma to być w tym samym okienku: „tak, ale nieobowiązkowo". Dlatego ten pasek pojawia się DOPIERO po umówieniu pobrania, proponuje datę trzy tygodnie później i ma przycisk „Nie teraz". Nic nie blokuje. */ .bad-kontrolna { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; width: 100%; margin-top: 11px; padding-top: 11px; border-top: 1px dashed #bbf7d0; } .bad-kontrolna-tytul { width: 100%; font-size: 12px; font-weight: 300; letter-spacing: .1px; color: #475569; } .bad-kontrolna label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #475569; } .bad-kontrolna input { height: 34px; padding: 0 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; } .bad-kontrolna button { height: 34px; } .bad-kontrolna-gotowe { font-size: 13px; color: #166534; } .bad-termin-tresc { display: flex; flex-direction: column; } /* KLOCEK, KTORY NIE JEST WLACZONY (Piotr, 14.09.2026: „Pokazany-ale-zablokowany"). Zakladka zostaje w slupku, ale w srodku stoi jedno zdanie i przycisk. */ .klocek-niewlaczony { max-width: 34rem; margin: 3rem auto; padding: 2rem; text-align: center; border: 1px solid #d8dde3; border-radius: 10px; background: #fbfcfd; } .klocek-niewlaczony .klocek-zdanie { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; } .klocek-niewlaczony .klocek-pod { margin: 0 0 1.5rem; color: #5b6672; } .klocek-niewlaczony .klocek-chce { padding: .65rem 1.4rem; font-size: 1rem; } .klocek-niewlaczony .klocek-odpowiedz { margin: 1rem 0 0; min-height: 1.2rem; color: #5b6672; } /* DOKUMENT ZAMIAST PESEL-U I KRAJ (Piotr, decyzja 1 z 14.09.2026, wariant A). Dwa pola dla pacjenta bez PESEL-u -- cudzoziemca i dziecka przed nadaniem numeru. Stoją w drugim wierszu, nie w pierwszym: u prawie każdego pacjenta zostaną puste, a pierwszy wiersz ma być tym, co recepcja wypełnia zawsze. */ .bad-e-pacjent .pole-dokument { grid-column: span 6; } .bad-e-pacjent .pole-kraj { grid-column: span 6; } @media (max-width: 1150px) { .bad-e-pacjent .pole-dokument, .bad-e-pacjent .pole-kraj { grid-column: span 4; } } @media (max-width: 760px) { .bad-e-pacjent .pole-dokument, .bad-e-pacjent .pole-kraj { grid-column: span 2; } } /* ZMIANA HASŁA PRZY PIERWSZYM WEJŚCIU (Piotr, 14.09.2026: „powinna się wymuszać zmiana tego hasła na nowe"). Zasłania program, bo to jedna rzecz do zrobienia, zanim zacznie się dzień. */ .wymus-haslo { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22, 32, 43, .55); } .wymus-haslo-karta { width: 100%; max-width: 420px; background: #fff; border-radius: 14px; padding: 28px 30px; box-shadow: 0 18px 50px rgba(16, 28, 40, .28); } .wymus-haslo-karta h2 { margin: 0 0 10px; font-size: 1.3rem; } .wymus-haslo-karta p { margin: 0 0 18px; color: #4b5a6a; line-height: 1.55; } .wymus-haslo-karta label { display: block; margin-bottom: 14px; font-size: 13px; color: #5b6672; } .wymus-haslo-karta input { width: 100%; margin-top: 5px; padding: 11px 13px; font: inherit; font-size: 16px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fbfcfd; box-sizing: border-box; } .wymus-haslo-karta input:focus { outline: none; border-color: #2f5bbd; background: #fff; } .wymus-haslo-karta button { width: 100%; padding: 12px 18px; font-size: 15px; } .wymus-blad { min-height: 1.2rem; margin: 0 0 10px; color: #a3392f; font-size: 14px; } /* UMÓWIONY TERMIN W KALENDARZU (Piotr, 15.09.2026: „kalendarz, gdzie dwa razy nacisną i zapiszą pacjenta (...) a lekarz naciśnie na stetoskop i odbędzie wizytę"). Wygląda INACZEJ niż odbyta wizyta -- to obietnica, nie zapis tego, co było. */ .kal-wizyta.kal-zapis { background: #eef6ff; border-color: #b9d4f2; border-left: 3px solid #2f5bbd; } .kal-wizyta.kal-zapis .godz { color: #2f5bbd; font-weight: 600; } .kal-stetoskop { margin-left: auto; padding-left: 4px; font-size: 13px; opacity: .8; } /* OKNO UMAWIANIA -- otwiera się nad kalendarzem, bo umawianie trwa trzydzieści sekund i nie ma sensu wyrzucać po nim człowieka na inny ekran. */ .okno-zapisu { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(22, 32, 43, .5); } .okno-zapisu-karta { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 14px; padding: 24px 26px; box-shadow: 0 18px 50px rgba(16, 28, 40, .28); } .okno-zapisu-karta h2 { margin: 0 0 4px; font-size: 1.25rem; } .okno-zapisu-karta > .pod { margin: 0 0 16px; } .zapis-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .zapis-pola .szeroko { grid-column: 1 / -1; } .zapis-pola label { display: block; font-size: 13px; color: #5b6672; } .zapis-pola input { width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-size: 15px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fbfcfd; box-sizing: border-box; } .zapis-pola input:focus { outline: none; border-color: #2f5bbd; background: #fff; } .zapis-pola .pod { display: block; margin-top: 4px; font-size: 12px; } .zapis-blad { min-height: 1.2rem; margin: 12px 0 0; color: #a3392f; font-size: 14px; } .zapis-guziki { display: flex; gap: 10px; align-items: center; margin-top: 8px; } @media (max-width: 560px) { .zapis-pola { grid-template-columns: 1fr; } } /* CO CZEKA NA WYSŁANIE — nad kalendarzem (krok 3, 15.09.2026: „powiadomienia wysyła człowiek"). Treść stoi na wierzchu, żeby nikt nie naciskał „wyślij" w ciemno. */ .zapisy-czekaja { margin: 0 0 14px; border: 1px solid #d8e3ee; border-radius: 12px; background: #f7fafd; overflow: hidden; } .czeka-naglowek { padding: 10px 14px; font-weight: 600; font-size: 14px; border-bottom: 1px solid #e6eef6; color: #2f5bbd; } .czeka-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #edf2f7; } .czeka-wiersz:last-child { border-bottom: none; } .czeka-wiersz.czeka-blad { background: #fdf5f4; } .czeka-kto b { display: block; font-size: 14px; } .czeka-kto .pod { display: block; font-size: 12px; } .czeka-tresc { font-size: 13.5px; line-height: 1.45; color: #2b3a4a; } .czeka-powod { grid-column: 1 / -1; font-size: 13px; color: #a3392f; } .czeka-wyslij { padding: 8px 16px; font-size: 14px; } @media (max-width: 760px) { .czeka-wiersz { grid-template-columns: 1fr; gap: 6px; } } /* STRONA ZAPISÓW DLA PACJENTA (krok 5, 15.09.2026). Osobny ekran, nie zakładka programu -- pacjent nie ma tu konta i widzi wyłącznie wolne godziny. */ .strona-zapisow { background: #f6f8fb; } .zapisy-main { max-width: 620px; margin: 0 auto; padding: 28px 18px 60px; } .zapisy-main h1 { margin: 0 0 4px; font-size: 1.5rem; } .zapisy-main h2 { margin: 0 0 12px; font-size: 1.15rem; } .zapisy-main .karta { margin-top: 18px; padding: 18px 20px; } .zapisy-main label { display: block; margin-bottom: 14px; font-size: 13px; color: #5b6672; } .zapisy-main input { width: 100%; margin-top: 5px; padding: 12px 13px; font: inherit; font-size: 16px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fbfcfd; box-sizing: border-box; } .zapisy-main input:focus { outline: none; border-color: #2f5bbd; background: #fff; } .zap-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .zap-godzina { padding: 12px 6px; font: inherit; font-size: 15px; cursor: pointer; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; } .zap-godzina:hover { border-color: #2f5bbd; } .zap-godzina.wybrana { background: #2f5bbd; border-color: #2f5bbd; color: #fff; font-weight: 600; } .zap-blad { min-height: 1.2rem; margin: 0 0 10px; color: #a3392f; font-size: 14px; } .zapisy-main .glowny { width: 100%; padding: 13px 18px; font-size: 16px; } .zap-gotowe { border-color: #b8ddc0; background: #f3faf5; } /* GODZINY PRZYJĘĆ — ekran w zakładce Gabinet (krok 5, 15.09.2026). Z tych godzin liczą się wolne terminy i to, co widzi pacjent na stronie zapisów. */ .godziny-wiersz { display: grid; grid-template-columns: 120px repeat(4, 1fr); gap: 10px; align-items: end; padding: 8px 0; border-bottom: 1px solid #eef2f7; } .godziny-wiersz:last-child { border-bottom: none; } .godziny-nazwa { font-size: 14px; font-weight: 600; align-self: center; } .godziny-wiersz label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5b6672; min-width: 0; } .godziny-wiersz input { width: 100%; margin: 0; padding: 8px 10px; font: inherit; font-size: 14px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fbfcfd; box-sizing: border-box; } .godziny-dol { margin-top: 14px; } .godziny-dol label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: #5b6672; } .godziny-naglowek { margin: 22px 0 4px; font-size: 1rem; } .zamkniety-wiersz { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; } .zamkniety-wiersz .pod { flex: 1; } .godziny-dodaj { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .godziny-dodaj input { padding: 9px 11px; font: inherit; font-size: 14px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fbfcfd; } .godziny-zapisz { display: flex; align-items: center; gap: 12px; margin-top: 20px; } @media (max-width: 860px) { .godziny-wiersz { grid-template-columns: 1fr 1fr; } .godziny-nazwa { grid-column: 1 / -1; } }