/* Zalecenia dla pacjenta — wspólne dla Gabinetu (flebologia) i medycyny estetycznej (22.10.2026).
   Panel buduje public/gabinet-zalecenia.js. */
/* ZALECENIA DLA PACJENTA (układ 14.10.2026): z lewej menu sekcja → zabiegi, z prawej karta zabiegu.
   Sekcje mają własne kolory (jak karty w strefie pacjenta), treść — bloki z kolorowym paskiem. */
.zal-opis { font-size: 14px; color: var(--szary); margin: 0; }
.zal-naglowek { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--ramka); }
.zal-uklad { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.zal-bok { display: grid; gap: 10px; }
.zal-bok #zal-szukaj { margin: 0; }
.zal-bok #zal-wybor { display: none; margin: 0; width: 100%; }
.zal-menu-grupa { border: 1px solid var(--ramka); border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 10px; }
.zal-menu-naglowek { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--g-tlo); color: var(--g-kolor); font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--ramka); }
.zal-ikona { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; color: var(--g-kolor, var(--granat)); flex-shrink: 0; }
.zal-ikona svg { width: 15px; height: 15px; }
.zal-ile { margin-left: auto; font-size: 11.5px; font-weight: 700; background: #fff; border-radius: 999px; padding: 1px 8px; }
.zal-menu-pozycje { display: grid; }
button.zal-pozycja { margin: 0; padding: 10px 12px 10px 14px; background: #fff; color: #22313f; border: 0; border-top: 1px solid #eef2f6; border-left: 4px solid transparent; border-radius: 0; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.3; }
button.zal-pozycja:first-child { border-top: 0; }
button.zal-pozycja:hover { background: #f6f9fc; filter: none; }
button.zal-pozycja.wybrana { background: var(--g-tlo); border-left-color: var(--g-kolor); color: var(--g-kolor); font-weight: 700; }
.zal-pusto { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 46px 20px; border: 2px dashed var(--ramka); border-radius: 14px; color: var(--szary); font-size: 14px; }
.zal-pusto svg { width: 46px; height: 46px; color: #b9c6d2; }
.zal-pusto b { color: var(--granat); font-size: 16px; }
.zal-tytul { background: var(--g-tlo); border-left: 6px solid var(--g-kolor); border-radius: 12px; padding: 14px 18px; }
.zal-grupa-etykieta { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--g-kolor); }
.zal-tytul h3 { margin: 2px 0 4px; font-size: 20px; color: #17263a; }
.zal-tytul p { margin: 0; font-size: 14px; line-height: 1.5; color: #3c4a5a; }
.zal-pasek { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 0; margin: 4px 0 14px; border-bottom: 1px solid var(--ramka); }
.zal-pasek-opis { font-size: 13px; color: var(--szary); font-weight: 600; }
.zal-dzial { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--granat); }
.zal-dzial:first-child { margin-top: 0; }
.zal-dzial::after { content: ''; flex: 1; height: 1px; background: var(--ramka); }
#zal-qr { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.zal-qr-kafel { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--granat); line-height: 1.25; max-width: 100%; }
.zal-qr-kafel.maly { width: 104px; }
.zal-dwa { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }
.zal-sekcja { border: 1px solid var(--s-ramka); border-left: 5px solid var(--s-kolor); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; background: var(--s-tlo); }
.zal-sekcja h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; color: var(--s-kolor); }
.zal-sekcja .zal-ikona { color: var(--s-kolor); border: 1px solid var(--s-ramka); }
.zal-sekcja ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: #22313f; }
.zal-sekcja li + li { margin-top: 2px; }
.zal-sekcja p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #22313f; }
.zal-sekcja.kroki, .zal-sekcja.przed { --s-kolor: #134a85; --s-tlo: #f5f8fd; --s-ramka: #cfdcee; }
.zal-sekcja.normalne { --s-kolor: #176b3b; --s-tlo: #f3faf5; --s-ramka: #c6e2cf; }
.zal-sekcja.pilne { --s-kolor: #a11414; --s-tlo: #fdf4f4; --s-ramka: #efc4c4; }
.zal-sekcja.problem { --s-kolor: #9a5b06; --s-tlo: #fff9ee; --s-ramka: #f0dcae; }
.zal-qr-blok { background: #f4f8fd; border: 1px solid var(--ramka); border-radius: 12px; padding: 14px; text-align: center; position: sticky; top: 12px; }
.zal-qr-tytul { font-size: 12px; font-weight: 700; color: var(--granat); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
#zal-qr svg { background: #fff; border: 1px solid var(--ramka); border-radius: 8px; max-width: 100%; height: auto; }
.zal-qr-podpis { font-size: 13px; color: var(--szary); margin: 6px 0; }
#zal-qr-opiekun { font-size: 12px; color: #146b3a; line-height: 1.4; margin-bottom: 8px; }
#zal-qr-opiekun:empty { display: none; }
.zal-przyciski { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ramka); }
.zal-przyciski button { margin: 0; width: 100%; }
#zal-stan { font-size: 13px; color: #146b3a; min-height: 16px; margin-top: 6px; }
#zal-adres { display: block; font-size: 11px; color: var(--szary); overflow-wrap: anywhere; text-decoration: none; margin-top: 4px; }
/* do wydruku — proste bloki */
@media (max-width: 1080px) { .zal-dwa { grid-template-columns: 1fr; } .zal-qr-blok { position: static; order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; text-align: left; align-items: center; }
  .zal-qr-tytul, .zal-qr-podpis { grid-column: 2; } #zal-qr { grid-row: 1 / span 4; } #zal-qr svg { width: 130px; } #zal-qr-opiekun, .zal-przyciski, #zal-stan, #zal-adres { grid-column: 2; } .zal-przyciski { border-top: 0; padding-top: 0; } }
/* telefon i wąski ekran: zamiast menu — lista wyboru */
@media (max-width: 820px) {
  .zal-uklad { grid-template-columns: 1fr; gap: 14px; }
  .zal-bok #zal-wybor { display: block; } #zal-menu { display: none; }
  .zal-pusto { padding: 26px 16px; }
}
@media (max-width: 520px) { .zal-qr-blok { grid-template-columns: 1fr; text-align: center; } .zal-qr-tytul, .zal-qr-podpis, #zal-qr-opiekun, .zal-przyciski, #zal-stan, #zal-adres { grid-column: 1; } #zal-qr { grid-row: auto; } #zal-qr svg { width: 170px; }
  .zal-tytul h3 { font-size: 18px; } .zal-pasek .przelacznik label { flex: 1 1 auto; } }
/* KARTKA DLA PACJENTA: pole zadruku A4 180 × 267 mm; wymiary w em — skalują się z rozmiarem pisma, który skrypt
   dobiera pomiarem. „dz-pomiar” = ten sam układ poza ekranem, do zmierzenia wysokości. */
#druk-zalecen { display: none; width: 180mm; color: #000; font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.36; }
#druk-zalecen.dz-pomiar { display: block; position: absolute; left: -400mm; top: 0; visibility: hidden; }
#druk-zalecen .dz-strona { width: 180mm; box-sizing: border-box; overflow: hidden; }
#druk-zalecen .dz-gora { display: flex; gap: 1em; align-items: center; border-bottom: 1.5pt solid #134a85; padding-bottom: .6em; margin-bottom: .8em; }
#druk-zalecen .dz-gora img { height: 3.4em; flex-shrink: 0; }
#druk-zalecen .dz-klinika { font-size: .8em; color: #333; }
#druk-zalecen h1 { font-size: 1.5em; line-height: 1.2; margin: .1em 0 0; color: #0d2a4a; }
#druk-zalecen .dz-pas { display: flex; gap: 1em; align-items: center; justify-content: space-between; margin: 0 0 .6em; padding: .5em .7em; border: 1.2pt solid #134a85; border-radius: .5em; break-inside: avoid; break-after: avoid; }
#druk-zalecen .dz-pas.po { border-color: #a11414; margin-top: 1em; }
#druk-zalecen .dz-strona > .dz-gora + .dz-pas { margin-top: 0; }
#druk-zalecen .dz-pas h2 { font-size: 1.25em; margin: 0 0 .15em; color: #134a85; text-transform: uppercase; letter-spacing: .03em; }
#druk-zalecen .dz-pas.po h2 { color: #a11414; }
#druk-zalecen .dz-pas p { margin: 0; font-size: .88em; }
#druk-zalecen .dz-pas svg { width: 6.4em; height: 6.4em; flex-shrink: 0; }
#druk-zalecen .dz-blok { margin: 0 0 .6em; padding: .4em .8em .45em; border-left: 3pt solid #134a85; background: #f3f6fb; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#druk-zalecen .dz-blok h3 { font-size: 1.04em; margin: 0 0 .2em; color: #134a85; }
#druk-zalecen .dz-blok ul { margin: 0; padding-left: 1.25em; }
#druk-zalecen .dz-blok li { margin: .1em 0; }
#druk-zalecen .dz-blok.normalne { border-left-color: #176b3b; background: #f1f8f3; } #druk-zalecen .dz-blok.normalne h3 { color: #176b3b; }
#druk-zalecen .dz-blok.pilne { border-left-color: #a11414; background: #fdf2f2; } #druk-zalecen .dz-blok.pilne h3 { color: #a11414; }
#druk-zalecen .dz-stopka { margin: .8em 0 0; padding-top: .5em; border-top: .8pt solid #999; font-size: .82em; color: #333; }
@page zalecenia { size: A4; margin: 15mm; }      /* tylko ta kartka — inne wydruki Gabinetu zostają bez zmian */
#druk-zalecen { page: zalecenia; }
@media print {
  body.druk-zalecen > *:not(#druk-zalecen) { display: none !important; }
  /* min-height: 100vh ze style.css dokładało w Safari pustą drugą stronę */
  html, body.druk-zalecen { height: auto !important; min-height: 0 !important; }
  body.druk-zalecen { background: #fff; margin: 0; padding: 0; }
  body.druk-zalecen #druk-zalecen { display: block; position: static; visibility: visible; }
  body.druk-zalecen #druk-zalecen .dz-strona + .dz-strona { break-before: page; }
}