/* ======== Брендбук «Ормин» 2.0 (14.10.2026) ======== Цвета клиники вместо серого «как айфон» и чужого зелёного. Тёмно-синий (navy) — текст и главное; бирюза (turq) — действие, выбор, фокус; оранжевый — внимание; мята — «готово». Текст на бирюзе — только тёмно-синий (белый на ней не читается, брендбук). Красного в брендбуке нет — он служебный, только «срочно», «долг», «убыток». Шрифт – Inter (29.10.2026, замечание 23): одна гарнитура для текста, заголовков и цифр, веса 400/500/600. Файлы лежат в программе (css/fonts) – интернет не нужен. Таджикские буквы (Ғ Ӣ Қ Ӯ Ҳ Ҷ) – в подмножестве cyrillic-ext: его нельзя убирать. Ровные цифры (суммы встают столбиком) – `font-variant-numeric: tabular-nums` на body. */ /* Стрелки, треугольники, галочка (29.10.2026, находка №6): подмножество полного Inter (1 файл на все веса, 3 КБ). Объявлено ПЕРВЫМ: где диапазоны пересекаются (↑ ↓ •), побеждает позднее объявленное – латинский Inter своего веса. Нет в Inter: ▾ ▸ ▴ ☰ ⌨ ✕ ☐ ✎ ⌕ ☏ ⇄ – их рисует запасной шрифт системы. */ @font-face { font-family: "Inter"; src: url("fonts/inter-symbols-500-normal.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+2190-21FF,U+25A0-25FF,U+2630,U+2328,U+2022,U+2713,U+2605,U+2303,U+2318; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --bg: #f3f6f7; --paper: #ffffff; --ink: #002d42; --muted: #4d6c7b; --muted-2: #5f7a88; /* подписи групп и стрелки «›» – тише --muted (A7-13; было не объявлено) */ --line: #dce3e6; --line-2: #edf1f2; /* линия между строками таблицы — тише рамки */ --fill: #edf1f2; --teal: #27beb6; /* бирюза: заливка выбранного и главной кнопки */ --teal-ink: #0c7671; /* бирюза для текста и ссылок (обычная на белом не читается); ≥ 4,5:1 и на --bg, --fill, --teal-soft (A7-14) */ --teal-soft: #d4f2f0; --teal-10: #eaf8f7; --on-teal: #002d42; /* текст на бирюзе — тёмно-синий (брендбук) */ --navy: #002d42; --navy-20: #ccd5d9; --navy-10: #e6eaec; --orange: #f4891f; --mint: #9acb9e; --amber: #b5600f; --amber-soft: #fde7d2; --rose: #c8372d; --rose-soft: #fbe3e1; --ok: #3f8f55; --ok-soft: #ebf5ec; /* Метки разделов — цветом брендбука (решение 14.10.2026: цвет со смыслом, а не по кругу): деньги — бирюза, пациенты — мята, медицина — серо-синий, склад и аптека — оранжевый. Текст на них — тёмно-синий. */ --c-fin: #d4f2f0; --c-pac: #d7ead8; --c-med: #e6eaec; --c-skl: #fde7d2; /* Край белого блока на сером фоне — волосяной линией тенью: рамка не меняет размеров, а у всех карточек, полос и плиток он появляется разом. */ --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 6px 24px rgba(0, 45, 66, .08); /* единственная тень брендбука */ /* Производные от бирюзы и серого (A7-04, 22.10.2026): считаются от --paper и --muted, поэтому годятся в любой теме, своей пары тёмной им не нужно. */ --teal-wash: color-mix(in srgb, var(--teal) 10%, var(--paper)); /* подложка блока «Оплата» F2 */ --teal-wash-2: color-mix(in srgb, var(--teal) 6%, var(--paper)); --teal-line: color-mix(in srgb, var(--teal) 50%, var(--paper)); /* рамка бирюзового блока */ --teal-line-2: color-mix(in srgb, var(--teal) 28%, var(--paper)); --muted-3: color-mix(in srgb, var(--muted) 60%, var(--paper)); /* выключенное, подсказка поля */ --radius: 16px; /* ======== ПЛОТНОСТЬ ИНТЕРФЕЙСА ======== Размеры целей и отступов собраны сюда, в одно место, и больше нигде цифрами не пишутся. Причина простая: у клиники два разных рабочих места. Регистратура тычет пальцем в планшет — там цель меньше сорока пикселей означает промах; врач за двадцатичетырёхдюймовым монитором работает мышью, и те же сорок пикселей съедают экран, ради которого монитор и куплен. Спорить, кто прав, незачем: пусть каждое место выберет само. Обычная плотность — цели под палец (решение заказчика 20.09.2026: в карте приёма кнопки компактнее, 34 px, и это отдельная переменная). Шрифт поля ввода 16 px не про красоту: поле мельче шестнадцати заставляет Safari на планшете наезжать на страницу при касании. */ --card-pad: 16px 16px 14px; --td-pad: 12px 10px; /* ячейка таблицы */ --th-pad: 8px 10px; --nav-pad: 11px 14px; /* пункт меню */ --nav-fs: calc(15px * var(--fz)); /* 21.10.2026: меню крупнее вместе с текстом */ --h1-fs: 28px; --main-pad: 28px 36px 80px; --gap: 12px; /* между карточками */ /* Шрифт — в общем :root, а не только в компактном виде. До 23.09.2026 эти две строки стояли внутри блока компактной плотности, и в обычном виде у программы шрифта не было вовсе: браузер брал свой — на Windows это Times New Roman. */ --font: "Inter", "Segoe UI", -apple-system, sans-serif; --head: "Inter", "Segoe UI", sans-serif; } /* ======== РАЗМЕР ТЕКСТА (21.10.2026, пакет 2) ======== Заказчик: «шрифты слишком маленькие на экране 24 дюйма… по всей МИС». Размер текста – один множитель --fz: каждый `font-size` ниже записан как calc(Npx * var(--fz)), новый – так же (проверяет `razmer_t`). Общий размер – --fz-base (1,15; на телефоне 1: там шрифт и так крупный для пальца). Врач в карте приёма (`.app.in-card`) выбирает свой размер текста (--fz), полей (--fi) и кнопок (--fb) – настройка «Вид карты» (js/razmer.js, личная, у врача в базе); «обычный» – общий размер, остальные – поверх него. Цели и шрифты кнопок и полей ниже пересчитываются в `.app.in-card` заново: пользовательское свойство с var() считается там, где объявлено. */ :root { --fz-base: 1.15; --fz: var(--fz-base); --fi: 1; --fb: 1; } /* Шкала веса шрифта (29.10.2026, замечание 11): 400 – обычный текст, подписи, коды, вторые строки; 500 – заголовки колонок и карточек, чипы, метки; 600 (`--w-strong`; 700 в Inter нет) – только имя пациента в строке списка, главная сумма и итог, заголовок экрана, активный пункт меню, кнопка действия. 800 и 900 не используем. Inter подключён в 400, 500 и 600 – других весов не писать. Новый font-weight – только через эти переменные. */ :root { --w-text: 400; --w-medium: 500; --w-strong: 600; } /* Подсказка (замечание 12): вторые строки списков, пояснения под полями, «нет данных», служебные подписи – 12 px, серым, не жирным. Переменная задана там же, где --fz, чтобы размер карты приёма (Аа) её масштабировал; меньше 11 px не опускаться. */ :root { --fs-hint: calc(12px * var(--fz)); } @media (max-width: 699px) { :root { --fz-base: 1; } } .app.in-card[data-kt="1"] { --fz: calc(var(--fz-base) * 1.12); --fs-hint: calc(12px * var(--fz)); } .app.in-card[data-kt="2"] { --fz: calc(var(--fz-base) * 1.25); --fs-hint: calc(12px * var(--fz)); } .app.in-card[data-kp="1"] { --fi: 1.14; } .app.in-card[data-kp="2"] { --fi: 1.3; } .app.in-card[data-kb="1"] { --fb: 1.14; } .app.in-card[data-kb="2"] { --fb: 1.3; } :root, .app.in-card { --tap: calc(44px * var(--fb)); /* высота кнопки, дневной полосы, поля */ --tap-fs: calc(15px * var(--fz) * var(--fb)); --in-pad: calc(12px * var(--fi)) calc(14px * var(--fi)); /* поле ввода */ --in-fs: calc(16px * var(--fz) * var(--fi)); --chip-h: calc(44px * var(--fb)); /* кнопка-вариант вне карты приёма */ --chip-pad: calc(8px * var(--fb)) calc(14px * var(--fb)); --chip-fs: calc(15px * var(--fz) * var(--fb)); --mchip-h: calc(32px * var(--fb)); /* она же внутри карты приёма */ --mchip-pad: calc(5px * var(--fb)) calc(10px * var(--fb)); --mchip-fs: calc(13.5px * var(--fz) * var(--fb)); --mod-in-pad: calc(9px * var(--fi)) calc(12px * var(--fi)); /* поле ввода внутри модуля */ --link-h: calc(40px * var(--fb)); /* кнопка-ссылка: «ещё зона», «своими словами» */ } /* Компактная плотность — мышь и большой экран. Цели уменьшены до предела, на котором мышь ещё не промахивается (порядка тридцати пикселей), а не до предела, на котором «ещё видно». Шрифты текста НЕ трогаем: читаемость от плотности не зависит, а уменьшенный текст — это не плотнее, это мельче. */ :root[data-den="compact"] { --card-pad: 12px 13px 10px; --td-pad: 8px 9px; --th-pad: 6px 9px; --nav-pad: 8px 12px; --nav-fs: calc(14.5px * var(--fz)); --h1-fs: 26px; --main-pad: 20px 26px 64px; --gap: 9px; } :root[data-den="compact"], :root[data-den="compact"] .app.in-card { --tap: calc(36px * var(--fb)); --tap-fs: calc(14px * var(--fz) * var(--fb)); --in-pad: calc(9px * var(--fi)) calc(12px * var(--fi)); --in-fs: calc(14.5px * var(--fz) * var(--fi)); --chip-h: calc(36px * var(--fb)); --chip-pad: calc(6px * var(--fb)) calc(12px * var(--fb)); --chip-fs: calc(14px * var(--fz) * var(--fb)); --mchip-h: calc(28px * var(--fb)); --mchip-pad: calc(4px * var(--fb)) calc(9px * var(--fb)); --mchip-fs: calc(13px * var(--fz) * var(--fb)); --mod-in-pad: calc(7px * var(--fi)) calc(10px * var(--fi)); --link-h: calc(32px * var(--fb)); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } /* Страховка от чужих стилей: что бы ни подгрузили со стороны, страница программы должна прокручиваться и оставаться нашей — чужой файл не может запереть прокрутку или подменить шрифт всей программы. Однажды это уже случалось. */ body { overflow-y: auto !important; font-family: var(--font) !important; color: var(--ink) !important; font-variant-numeric: tabular-nums; } /* Ровные цифры – везде (находка №12, 29.10.2026). Сокращение `font:` сбрасывает и `font-variant-numeric`, и `font-feature-settings`, так что на body их не оставить: у `.fz-big`, `.pult-tv`, `.ks-* b` цифры были разной ширины (проверено в Chromium). `!important` переживает любое `font:` – и нынешнее, и будущее. */ *, *::before, *::after { font-variant-numeric: tabular-nums !important; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; } /* Жирный в разметке (/ в js/*.js – тысячи мест): по умолчанию средний вес, 700 – только в кнопках, итогах и заголовках. Тонкая подгонка конкретного места – правилом «класс b». */ b, strong { font-weight: var(--w-medium); } th, h4, h5, h6 { font-weight: var(--w-medium); } h1, h2, h3 { font-weight: var(--w-strong); } /* без этого заголовки окон и экранов без своего правила получали 700 браузера (находка №8) */ .btn b, button.btn b, tfoot b, tfoot strong, tr.tot b, .tot b, .itog b, h1 b, h2 b, h3 b { font-weight: inherit; } /* Колонка содержимого — minmax(0,1fr), а не 1fr: иначе её ширину диктует самое широкое содержимое (сетка из пятнадцати врачей), и прокручивалась вся страница вместе с шапкой и кнопками, а не одна сетка в своей рамке. */ .app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100%; } .app[hidden] { display: none !important; } .nav { display: flex; flex-direction: column; padding: 16px 12px 14px; background: var(--paper); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; } /* ======== Логотип: меню, вход (h6, 16.10.2026; js/logo.js) ======== «Ормин» — компонентом брендбука `` (слово уже в логотипе — рядом не пишем); аптека (`.txt`) и клиника со своим названием (`.svoy`) — названием словами, своя картинка (`.brand-own`) — рядом. */ .brand { padding: 0 6px 10px; } .brand-logo { display: block; width: 136px; margin: 0 0 4px 4px; --ormin-layout: horizontal; } .brand b { display: none; } .brand span { display: none; } .brand.txt .brand-logo, .brand.svoy .brand-logo { display: none; } .brand.txt b, .brand.svoy b { display: block; font: var(--w-strong) 24px/1.15 var(--head); letter-spacing: -.01em; padding: 6px 8px 0; } .brand.svoy:has(.brand-own:not([hidden])) { display: flex; align-items: center; gap: 8px; } .brand.svoy .brand-own:not([hidden]) { display: block; max-height: 40px; max-width: 64px; margin-left: 4px; } .brand.svoy:has(.brand-own:not([hidden])) b { padding: 0; font-size: 19px; } #gate .intro .vhod-logo { --ormin-layout: vertical; width: 124px; margin: 0 0 22px; } /* Вход по паролю, второй шаг, смена пароля – блок «Вход по паролю» в конце файла (31.10.2026). */ .nav button { width: 100%; text-align: left; border: 0; background: transparent; padding: var(--nav-pad); border-radius: 10px; margin-bottom: 2px; font-size: var(--nav-fs); font-weight: var(--w-medium); color: var(--ink); display: flex; align-items: center; gap: 10px; } .nav button:hover { background: var(--fill); } .nav button.active { background: var(--teal-10); color: var(--ink); font-weight: var(--w-strong); } .nav .nav-ic { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav button.active .nav-ic { stroke: var(--teal-ink); } /* Пункт меню не режется многоточием («не резать смысл», 30.09.2026): длинный — в две строки. */ .nav .nav-t { flex: 1 1 auto; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; } .nav .nav-grp { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; } .nav .nav-n { flex: none; } .nav .nav-n::after { content: attr(data-n); display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--navy-10); color: var(--ink); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } .nav .badge { margin-left: auto; } /* Кто за компьютером: кружок с буквами, имя, должность и «Выйти» значком. */ .nav .who { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 8px; background: var(--paper); border-radius: 14px; font-size: calc(13px * var(--fz)); box-shadow: var(--shadow); } .who-av { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-text); flex: none; } .who-t { flex: 1 1 auto; min-width: 0; } /* Имя и должность — целиком, переносом (30.09.2026): таджикские должности длиннее строки. */ .who b { display: block; font-size: calc(14px * var(--fz)); line-height: 1.2; overflow-wrap: anywhere; } .who-t .muted { display: block; font-size: calc(11.5px * var(--fz)); line-height: 1.25; overflow-wrap: anywhere; } .who .out { width: 32px; height: 32px; min-height: 0; padding: 0; flex: none; display: grid; place-items: center; background: transparent; border: 0; } .who .out:hover { background: var(--fill); } .who .out svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Текст только для чтеца экрана и поиска по словам — глазу не виден. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #gate { display: none; position: fixed; inset: 0; z-index: 40; background: var(--bg); /* Тёмная панель была почти в половину экрана, и на ней ничего не происходило. */ grid-template-columns: 340px 1fr; } #gate.open { display: grid; } .gate-sec { margin: 16px 0 6px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .gate-sec:first-of-type { margin-top: 14px; } #gate .person.last { box-shadow: 0 0 0 2px var(--teal) inset; } #gate .person.kb-on { box-shadow: 0 0 0 3px var(--teal); } #gate .people .banner { margin: 14px 0 0; } #gate .intro { padding: 56px 36px; background: #002d42; color: #ffffff; } #gate .intro b { font: var(--w-strong) 46px/1.1 var(--head); letter-spacing: -.01em; display: block; margin: 8px 0 16px; } #gate .intro p { color: rgba(255,255,255,.78); max-width: 340px; line-height: 1.45; font-size: calc(17px * var(--fz)); } /* 21.10.2026: отступы чуть меньше – текст крупнее (--fz), список входа по-прежнему в один экран (`gate_t`) */ #gate .people { padding: 22px 40px 28px; overflow: auto; } #gate .people input { width: 100%; margin-top: 16px; background: var(--fill); border: 0; } #gate .people h2 { margin: 0 0 4px; font: var(--w-medium) 30px/1.15 var(--head); letter-spacing: -.01em; } #gate .plist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; } #gate .person { text-align: left; background: var(--paper); border: 0; border-radius: 14px; padding: 7px 14px 6px; box-shadow: var(--shadow); } #gate .person:active { transform: scale(.98); } #gate .person small { color: var(--muted); display: block; margin-top: 4px; font-size: calc(13px * var(--fz)); } #gate .pinbox { max-width: 380px; } #gate .person { min-height: 52px; } #gate .pinbox .muted.small { margin: 0 0 14px; } #gate .dots { display: flex; gap: 12px; margin: 22px 0; } #gate .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--fill); display: block; } #gate .dots i.on { background: var(--teal); } #gate .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 264px; } #gate .pad button { height: 56px; border-radius: 18px; border: 0; background: var(--paper); font-size: 22px; font-weight: var(--w-medium); box-shadow: var(--shadow); } #gate .err { color: var(--rose); min-height: 22px; font-size: calc(14px * var(--fz)); } @media (max-width: 1100px) { #gate { grid-template-columns: 260px 1fr; } } @media (max-width: 860px) { #gate { grid-template-columns: 1fr; } #gate .intro { padding: 28px 24px; } #gate .intro b { font-size: 40px; } #gate .intro .vhod-logo { --ormin-layout: horizontal; width: 156px; margin-bottom: 14px; } } /* Программа стоит по центру доступной ширины, а не прижата к меню. Пока `margin` не было, на широком мониторе справа оставалась пустая полоса в треть экрана, и это читалось как «программа не доделана до края». Решение заказчика 22.09.2026: поля слева и справа одинаковые. */ /* Один макет на все экраны (08.10.2026, заказчик: «пустоты не продуманные»): одна ширина и один левый край у рабочих экранов и отчётов — край больше не прыгает при переходе; шапка — одной строкой: «← Назад», заголовок и одна строка пояснения слева, действия справа. */ .main { padding: var(--main-pad); width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; min-width: 0; box-sizing: border-box; } .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; min-height: 44px; } .top-l { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 0; } .top .tools { flex: 0 1 auto; } .top-t { min-width: 0; } .top h1 { margin: 0; font: var(--w-medium) var(--h1-fs)/1.15 var(--head); letter-spacing: -.01em; } .top p { margin: 3px 0 0; color: var(--muted); font-size: calc(13.5px * var(--fz)); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Кнопок в шапке экрана бывает пять-шесть (Расписание регистратуры): на узком экране они переносятся строкой ниже, а не уезжают за край. */ .tools { display: flex; align-items: center; gap: 10px; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } /* Поле даты в шапке — по своему содержимому, а не на всю ширину: иначе оно выталкивало кнопки строкой ниже (Кассовый отчёт за день). */ .tools input[type=date], .tools input[type=month], .tools select { width: auto; } .daybar { display: flex; align-items: center; background: var(--paper); border-radius: 14px; height: var(--tap); overflow: hidden; box-shadow: var(--shadow); } .daybar-nav { width: var(--tap); height: var(--tap); border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--ink); } .daybar-nav:hover { background: var(--fill); } .daybar-date { position: relative; min-width: 148px; height: var(--tap); display: flex; align-items: center; justify-content: center; font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); } .daybar-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; background: transparent; } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .grid { display: grid; gap: var(--gap); } /* Колонки не тянутся друг за другом: короткая карточка не должна вырастать в пустое поле только потому, что соседняя длинная. */ .grid.cols-2 { grid-template-columns: 1.35fr .75fr; align-items: start; } .grid.visit { grid-template-columns: 1fr 340px; align-items: start; } .card { background: var(--paper); border: 0; border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--shadow); } /* Заголовок карточки — Ubuntu, обычными буквами, тёмно-синим (14.10.2026; был серым КАПСОМ, а у цветных карточек — своего цвета без смысла). */ .card h3 { margin: 0 0 12px; font: var(--w-medium) calc(16px * var(--fz))/1.3 var(--head); color: var(--ink); letter-spacing: -.005em; text-transform: none; } .card h3 .muted, .card h3 .small { font-family: var(--font); font-weight: var(--w-text); } .sec { margin: 22px 0 10px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .muted { color: var(--muted); } .small { font-size: var(--fs-hint); } .sub, .hint { font-size: var(--fs-hint); } .l2 { font-size: var(--fs-hint); color: var(--muted); } /* Три вида кнопок на всю программу (14.10.2026): главная — бирюзовая с тёмно-синим текстом (брендбук: белый на бирюзе не читается), обычная — белая с рамкой, мягкая — бирюзовой подложкой. Красная — только необратимое. */ .btn { border: 0; border-radius: 12px; padding: 0 16px; height: var(--tap); background: var(--teal); color: var(--on-teal); font-weight: var(--w-strong); font-size: var(--tap-fs); transition: background-color .15s, box-shadow .15s; } .btn:hover { background: #1fa39c; } .btn.teal { background: var(--teal); } .btn.teal:hover { background: #1fa39c; } .btn.ghost { background: var(--paper); color: var(--ink); font-weight: var(--w-strong); box-shadow: inset 0 0 0 1px var(--navy-20); } .btn.ghost:hover { background: var(--bg); } .btn.soft { background: var(--teal-10); color: var(--ink); box-shadow: inset 0 0 0 1px var(--teal); } .btn.soft:hover { background: var(--teal-soft); } .btn.warn { background: var(--rose); color: #fff; } .btn.warn:hover { background: #a92b22; } .btn:disabled { opacity: .38; cursor: not-allowed; } /* Кнопка внутри строки таблицы. Обычная — 44 пикселя, и строка с кнопкой выходит вдвое выше соседней: журнал расходов шёл ступеньками. Палец сюда не целится на ходу — это экран директора, мышь и спокойное чтение. */ /* Один размер на всю программу (A7-26, 22.10.2026: было два правила, 30 и 28 px). */ .btn.sm { height: 30px; padding: 0 10px; font-size: calc(13px * var(--fz)); border-radius: 8px; } /* Поле даты в строке выбора периода. Поля ввода в программе во всю ширину — так удобнее в формах; но в строке чипов дата на всю строку разрывает её пополам, и «—» между двумя датами уезжает на отдельную строку. */ input[type=date].d8 { width: auto; min-width: 150px; } /* Чип — это кнопка, в которую врач тычет пальцем весь день. Было 32px в высоту; для пальца нужно 44. */ .chip, .tag { display: inline-flex; align-items: center; border: 0; background: var(--fill); color: var(--ink); border-radius: 999px; padding: var(--chip-pad); margin: 0 6px 8px 0; min-height: var(--chip-h); font-size: var(--chip-fs); font-weight: var(--w-medium); } .tag { min-height: 0; } .chip:not(.on):hover { background: var(--navy-10); } .chip.on { background: var(--teal); color: var(--on-teal); font-weight: var(--w-medium); } .chip.warn { background: var(--rose-soft); } .chip.warn.on { background: var(--rose); color: #fff; } /* Вариант ждёт решения главврача (`pending`, js/protokol-pravila.js) – серым. */ .chip.pend:not(.on) { opacity: .55; border-style: dashed; } .tag { background: var(--amber-soft); margin: 0 4px 0 0; padding: 4px 10px; font-size: calc(12px * var(--fz)); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } /* `display: flex` перебивал атрибут hidden: поле «Код директора» в оплате стояло на виду всегда, хотя нужно только при скидке сверх предела, — и Enter-переход (js/keys.js) шагал в него. Скрытое поле — скрыто. */ .field[hidden] { display: none; } .field label { font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); } input[type=text], input[type=date], input[type=month], input[type=time], input[type=number], input[type=tel], input[type=password], input:not([type]), select, textarea, .search, .desk-find { width: 100%; border: 0; border-radius: 12px; padding: var(--in-pad); font-size: var(--in-fs); background: var(--fill); } textarea { min-height: 72px; resize: vertical; } select { appearance: none; } /* Выключенное поле – не залитая плашка (№47, 31.10.2026: «тяжёлые залитые плашки… сливаются с фоном и между собой»). Заливка `--fill` – признак того, что поле можно править; у выключенного её нет: прозрачное поле с тихой рамкой (`--navy-20`), текст – своим цветом, без «выцветшего» серого браузера. Заперто, а не пусто: заливки нет, рамка есть, курсор – стрелка. Одно правило на программу: у всех текстовых полей, списков и многострочных. Правило экрана посильнее (`.контейнер input`) своё не теряет. Флажки, переключатели, кнопки и файлы – не тут. Экран, который целиком только для чтения (протокол у врача), – `.tpl-ro` ниже: там поле читается как текст без рамки. */ input:disabled:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=hidden], [type=image])), select:disabled, textarea:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--navy-20); color: var(--ink); -webkit-text-fill-color: currentColor; opacity: 1; cursor: default; } /* Подсказки внутри полей (placeholder) – везде мельче набранного: 0,85 размера поля, спокойный цвет (22.10.2026, замечание 5: «надписи внутри окна поиска мелкими шрифтами… это касается везде»). Одно правило на всю программу: размер – от самого поля (em), потому плотность, --fz, --fi, личный размер карты приёма и поля с чужим размером (шапка, поиск, окна) подстраиваются сами; тема – через --muted-3. Своих `::placeholder` с размером у экранов нет и не заводить (проверка `placeholder_t`). */ input::placeholder, textarea::placeholder { font-size: .85em; font-weight: var(--w-text); color: var(--muted-3); opacity: 1; } .table { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--fz)); } /* Шапка таблицы — обычными буквами (14.10.2026), строки — тихой линией. */ .table th { text-align: left; color: var(--muted); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); padding: var(--th-pad); text-transform: none; letter-spacing: 0; } .table td { padding: var(--td-pad); border-top: 1px solid var(--line-2); vertical-align: middle; } .table tr.click:hover { background: #f6f9fa; cursor: pointer; } /* Выделение с клавиатуры: видно, куда уйдёт Enter. */ .table tr.kb-on > td { background: var(--teal-soft); } .module.kb-on { outline: 2px solid var(--teal); outline-offset: 2px; } /* Фокус — обводка бирюзой 3 px (брендбук). */ button.chip:focus-visible, .btn:focus-visible, .nav button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 0; } .kb-hint { margin: 8px 0 0; } /* Подсказка в окнах «Enter — следующее поле»: одна строка мелко внизу окна, исчезает после первого прохода формы клавишей (js/keys.js, kbFormHint). */ .kb-fhint { margin: 10px 0 0; font-size: calc(12px * var(--fz)); line-height: 1.4; color: var(--muted); } /* Справочник: четырнадцать тысяч строк никогда не рисуются целиком — на экране либо один уровень дерева, либо до сорока найденных. */ .icd-list { max-height: 60vh; overflow: auto; } .icd-list .list-item { cursor: pointer; } .icd-list .list-item:hover { background: #f6f9fa; } .icd-list .list-item.on { background: var(--teal-soft); } @media print { .kb-hint, .kb-fhint { display: none !important; } } .status { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); padding: 4px 8px; border-radius: 999px; background: var(--fill); color: var(--ink); } /* Короткая надпись и сумма – одной строкой (устав «не резать смысл»; A7-21: «на приёме», «долг 150 с.»). */ .status, .nowrap { white-space: nowrap; } .ord-itog { margin-left: auto; align-self: center; } .s-wait { background: var(--amber-soft); } .s-open { background: var(--teal-soft); color: var(--ink); } .s-done { background: var(--ok-soft); color: var(--ink); } .s-bad { background: var(--rose-soft); color: #a1281d; } .module { margin-bottom: var(--gap); } /* Карта приёма — рабочий стол врача, а не витрина. Врач работает мышью и клавиатурой, и кнопки размером под палец занимали весь экран: восемь диагнозов — три ряда. Решение заказчика 20.09.2026: в блоках карты кнопки компактные — 34px, шрифт 14. Главные кнопки («Закрыть приём», «Всё норма») остаются крупными. */ .module .chip { min-height: var(--mchip-h); padding: var(--mchip-pad); margin: 0 4px 5px 0; font-size: var(--mchip-fs); } .module .row { gap: 6px; } .module .linkish { min-height: var(--mchip-h); padding: 2px 2px; } .module .field { gap: 4px; margin-bottom: 8px; } .module input:not([type=checkbox]):not([type=number]), .module textarea { padding: var(--mod-in-pad); } .module .hd { margin-bottom: 6px; } .module .hd h3 { font-size: calc(16px * var(--fz)); } .module .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .module .hd h3 { text-transform: none; letter-spacing: -.01em; font-size: calc(17px * var(--fz)); color: var(--ink); margin: 0; } .need { font-size: calc(11.5px * var(--fz)); color: var(--rose); font-weight: var(--w-medium); } /* ============ МОДУЛЬ КАРТЫ: ПЛОТНОСТЬ И ЗНАКИ ============ Заказчик 22.09.2026, сверив программу с наброском: «ты должен точь-в-точь этот модуль перенести, а не только идею». Разница была не в замысле, а в четырёх вещах: плотность кнопок, шапка модуля, осмотр по зонам и то, что заполненные блоки программа сворачивала сама. */ /* Кнопки в модулях плотнее: в столбце шириной в треть экрана прежние переносились после двух штук. Порог «цель не мельче 32px» соблюдён — он про палец, и снижать его нельзя. */ .module .chip { min-height: var(--mchip-h); padding: var(--mchip-pad); margin: 0 4px 4px 0; font-size: var(--mchip-fs); } .module .hd h3 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: calc(15.5px * var(--fz)); } .module .hd { align-items: center; margin-bottom: 9px; } /* Значок состояния кружком: пустой обязательный кричит, заполненный молчит, необязательный — серая точка. Слово «нужно» заменено последствием: «без него приём не закрыть». */ .mk { width: 19px; height: 19px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } .mk.ok { background: var(--teal); color: var(--on-teal); } .mk.need { background: var(--rose); color: #fff; } .mk.soft { background: rgba(60,60,67,.12); } /* «Свернуть» — тоже кнопка, и правило «цель не мельче 32px» на неё распространяется: палец не различает, ссылка это или кнопка. */ .module .fold-x { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); min-height: var(--mchip-h); padding: 0 4px; } .module .fold-x:hover { color: var(--teal-ink); } /* Осмотр по зонам: одна строка на зону. Имя слева, переключатель справа — слиток из трёх положений, который не переносится никогда. Прежние три отдельные кнопки в узком столбце занимали по три строки на зону. */ /* Строка зоны не растягивается во всю ширину модуля: в ленте модуль бывает шириной в пол-экрана, и тогда между именем зоны и переключателем открывалась пустая полоса в полметра — глаз терял, к какой зоне относится «норма». Ширина строки — ровно та, в которой она читается. */ .zrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; max-width: 520px; } /* Имя зоны не обрезаем: «лимфоузлы» и «сер…» — разные вещи в документе. Ширину отдаёт переключатель: шрифт мельче, отступы уже. Высота 32px остаётся — это цель для пальца, и её снижать нельзя. */ .zrow .zn { flex: 1; min-width: 74px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zseg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); } .zseg button { border: 0; background: var(--paper); color: var(--muted); font: var(--w-medium) calc(11.5px * var(--fz)) var(--font); height: var(--mchip-h); padding: 0 7px; cursor: pointer; white-space: nowrap; } .zseg button + button { border-left: 1px solid var(--line); } .zseg button:hover { background: var(--fill); } .zseg button.on { background: var(--teal); color: var(--on-teal); font-weight: var(--w-medium); } .zseg button.on.warn { background: var(--amber); color: #fff; } .zfind { margin: 0 0 8px; } .zfind input { width: 100%; } .zwhy { margin: 0 0 10px; gap: 6px; } /* Договор в полосе итога приёма: то же место, что направление и услуги, — это не блок протокола, а то, что из приёма следует. */ .dog-card { background: #f4f1fa; box-shadow: inset 0 0 0 1px rgba(90,70,150,.16); } .dog-card .hd h3 { color: #5b4f8a; } .dog-card .list-item { align-items: center; } .progress { display: flex; gap: 5px; margin: 4px 0 18px; } .progress i { flex: 1; height: 4px; border-radius: 99px; background: var(--fill); } .progress i.on { background: var(--teal); } /* Правая колонка карты: прошлый визит и заключение. «Заключение» прилипает к верху, чтобы врач видел, как оно собирается, пока заполняет блоки слева. Раньше прилипшая чёрная панель оставалась наверху и над «Следом карты»: след уезжал под неё, и главврач видел, что запись есть, но прочитать не мог (замечено заказчиком 21.09.2026). Теперь заключение доходит до следа и уезжает вверх само, а след читается целиком. */ .preview { position: sticky; top: 16px; background: #111; color: #f5f5f7; border-radius: 20px; padding: 20px; /* Длинное заключение (УЗИ на две страницы) не занимает весь экран: оно листается внутри себя, а не выталкивает всё остальное вниз. */ max-height: calc(100vh - 32px); display: flex; flex-direction: column; } .preview h3 { margin: 0 0 10px; color: #a1a1a6; text-transform: uppercase; font-size: calc(12px * var(--fz)); flex: 0 0 auto; } .preview .doc { font-size: calc(15px * var(--fz)); line-height: 1.45; white-space: pre-wrap; min-height: 160px; overflow: auto; } .preview .hint { color: #8e8e93; font-size: var(--fs-hint); margin-top: 12px; flex: 0 0 auto; } .builder-mod { background: var(--paper); border-radius: 16px; padding: 14px; margin-bottom: 10px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .kpis .card { padding: 14px 16px; } .kpis .card b { display: block; font: var(--w-medium) 27px/1.2 var(--head); letter-spacing: -.01em; margin-top: 4px; } .list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--line); } .list-item:last-child { border-bottom: 0; } /* Что нажимается – видно мышью (16.10.2026, заказчик: «в разделе шаблоны курсор стоит как будто печатает, и по наведению мыши не понятно, что можно выбрать шаблон»). Строки, плитки и клетки с действием по нажатию получают руку-курсор; строка списка – ещё подсветку и «›» справа. Клетка-«стоп» (`event.stopPropagation()` вокруг телефона) – не действие, её не трогаем. */ [onclick]:not([onclick^="event.stopPropagation"]):not(input):not(textarea):not(select):not(#overlay), [role="button"] { cursor: pointer; } .list-item.click, .list-item[onclick] { padding-left: 10px; padding-right: 10px; border-radius: 10px; transition: background .12s; } .list-item.click:hover, .list-item[onclick]:hover { background: var(--fill); } .list-item.click::after { content: "›"; color: var(--muted); font-size: 20px; line-height: 1; flex: none; } .list-item.click:hover::after { color: var(--teal-ink); } /* Пусто — одной тихой строкой, а не пустым полем в пол-экрана (14.10.2026). */ .empty { padding: 14px 12px; text-align: center; color: var(--muted); font-size: var(--fs-hint); } /* «Записан и ещё не пришёл» — самое обычное состояние дня, а не предупреждение. Жёлтым помечаем только того, кто опаздывает. */ /* Клетка под длинным приёмом: он начался выше и ещё идёт. Не «свободно» и не «врач не работает» — третье состояние, и оно обязано выглядеть третьим, иначе на него запишут второго пациента. */ /* Двойная запись на одно время — видны обе, клетка обведена (ревизия 27.09.2026). */ .desk-find { max-width: 420px; margin: 0 0 12px; } #overlay { position: fixed; inset: 0; background: rgba(0,0,0,.36); display: grid; place-items: end center; z-index: 20; padding: 0; } #overlay[hidden] { display: none; } .modal { width: min(560px, 100%); background: var(--paper); border-radius: 20px 20px 0 0; padding: 22px 20px 28px; max-height: 88vh; overflow: auto; } .modal::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 99px; background: var(--fill); margin: 0 auto 16px; } .banner { border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: calc(14px * var(--fz)); } .banner.lock { background: var(--fill); } .banner.alert { background: var(--rose-soft); } .banner.warn { background: var(--amber-soft); } /* Полоска-инструмент, а не тревога: янтарный бережём для долга и просрочки. */ .banner.calm { background: var(--paper); box-shadow: var(--shadow); } .search { margin-bottom: 12px; } .locked .chip, .locked textarea, .locked input, .locked select { pointer-events: none; opacity: .7; } @media print { .nav, .top .row, .progress, .grid.visit > div:first-child, .btn { display: none !important; } .app { display: block; } /* На бумаге ни прилипания, ни внутренней прокрутки: заключение печатается целиком, иначе лист обрежет текст ровно там, где кончается экран. */ .preview { position: static; background: #fff; color: #000; max-height: none; display: block; } .preview .doc { overflow: visible; } .trail-card, .banner, .preview .hint, .preview h3 { display: none !important; } } @media (max-width: 980px) { .app { grid-template-columns: 1fr; } .nav { height: auto; position: relative; flex-direction: row; flex-wrap: wrap; } .grid.visit, .grid.cols-2, .kpis { grid-template-columns: 1fr; } .main { padding: 16px 16px 80px; } .top h1 { font-size: 24px; } } /* Низ окна с кнопками прилипает, если окно листается (A7-06, `oknoNiz` в js/vid.js; `bottom` – минус нижний отступ окна, ставит скрипт). */ .modal.m-dlin > .m-niz { position: sticky; z-index: 3; background: var(--paper); margin-bottom: 0; padding: 10px 0 14px; box-shadow: 0 -10px 12px -12px rgba(0, 45, 66, .35); } @media (min-width: 720px) { #overlay { place-items: center; padding: 24px; } .modal { border-radius: 20px; } .modal::before { display: none; } } .badge { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 10px; background: var(--rose); color: #fff; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); text-align: center; } .module.folded { display: flex; gap: 10px; align-items: baseline; cursor: pointer; padding-top: 12px; padding-bottom: 12px; } .module.folded:hover { background: var(--teal-soft); } .module.folded .ok-mark { color: var(--ok); font-weight: var(--w-medium); } .module.folded .fold-text { font-size: calc(14px * var(--fz)); line-height: 1.35; } /* Текстовая ссылка — тоже цель для пальца, а не только для мыши. */ .linkish { display: inline-flex; align-items: center; min-height: var(--link-h); background: none; border: 0; padding: 4px 2px; color: var(--teal-ink); font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); cursor: pointer; } /* Цвет модуля — по состоянию. Обязательный пустой держит приём закрытым и должен быть виден через весь экран; заполненный гаснет. По мере работы экран успокаивается, и это читается, не вчитываясь. */ .module.m-need { background: #fff0ef; box-shadow: inset 0 0 0 1.5px rgba(255,59,48,.5); } .module.m-need .hd h3 { color: var(--rose-ink); } /* Закрытая карта – только чтение (A7-17, 22.10.2026): у неё нет «без него приём не закрыть», красных блоков и «Закрыть приём» – это состояние открытого приёма. Признак закрытой – плашка `.banner.lock`. */ #view:has(.banner.lock) .cardflow.locked .module.m-need { background: var(--paper); box-shadow: var(--shadow); } #view:has(.banner.lock) .cardflow.locked .module.m-need .hd h3 { color: var(--ink); } #view:has(.banner.lock) .cardflow.locked .module .need, #view:has(.banner.lock) .cardflow.locked .module .mk.need { display: none; } #view:has(.banner.lock) .visit-bar .btn.teal[disabled] { display: none; } .module.m-done { background: #e8f5f1; box-shadow: inset 0 0 0 1.5px rgba(10,122,106,.42); } .module.m-soft.s1 { background: #fdf6ea; box-shadow: inset 0 0 0 1px rgba(196,122,18,.18); } .module.m-soft.s2 { background: #eef5fb; box-shadow: inset 0 0 0 1px rgba(10,90,150,.16); } .module.m-soft.s3 { background: #eef7f0; box-shadow: inset 0 0 0 1px rgba(20,120,60,.16); } /* Итог приёма — свой, четвёртый оттенок. Направление и услуги не блоки протокола: одно уходит коллеге, другое в счёт пациенту. Цветом это и сказано, чтобы их не искали среди жалоб и диагнозов. */ .module.m-soft.s4 { background: #f4f1fa; box-shadow: inset 0 0 0 1px rgba(90,70,150,.16); } .module.folded.m-need:hover, .module.folded.m-done:hover, .module.folded.m-soft:hover { background: var(--teal-soft); } .from-tpl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(60,60,67,.08); color: var(--muted); font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); text-transform: none; letter-spacing: 0; vertical-align: 1px; } /* ============ ЛЕНТА МОДУЛЕЙ ============ Заказчик 22.09.2026: «модули не одного размера и видимо невозможно их пропорционально оформить, когда заполняемые. поэтому: модули, их цвета и наше оформление остаётся, только они идут следом друг за другом». И следом: «оставим оба варианта с полоской. выбор за каждого врача. по умолчанию вариант А. можно переключить даже во время визита кнопкой». Три смысловых столбца ушли, части приёма остались: они задают порядок ленты и цвет полоски на левом краю модуля. Разница принципиальная — столбец требовал, чтобы блоки были соизмеримы по высоте, а лента не требует ничего. А · «в столбец» — одна колонка читаемой ширины, по центру. Б · «по ширине» — та же лента, налитая в столько столбцов, сколько влезает. Число столбцов не задано числом и не высчитывается по точкам экрана: задана ЖЕЛАЕМАЯ ШИРИНА столбца, а сколько их поместится — считает браузер. Так раскладка верна и на широком мониторе, и в половинке окна, и на планшете, без единого правила под размер экрана. */ .cardflow .module, .cardflow .card { break-inside: avoid; } .cardflow .itog { display: contents; } .cardflow .itog > .card { background: #f4f1fa; box-shadow: inset 0 0 0 1px rgba(90,70,150,.16); border-left: 4px solid #7a6ab8; margin-bottom: var(--gap); } .cardflow .itog > .card h3 { color: #5b4f8a; } /* Полоска части приёма. Цвет тот же, что был у заголовков столбцов, — теперь он живёт на самом модуле: видно боковым зрением и не занимает ни строки. */ .cardflow .module { border-left: 4px solid var(--hue, transparent); } /* А · в столбец */ .cardflow.lenta { max-width: 880px; margin: 0 auto; } /* Б · по ширине экрана */ .cardflow.reka .flow { columns: 420px; column-gap: var(--gap); } /* Заключение и след приёма не участвуют в потоке столбцов: это документ и журнал, им нужна вся ширина, а не колонка. */ .cardflow.reka .preview, .cardflow.reka .trail { margin-top: var(--gap); } .cardflow .preview { position: static; max-height: none; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 16px 18px 14px; box-shadow: var(--shadow); } .cardflow .preview h3 { color: var(--muted); } .cardflow .preview .doc { font-family: var(--font); font-size: calc(15px * var(--fz)); line-height: 1.6; color: #2c2c2e; columns: 2; column-gap: 32px; column-rule: 1px solid rgba(60,60,67,.08); min-height: 0; overflow: visible; } .cardflow .preview .hint { color: var(--muted); } /* Карта «по ширине» распускается на весь экран: держать её в 1180 точках значило бы оставить справа пустое поле, ради которого всё и затевалось. */ .app.card-wide .main { max-width: none; } @media (max-width: 900px) { .cardflow .preview .doc { columns: 1; } } /* Полоса пациента вместо меню. Прилипает ТОЛЬКО пока стоит сбоку: в узком окне она становится верхней строкой, и прилипшая там — закрывала бы собой модули. Поймано на просмотре 22.09.2026. */ .cardwrap { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 14px; align-items: start; } .cardrail { display: flex; flex-direction: column; gap: 9px; position: sticky; top: 16px; } .cardrail .rc { background: var(--paper); border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow); } .cardrail .rc .t { color: var(--muted); font-size: calc(12px * var(--fz)); margin-bottom: 4px; } .cardrail .rc .val { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .cardrail .rc-prev { font-size: calc(13px * var(--fz)); color: var(--ink); } .cardrail .rc.alert { background: var(--rose-soft); } .cardrail .rc.alert .t, .cardrail .rc.alert .val { color: var(--rose-ink); } .btn.dark { background: var(--ink); color: #fff; height: auto; padding: 11px 13px; font-size: calc(14px * var(--fz)); border-radius: 14px; text-align: left; width: 100%; } .app.in-card { grid-template-columns: 1fr; } .app.in-card .nav { display: none; } .tpl-pick { max-width: 340px; } @media (max-width: 900px) { .cardwrap { grid-template-columns: minmax(0, 1fr); } .cardrail { position: static; flex-direction: row; flex-wrap: wrap; } .cardrail .rc { flex: 1 1 150px; } .cardrail .back { flex: 1 1 100%; } } .visit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bar-bg, rgba(255,255,255,.96)); box-shadow: 0 -2px 16px rgba(0,0,0,.08); } @media print { .visit-bar { display: none !important; } } .visit-bar .vb-btns { display: flex; gap: 8px; align-items: center; flex: none; } /* Отделение внутри общего списка: разделитель, а не отдельная таблица. */ .table tr.sec-row td { padding-top: 16px; font-size: calc(12px * var(--fz)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 0; } /* Заголовок группы внутри общего списка. */ .list-sec { padding: 16px 0 6px; font-size: calc(12px * var(--fz)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .list-sec:first-child { padding-top: 0; } /* Блок «орган» на УЗИ: подпись поля с нормой слева, значение справа, по сторонам — колонками. Та же сетка, что на утверждённой форме, чтобы врач не переучивался. */ .organ { display: grid; gap: 2px; } .organ .org-row { display: grid; grid-template-columns: 190px 1fr; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); } .organ .org-row:last-child { border-bottom: 0; } .organ .org-row.sides-2 { grid-template-columns: 190px 1fr 1fr; } .organ .org-head { border-bottom: 0; padding-bottom: 0; } .organ .org-l b { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .organ .org-v { min-width: 0; } .organ .org-v .row { flex-wrap: wrap; } .organ input.org-num { width: 92px; } .organ input.org-txt { width: 100%; max-width: 320px; } @media (max-width: 980px) { .organ .org-row, .organ .org-row.sides-2 { grid-template-columns: 1fr; gap: 2px; } } /* Предупреждающая подпись в строке: «форма не утверждена», «соответствия нет». */ .warn-text { color: var(--amber); font-weight: var(--w-medium); } /* ======== Протокол: поля блока «Орган на УЗИ» и экран протокола только для чтения (№47, 31.10.2026) ======== Заказчик: «тут надо исправить вид. видимо, везде так» – подпись, вид, единица, «норма» и варианты стояли тяжёлыми залитыми плашками во всю ширину и на цветном фоне сливались. Теперь: у главврача (`.oe`) – один плотный ряд «подпись · вид · единица · норма · ↑ ↓ убрать», варианты ниже лёгкими метками (рамка, без заливки; вариант-«норма» – бирюзовой подложкой); у врача и директора (`.oe-ro`) – не поля ввода, а спокойный список: подпись, вид, единица, норма, варианты метками. Цвета – только переменные темы (светлая, тёплая, тёмная, свой цвет фона). */ .oe-f { padding: 8px 0; border-top: 1px solid var(--line); } .oe-f:first-child { border-top: 0; padding-top: 2px; } .oe-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .oe-hd input, .oe-hd select { width: auto; min-width: 0; padding: calc(7px * var(--fi)) calc(10px * var(--fi)); font-size: calc(14.5px * var(--fz) * var(--fi)); } .oe-hd .oe-lb { flex: 1 1 150px; font-weight: var(--w-medium); } .oe-hd .oe-vid { flex: none; width: 92px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--navy-20); cursor: pointer; } .oe-hd .oe-vid:hover { background: var(--bg); } .oe-hd .oe-un { flex: none; width: 64px; } .oe-hd .oe-nm { flex: 1 1 110px; max-width: 240px; } .oe-hd .chip { margin: 0; min-height: 34px; padding: 0 12px; font-size: calc(13px * var(--fz)); } .oe-hd .chip:not(.on) { background: transparent; box-shadow: inset 0 0 0 1px var(--navy-20); font-weight: var(--w-text); } .oe-hd .chip.on { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal-line); } .oe-vopts { width: 100%; margin-top: 6px; padding: calc(7px * var(--fi)) calc(10px * var(--fi)); font-size: calc(14.5px * var(--fz) * var(--fi)); } .oe-ac { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; } .oe-ac .linkish { min-height: 30px; padding: 0 6px; font-weight: var(--w-text); font-size: calc(13px * var(--fz)); color: var(--muted); } .oe-ac .linkish:hover { color: var(--rose); } .oe-op { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; } .oe-op .chip { margin: 0; min-height: 28px; padding: 0 11px; gap: 3px; font-size: calc(13px * var(--fz)); font-weight: var(--w-text); background: transparent; box-shadow: inset 0 0 0 1px var(--navy-20); color: var(--ink); } .oe-op .chip:has(.linkish) { padding-right: 3px; } .oe-op .chip:not(.on):hover { background: var(--fill); } .oe-op .chip.on { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal-line); font-weight: var(--w-medium); color: var(--ink); } .oe-op .linkish { min-height: 0; padding: 0 2px; font: inherit; color: inherit; } .oe-op .oe-x { padding: 0 7px 0 5px; color: var(--muted); } .oe-op .oe-x:hover { color: var(--rose); } .oe-op .oe-nplus { padding: 0 4px; font-size: calc(13px * var(--fz)); } .oe-op .oe-new { flex: none; width: 128px; padding: calc(4px * var(--fi)) calc(10px * var(--fi)); font-size: calc(13px * var(--fz)); } .oe-add { margin-top: 6px; flex-wrap: nowrap; gap: 6px; } .oe-add input { flex: 1 1 auto; min-width: 0; padding: calc(7px * var(--fi)) calc(12px * var(--fi)); font-size: calc(14.5px * var(--fz) * var(--fi)); } .oe-ro .oe-r { display: grid; grid-template-columns: minmax(140px, 36%) calc(4.6 * var(--fs-hint)) minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); } .oe-ro .oe-r:first-child { border-top: 0; } .oe-l { font-weight: var(--w-medium); } .oe-k { font-size: var(--fs-hint); color: var(--muted); } .oe-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; min-width: 0; } .oe-o { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: calc(13px * var(--fz)); box-shadow: inset 0 0 0 1px var(--navy-20); } .oe-o.ok { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal-line); font-weight: var(--w-medium); } .oe-o i { font-style: normal; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--teal-ink); } .oe-u { color: var(--muted); } .oe-n { color: var(--muted); font-size: var(--fs-hint); } .oe-meta { margin: 6px 0 0; } @media (max-width: 699px) { .oe-ro .oe-r { grid-template-columns: minmax(0, 1fr) auto; } .oe-ro .oe-v { grid-column: 1 / -1; } .oe-ac { margin-left: 0; } } /* Экран протокола, который человек только читает (врач, директор; js/tpl.js, `renderTemplate`): выключенные поля – как текст под подписью, без рамки и заливки; метки вариантов и «обязательное» – лёгкие, без заливки. */ .tpl-ro .field { gap: 2px; margin-bottom: 8px; } .tpl-ro input:disabled, .tpl-ro select:disabled { box-shadow: none; padding: 0; min-height: 0; height: auto; border-radius: 0; } .tpl-ro .chip:disabled { margin: 0; min-height: 28px; padding: 0 11px; font-size: calc(13px * var(--fz)); font-weight: var(--w-text); background: transparent; box-shadow: inset 0 0 0 1px var(--navy-20); opacity: 1; cursor: default; } .tpl-ro .chip.on:disabled { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal-line); font-weight: var(--w-medium); } /* Тревожная полоса. Висит поверх всего и не убирается нажатием: она гаснет только тогда, когда исчезает причина. Сегодняшняя причина одна — программа слушает сеть, а вход по паролю не включён. Предупреждение, которое можно закрыть, закрывают в первый же день и больше не вспоминают. */ #alarm { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #b3261e; color: #fff; padding: 9px 18px; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); line-height: 1.35; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #alarm[hidden] { display: none !important; } #alarm span { font-weight: var(--w-text); opacity: .92; } body.alarm .app { padding-top: var(--alarm-h, 40px); } body.alarm .nav { top: var(--alarm-h, 40px); height: calc(100vh - var(--alarm-h, 40px)); } /* Дополнение к закрытой карте: сверху дата и имя мелким, под ними — сам текст обычным, как его написал врач. Не «список» и не заголовок: это содержание документа, и читаться оно должно как содержание. */ .dop { padding: 10px 0; border-bottom: .5px solid var(--line); } .dop:last-child { border-bottom: 0; } .dop > div:last-child { margin-top: 2px; } /* Меню разделами. Раздел — строка; нажали — страница раздела со списком подразделов (js/menu.js `renderSection`). Замечание подраздела — точкой у раздела. Список длиннее экрана — листается сам, «кто за компьютером» внизу остаётся на месте. */ #nav-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 12px; } .nav button.nsec { display: flex; align-items: center; gap: 10px; } .nav .grp { font-size: calc(11px * var(--fz)); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 2px; } /* Деньги: графики своими средствами. Горизонтальные столбики — отделения, услуги, врачи, статьи; вертикальные — по дням. Никаких круговых диаграмм: на глаз их не прочесть. */ .bars { display: grid; gap: 6px; } .bar-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: calc(13px * var(--fz)); } /* Длинные названия — услуги, статьи расходов: подписи шире, полоска короче. «УЗДС артерий нижн…» не говорит врачу ничего. */ .bars.wide .bar-row { grid-template-columns: minmax(180px, 55%) 1fr auto; } /* Подпись полоски — до двух строк (30.09.2026): «Приём терапевта первичный 2 раза» целиком. */ .bar-l { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; line-height: 1.25; } .bar-t { height: 12px; background: var(--fill); border-radius: 99px; overflow: hidden; } .bar-t i { display: block; height: 100%; background: var(--teal); border-radius: 99px; min-width: 2px; } .bar-v { font-weight: var(--w-medium); white-space: nowrap; } .col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; } .table td.num, .table th.num { text-align: right; white-space: nowrap; } .table.pl tr.pl-sum td { background: rgba(10,122,106,.08); font-weight: var(--w-strong); } .table.pl tr.pl-total td { background: var(--teal-soft); font-weight: var(--w-strong); font-size: calc(15px * var(--fz)); } .tag .linkish { margin-left: 4px; } /* Отрицательные деньги — красным. Убыток, выделенный тем же зелёным, что и прибыль, — это не отчёт, а обман самого себя. */ .minus { color: var(--rose); } .bar-l i { display: block; font-style: normal; font-size: calc(11px * var(--fz)); line-height: 1.2; } .card.click { cursor: pointer; } .card.click:hover { box-shadow: 0 0 0 2px var(--teal) inset; } /* ---------- окно продаж ---------- Три панели в одной строке: товар, чек, оплата. Кассир не переключает экраны и не открывает окон — всё, что нужно для одной продажи, видно сразу. Взято из программы магазина заказчика, где так стоят третий год. */ /* Ширину панелей кассир двигает сам, потаскав границу между ними, — как в программе магазина, где это работает третий год. Причина простая: у одного прилавка широкий монитор и длинные названия товаров, у другого — узкий и важнее чек. Готовых пропорций, которые подошли бы обоим, не существует, а спорить об этом с программой кассир не должен. Поэтому здесь flex, а не grid: у grid ширина колонки живёт в родителе, и двигать пришлось бы строку `grid-template-columns` целиком. У flex ширина лежит на самой панели, и перетаскивание — это два числа на двух соседях. */ .sale { display: flex; align-items: stretch; gap: 0; min-width: 0; } .sale .card { padding: 14px; } .sale-pane { flex: 0 0 auto; min-width: 190px; box-sizing: border-box; overflow: auto; } /* Оплата забирает остаток: она крайняя справа, и пустоты за ней быть не должно. */ .sale-pay { flex: 1 1 auto; width: auto !important; min-width: 230px; } .sale-find, .sale-cart { min-width: 0; } /* Граница между панелями. Десять пикселей — столько, чтобы попасть мышью не целясь, и полоска посередине, чтобы было видно, что за это можно взяться. */ .sale-split { flex: 0 0 12px; cursor: col-resize; align-self: stretch; background: linear-gradient(var(--line), var(--line)) center / 2px 44% no-repeat; touch-action: none; } .sale-split:hover { background-color: var(--teal-soft); } .sale-split.drag { background-color: var(--teal-soft); } .salelist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; } .saleitem { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; background: var(--fill); border-radius: 12px; padding: 10px 12px; text-align: left; min-height: 52px; font-size: calc(15px * var(--fz)); } .saleitem:hover { background: var(--teal-soft); } /* Подсвеченная строка — та, что уйдёт в чек по Enter. Без неё стрелки двигают что-то невидимое, и клавиатурой пользоваться нельзя. */ .saleitem.on { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); } .saleitem.out { opacity: .45; } .saleitem-n { display: flex; flex-direction: column; min-width: 0; } .saleitem-n i { font-style: normal; } .saleitem b { white-space: nowrap; } /* Поле прямо в строке таблицы: количество и цену правят, не открывая окна. */ .cellin { width: 88px; text-align: right; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--fill); } /* В чеке количество и цена — это «2» и «5», а не суммы: узкое поле оставляет место названию товара, из-за которого строка иначе ломается надвое. */ .table.cart .cellin { width: 62px; } .table.cart td { padding: 8px 6px; } .total { background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 12px; } .total b { display: block; font-size: 24px; line-height: 1.2; } .total .muted { color: rgba(255,255,255,.65); } .total .minus { color: #ffb4ae; } /* На узком экране панели встают друг под друга, и двигать границы нечего: ширина там одна на всех. Разделители прячем, чтобы не осталось полосок, за которые можно взяться, но ничего не произойдёт. */ @media (max-width: 1100px) { .sale { flex-wrap: wrap; gap: 12px; } .sale-pane, .sale-pay { width: auto !important; flex: 1 1 100%; } .sale-split { display: none; } } /* Короткое сообщение внизу экрана. Сканер работает молча, и без отклика кассир не понимает, попал он в товар или нет. */ #toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: calc(15px * var(--fz)); z-index: 300; max-width: min(720px, 90vw); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; } #toast[hidden] { display: none; } /* Экранная клавиатура для денежных полей. За прилавком часто сенсорный монитор, а обычную клавиатуру оттуда убирают. Кнопки крупные нарочно: пальцем по мелким цифрам не попадёшь, а ошибка в сумме — это недостача вечером. */ .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .padk { min-height: 52px; font-size: 20px; font-weight: var(--w-medium); } /* ---------- раздел «Отчёты» ---------- */ /* Указатель раздела: у каждого отчёта название и строка «на какой вопрос он отвечает». Название без такой строки — загадка, которую разгадывают открыванием; именно поэтому в чужих системах из шестидесяти отчётов человек открывает три. Звёздочка поднимает нужные наверх. */ .rep-link { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 10px 6px; border-radius: 10px; } .rep-link:hover { background: var(--fill); } /* Вкладки отчёта строками под ним (07.10.2026): каждая — по имени, нажатие — прямо в неё. */ .rep-link b { display: block; font-size: calc(16px * var(--fz)); font-weight: var(--w-medium); } .rep-link i { display: block; font-style: normal; margin-top: 2px; line-height: 1.35; } /* Шапка таблицы отчёта: её читают, а не пролистывают, поэтому она должна быть видна при прокрутке длинного списка. */ .table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); text-transform: none; letter-spacing: 0; /* брендбук: шапка таблицы — обычными буквами (A7-15) */ padding: 8px 6px; border-bottom: 1px solid var(--line); } .table tfoot td { border-top: 2px solid var(--line); padding-top: 10px; } /* Строка, на которую стоит посмотреть: скидка без причины, расхождение в кассе. */ .table tr.warn-row td { background: var(--amber-soft); } /* Печать отчёта: на бумаге меню и кнопки не нужны — нужны числа. */ @media print { .nav, .tools, .top .tools, .row .chip, .btn { display: none !important; } .app { grid-template-columns: 1fr; } .main { padding: 0; max-width: none; } .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; } .table thead th { position: static; } } /* Переключатель-чипы окон «Лист ожидания» и «Серия записей» (`.zp`). */ .zp { display: flex; gap: 2px; flex-wrap: wrap; border-radius: 8px; padding: 3px; background: var(--fill); outline: 0; min-height: 32px; align-items: center; } .zp:focus { box-shadow: 0 0 0 2px var(--teal); } .zp button { border: 0; border-radius: 6px; background: transparent; padding: 0 8px; height: 26px; font: var(--w-medium) calc(12px * var(--fz)) var(--font); cursor: pointer; white-space: nowrap; color: #48484a; } .zp button.on { background: var(--paper); color: var(--teal-ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); } /* Давний неоплаченный приём в «Кассе» – красным (макет v2, 09.10.2026). */ .kas-old { color: var(--rose); font-weight: var(--w-medium); } /* «Закрыть месяц» окном шагами (js/mesyac-zakr.js, 09.10.2026, макет v2): шаги слева, выбранный шаг справа, низ — «‹ Шаг N» и «Всё верно, дальше ›». */ .modal.mz-modal { width: min(1080px, 100%); padding: 0; } .mz-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .mz-top h3 { margin: 0; font-size: 20px; } .mz-in { display: flex; min-height: min(560px, calc(100vh - 140px)); } .mz-nav { flex: 0 0 260px; padding: 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .mz-st { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 9px; font: inherit; color: var(--ink); cursor: pointer; } .mz-st:hover { background: var(--fill); } .mz-st.on { background: var(--fill); } .mz-st:not(.on):not(.ok):not(.warn) { opacity: .7; } .mz-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); border: 1.5px solid var(--muted); color: var(--muted); box-sizing: border-box; } .mz-st.on .mz-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); } .mz-st.ok .mz-dot { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .mz-st.warn .mz-dot { background: var(--amber); border-color: var(--amber); color: #fff; } .mz-st-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mz-st-t b { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .mz-st-t .small { line-height: 16px; } .mz-pravo { flex: 1 1 auto; min-width: 0; padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 160px); overflow-y: auto; } .mz-pravo p { margin: 0; } .mz-hh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; } .mz-h2 { font-size: calc(18px * var(--fz)); font-weight: var(--w-strong); } .mz-h4 { margin: 4px 0 0; font-size: calc(14px * var(--fz)); } .mz-ban { margin: 0; } .mz-porog input { width: 72px; height: 30px; padding: 2px 8px; font-size: calc(14px * var(--fz)); } .mz-tw { overflow-x: auto; } .mz-zp td { vertical-align: top; } .mz-zp tr.mz-hl td { background: color-mix(in srgb, var(--amber-soft) 55%, var(--paper)); } .mz-zp tr.mz-sub td { font-size: calc(13px * var(--fz)); background: var(--bg); padding-top: 5px; padding-bottom: 5px; } .mz-zp .mz-za { white-space: nowrap; min-height: 0; padding: 0; } .mz-up { color: var(--teal-ink); font-weight: var(--w-medium); white-space: nowrap; } .mz-dn { color: var(--rose); font-weight: var(--w-medium); white-space: nowrap; } .mz-flag { color: var(--amber); font-weight: var(--w-medium); white-space: nowrap; } .mz-pravki { background: var(--bg); border-radius: 10px; padding: 9px 12px; font-size: calc(13px * var(--fz)); line-height: 19px; } .mz-docs { flex-wrap: wrap; gap: 8px; align-items: center; } .mz-niz { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; } .mz-niz-r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } /* «Расходы» (07.10.2026): итог по статьям строкой над таблицей; статья — отбор. */ .exp-line { margin: 0 0 12px; color: var(--muted); line-height: 1.6; } .exp-line b { color: var(--ink); } .exp-line .exp-cat { color: var(--muted); font-weight: var(--w-text); min-height: 0; padding: 0; text-decoration: none; } .exp-line .exp-cat:hover { color: var(--teal-ink); } .exp-line .exp-cat.on { color: var(--teal-ink); font-weight: var(--w-medium); } #exp-t .linkish { min-height: 0; padding: 0; font-weight: var(--w-text); font-size: calc(12px * var(--fz)); } .exp-note { margin: 12px 2px 0; } .exp-note .linkish { min-height: 0; padding: 0; } .top .tools .kk-mon .per-m { display: inline-flex; align-items: center; padding: 0 12px; font-weight: var(--w-medium); } .kk-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; } .kk-list .kk-p { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .kk-list .kk-p:hover { border-color: var(--teal); } .pay-more-w { margin: 2px 0 6px; } .pay-more-w #pay-more { margin-top: 6px; } .zwhy { position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; background: var(--paper); border-radius: 10px; padding: 8px 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.3), 0 0 0 1px var(--line); display: none; z-index: 50; gap: 8px; align-items: center; } .zwhy.on { display: flex; } .zwhy b { font-size: calc(12px * var(--fz)); } /* Карточка пациента: данные, приёмы, деньги, документы — плитками в ряд. */ .pat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);margin-bottom:var(--gap);align-items:start} .pat-grid .card{margin-bottom:0} .fact{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.08));font-size:calc(14px * var(--fz))} .fact:last-of-type{border-bottom:0} .fact span{color:var(--muted)} .fact b{text-align:right;font-weight: var(--w-medium)} .fact.alert b{color: var(--rose-ink)} /* Назначения: точки курса. */ .dots{display:flex;gap:4px;flex-wrap:wrap;max-width:180px} .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);display:inline-block;box-sizing:border-box} .dot.on{background:var(--teal,#0a7a6a);border-color:var(--teal,#0a7a6a)} .dot.due{border-color:#e0a33c;box-shadow:0 0 0 2px rgba(224,163,60,.25)} .dot.miss{background:var(--rose);border-color:var(--rose)} .kc-row{padding:8px 0;border-top:1px solid var(--line)}.kc-row:first-of-type{border-top:0} /* Кабинеты и очередь. */ .rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap);margin-bottom:var(--gap)} .room{background: var(--paper);border-radius:14px;padding:12px 14px;border:1px solid var(--line,rgba(0,0,0,.08));border-left:5px solid #3fa86a} .room.busy{border-left-color:#4a90c4} .room.wait{border-left-color:#e0a33c} .room.alarm{box-shadow:0 0 0 2px rgba(179,38,30,.35)} .room-h{display:flex;flex-direction:column;margin-bottom:4px} .room-s{font-weight: var(--w-text);margin:2px 0} .room-q{margin:6px 0 2px} /* Табло для коридора: во весь экран, крупно, без меню. */ body.tablo-on .nav{display:none} body.tablo-on .app{display:block} body.tablo-on .main{max-width:none;width:100%;margin:0;padding:0} .tablo{min-height:100vh;background:#0f1d1b;color:#fff;padding:3vh 4vw;box-sizing:border-box;font-size:2.2vh} .tablo-h{display:flex;align-items:center;justify-content:space-between;font-size:4vh;margin-bottom:3vh} .tablo-h span{font-variant-numeric:tabular-nums;opacity:.85} .tablo-x{background:none;border:0;color:rgba(255,255,255,.35);font-size:3vh;cursor:pointer} .tablo-call{display:flex;flex-direction:column;gap:1.6vh;margin-bottom:4vh} .tablo-row{display:grid;grid-template-columns:minmax(0,2fr) auto minmax(0,1.4fr) minmax(0,1.4fr);align-items:baseline;gap:2vw;background:#14463f;border-radius:2vh;padding:2vh 2.4vw;font-size:5.4vh;font-weight: var(--w-medium);animation:tablo-in .6s ease} .tablo-row .arrow{opacity:.6} .tablo-row .where{color:#7ee0c8} .tablo-row .doc{font-size:2.8vh;font-weight: var(--w-medium);opacity:.8} .tablo-idle{font-size:3.6vh;opacity:.55;margin:4vh 0} .tablo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(28vw,1fr));gap:1.4vh 1.6vw} .tablo-cell{background:rgba(255,255,255,.06);border-radius:1.4vh;padding:1.4vh 1.4vw;display:flex;flex-direction:column;gap:.4vh} .tablo-cell b{font-size:2.8vh} .tablo-cell span{opacity:.7} .tablo-cell em{font-style:normal;color:#7ee0c8} /* Кабинет на двух языках (27.09.2026): русская строка и под ней таджикская, мельче. */ .room2{display:inline-flex;flex-direction:column;line-height:1.1} .room2 small{font-size:.62em;font-weight: var(--w-text);opacity:.8} .tablo-cell .room2{opacity:.85} .tablo-cell .room2 span{opacity:1} .tablo-cell .room2 small{font-size:.85em;font-weight: var(--w-text)} .tablo-cell.busy em{color:#f3c56b} @keyframes tablo-in{from{transform:scale(.97);background:#1f7a6c}to{transform:none}} /* График работы: врачи × дни. */ .table.grafik td, .table.grafik th { text-align: center; white-space: nowrap; padding: 6px 5px; font-size: calc(12.5px * var(--fz)); } .table.grafik td:first-child, .table.grafik th:first-child { text-align: left; } .table.grafik td.gr-on { background: var(--ok-soft); } .table.grafik td.gr-on.gr-special { background: var(--amber-soft); } .table.grafik td.gr-off { color: var(--muted); background: repeating-linear-gradient(135deg, var(--fill) 0 6px, transparent 6px 12px); } /* Скидки: две карточки рядом, на узком — одна под другой */ /* Одним столбцом (08.10.2026: «простота и чистота», как «Отчёты»). */ .dsc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; max-width: 980px; } .dsc-grid .table input { height: 28px; } @media (max-width: 900px) { .dsc-grid { grid-template-columns: 1fr; } } /* Аннулированный платёж (28.09.2026): строка остаётся, но видно, что денег нет. */ tr.annulled td { color: var(--muted); } tr.annulled td s { text-decoration-thickness: 1px; } /* Счета: четыре карточки в ряд — касса, терминал, банк, всего */ /* Строка над таблицей: колонки, Excel, печать (js/kolonki.js) */ .tt-bar { position: relative; display: flex; justify-content: flex-end; gap: 2px; margin: -6px 0 0; height: 26px; } .tt-bar button { border: 0; background: none; color: var(--muted); font: var(--w-medium) calc(11.5px * var(--fz)) var(--font); padding: 0 7px; height: 26px; min-height: 26px; border-radius: 6px; cursor: pointer; } .tt-bar button:hover { background: var(--fill); color: var(--ink); } .tt-bar.tt-dock { margin: 0 0 0 auto; align-self: center; } .tt-pop { position: absolute; right: 0; top: 28px; z-index: 50; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 10px; min-width: 200px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 3px; } .tt-pop label { display: flex; gap: 7px; align-items: center; font-size: calc(13px * var(--fz)); white-space: nowrap; cursor: pointer; } .tt-pop .linkish { margin-top: 4px; align-self: flex-start; font-size: calc(12px * var(--fz)); } @media print { .tt-bar, .tt-pop { display: none !important; } } /* Отбор по филиалу рядом с периодом */ .br-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; } .br-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .br-chips .br-note { align-self: center; margin-left: 6px; } .lang-alt { padding-left: 8px !important; padding-right: 8px !important; font-weight: var(--w-medium); letter-spacing: .02em; } /* Сортировка по заголовку, поиск, группы и итог у таблиц (как в МедСофте) */ th.tt-sortable { cursor: pointer; user-select: none; } th.tt-sortable:hover { color: var(--ink); } th.tt-asc::after { content: " ▲"; font-size: calc(11px * var(--fz)); color: var(--teal-ink); } th.tt-desc::after { content: " ▼"; font-size: calc(11px * var(--fz)); color: var(--teal-ink); } .tt-bar .tt-q { height: 26px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; font: var(--w-medium) calc(12px * var(--fz)) var(--font); width: 180px; margin-right: auto; background: var(--fill); outline: 0; } .tt-bar .tt-q:focus { background: var(--paper); box-shadow: 0 0 0 2px var(--teal); } .tt-bar .tt-cnt { align-self: center; margin-right: 6px; } tr.tt-grp td { background: var(--fill); border-top: 1px solid var(--line); } tr.tt-foot td { border-top: 2px solid var(--line); background: var(--fill); } .pl-months td, .pl-months th { padding-left: 6px; padding-right: 6px; font-size: calc(12px * var(--fz)); white-space: nowrap; } /* Отчёты из МедСофта (otchety.js): цвет выполнения плана. */ .table td.ok { color: var(--ok-ink); font-weight: var(--w-medium); } .table td.bad { color: var(--rose); font-weight: var(--w-medium); } /* ======== ОТЧЁТ — ВИДОМ ДОКУМЕНТА ======== Замечание заказчика 23.09.2026: «у тебя каждая строка отчёта съедает огромное место, в один экран влезает пять-шесть строк, а должно быть минимум пятнадцать-двадцать. И не как у МедСофта — просто таблица из Excel, — а как документ». Поэтому у экранов-отчётов (`.rep-page`, список — `repLike` в js/rep.js) свой вид: заголовок и переключатели — одной невысокой полосой, плитки — узкой строкой, таблица — ровным мелким шрифтом, строка в одну линию (второе значение ячейки — рядом, серым, а не под ним), цифры вправо и моноширинные, строки через одну чуть серее. Кнопки не мельче 26 px — под мышь хватает. */ /* Отчёт — та же шапка и тот же край, что у всех экранов (08.10.2026); плотнее только таблица и плитки. */ .app.rep-page .top { margin-bottom: 10px; } .app.rep-page .kk-under { margin: 6px 2px 0; } .app.rep-page .top .tools { gap: 6px; } /* Кнопки шапки отчёта — как у всех экранов (08.10.2026: один макет). */ .app.rep-page .chip { min-height: 28px; height: 28px; padding: 3px 11px; font-size: calc(13px * var(--fz)); } .app.rep-page #body > .row, .app.rep-page #body .row { gap: 6px; } .app.rep-page #body > .row { margin-bottom: 8px !important; align-items: center; } .app.rep-page #body input[type=month], .app.rep-page #body input[type=date], .app.rep-page #body input.search, .app.rep-page #body select { height: 28px; min-height: 28px; padding: 3px 8px; font-size: calc(13px * var(--fz)); width: auto; max-width: 240px; border-radius: 8px; } .app.rep-page .kpis { gap: 6px; margin-bottom: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .app.rep-page .kpis .card { padding: 6px 10px; border-radius: 10px; } .app.rep-page .kpis .card > span { font-size: calc(11.5px * var(--fz)); } .app.rep-page .kpis .card b { font-size: calc(18px * var(--fz)); margin-top: 0; letter-spacing: -.02em; } /* Подпись под цифрой — до трёх строк, а не многоточие: срезанная формула или дата («последний приём раньше 30.09.2…») — потерянный смысл (снимки экранов, 30.09.2026). */ .app.rep-page .kpis .card .muted.small { font-size: calc(11.5px * var(--fz)); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .app.rep-page .kpis .card .linkish, .app.rep-page .kpis .card button { min-height: 26px; font-size: calc(12px * var(--fz)); } .app.rep-page .banner { padding: 5px 10px; font-size: calc(12.5px * var(--fz)); margin-bottom: 6px; border-radius: 8px; } .app.rep-page .card { padding: 8px 10px; border-radius: 12px; } .app.rep-page .card h3 { font-size: calc(13px * var(--fz)); margin: 0 0 4px; } .app.rep-page .grid { gap: 8px; } .app.rep-page p.muted.small, .app.rep-page .muted.small { font-size: var(--fs-hint); } .app.rep-page #body > p.muted.small { margin: 6px 2px 0; line-height: 1.35; } .app.rep-page .table { font-size: calc(13px * var(--fz)); line-height: 1.3; font-variant-numeric: tabular-nums; } .app.rep-page .table th, .app.rep-page .table thead th { padding: 4px 7px; font-size: calc(11px * var(--fz)); letter-spacing: .02em; background: #f4f4f7; border-bottom: 1px solid #d8d8de; vertical-align: bottom; } .app.rep-page .table td { padding: 3px 7px; border-top: .5px solid #e6e6ea; } .app.rep-page .table tbody tr:nth-child(even):not(.warn-row):not(.tt-grp):not(.pl-sum) > td { background: #fafafc; } .app.rep-page .table tr.click:hover > td { background: #eef6f4; } .app.rep-page .table td.num { white-space: nowrap; } .app.rep-page .table tfoot td, .app.rep-page .table tr.tt-foot td { padding: 4px 7px; font-weight: var(--w-strong); background: #f0f0f3; border-top: 1.5px solid #bdbdc4; } .app.rep-page .table tr.tt-grp td { padding: 4px 7px; font-size: calc(12px * var(--fz)); } /* Второе значение ячейки — рядом, серым, а не второй строкой. */ .app.rep-page .table td > div:not(.row):not(.tools):not(.bar-t), .app.rep-page .table td > .sub, .app.rep-page .table td > br + .muted { display: inline; margin-left: 6px; font-size: calc(11.5px * var(--fz)); } .app.rep-page .table td > div:not([class]) { color: var(--muted); } .app.rep-page .table .linkish { min-height: 0; height: auto; padding: 0; } .app.rep-page .table td > br { display: none; } .app.rep-page .table td > b, .app.rep-page .table td > a { font-weight: var(--w-medium); } .app.rep-page .table .btn { min-height: 26px; height: 26px; padding: 2px 10px; font-size: calc(12px * var(--fz)); border-radius: 7px; } .app.rep-page .table .tag { font-size: calc(11px * var(--fz)); padding: 1px 6px; } .app.rep-page .tt-bar { margin-bottom: 2px; } .app.rep-page .bars { gap: 3px; } .app.rep-page .bar-row { font-size: calc(12.5px * var(--fz)); gap: 8px; } .app.rep-page .empty { padding: 14px; font-size: var(--fs-hint); } .app.rep-page .fact { padding: 3px 0; font-size: calc(13px * var(--fz)); } .app.rep-page .list-item { padding: 4px 0; font-size: calc(13px * var(--fz)); } .app.rep-page .main { max-width: 1320px; } /* Строка отчёта — одна линия: длинный текст обрезается многоточием (целиком он во всплывающей подсказке и в выгрузке), а не раздувает строку вдвое. */ .app.rep-page .table td { white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .app.rep-page .table td.empty { white-space: normal; max-width: none; } /* Пояснение мелким внутри строки (правило премии, «порог не достигнут», «оклады · премии») — переносится: само число строки остаётся в одну линию (30.09.2026). */ .app.rep-page .table td.small, .app.rep-page .table td > div.small { white-space: normal; } .app.rep-page .card:has(> .table), .app.rep-page .card:has(> .tt-bar) { overflow-x: auto; } /* Период, касса, разрезы и поиск — в одну полосу, пока хватает ширины. */ .app.rep-page #body > .row { display: inline-flex; flex-wrap: wrap; vertical-align: middle; margin: 0 14px 8px 0 !important; } .app.rep-page #body > .banner { margin-top: 6px !important; } .app.rep-page #body > .kpis { margin-top: 0; } .app.rep-page #body > .row .row { margin: 0 !important; } .app.rep-page .table td { max-width: 280px; } .app.rep-page .bar-l i { display: inline; margin-left: 6px; } .app.rep-page .bar-t { height: 8px; } .app.rep-page .bars { gap: 2px; } .app.rep-page .kpis + .kpis { margin-top: 0 !important; } .app.rep-page .banner .btn { min-height: 26px; height: 26px; padding: 2px 10px; font-size: calc(12.5px * var(--fz)); margin-left: 8px; } /* Переключатель языка (js/til.js): «Русский · Тоҷикӣ». */ .til-pick { display: inline-flex; gap: 2px; background: var(--fill); border-radius: 10px; padding: 2px; margin-top: 10px; } .til-pick button { border: 0; background: transparent; padding: 4px 12px; min-height: 32px; border-radius: 8px; font-size: calc(13px * var(--fz)); color: var(--muted); } .til-pick button.on { background: var(--paper); color: var(--ink); font-weight: var(--w-medium); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .gate-til { background: rgba(255,255,255,.12); } .gate-til button { color: #cfe3de; } .gate-til button.on { background: rgba(255,255,255,.9); color: #07584d; } .til-big button { min-height: 34px; padding: 6px 16px; font-size: calc(14px * var(--fz)); } /* «Записать на приём» стойки — во всю ширину (`wide: "cal-wide"`). Снизу — 12 px, как отступ `szVysota`: при 24 страница листалась на 12 px (17.10.2026, t4). */ .app.cal-wide .main { max-width: none; padding: 12px 16px 12px; } /* Свёрнутые группы (js/fold.js). */ .fold-h { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 7px 10px; cursor: pointer; text-align: left; font: inherit; border-radius: 8px; } .fold-h:hover { background: var(--fill); } .fold-h .fold-a { font-style: normal; width: 14px; color: var(--muted); } .fold-h b { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .fold-h .fold-n { font-size: calc(12px * var(--fz)); color: var(--muted); background: var(--fill); border-radius: 99px; padding: 1px 8px; } .fold-h .fold-about { font-size: calc(12px * var(--fz)); color: var(--muted); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .fold-all { font-size: calc(13px * var(--fz)); } .fold-all.fold-dock { margin-left: auto; white-space: nowrap; } .tools > .fold-all.fold-dock { margin-left: 0; } .fold-g { border-bottom: 1px solid var(--line); } .fold-g:last-child { border-bottom: 0; } .fold-body { padding: 0 0 6px 22px; } /* Свёрнутая группа карточкой («Договоры и согласия», 16.10.2026): у карточки свои поля со всех сторон – без них длинное название упиралось в правый край, стрелка строки и «+ ДИС» прилипали к рамке. */ .fold-body.card { padding: 12px 16px 12px 22px; } .fold-body .list-item { gap: 12px; } .fold-body .list-item > div:first-child { min-width: 0; } .dog-map td .linkish { display: inline; min-height: 0; padding: 0; text-align: left; } .rep-groups { padding: 4px 8px; } .table tr.fold-row td { padding: 2px 4px; border-top: 1px solid var(--line); } /* Договоры и согласия: кому что печатается */ .dog-map { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fz)); } .dog-map th { text-align: left; font-weight: var(--w-medium); color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); } .dog-map td { padding: 4px 6px; border-bottom: 1px solid var(--line); } .dog-note { margin: 2px 0 8px; } .dg-s { padding: 5px 8px; } /* ---------- Пульт директора: общее с «Аналитикой» и окнами (js/pult.js, js/analitika-oblasti.js, графики — js/diagramma.js) ---------- Вид Главной директора — блок «Главная директора, 14.10.2026» в конце файла. Бирюзовый — деньги клиники, оранжевый (--out) — «ушло»; подписи на графиках — тёмным текстом. */ :root { --out: #f4891f; --out-soft: #fbc796; --rose-ink: #a1281d; --amber-ink: #8a4a0c; --ok-ink: #2f6e40; } .pult-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-bottom: 4px; } .dg-split i.out { background: var(--out); } .dg-split i.out2 { background: var(--out-soft); } .pult-rl { max-height: 60vh; overflow: auto; margin: 6px 0 10px; } .pult-rr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .pult-rr > span { display: flex; flex-direction: column; min-width: 0; } .pult-tb { width: 100%; font-size: calc(14px * var(--fz)); } .pult-tb th, .pult-tb td { padding: 8px 10px; line-height: 18px; } .pult-tb th.num, .pult-tb td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-tb td.pult-dl { font-size: calc(14px * var(--fz)); } .pult-tb tfoot td { font-weight: var(--w-strong); border-bottom: 0; } .pult-dr-bg { position: fixed; inset: 0; background: rgba(28, 28, 30, .32); z-index: 14; } .pult-drill { position: fixed; top: 0; right: 0; bottom: 0; z-index: 15; width: min(620px, 100%); box-sizing: border-box; padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: var(--paper); box-shadow: -12px 0 40px rgba(0, 0, 0, .16); } .pult-dr-h { display: flex; align-items: center; gap: 12px; } .pult-dr-h h2 { margin: 0; font-size: 21px; } .pult-bxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .pult-bx { display: flex; flex-direction: column; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg); } .pult-bx b { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; } .pult-bx .pult-dl { font-size: calc(12px * var(--fz)); white-space: normal; } .pult-why { font-size: calc(14px * var(--fz)); line-height: 20px; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); } .pult-why.dn { background: var(--rose-soft); } .pult-st { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); margin-bottom: 6px; } .pult-sv { display: grid; grid-template-columns: minmax(0, 1fr) 130px 70px; gap: 10px; align-items: center; padding: 4px 0; font-size: calc(14px * var(--fz)); } .pult-sv b { text-align: right; font-variant-numeric: tabular-nums; } .pult-db { height: 8px; background: var(--fill); border-radius: 4px; overflow: hidden; } .pult-db i { display: block; height: 100%; min-width: 2px; background: var(--teal); border-radius: 4px; } .pult-dr-f { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); } .pult-sk { display: block; margin: 8px 0; border-radius: 8px; background: var(--fill); animation: pult-sk 1.1s ease-in-out infinite alternate; } .pult-sk-l .pult-sk { height: 14px; } @keyframes pult-sk { from { opacity: .55; } to { opacity: 1; } } .pult-og { margin: 12px 0 2px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .pult-o { display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; } .pult-o:disabled { cursor: default; opacity: 1; } .pult-o b, .pult-net b { font-variant-numeric: tabular-nums; white-space: nowrap; } .pult-net { font-weight: var(--w-strong); border-top: 2px solid var(--line); } .por-list { margin: 6px 0; } .por-card { max-width: none; } /* во всю ширину, как остальные карточки (16.10.2026) */ .por-g { margin: 12px 0 2px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .por-r { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 4px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); } .por-on { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-height: 36px; cursor: pointer; } .por-p { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(13px * var(--fz)); } .por-p input { width: 88px; height: 34px; padding: 4px 8px; font-size: calc(14px * var(--fz)); } .dg-fall { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin-top: 22px; } .dg-f { display: flex; flex-direction: column-reverse; min-width: 0; cursor: default; } .dg-fb { position: relative; height: 200px; background: linear-gradient(to top, transparent calc(var(--z) - 1px), var(--line) calc(var(--z) - 1px), var(--line) var(--z), transparent var(--z)); } .dg-fb i { position: absolute; left: 12%; right: 12%; bottom: var(--a); height: calc(var(--b) - var(--a)); min-height: 2px; border-radius: 3px; background: var(--teal); } .dg-f.out .dg-fb i, .dg-f.neg .dg-fb i { background: var(--out); } .dg-fb b { position: absolute; left: -4px; right: -4px; bottom: calc(var(--b) + 3px); text-align: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .dg-fb::after { content: ""; position: absolute; left: 88%; width: calc(24% + 4px); bottom: var(--c, -9999px); border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); } .dg-f:last-child .dg-fb::after { display: none; } .dg-fn { margin-top: 6px; font-size: calc(11px * var(--fz)); line-height: 1.2; text-align: center; color: var(--ink); min-height: 2.4em; } .dg-split { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 12px; } .dg-split i { display: block; min-width: 2px; } /* ---------- «Деньги» (js/dengi-ekran.js, dengi-pu.js, dengi-dvizh.js; C1 02.10.2026) ---------- Плитки и графики — как на пульте (.pult-k, js/diagramma.js). */ .pu-year { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .pu-year .chip { margin: 0; } .pu-t tr.pu-g td { background: var(--fill); font-size: calc(12px * var(--fz)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 6px; padding-bottom: 6px; } .pu-t tr.pu-pok td:first-child { color: var(--muted); } .pu-t td.num, .pu-t th.num { white-space: nowrap; } /* ---------- Главная руководства (js/home.js; вид «Требует внимания» — в блоке «Главная директора, 14.10.2026» в конце) ---------- */ .home-t { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fz)); } .home-t th { text-align: left; font-weight: var(--w-medium); color: var(--muted); font-size: calc(12px * var(--fz)); padding: 4px 6px; border-bottom: 1px solid var(--line); } .home-t td { padding: 5px 6px; border-bottom: 1px solid var(--line); } .home-t td:nth-child(n+2), .home-t th:nth-child(n+2) { text-align: center; } .home-t td:first-child, .home-t th:first-child { text-align: left; } /* ======== ФОН ПРОГРАММЫ (замечание заказчика 24.09.2026: «выбрать фон программы, дай возможности») ======== Тема — настройка этого компьютера, как плотность: читается до первой отрисовки (page.html), живёт в localStorage («ormin-theme»). Светлые темы меняют только фон, карточки и заливки — цвета смысла (красное «нужно», зелёное «готово», бирюзовые кнопки) остаются теми же, чтобы переход между компьютерами не путал. Тёмная переопределяет и пастельные блоки. */ :root[data-theme="warm"] { --bg: #f3eee4; --paper: #fffdf8; --fill: #eae3d4; --line: rgba(90, 70, 40, .14); --muted: #8e8474; } :root[data-theme="sky"] { --bg: #e8eff7; --paper: #ffffff; --fill: #dce5ef; --line: rgba(40, 70, 110, .13); --muted: #7b8898; } :root[data-theme="mint"] { --bg: #e6f2ed; --paper: #ffffff; --fill: #d8eae2; --line: rgba(20, 90, 70, .13); --muted: #7a8c85; } :root[data-theme="lilac"] { --bg: #efedf7; --paper: #ffffff; --fill: #e2dff0; --line: rgba(70, 60, 120, .13); --muted: #857f99; } :root[data-theme="gray"] { --bg: #d9dce1; --paper: #ffffff; --fill: #e8eaed; --line: rgba(40, 45, 55, .15); --muted: #767c85; } :root[data-theme="dark"] { color-scheme: dark; /* Тёмная — ночной тёмно-синий брендбука, а не серый (14.10.2026). */ --bg: #071c27; --paper: #0d2836; --ink: #e6eef1; --muted: #9db2bc; --muted-2: #8aa3ae; --line: rgba(230, 238, 241, .12); --line-2: rgba(230, 238, 241, .07); --fill: #16384a; --teal: #27beb6; --teal-ink: #7dd8d3; --teal-soft: #11433f; --teal-10: #0f3a3c; --on-teal: #002d42; --navy: #33576a; --navy-20: rgba(230, 238, 241, .2); --navy-10: #1b3e50; --amber: #f4a24f; --amber-soft: #43301a; --rose: #ff7a6e; --rose-soft: #45201d; --ok: #8cd29a; --ok-soft: #173a29; --c-fin: #11433f; --c-pac: #1f3d2a; --c-med: #1b3e50; --c-skl: #43301a; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 6px 24px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .who-av { background: #27beb6; color: #002d42; } /* На тёмном фоне логотип белый (брендбук: цветной — только на белом) — атрибутом `tone` компонента, его ставит `brandVid` (js/logo.js): css внутрь не достаёт. */ :root[data-theme="dark"] .s-bad { color: #ffb3ad; } :root[data-theme="dark"] { --out: #f0844f; --out-soft: #7a4a33; --rose-ink: #ffb3ad; --amber-ink: #f3c37a; --ok-ink: #8fe0aa; } :root[data-theme="dark"] .module.m-need { background: #2e1d1d; box-shadow: inset 0 0 0 1.5px rgba(255, 107, 97, .55); } :root[data-theme="dark"] .module.m-done { background: #162b27; box-shadow: inset 0 0 0 1.5px rgba(47, 174, 152, .45); } :root[data-theme="dark"] .module.m-soft.s1 { background: #2a2419; } :root[data-theme="dark"] .module.m-soft.s2 { background: #1a2431; } :root[data-theme="dark"] .module.m-soft.s3 { background: #1a2b21; } :root[data-theme="dark"] .module.m-soft.s4, :root[data-theme="dark"] .cardflow .itog > .card, :root[data-theme="dark"] .dog-card { background: #24202f; } :root[data-theme="dark"] .chip.warn { background: #3b2321; } /* Сиреневый заголовок итога и договора – пара тёмной темы (A7-26). */ :root[data-theme="dark"] .dog-card .hd h3, :root[data-theme="dark"] .cardflow .itog > .card h3 { color: #c9bff2; } :root[data-theme="dark"] .table tr.click:hover, :root[data-theme="dark"] .icd-list .list-item:hover { background: #262a2f; } :root[data-theme="dark"] .app.rep-page .table th, :root[data-theme="dark"] .app.rep-page .table thead th { background: #25292e; border-bottom-color: #3a3f45; } :root[data-theme="dark"] .app.rep-page .table tbody tr:nth-child(even):not(.warn-row):not(.tt-grp):not(.pl-sum) > td { background: #1a1d20; } :root[data-theme="dark"] .app.rep-page .table tr.click:hover > td { background: #1c302c; } :root[data-theme="dark"] .app.rep-page .table tfoot td, :root[data-theme="dark"] .app.rep-page .table tr.tt-foot td { background: #25292e; border-top-color: #555b62; } :root[data-theme="dark"] .cw th { background: #25292e; } :root[data-theme="dark"] { --bar-bg: rgba(30, 33, 36, .97); } :root[data-theme="warm"] { --bar-bg: rgba(255, 253, 248, .97); } :root[data-theme="dark"] .btn.dark { background: #3a3f45; color: #fff; } :root[data-theme="dark"] .nav button:hover { background: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .preview { color-scheme: light; } /* Образцы тем на экране «Вид программы». */ .th-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .th-sw { border: 0; border-radius: 12px; padding: 8px; cursor: pointer; text-align: left; font: var(--w-medium) calc(13px * var(--fz)) var(--font); color: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); display: flex; flex-direction: column; gap: 6px; } .th-sw.on { box-shadow: inset 0 0 0 2.5px var(--teal); } .th-sw .th-p { display: flex; gap: 5px; height: 38px; } .th-sw .th-p i { flex: 1; border-radius: 7px; } .th-sw .th-p i:first-child { flex: .45; } .th-sw.dark { color: #e8eaed; } /* Кадры: сотрудники и их услуги (js/kadry.js) */ .ss { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; } .ss-list { padding: 10px; max-height: calc(100vh - 170px); overflow: auto; position: sticky; top: 12px; } .ss-list input { width: 100%; margin-bottom: 6px; } .ss-dep { font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 4px 3px; font-weight: var(--w-medium); } .ss-doc { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 6px 8px; cursor: pointer; font: inherit; color: inherit; } .ss-doc:hover { background: var(--fill); } .ss-doc.on { background: var(--teal-soft); } /* Отделения слева свёрнуты (js/fold.js) — заголовок группы мельче, по ширине колонки. */ .ss-g .fold-h { padding: 5px 10px; } .ss-g .fold-h b { font-size: calc(12.5px * var(--fz)); } .ss-t input.ss-v, .ss-rate { width: 76px; text-align: right; padding: 4px 6px; } .ss-t select { padding: 4px 6px; } @media (max-width: 1000px) { .ss { grid-template-columns: 1fr; } .ss-list { position: static; max-height: 240px; } } .ss .ss-h b { font-size: calc(17px * var(--fz)); } .ss input.ss-rate, .ss .ss-t input.ss-v { width: 74px; height: 30px; text-align: right; padding: 4px 8px; font-size: calc(14px * var(--fz)); } .ss .ss-t select { min-width: 140px; height: 30px; padding: 2px 8px; font-size: calc(13.5px * var(--fz)); } .ss .ss-t td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; } /* Бонусы за услугу нескольким (24.09.2026): строка «из кого выбирать» под получателем «по выбору на приёме» и выбор участника в карте и в окне оплаты. */ .ss .ss-t input.st-role { width: 100%; height: 30px; padding: 4px 8px; font-size: calc(13.5px * var(--fz)); } .ss .ss-t tr.st-pick-row td { background: var(--fill); padding-top: 4px; padding-bottom: 6px; } .ss .ss-t tr.st-pick-row .chip { min-height: 28px; padding: 2px 10px; margin: 2px 4px 2px 0; } .ss .ss-t select.st-pick-add { min-width: 170px; } /* «За услугу нескольким» (21.10.2026, заказчик: «нормальный человек не понимает разъяснительную работу внизу»): подсказка над таблицей, живой пример на числах услуги, одна фраза под вариантами «Кому», «Подробнее» – свёрнутое. */ .st-hint { margin: 8px 0 12px; font-size: calc(15px * var(--fz)); line-height: 1.4; } .ss .ss-t { table-layout: fixed; } .ss .ss-t th { white-space: normal; vertical-align: bottom; } .ss .ss-t th, .ss .ss-t td { padding-left: 5px; padding-right: 5px; } .ss .ss-t tr[data-slot] select, .ss .ss-t tr[data-slot] input.st-role { width: 100%; min-width: 0; } .ss .ss-t td.st-unit { white-space: nowrap; } .st-nobr { white-space: nowrap; } .ss .ss-t td.st-val { white-space: nowrap; } .st-u { display: inline-block; min-width: 1.6em; text-align: left; } .st-hint-w { margin: 0 0 4px; line-height: 1.35; } .st-pick-l { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; } .st-ex { margin-top: 12px; padding: 10px 14px; background: var(--teal-10); border-radius: 12px; font-size: calc(15px * var(--fz)); line-height: 1.4; } .st-ex-h { font-weight: var(--w-medium); } .st-ex ul { margin: 4px 0 6px; padding-left: 20px; } .st-ex li { margin: 2px 0; } .st-ex-t { font-weight: var(--w-medium); } .st-more { margin: 10px 0 0; } .st-more > summary { cursor: pointer; color: var(--teal-ink); width: fit-content; } .st-more ul { margin: 6px 0 0; padding-left: 20px; } .st-more li { margin: 2px 0; } @media (max-width: 699px) { .ss .ss-t thead { display: none; } .ss .ss-t, .ss .ss-t tbody { display: block; } .ss .ss-t tr[data-slot] { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px 10px; padding: 10px 0 4px; border-top: 1px solid var(--line-2); } .ss .ss-t tr[data-slot] td { display: block; border: 0; padding: 0; text-align: left; } .ss .ss-t tr[data-slot] td[data-l]::before { content: attr(data-l); display: block; font-size: calc(12px * var(--fz)); color: var(--muted); margin-bottom: 2px; } .ss .ss-t tr[data-slot] td:first-child, .ss .ss-t tr[data-slot] td:nth-child(2) { grid-column: 1 / -1; } .ss .ss-t select, .ss .ss-t input.st-role { width: 100%; min-width: 0; } .ss .ss-t select.st-who { min-width: 0; } .ss .ss-t tr.st-pick-row, .ss .ss-t tr.st-pick-row td { display: block; } .ss .ss-t td.empty { display: block; } } /* «Сотрудники» и карточка человека (B1, 02.10.2026; js/kadry.js, js/sotrudnik.js, js/sotrudnik-oplata.js; макет — доска «Сотрудник: схема оплаты»): вкладки чипами, «Из чего складывается» строками, справа — месяц и история условий. */ /* Вкладки — одной линией с подчёркиванием бирюзой (14.10.2026, как у Crestway), а не зелёными «таблетками»; одного размера на всех экранах. */ .sk-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 12px; box-shadow: inset 0 -1px 0 var(--line); } .sk-tabs .chip, .app.rep-page .sk-tabs .chip { min-height: 36px; height: 36px; padding: 0 2px; margin: 0; font-size: calc(14.5px * var(--fz)); font-weight: var(--w-medium); background: transparent; color: var(--muted); border-radius: 0; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; } .sk-tabs .chip:hover { color: var(--ink); background: transparent; } .sk-tabs .chip.on { background: transparent; color: var(--ink); font-weight: var(--w-medium); box-shadow: inset 0 -2px 0 var(--teal); } .nav-back svg { width: 18px; height: 18px; flex: none; } /* Вкладки и период в шапке (08.10.2026): вкладки — под заголовком вместо строки пояснения, период отчёта — рядом с кнопками справа. */ /* Вкладок в шапке не больше четырёх (16.10.2026, js/vkladki.js): с пяти – список слева. Ползунка нет; не влезли (телефон) – переносом. */ .top-t .sk-tabs { margin: 0; flex-wrap: wrap; max-width: 100%; min-width: 0; } .top-t { min-width: 0; } .top-tabs-r { display: flex; align-items: center; gap: 12px; margin-top: 8px; min-width: 0; } .top-sub { color: var(--muted); font-size: var(--fs-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; width: 0; } @media (max-width: 699px) { .top-tabs-r { flex-wrap: wrap; } .top-t .sk-tabs { gap: 0 16px; } } .top.top-tabs { align-items: flex-start; flex-wrap: wrap; } /* Заголовок с вкладками не уже самих вкладок (ползунка нет): не влезают кнопки справа – они уходят строкой ниже. На планшете и телефоне – переносом. */ .top.top-tabs .top-l { flex: 1 1 0; min-width: max-content; } @media (max-width: 979px) { .top.top-tabs .top-l { min-width: 0; } } /* Компьютер: кнопки справа – одной строкой, поле поиска сжимается до 120 px; не влезли и так – вся группа кнопок строкой ниже (а не вкладки вбок). */ @media (min-width: 980px) { .top.top-tabs .tools { flex: 1 1 0; min-width: min-content; flex-wrap: nowrap; } .top.top-tabs .tools > input.search, .top.top-tabs .tools > .search { flex: 0 1 220px; min-width: 120px; width: auto; } } .top.top-tabs .tools { margin-left: auto; } .top-t .sk-tabs .chip { white-space: nowrap; flex: none; } .top.top-tabs .top-l { align-items: flex-start; } .top.top-tabs .tools { padding-top: 2px; } /* Шапка с вкладками на компьютере (16.10.2026, заказчик: «пустые места везде в три строки… после надписи „Прайс-лист“ можно же вместить вторую строку»). Было: кнопки справа вставали рядом с блоком «заголовок + вкладки» шириной в сами вкладки, не влезали – уходили отдельной строкой, а справа от заголовка оставалась пустота. Теперь сетка из двух строк: «← Назад», заголовок и кнопки – первой строкой, вкладки и пояснение – второй, под заголовком. Кнопкам не хватает места – поиск сжимается, затем они переносятся внутри своей правой части, а не всей группой вниз. */ @media (min-width: 700px) { .top.top-tabs:not(:has(.kas-pill)) { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: center; } .top.top-tabs:not(:has(.kas-pill)):has(> .top-l > .nav-back) { grid-template-columns: auto max-content minmax(0, 1fr); } .top.top-tabs:not(:has(.kas-pill)) > .top-l, .top.top-tabs:not(:has(.kas-pill)) .top-t { display: contents; } .top.top-tabs:not(:has(.kas-pill)) > .top-l > .nav-back { grid-row: 1; grid-column: 1; } .top.top-tabs:not(:has(.kas-pill)) h1 { grid-row: 1; white-space: nowrap; } .top.top-tabs:not(:has(.kas-pill)) > .tools { grid-row: 1; grid-column: -2 / -1; justify-self: end; margin: 0; padding: 0; min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: 8px; } .top.top-tabs:not(:has(.kas-pill)) > .tools:empty { display: none; } .top.top-tabs:not(:has(.kas-pill)) .top-tabs-r { grid-row: 2; grid-column: 1 / -1; margin: 0; } .top.top-tabs:not(:has(.kas-pill)):has(> .top-l > .nav-back) .top-tabs-r { grid-column: 2 / -1; } .top.top-tabs:not(:has(.kas-pill)) > .tools > .sv-tools { display: contents; } .top.top-tabs:not(:has(.kas-pill)) > .tools input.flt-head, .top.top-tabs:not(:has(.kas-pill)) > .tools input.search { flex: 0 1 220px; min-width: 120px; width: auto; } } .tools .kk-per { margin: 0 !important; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .tools .kk-dates input[type=date] { width: 148px; margin: 0; height: var(--chip-h); } .sk-quick { gap: 6px; margin: 0 0 10px; align-items: center; flex-wrap: wrap; } /* «Сотрудники» (макет v2, 09.10.2026): отборы «Все · N / Врачи · N…» — в шапке одной группой; метки у имени — испытательный срок и «по договору». */ .top-t .sk-quick { display: inline-flex; margin: 0; gap: 4px; flex-wrap: nowrap; } .top-t .sk-quick .chip { white-space: nowrap; flex: none; min-height: 30px; height: 30px; padding: 3px 11px; font-size: calc(13px * var(--fz)); } @media (min-width: 700px) { .tools input.flt-head.sk-find { width: 190px; } } @media (max-width: 699px) { .top-t .sk-quick { flex-wrap: wrap; } } .staff-all .tag { font-size: calc(11.5px * var(--fz)); padding: 1px 7px; font-weight: var(--w-medium); white-space: nowrap; } .staff-all .tag.sk-trial, .pv-doc .tag.sk-trial { background: var(--amber-soft); color: var(--amber-ink); } .staff-all .tag.sk-invited { background: var(--fill); color: var(--ink); } .staff-all .sk-login-st.warn-text { font-weight: var(--w-medium); } .sk-trial-row { align-items: flex-end; } .sk-trial-row .sk-inv { flex: 1; display: flex; gap: 8px; align-items: center; min-height: 40px; margin-bottom: 12px; } .sk-quick > .row { margin: 0 0 0 6px !important; } .sk-acc { display: flex; flex-direction: column; align-items: flex-end; } .sk-acc b { font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; } .sk-side { display: grid; gap: var(--gap); } .sk-pay { display: grid; gap: 18px; } .sk-sec { display: grid; gap: 8px; } .sk-cap { font-size: var(--fs-hint); font-weight: var(--w-text); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 6px; } .sk-sec .sk-cap { margin: 0; } .sk-work { gap: 6px; } .sk-scheme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); } .sk-sp { flex: 1 1 auto; } .sk-lines { display: grid; } .sk-line { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%; min-height: 44px; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .sk-line:hover { background: var(--fill); } .sk-line.sk-line-ro { cursor: default; } .sk-line.sk-line-ro:hover { background: none; } .sk-line .linkish { margin: 0; } .tag.sk-own { background: var(--amber-soft); } .sk-empty { padding: 10px 2px; } .sk-add { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .btn.sk-plus { border: 1px dashed var(--teal); color: var(--teal-ink); background: var(--paper); } .sk-plan { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--teal-soft); } .sk-plan .sk-cap { margin: 0; } .sk-plan-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: calc(14px * var(--fz)); } .sk-plan-row .linkish { margin: 0; min-height: 0; padding: 0 2px; } .sk-tpl { margin-top: -6px; } .sk-hist { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: calc(13px * var(--fz)); } .sk-month { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: calc(14px * var(--fz)); align-items: baseline; } .sk-month-sum { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); } .sk-prev { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--fill); margin: 4px 0 8px; } .chip.sk-mchip { min-height: 30px; padding: 2px 10px; font-size: calc(13px * var(--fz)); } .sk-prev .chip:not(.on) { background: var(--paper); } .sk-prev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; gap: 10px; } .sk-prev-row .num { text-align: right; } @media (max-width: 1000px) { .sk-grid { grid-template-columns: minmax(0, 1fr); } } .team-picks { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); } .team-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; } .team-pick .chip { min-height: 32px; padding: 3px 12px; } .team-picks.tp-pay { margin: 4px 0 10px; } /* Отделения (24.09.2026): цвет и код отделения, порядок. */ .dp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .dp-colors .chip { min-width: 34px; } .dp-colors .chip i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; } .dp-ord { white-space: nowrap; } .dp-ord .btn { min-height: 32px; padding: 2px 9px; } /* «Какие услуги требуют ДИС / договор» (js/dogovor.js, renderDogovorSrv) */ .dgm-t { table-layout: fixed; width: 100%; } .dgm-t th:first-child { width: 46%; } .dgm-t th:nth-child(2) { width: 90px; } .dgm-t select { max-width: 100%; height: 32px; padding: 2px 8px; font-size: calc(13.5px * var(--fz)); } /* Выбор чека: «Фискальный чек» / «Внутренний чек» (js/cheki.js, заказчик 24.09.2026: «чтобы регистратор мог легко выбрать, какой чек пробить»). Две большие кнопки — это радиокнопки: Enter ведёт дальше, стрелки меняют выбор (js/keys.js). Сам кружок спрятан, но остаётся в порядке полей. Цвета — из переменных темы, тёмная пара у них уже есть. */ .rk-pick { display: flex; gap: 8px; } .rk-b { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; text-align: center; user-select: none; } .rk-b { min-width: 0; box-sizing: border-box; } .rk-b input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .rk-b b { font-size: calc(15px * var(--fz)); } .rk-b i { font-style: normal; font-size: calc(12px * var(--fz)); color: var(--muted); } .rk-b.on { border-color: var(--teal); background: var(--teal-soft); } .rk-b.on b { color: var(--teal-ink); } .rk-b[data-rk="internal"].on { border-color: var(--amber); background: var(--amber-soft); } .rk-b[data-rk="internal"].on b { color: var(--ink); } .rk-b:focus-within { box-shadow: 0 0 0 3px var(--teal-soft); } .rk-note { margin-top: 4px; } .rk-alert { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9998; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .rk-alert .small { flex: 1 1 60%; } .rk-sum { max-width: 560px; } .rk-sum .rk-row { padding: 6px 0; } .rk-sum .rk-total { border-top: 1.5px solid var(--line); font-weight: var(--w-strong); } .rk-sum .rk-bad span:first-child { color: var(--rose); } /* Главная: приёмы сегодня и «мои приёмы» */ /* Таблица в карточке – по высоте содержимого: строки ограничивает «ещё N» (`HOME_ROWS`, js/home.js), не прокрутка (31.10.2026, №57). Вбок – только если не помещается. */ .home-scroll { overflow-x: auto; } .home-today .home-t td, .home-my .home-t td { text-align: left; } .home-my select { margin-left: 6px; height: 30px; padding: 2px 8px; font-size: calc(13px * var(--fz)); width: auto; } /* Страница раздела (js/menu.js `renderSection`): подразделы строками одной карточки — как «Справочники» (`.sp-row`). «В работе» — бледнее. */ .sec-row .tag { white-space: nowrap; } /* Живое состояние подраздела (`sost`, 09.10.2026, макет v2): середина строки, точка — ok / warn / bad / серая. */ .sp-row.sec-row-s .sp-t { flex: 1 1 0; } .sec-sost { flex: 1.15 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: calc(14px * var(--fz)); text-align: left; } .sec-sost .num, .sec-sost b { font-variant-numeric: tabular-nums; white-space: nowrap; } .sec-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); font-style: normal; } .sec-dot.ok { background: var(--teal); } .sec-dot.warn { background: var(--amber); } .sec-dot.bad { background: var(--rose); } .sec-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: -6px 0 10px; } .sec-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 4px 9px; font: var(--w-medium) calc(12.5px * var(--fz)) var(--font); color: var(--muted); cursor: pointer; } .sec-tabs button:hover { background: var(--fill); color: var(--ink); } .sec-tabs button.on { background: var(--teal-soft); color: var(--teal-ink); font-weight: var(--w-medium); } .sec-tabs .sec-up { color: var(--teal-ink); font-weight: var(--w-medium); } /* «Тихие экраны» (07.10.2026): на компьютере строки соседей над экраном нет — раздел в меню, соседи на его странице; на планшете и телефоне — «Раздел ›» и соседи вкладками. */ @media (min-width: 981px) { .sec-tabs.sec-dup { display: none; } } .nav .nav-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; } .nav .nav-warn { background: var(--orange); } /* Цветные карточки по кругу (24.09.2026) сняты 14.10.2026 (брендбук «Ормин» 2.0, макет «Ormin: новый вид программы»): карточка белая с волосяной рамкой, цвет говорит о разделе или состоянии — метки `.mt-*`, точки, полосы. */ @media print { #view .card { background: #fff !important; box-shadow: none !important; } } .home-today .hd, .home-my .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .home-today .chip { height: 30px; padding: 0 12px; font-size: calc(13px * var(--fz)); } /* Гамма фона (js/vid.js, themeGamma) */ .th-gamma-h { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; } .th-gamma-h input[type=color] { width: 44px; height: 28px; padding: 0; border: 0; background: none; vertical-align: middle; } .th-gamma > div { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin-bottom: 4px; } .th-gamma button { height: 22px; border: 0; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); padding: 0; } .th-gamma button.on { box-shadow: 0 0 0 2px var(--teal); } :root[data-theme="dark"] .status.s-done { background: #173a22; color: #8fe3a9; } /* Предпросмотр прайса из Excel (27.09.2026): таблицы в несколько столбцов не помещаются в обычное окно в 560 пикселей. */ .modal.wide { width: min(1000px, 100%); } .pr-sec { margin: 6px 0; border-top: 1px solid var(--line); padding-top: 6px; } .pr-sec > summary { cursor: pointer; font-size: calc(14px * var(--fz)); } .pr-sec .table { margin-top: 6px; } .stf-more { margin: 4px 0 10px; } .stf-more > summary { cursor: pointer; } /* Справочник услуг (js/uslugi.js, 27.09.2026): быстрые отборы над прайсом, таблица, карточка услуги вкладками, изменение цен группой. Компактно, как остальные таблицы: строка в одну-две линии, кнопки строки — не выше 26 px. */ .sv-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .sv-q .chip { margin: 0; } /* Экран прайса (16.10.2026, «каша… ползунок… позор»): шапка одной строкой, отделения — колонкой слева со счётчиками, справа полоса «Прайс · отборы» и таблица. Ползунков нет: колонка не прокручивается сама, всё видно сразу. */ .top:has(.sv-tools) h1 { white-space: nowrap; } .sv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .sv-tools input.flt-head { width: 200px; } .sv-lay { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; } .sv-side { display: flex; flex-direction: column; gap: 1px; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; position: sticky; top: 8px; } .sv-di, .sv-gi { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 6px 10px; border-radius: 9px; cursor: pointer; font-size: calc(14px * var(--fz)); line-height: 1.25; } .sv-di > b, .sv-gi > b { font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); color: var(--muted); font-variant-numeric: tabular-nums; } .sv-di:hover, .sv-gi:hover { background: var(--fill); } .sv-di.on { background: var(--teal-10); font-weight: var(--w-medium); box-shadow: inset 3px 0 0 var(--teal); } .sv-di.on > b { color: var(--ink); } .sv-di.nil:not(.on) { color: var(--muted); } .sv-all { border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; margin-bottom: 3px; } .sv-gl { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 12px; padding-left: 6px; border-left: 1px solid var(--line); } .sv-gi { font-size: calc(13px * var(--fz)); padding: 4px 8px; } .sv-gi.on { background: var(--teal-soft); font-weight: var(--w-medium); } .sv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; } .sv-bar > .sv-q { margin: 0; } .sv-bar > .sv-pl-q { margin: 0; padding-right: 14px; border-right: 1px solid var(--line); } .sv-bar .chip { min-height: 30px; height: 30px; padding: 3px 11px; font-size: calc(13px * var(--fz)); } .sv-card { padding-top: 6px; } @media (max-width: 1450px) { .sv-lay { grid-template-columns: 176px minmax(0, 1fr); gap: 12px; } .sv-tools input.flt-head { width: 170px; } .sv-card { padding-left: 10px; padding-right: 10px; } } @media (max-width: 700px) { .sv-lay { grid-template-columns: minmax(0, 1fr); } .sv-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; } .sv-di, .sv-gi { width: auto; } .sv-gl { flex-direction: row; flex-wrap: wrap; margin: 0; border: 0; } .sv-tools { flex-wrap: wrap; } .sv-bar > .sv-pl-q { border: 0; padding: 0; } } /* «Оплатить вместе» в окне оплаты (07.10.2026, js/oplata.js). */ .op-also { margin: 2px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); } .op-also-l { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; } /* Прайс-листы и смена цен с даты (07.10.2026, js/prays-listy.js). */ .sv-pl-q { margin-bottom: 4px; } .sv-pl-q > .muted { margin-right: 2px; } .sv-pl-hint { margin: 0 0 8px; } .sv-plan { color: var(--teal-ink); white-space: nowrap; } .sv-plan-b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; } .sv-plan-b .btn { margin-left: auto; } .sv-pl-row { align-items: center; gap: 8px; flex-wrap: nowrap; margin: 4px 0; } .sv-pl-row .sv-pl-n { flex: 1; min-width: 0; } .sv-pl-row input { width: 110px; } .sv-t td { vertical-align: top; } .sv-t td .muted.small { line-height: 1.25; } .sv-t .tag { margin: 0 2px 2px 0; } .sv-t td.sv-st { white-space: nowrap; } .sv-pr.up::after { content: " ↑"; color: var(--rose); font-size: calc(11px * var(--fz)); } .sv-pr.down::after { content: " ↓"; color: var(--ok); font-size: calc(11px * var(--fz)); } /* «Скопировать» у строки: значок тенью (`::before`), чтобы в Excel и в поиск таблицы не уходил лишний символ. С 16.10.2026 прайс показывает все строки сразу — значок только у строки под мышью (64 одинаковых значка — шум); место под него оставлено, строка не прыгает. Без мыши — «Скопировать» в карточке услуги. */ .sv-t td.sv-st { position: relative; padding-right: 38px; } .sv-copy { position: absolute; right: 6px; top: 6px; border: 0; background: var(--fill); color: var(--ink); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; } .sv-copy::before { content: "⧉"; font-size: calc(14px * var(--fz)); } .sv-t tr:not(:hover) .sv-copy { display: none; } .modal.sv-modal { width: min(760px, 100%); } .sv-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; } .sv-tabs button { border: 0; background: none; font: inherit; font-size: calc(14px * var(--fz)); color: var(--muted); padding: 8px 10px; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; } .sv-tabs button.on { color: var(--ink); font-weight: var(--w-medium); border-bottom-color: var(--teal); } .sv-pane[hidden] { display: none; } .sv-2 > .field { flex: 1 1 220px; } .sv-3 > .field { flex: 1 1 150px; } .sv-why { margin: 0 0 10px 22px; } .sv-who-g { margin-bottom: 10px; } .sv-dep { font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 4px; font-weight: var(--w-medium); } .sv-doc { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 8px; cursor: pointer; } .sv-doc:hover { background: var(--fill); } .sv-doc.on { background: var(--teal-soft); } .sv-hist td { font-size: calc(14px * var(--fz)); } .sv-bprev { max-height: 320px; overflow: auto; } .sv-bprev .table td { padding-top: 5px; padding-bottom: 5px; } .sv-bprev tr.muted td { color: var(--muted); } .sv-t td { padding-top: 7px; padding-bottom: 7px; } .sv-t .status { padding: 2px 8px; } /* ======== Справочники (27.09.2026): «Кто что делает», кабинеты, группы ======== Таблица «врачи × услуги»: врачей в отделении бывает пятнадцать (лаборатория — все), поэтому имена в шапке стоят вертикально и колонка узкая; услуга и шапка прилипают при прокрутке, иначе на двадцатой строке уже не понять, чья клетка. */ .wd .wd-deps { max-height: calc(100vh - 230px); } .wd .wd-bad, .wd-bad { color: var(--rose); font-weight: var(--w-medium); } .wd-prob > div + div { margin-top: 4px; } .wd-prob a { color: inherit; text-decoration: underline; } .wd-card { padding: 10px 12px; min-width: 0; } .wd-bar { justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .wd-bar select.wd-add { height: 32px; padding: 2px 8px; font-size: calc(13.5px * var(--fz)); max-width: 260px; } .wd-bar .btn.sm, .wd-ask .btn.sm { min-height: 30px; height: 30px; padding: 0 10px; font-size: calc(13px * var(--fz)); } .wd-wrap { overflow: auto; max-height: calc(100vh - 290px); border-radius: 10px; } .table.wd-t { border-collapse: separate; border-spacing: 0; width: auto; font-size: calc(13.5px * var(--fz)); } .wd-t th, .wd-t td { padding: 4px 6px; border-bottom: 1px solid var(--line); } .wd-t thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); vertical-align: bottom; } .wd-t .wd-s { position: sticky; left: 0; z-index: 1; background: var(--paper); text-align: left; font-weight: var(--w-text); min-width: 220px; max-width: 320px; } .wd-t thead .wd-s { z-index: 3; } .wd-t .wd-n { text-align: center; color: var(--muted); width: 54px; font-size: calc(12.5px * var(--fz)); } .wd-t .wd-n.wd-bad { color: var(--rose); } .wd-t th.wd-d { width: 34px; min-width: 34px; max-width: 34px; padding: 4px 2px; text-align: center; } .wd-t .wd-nm { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 130px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); } .wd-t .wd-nm:hover, .wd-t .wd-sn:hover { color: var(--teal-ink); text-decoration: underline; } .wd-t .wd-k { display: block; font-size: calc(11px * var(--fz)); color: var(--muted); font-weight: var(--w-text); margin-top: 3px; letter-spacing: -.02em; } .wd-t .wd-k-also .wd-k, .wd-t .wd-k-extra .wd-k { color: var(--amber); } /* Сотрудники-исполнители (медсёстры…) – после врачей, первая такая колонка отделена чертой */ .wd-t th.wd-emp .wd-k { color: var(--teal-ink); } .wd-t .wd-emp-first { border-left: 2px solid var(--line); } .wd-t .wd-x { display: block; margin: 2px auto 0; width: 20px; height: 18px; line-height: 16px; border-radius: 5px; color: var(--muted); cursor: pointer; font-size: calc(13px * var(--fz)); } .wd-t .wd-x:hover { background: var(--rose-soft); color: var(--rose); } .wd-t .wd-sn { cursor: pointer; } .wd-t tr.sec-row td { position: sticky; left: 0; background: var(--fill); font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 3px 8px; } .wd-t tr.wd-hl .wd-s { box-shadow: inset 3px 0 0 var(--rose); background: var(--rose-soft); } .wd-c { text-align: center; width: 34px; min-width: 34px; cursor: pointer; font-weight: var(--w-medium); user-select: none; } .wd-c.ro { cursor: default; } .wd-c:not(.ro):hover { background: var(--fill); } .wd-c:focus { outline: 2px solid var(--teal); outline-offset: -2px; } .wd-c.wd-on { color: var(--teal-ink); background: color-mix(in srgb, var(--teal) 9%, transparent); } .wd-c.wd-extra { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); } .wd-c.wd-not { color: var(--rose); opacity: .55; font-weight: var(--w-text); } .wd-legend .wd-c { display: inline-block; width: 20px; min-width: 0; border-radius: 4px; } .wd-undo, .wd-ask { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; } .gr-sim { white-space: nowrap; } .gr-ord .btn.sm, .exp-cats-t .btn.sm { min-height: 26px; height: 26px; padding: 0 8px; } .wd-t th.wd-d, .wd-t td.wd-s { text-transform: none; letter-spacing: 0; } .wd-t td.wd-s { color: var(--ink); } /* ======== Справочники — страница-указатель (js/sprav.js, 27.09.2026) ======== */ input.flt-find[hidden] { display: none !important; } .sp-found { margin-bottom: 12px; } .sp-found td { padding-top: 5px; padding-bottom: 5px; } .sp-kind { width: 120px; color: var(--muted); white-space: nowrap; } .sp-n { font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); opacity: .75; } .sp-warn { color: var(--amber); font-weight: var(--w-medium); } /* «Что поправить · N» (макет v2, 09.10.2026): строка — справочник, что не так, «Исправить ›». */ .sp-attn { margin-bottom: 12px; padding: 4px 6px; } .sp-attn .sp-warn { color: var(--amber-ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); } .sp-attn .sp-fix-go { font-size: calc(13px * var(--fz)); font-weight: var(--w-strong); color: var(--teal-ink); white-space: nowrap; } /* ======== «Назад» (js/nazad.js, 27.09.2026) — над заголовком, рядом с вкладками ======== */ .nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 12px; } .nav-row .sec-tabs { margin: 0; } /* Раздел-вкладки (22.10.2026, замечания 16–17; js/menu.js `razdelBar`): подразделы – переключатель над шапкой первого окна, справа – сводка из 1–3 чисел. Заметный: белая плашка с рамкой, кнопка 40 px, выбранная – тёмная (как выбранный чип волны 22.10), число на вкладке (`schet`) – оранжевый кружок. Вкладки пункта под заголовком – подчёркивание: сразу видно, что выше, а что ниже. Одна строка; не влезло – переносом. Телефон: переключатель во всю ширину, кнопки равные. */ .rz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; min-width: 0; } .rz-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--paper); border-radius: 13px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; max-width: 100%; } .rz-tabs button { border: 0; background: transparent; height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font: var(--w-medium) calc(15px * var(--fz)) var(--font); color: var(--ink); transition: color .15s, background .15s; } .rz-tabs button:hover { background: var(--fill); } .rz-tabs button.on { background: var(--navy); color: #fff; } .rz-tabs .rz-c { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: var(--ink); font: var(--w-medium) calc(12.5px * var(--fz))/22px var(--font); text-align: center; font-style: normal; } .rz-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-left: auto; min-width: 0; } .rz-sum:empty { display: none; } .rz-s { display: inline-flex; align-items: baseline; gap: 5px; border: 0; background: transparent; padding: 0; font: var(--w-medium) calc(13.5px * var(--fz)) var(--font); color: var(--muted); } .rz-s b { color: var(--ink); font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); } .rz-s.zero b { color: var(--muted); font-weight: var(--w-medium); } .rz-s.warn b, .rz-s.h.warn { color: var(--amber-ink); } .rz-s.bad b, .rz-s.h.bad { color: var(--rose-ink); } .rz-s.ok b, .rz-s.h.ok { color: var(--ok-ink, #2f6e40); } button.rz-s { cursor: pointer; } button.rz-s:hover > span { text-decoration: underline; } @media (max-width: 979px) { .rz-sum { margin-left: 0; } } @media (max-width: 699px) { .rz-bar { display: block; } .rz-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .rz-tabs button { height: 44px; padding: 0 8px; justify-content: center; white-space: normal; line-height: 1.1; text-align: center; font-size: calc(14px * var(--fz)); } .rz-sum { margin-top: 8px; } } /* «← Назад» — кнопка в размер остальных (40 px), слева от заголовка, а не плашка 24 px строкой выше (08.10.2026, заказчик: «кнопка назад маленькая»). */ .nav-back { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); min-height: 36px; border: 1px solid var(--line); background: var(--paper, #fff); border-radius: 12px; padding: 0 16px 0 10px; font: var(--w-medium) calc(15px * var(--fz)) var(--font); color: var(--ink); cursor: pointer; box-shadow: none; border-color: var(--navy-20); white-space: nowrap; flex: none; /* никогда не в две строки */ } .nav-back:hover { background: var(--bg); } /* Выбор позиции склада поиском (ревизия 27.09.2026): не нашлось — рамка. */ input.stock-pick.bad { box-shadow: inset 0 0 0 1.5px var(--rose); background: var(--rose-soft); } /* ======== Меню: «кто за компьютером» в одну строку, меню влезает в 768 px, телефон — меню за кнопкой (ревизия 27.09.2026) ======== */ /* Карточка «Директор · Выйти» была ~130 px — три строки и кнопка во всю ширину. Теперь имя и должность слева, «Выйти» справа, одной строкой. */ .nav .who .who-t .muted:empty { display: none; } /* Экран ниже 820 px (ноутбук 1366×768): меню руководства — шестнадцать разделов (с «Аналитикой», 10.10.2026) — должно помещаться целиком, без прокрутки. Пункт чуть ниже, шапка меньше. */ @media (max-height: 820px) and (min-width: 700px) { .nav { padding-top: 12px; padding-bottom: 10px; } .brand-logo { width: 118px; margin-top: 0; margin-bottom: 0; } .nav .nav-find { margin-bottom: 4px; padding-top: 6px; padding-bottom: 6px; } .nav .nav-grp { padding-top: 6px; padding-bottom: 1px; font-size: calc(11px * var(--fz)); } .nav .who { padding: 7px 8px; } .nav .who b { font-size: calc(14px * 1); } /* имя и должность – как были, без --fz: «кто за компьютером» одной строкой, `interfeys_t` */ .nav .who-t .muted { font-size: calc(11.5px * 1); } /* 21.10.2026: на 768 px меню растёт вполовину меньше общего (--fz), чтобы шестнадцать разделов влезали без прокрутки (`interfeys_t`) */ .nav button { font-size: calc(14.5px * (1 + (var(--fz) - 1) * .5)); padding-top: 4px; padding-bottom: 4px; margin-bottom: 1px; } #nav-items { margin-bottom: 8px; } } .nav-burger, .nav .nav-burger { display: none; } /* Телефон: меню за кнопкой «☰ Меню». Раньше оно разворачивалось строкой кнопок и занимало полэкрана над каждым экраном. Сверху — полоса: название клиники и кнопка; нажали пункт — меню закрылось (menuRender). Широкие таблицы листаются в своей рамке, а не всей страницей. */ @media (max-width: 699px) { .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; } .cg { overflow-x: auto; position: relative; } .nav { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); } body.alarm .nav { height: auto; } .brand { padding: 0; flex: 1 1 auto; min-width: 0; } .brand-logo { width: 104px; margin: 0; } .brand.txt b { display: inline; font-size: 20px; padding: 0; } .nav-burger, .nav .nav-burger { display: inline-flex; align-items: center; gap: 6px; width: auto !important; margin: 0 !important; padding: 6px 12px !important; min-height: 36px; border-radius: 10px; background: var(--fill) !important; font-weight: var(--w-medium); } .nav #nav-items, .nav .who { display: none; } .app.nav-open .nav #nav-items { display: block; flex: 1 1 100%; max-height: calc(100vh - 140px); overflow-y: auto; margin: 8px 0 6px; } .app.nav-open .nav .who { display: flex; flex: 1 1 100%; } .main { padding: 12px 12px 80px; } .top { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .top h1 { font-size: 24px; } .tools { justify-content: flex-start; } .app:not(.in-card) .main .card { overflow-x: auto; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* «Раздел ›» и до четырёх соседей – переносом, без ползунка (16.10.2026). */ .sec-tabs { flex-wrap: wrap; max-width: 100%; } .sec-tabs button { white-space: nowrap; } .nav-row { min-width: 0; } } /* Запись сверх расписания и просьба врача о цене (заказчик 28.09.2026): видны в сетке дня, календаре, кассе и на стойке. */ .tag.over-tag { background: var(--rose-soft); } .tag.ask-tag { background: var(--amber-soft); } .pay-ask + .pay-ask { margin-top: 6px; } /* ===== W2 (28.09.2026): онлайн-запись с сайта, заявки с сайта (js/sayt.js) ===== */ .sayt-srv { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; } .sayt-srv label { display: block; } .sayt-text { max-height: 4.2em; overflow: hidden; } /* W1 (28.09.2026): показатели числами и карта беременной — js/pokazateli.js, js/beremennost.js. */ .pk-card .hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pk-card .hd h3 { margin: 0; } .pk-card .pk-dop { margin-left: auto; } .pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px 8px; margin-top: 6px; } .pk-f { display: flex; flex-direction: column; gap: 2px; font-size: calc(12px * var(--fz)); color: var(--muted); min-width: 0; } .pk-f input, .pk-f select, .pk-f output { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; font-size: calc(15px * var(--fz)); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); min-height: 34px; } .pk-f output { display: block; background: var(--fill); font-weight: var(--w-medium); } .pk-f.pk-ad { grid-column: span 2; } .pk-two { display: flex; align-items: center; gap: 4px; color: var(--muted); } .pk-two input { flex: 1; } .pk-f.pk-al input, .pk-f.pk-al output { border-color: var(--rose); background: var(--rose-soft); color: var(--rose-ink); font-weight: var(--w-medium); } .pk-f.pk-bad input { border-color: var(--amber); background: var(--amber-soft); } .pk-read { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(14px * var(--fz)); } .pk-al, td.pk-al, .pk-read .pk-al b, .pk-last .pk-al b { color: var(--rose-ink); } td.pk-al { font-weight: var(--w-medium); background: var(--rose-soft); } .pk-last { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: calc(13px * var(--fz)); } .pk-mini { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: calc(12px * var(--fz)); } .pk-mini th, .pk-mini td { padding: 2px 3px; text-align: left; border-top: .5px solid var(--line); } .pk-mini th { color: var(--muted); font-weight: var(--w-medium); border-top: 0; } .pk-tab td, .pk-tab th, .bm-grav td, .bm-grav th { white-space: nowrap; } .bm-rail .val { font-size: calc(17px * var(--fz)); } .bm-rail .linkish { display: block; margin-top: 4px; text-align: left; } .bm-srok { margin-bottom: 6px; } .bm-srok-in { width: 100%; box-sizing: border-box; } .bm-2 { gap: 10px; flex-wrap: wrap; } .bm-2 .field { flex: 1 1 120px; margin: 0; } .bm-charts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; } .bm-chart { margin: 0; flex: 1 1 300px; max-width: 420px; } .bm-chart figcaption { font-size: calc(13px * var(--fz)); color: var(--muted); margin-bottom: 2px; } .bm-chart svg { width: 100%; height: auto; display: block; } .bm-chart .g { stroke: var(--line); stroke-width: 1; } .bm-chart .ax { fill: var(--muted); font-size: calc(11px * var(--fz)); } .bm-chart .ln { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .bm-chart .pt { fill: var(--teal); stroke: var(--paper); stroke-width: 2; } .bm-chart .pt:hover { r: 6; } /* W3 (28.09.2026): история изменений и копии по часам — js/istoriya.js, js/kopii.js. */ .ist-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; } .ist-f input:not([type=date]) { min-width: 220px; } .ist-f .ist-found { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; } .ist-t td { vertical-align: top; } .ist-t .ist-v { display: inline-block; max-width: 280px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: calc(13px * var(--fz)); } #kopii-card .fact b { font-weight: var(--w-medium); text-align: right; } #kopii-card .bad, #kopii-msg.bad, #kp-warn.bad { color: var(--rose); } .kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin: 8px 0; } .kp-grid label, .modal label.muted { display: flex; flex-direction: column; gap: 3px; } .modal input.wide { width: 100%; } #kp-warn code { overflow-wrap: anywhere; } /* ---------- W4: страховые и корпоративные клиенты (28.09.2026, js/organizacii.js) ---------- */ .org-cov { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 2px; } .org-cov-d { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 3px 0; border-bottom: 1px dashed var(--line); } .org-cov-d:last-child { border-bottom: 0; } .org-cov label { display: inline-flex; gap: 6px; align-items: center; } .org-tag { white-space: nowrap; } .org-pay { color: var(--teal-ink); } .org-pay-line { margin: 4px 0 8px; } .wait-sig { position: fixed; right: 12px; bottom: 12px; z-index: 900; max-width: 560px; background: var(--paper); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); border-left: 4px solid var(--teal); padding: 8px 10px; font-size: calc(13px * var(--fz)); } .ws-row { display: flex; gap: 8px; align-items: center; } .ws-row + .ws-row { margin-top: 6px; } .ws-row > span { flex: 1; } .wl-days { display: inline-flex; min-height: 30px; } .wl-slots { display: flex; flex-wrap: wrap; gap: 6px; } .wl-t td { vertical-align: top; } .sr-plan { max-height: 300px; overflow-y: auto; margin: 6px 0; } .sr-sum { margin-bottom: 4px; } .sr-t td { padding-top: 3px; padding-bottom: 3px; } .sr-moved td { background: var(--amber-soft); } .sr-pack { color: var(--teal-ink); font-weight: var(--w-medium); } .zpr .row { align-items: center; gap: 14px; } .zpr .field input[type=number] { width: 90px; } .zpr-who { display: flex; flex-direction: column; gap: 4px; } .ap-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ap-head h3 { margin: 0; } .ap-head select { width: auto; min-width: 180px; height: 32px; padding: 2px 10px; font-size: calc(13px * var(--fz)); } .ap-srv td { padding-top: 3px; padding-bottom: 3px; } .ap-srv select { width: 240px; max-width: 100%; height: 30px; padding: 2px 8px; font-size: calc(13px * var(--fz)); } .tw-row { padding: 3px 0; } .tw-c td { vertical-align: top; } .tw-diff td { background: var(--amber-soft); } .tw-cmp .row { align-items: center; gap: 10px; } .zp[hidden] { display: none; } /* ---------- W6 (28.09.2026): деньги кассы — смешанная оплата, рассрочка ---------- */ .op-line { gap: 6px; margin-bottom: 6px; align-items: center; } #op-total { min-height: 0; margin: 0 0 4px; } #op-total:empty { display: none; } #op-plan { margin: 0 0 6px; } .rs-row { cursor: pointer; } #sp-t input.sp-n { width: 100%; min-width: 120px; } /* W7 (28.09.2026): лаборатория — критические значения и проверка результата; лист назначений в карте приёма; педиатрия — прививки, рост и вес по ВОЗ. */ input.krit { outline: 2px solid var(--rose); background: var(--rose-soft); font-weight: var(--w-medium); } .krit-lim { gap: 8px; align-items: flex-end; margin-top: 6px; flex-wrap: wrap; } .krit-lim .field { margin: 0; } .krit-ask { display: block; margin-top: 6px; } .krit-bar { position: fixed; right: 12px; bottom: 12px; z-index: 9000; width: min(460px, calc(100vw - 24px)); max-height: 50vh; overflow: auto; background: var(--paper); border: 2px solid var(--rose); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 8px 10px; } .krit-bar .krit-h { color: var(--rose); margin-bottom: 4px; } .krit-bar .krit-i { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: .5px solid var(--line); font-size: calc(13px * var(--fz)); } .krit-bar .krit-i .row { gap: 4px; flex: none; } .rx-box { margin-top: 6px; } .rx-t { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fz)); } .rx-t td { padding: 3px 4px; border-bottom: .5px solid var(--line); vertical-align: middle; } .rx-t td.rx-b { text-align: right; white-space: nowrap; } .rx-t tr.rx-al td:first-child { color: var(--rose); font-weight: var(--w-medium); } .rc.reb .reb-in { gap: 6px; margin-top: 6px; flex-wrap: nowrap; } .rc.reb .reb-f { display: flex; align-items: center; gap: 3px; font-size: calc(12px * var(--fz)); } .rc.reb .reb-f input { width: 56px; padding: 3px 5px; } .rc.reb .reb-z { margin-top: 4px; line-height: 1.35; } .rc.reb .reb-pos { gap: 4px; margin-top: 4px; align-items: center; flex-wrap: wrap; } .rc.reb .reb-pos .chip { padding: 1px 8px; font-size: calc(12px * var(--fz)); } .vac-t input { width: 100%; } .vac-card .vac-m { margin-top: 2px; } /* ---------- Склад W9 (28.09.2026): подотчёт кабинетов, ПКУ, печать документов ---------- */ .pku-mark { display: inline-block; padding: 0 5px; margin-left: 4px; border-radius: 4px; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .03em; background: var(--amber-soft); color: var(--ink); vertical-align: 1px; } tr.pku-diff td { background: var(--rose-soft); } .sk-print { display: inline-flex; gap: 2px; margin-left: 6px; } .sk-print .btn { margin: 0; } /* ===== V2: живое обновление и ключ табло (28.09.2026, js/zhivo.js, js/tablo.js) ===== */ /* Табло по ключу — только табло: выхода в программу нет, сверху ничего не висит. */ body.tablo-key .tablo-x, body.tablo-key .nav-burger { display: none; } .tablo-bad .tablo-idle { opacity: .85; display: flex; flex-direction: column; gap: 2vh; align-items: flex-start; } .tablo-bad .tablo-idle small { font-size: 2.4vh; opacity: .8; } /* ===== V1: график врача — перерывы списком, ночная смена, шаг (28.09.2026) ===== */ .gr-v1 { margin: 4px 0 10px; } .gr-v1-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .gr-v1-h > label { font-size: calc(12px * var(--fz)); color: var(--muted); } .gr-v1 .gr-step { font-size: calc(12px * var(--fz)); color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .gr-v1 .gr-step select { width: auto; padding: 4px 8px; } .gr-brs { display: flex; flex-direction: column; gap: 4px; } .gr-br { display: flex; gap: 6px; align-items: center; } .gr-br input[type="time"] { width: 118px; } .gr-br .gr-b-w { flex: 1; min-width: 90px; } .gr-br .btn { padding: 2px 8px; margin: 0; } td.gr-nx { width: 60px; white-space: nowrap; } .table.grafik td.gr-on.gr-night { background: var(--amber-soft); font-style: italic; } /* Разовые изменения графика стойкой и уведомление руководству (замечание №11, 22.10.2026; js/grafik2.js). */ .table.grafik td .gr-out { font-size: calc(11px * var(--fz)); color: var(--rose); line-height: 1.15; } .gr-rz { display: flex; flex-direction: column; gap: 8px; max-width: 620px; } .gr-rz .gr-rz-t { margin: 0; } .gr-rz-ob { margin-top: -4px; } .gr-rz-r { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; } .gr-rz-r .chip { margin: 0 6px 6px 0; } .gr-rz-l { width: 48px; flex: none; font-size: calc(12px * var(--fz)); color: var(--muted); margin-bottom: 6px; } .gr-rz-r input[type=date] { width: auto; min-width: 150px; margin-bottom: 6px; } .gr-rz-sej { padding: 6px 10px; border-radius: 10px; background: var(--fill); } .gr-rz-f { gap: 8px; padding-left: 50px; align-items: flex-end; } .gr-rz-p { display: flex; flex-direction: column; gap: 3px; } .gr-rz-p > span { font-size: calc(12px * var(--fz)); color: var(--muted); } .gr-rz-p input[type=time] { width: 118px; } .gr-rz-p.gr-rz-why { flex: 1; min-width: 160px; } .gr-rz-warn { margin: 0; font-size: calc(13px * var(--fz)); } .gr-rz-go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gr-rz-go .btn { margin: 0; } .gr-rz-h { margin: 6px 0 0; font-size: calc(14px * var(--fz)); } .gr-rz-list { display: flex; flex-direction: column; } .gr-rz-i { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); } .gr-rz-i:last-child { border-bottom: 0; } .gr-rz-k { width: 170px; flex: none; font-weight: var(--w-text); font-size: calc(13px * var(--fz)); } .gr-rz-v { flex: 1; font-size: calc(13px * var(--fz)); } .gr-rz-i .btn { margin: 0; } .gr-rz-end { margin-top: 4px; } @media (max-width: 600px) { .gr-rz-f { padding-left: 0; } .gr-rz-k { width: auto; } } .banner.gr-izm { background: var(--paper); box-shadow: var(--shadow); border-left: 4px solid var(--teal); padding: 8px 12px; } .gr-izm-r { display: flex; align-items: center; gap: 10px; padding: 3px 0; } .gr-izm-x { flex: 1; min-width: 0; } .gr-izm-r .btn { margin: 0; flex: none; } .gr-izm-n { margin-top: 2px; } .gr-izm-link { margin: -4px 0 8px; text-align: right; } .table.giz td { vertical-align: top; } .table.giz tr.giz-new td:first-child { box-shadow: inset 3px 0 0 var(--teal); font-weight: var(--w-medium); } /* ===== V3 (28.09.2026): карта приёма и экран записи на телефоне (360–430 px) ===== Всё — только в узком окне (< 700 px): ноутбук и широкий экран не меняются (проверяет telefon_t.py снимками и размерами блоков). Страница не шире экрана: поля — в столбик, таблицы — в своей рамке с прокруткой, кнопки не ниже 32 px (палец), чипы переносятся, окно — во весь экран. */ @media (max-width: 699px) { /* Кнопки под палец. Клетки окон записи и сетки — не кнопки, их не трогаем. 17.10.2026 (t2): `#view button` вернули — при уборке старой сетки (`:not(.cg-v)`) он выпал вместе с ней, и на телефоне кнопки вкладок, «Группировать», ссылки кассы снова стали 16–24 px (telefon_t). */ #view button, #view .btn, #overlay button, #overlay .btn, .visit-bar .btn { min-height: 32px; } .chip, .tag { white-space: normal; } /* «Расчёты» (B2): выбранный — под списком, плашки и полоса месяца — в столбик. */ #view .row, #overlay .row { flex-wrap: wrap; } #view input, #view select, #view textarea { max-width: 100%; } /* Карта приёма: полоса «Осталось» и кнопки — в две строки, кнопки во всю ширину. */ .visit-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; } .visit-bar > .muted { flex: 1 1 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .visit-bar .vb-btns { flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; } .visit-bar .vb-btns .btn { flex: 1 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: normal; } .cardwrap { grid-template-columns: minmax(0, 1fr); } .cardrail .rc { flex: 1 1 100%; min-width: 0; } /* Таблицы карты (показатели, гравидограмма, назначения) — в своей рамке. */ .app.in-card .main .card, .cardrail .rc, .module { max-width: 100%; } .pk-tab, .bm-grav, .rx-t, .pk-mini, .app.in-card .main table { display: block; max-width: 100%; overflow-x: auto; } .pk-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .bm-chart { flex-basis: 100%; } .rc.reb .reb-in { flex-wrap: wrap; } /* Зона осмотра: «норма · находка · не смотрел» уходит под название, если не помещается. */ .zrow { flex-wrap: wrap; max-width: none; } .zrow .zn { flex: 1 1 120px; } .zp button { height: 32px; } /* Касса и карточка пациента: плитки в одну колонку. */ .pat-grid { grid-template-columns: minmax(0, 1fr); } /* Окно — во весь экран. */ #overlay { place-items: stretch; } .modal, .modal.wide, .modal.sv-modal { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 14px 14px 24px; box-sizing: border-box; } .modal::before { display: none; } .modal table { display: block; max-width: 100%; overflow-x: auto; } .cs { max-height: 34vh; overflow: auto; } /* 30.09.2026, снимки экранов. «‹ Назад» одной строкой, вкладки рядом сжимаются и листаются (строка вкладок — не «Назад»). */ .nav-row .sec-tabs { flex: 1 1 auto; min-width: 0; } /* Мелкие цели — до предела устава: язык на входе, «×» в «Кто что делает». */ .til-pick button { min-height: 32px; } .wd-t .wd-x { width: 32px; height: 32px; line-height: 32px; font-size: calc(16px * var(--fz)); } /* Табло: две колонки, длинное имя или «Процедурная» переносится, а не распирает страницу. */ .tablo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tablo-cell { min-width: 0; overflow-wrap: anywhere; } /* Группы отчётов: описание — под названием, целиком. */ .fold-h { flex-wrap: wrap; row-gap: 2px; } .fold-h .fold-about { flex: 1 1 100%; margin-left: 22px; white-space: normal; } /* Пояснение мелким в строке отчёта («оклады · премии», «прибыль, по начислению») — переносом: на телефоне колонка подписи узкая. */ .app.rep-page .table td > span.small { white-space: normal; } /* Кнопка в строке таблицы — одной строкой: таблица и так листается в своей рамке. */ #view .table td .btn { white-space: nowrap; } /* «Задолженность» (07.10.2026) — строки карточками: кто и сумма, под ними за что / сколько дней; кнопка справа. */ #zd-pat, #zd-pat > tbody, #zd-org, #zd-org > tbody, #zd-kept, #zd-kept > tbody, #zd-we, #zd-we > tbody { display: block; } #zd-pat tr:has(> th), #zd-org tr:has(> th), #zd-kept tr:has(> th), #zd-we tr:has(> th) { display: none; } #zd-pat tr, #zd-org tr, #zd-kept tr, #zd-we tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 8px 0; border-bottom: .5px solid var(--line); } #zd-pat td, #zd-org td, #zd-kept td, #zd-we td { display: block; padding: 0; border: 0; background: none; } #zd-pat td:nth-child(1), #zd-org td:nth-child(1), #zd-kept td:nth-child(1), #zd-we td:nth-child(1) { grid-column: 1; grid-row: 1; } #zd-pat td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: var(--w-medium); } #zd-pat td:nth-child(3) { grid-column: 1; grid-row: 2; font-size: calc(12.5px * var(--fz)); } #zd-org td:nth-child(2), #zd-kept td:nth-child(2), #zd-we td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: calc(12.5px * var(--fz)); } #zd-org td:nth-child(3), #zd-kept td:nth-child(3), #zd-we td:nth-child(3) { grid-column: 2; grid-row: 1; font-weight: var(--w-medium); } #zd-pat td:nth-child(4), #zd-org td:nth-child(4), #zd-kept td:nth-child(4), #zd-we td:nth-child(4) { grid-column: 2; grid-row: 2; } #zd-pat tr.on, #zd-org tr.on, #zd-kept tr.on, #zd-we tr.on { background: var(--teal-soft); } #zd-pat td.empty, #zd-org td.empty, #zd-kept td.empty, #zd-we td.empty { grid-column: 1 / -1; } /* «Расходы» (07.10.2026) — строка карточкой: статья и сумма; под ними дата, откуда, кто внёс; примечание — третьей строкой. */ #exp-t, #exp-t > tbody { display: block; } #exp-t tr:has(> th) { display: none; } #exp-t tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 8px 0; border-bottom: .5px solid var(--line); } #exp-t td { display: block; padding: 0; border: 0; background: none; } #exp-t td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; font-size: calc(14px * var(--fz)); } #exp-t td:nth-child(3) { grid-column: 4; grid-row: 1; font-weight: var(--w-medium); } #exp-t td:nth-child(1), #exp-t td:nth-child(4), #exp-t td:nth-child(5) { grid-row: 2; font-size: calc(12.5px * var(--fz)); color: var(--muted); } #exp-t td:nth-child(7) { grid-column: 4; grid-row: 2; } #exp-t td:nth-child(6) { grid-column: 1 / -1; grid-row: 3; font-size: calc(12.5px * var(--fz)); } #exp-t td:nth-child(6):empty { display: none; } #exp-t tr.pl-sum td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; font-size: calc(14px * var(--fz)); color: inherit; } #exp-t tr.pl-sum td:nth-child(2), #exp-t tr.pl-sum td:nth-child(4) { display: none; } #exp-t td.empty { grid-column: 1 / -1; } .pult-drill { padding: 14px 16px; } .pult-bxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pult-sv { grid-template-columns: minmax(0, 1fr) 70px 60px; } /* Карточка человека (B1): вкладки – переносом (не ползунком), одна колонка, строки условий — в две строки. */ .sk-tabs .chip { flex: none; } .sk-line { grid-template-columns: minmax(0, 1fr) auto; } .sk-line > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .sk-plan-row { grid-template-columns: minmax(0, 1fr) auto; } .sk-plan-row > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .top .sk-acc { align-items: flex-start; } .sk-prev-row { grid-template-columns: minmax(0, 1fr) auto; } .sk-prev-row > span:last-child { grid-column: 2; } /* «Деньги» (C1): полосы — имя и число над полосой (как направления пульта); вкладки «Денег» и отчёта листаются строкой; широкие таблицы — в своей рамке. */ .pu-card { overflow-x: auto; } .pu-year { margin-left: 0; } /* Страница раздела: состояние подраздела — строкой под названием. */ .sp-row.sec-row-s { flex-wrap: wrap; } .sp-row.sec-row-s .sp-t { flex: 1 1 calc(100% - 40px); } .sec-row-s .sec-sost { order: 3; flex: 1 1 100%; font-size: calc(13px * var(--fz)); } /* «Закрыть месяц»: шаги — над шагом, строками с переносом (без ползунка). */ .mz-in { flex-direction: column; min-height: 0; } .mz-nav { flex: none; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } .mz-st { flex: 1 1 150px; min-width: 0; } .mz-pravo { max-height: none; padding: 12px; } /* Главная менеджера: плитки — столбцом, сетка загрузки — прокруткой в своей карточке. */ .mg .mg-tiles, .mg .mg-g2 { grid-template-columns: minmax(0, 1fr); } .mg .mg-ts { min-height: 0; } .mg .mg-zb { margin-left: 0; } .top:has(.mg-den) { flex-wrap: wrap; } .top:has(.mg-den) .tools { flex: 1 1 100%; } .mg-den { display: flex; } .mg-den .chip { flex: 1 1 0; padding: 0 8px; white-space: nowrap; } .top:has(.mg-den) p { white-space: normal; } .pr-sel select, .pr-sel input { flex: 1 1 100%; width: 100%; } } .tk-n { font-variant-numeric: tabular-nums; } /* Кнопки шапки экрана и прилавка — одной строкой («+ Прививка», «Без чека»). */ .tools .btn, [data-sale], .list-item > .btn { white-space: nowrap; } .list-item > .btn { flex: none; } /* Табло: клетка не распирает сетку длинным словом. */ .tablo-cell { min-width: 0; overflow-wrap: anywhere; } /* ===== Каркас отчёта (волна A1, 02.10.2026; js/karkas.js) ===== Макет — «Отчёт: общий каркас»: полоса периода со «сравнить с», отбор чипами и поиском, «Мои виды», плитки с серым «всего без отбора», разрезы, таблица с итогом по отобранному, «показано N из M». */ .kk-pop-w { position: relative; display: inline-flex; } .kk-flt { gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .kk-flt input.flt-find { margin: 0; max-width: 260px; } .kk-flt .tag { margin: 0; } .kk-t th.kk-sort { cursor: pointer; user-select: none; } .kk-t th.kk-asc::after { content: " ↑"; } .kk-t th.kk-desc::after { content: " ↓"; } .kk-t tr.kk-g1 td { font-weight: var(--w-medium); } .kk-t tr.kk-g2 td:first-child { padding-left: 22px; color: var(--muted); } .kk-t tr.kk-all td { color: var(--muted); font-weight: var(--w-text); background: transparent; border-top: 0; font-size: calc(12px * var(--fz)); } .kk-t td.click { cursor: pointer; } .kk-t td.click:hover { background: var(--teal-10); } .kk-more { margin: 6px 2px 0; } .kk-more .linkish { margin: 0; } .kk-wide { overflow-x: auto; } /* Окно фильтра — как у МедСофта (07.10.2026; js/filter.js `filterModal`): одна колонка, поле — одна строка, название внутри поля; выбранное — ярлычками; у экрана свой постоянный список полей (`okno`). */ .modal.flt-win { width: min(480px, 100%); } .flt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .flt-row > .flt-f { flex: 1; min-width: 0; margin: 0; } .flt-f { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: var(--tap); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 4px 32px 4px 12px; box-sizing: border-box; cursor: pointer; } .flt-f:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); } .flt-n { font-size: var(--tap-fs); color: var(--muted); margin: 0; cursor: pointer; } .flt-f.on .flt-n { font-size: calc(13px * var(--fz)); } .flt-n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .flt-f .flt-s { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; padding: 0; } .flt-f .flt-i { flex: 1; min-width: 120px; width: auto; border: 0; background: transparent; padding: 4px 0; font-size: var(--tap-fs); outline: none; } .flt-c { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 2px; background: var(--teal-soft); color: var(--teal-ink); border-radius: 8px; padding: 2px 2px 2px 8px; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); cursor: default; } .flt-c button { border: 0; background: transparent; color: var(--teal-ink); cursor: pointer; font-size: calc(16px * var(--fz)); line-height: 1; padding: 2px 5px; } .flt-ar { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: calc(13px * var(--fz)); } .flt-x { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; flex: none; } .flt-x:hover { color: var(--ink); } .flt-ck { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--tap-fs); cursor: pointer; flex: 1; } .flt-r .flt-rn { font-size: var(--tap-fs); color: var(--ink); min-width: 90px; margin: 0; } .flt-r input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 6px 10px; font-size: var(--tap-fs); } .flt-r input:focus { outline: none; border-color: var(--teal); } .flt-ft { display: flex; align-items: center; gap: 8px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .flt-ft .linkish { margin-right: auto; } .flt-ft .linkish[hidden] { display: inline-flex; visibility: hidden; } /* ===== Тихие экраны (07.10.2026; js/tiho.js) ===== Заказчик: «в нашей МИС так много кнопок, а в МедСофте — отчёт и всё». Период — одна кнопка «‹ Квартал · 1–7 окт. ▾ ›», шапка — «Фильтр · Скачать · Ещё ⋯», вкладки данных — переключателем, разрезы — «Вид: … ▾». */ .tiho-w { position: relative; display: inline-flex; } .tiho-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(10, 60, 50, .16); padding: 6px; min-width: 220px; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; } .tiho-pop[hidden] { display: none; } .tiho-i { border: 0; background: transparent; font: inherit; font-size: calc(14.5px * var(--fz)); text-align: left; padding: 8px 12px; border-radius: 9px; min-height: 38px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; white-space: nowrap; } .tiho-i:hover { background: var(--fill); } .tiho-i.on { background: var(--teal-soft); color: var(--teal-ink); font-weight: var(--w-medium); } .tiho-h { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; } .tiho-dv { height: 1px; background: var(--line); margin: 4px 8px; } .per-q { gap: 8px; flex-wrap: wrap; align-items: center; } .per-b { display: inline-flex; align-items: stretch; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; min-height: var(--chip-h); } .per-b .per-s { border: 0; background: transparent; font: inherit; font-size: 19px; line-height: 1; padding: 0 12px; color: var(--teal-ink); cursor: pointer; border-radius: 12px; } .per-b .per-s:hover:not(:disabled) { background: var(--fill); } .per-b .per-s:disabled { color: var(--muted); opacity: .35; cursor: default; } .per-b > .tiho-w { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .per-b .per-m { border: 0; background: transparent; font: inherit; font-size: var(--chip-fs); font-weight: var(--w-medium); padding: 0 14px; color: var(--ink); cursor: pointer; white-space: nowrap; } .per-b .per-m:hover { background: var(--fill); } .per-b .kk-ar { color: var(--muted); font-weight: var(--w-text); } /* Отчёт — плотнее (как его кнопки и чипы, `.rep-page` выше); вкладки и «Вид» — на всю ширину: вкладки слева, «Вид» справа. */ .app.rep-page .per-b { min-height: 30px; border-radius: 8px; } .app.rep-page .per-b .per-m { font-size: calc(13px * var(--fz)); padding: 0 12px; } .app.rep-page .per-b .per-s { font-size: calc(16px * var(--fz)); padding: 0 9px; border-radius: 8px; } .app.rep-page .tiho-i { font-size: calc(13.5px * var(--fz)); min-height: 32px; padding: 6px 10px; } /* ===== Карточки расчётов (js/raschety.js): лист, долги, счета — для «Зарплаты» и «Задолженности» (были «Расчёты», B2, 02.10.2026). */ .ras-h b { font-size: 22px; font-weight: var(--w-medium); letter-spacing: -.02em; } .ras-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; } .ras-tiles > div { padding: 8px 10px; border-radius: 12px; background: var(--fill); } .ras-tiles span { display: block; font-size: calc(12px * var(--fz)); color: var(--muted); } .ras-tiles b { font-size: calc(18px * var(--fz)); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .ras-tiles .ras-left { background: var(--teal-soft); } .ras-tiles .ras-left b, .ras-tiles .ras-left span { color: var(--teal-ink); } .ras-cap { font-size: var(--fs-hint); font-weight: var(--w-text); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin-top: 4px; } .ras-za tr.ras-svc td:first-child { padding-left: 14px; color: var(--muted); } .ras-za tr.ras-sub-t td { font-weight: var(--w-text); } .ras-li { display: flex; justify-content: space-between; gap: 10px; font-size: calc(13px * var(--fz)); padding: 6px 10px; border-radius: 10px; background: var(--fill); } .ras-li b { white-space: nowrap; font-variant-numeric: tabular-nums; } .ras-li.click { cursor: pointer; } .ras-docs { gap: 6px; flex-wrap: wrap; align-items: center; } .ras-docs .btn { margin: 0; } .ras-inv { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: .5px solid var(--line); } .ras-inv.annulled .ras-li { text-decoration: line-through; opacity: .6; } .ras-more { margin-top: var(--gap); overflow-x: auto; } .ras-more h3 { margin-top: 0; } /* «Задолженность» (07.10.2026; js/zadolzhennost.js): два числа, слева «нам должны» (пациенты, организации), справа «мы должны»; история — под ними. */ .zd-kpis { grid-template-columns: repeat(2, minmax(0, 260px)); } .zd-kpis .card b { margin: 0 0 2px; } .zd-kpis .card > span { display: block; } /* Одним столбцом (08.10.2026): «нам должны», потом «мы должны». */ .zd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; margin-top: var(--gap); } .zd-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .zd-col .card h3 { margin-top: 0; } .zd-col .table tr.on > td { background: var(--teal-soft); } .zd-col .table .btn { margin: 0; } .zd-pod, .zd-zp { margin: 10px 2px 0; } .zd-pod .linkish, .zd-zp .linkish { min-height: 0; padding: 0; } .top .tools .zd-q { width: 240px; margin: 0; } .zd-chel { margin-top: var(--gap); position: relative; display: flex; flex-direction: column; gap: 10px; } .zd-chel .zd-x { position: absolute; top: 10px; right: 12px; font-size: calc(18px * var(--fz)); min-height: 0; padding: 0 4px; } @media (max-width: 1000px) { .zd-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .zd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .top .tools .zd-q { width: 100%; } } /* «Настройки › Что включено» (D1, 03.10.2026; js/vklyucheno.js): карточки модулей — строка на модуль: переключатель, название и сколько данных, «что прячет» строкой ниже; «не выключить» — тёплым. */ /* «Что включено» — одним столбцом (08.10.2026, как «Отчёты» и «Справочники»). */ .mod-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); max-width: 980px; } .mod-card h3 { margin: 0 0 4px; } .mod-r { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); } .mod-card h3 + .mod-r, .mod-card > .mod-r:first-child { border-top: 0; } .mod-r.off .mod-t b { color: var(--muted); } .mod-x { flex: 1; min-width: 0; } .mod-t { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; } .mod-m { color: var(--amber-ink, var(--amber)); margin-top: 3px; } .mod-auto { flex: none; width: 40px; text-align: center; color: var(--muted); font-weight: var(--w-medium); padding-top: 2px; } .mod-sw { position: relative; flex: none; width: 40px; height: 24px; margin-top: 1px; cursor: pointer; } .mod-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; } .mod-sw span { position: absolute; inset: 0; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s; } .mod-sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .mod-sw input:checked + span { background: var(--teal); } .mod-sw input:checked + span::after { transform: translateX(16px); } .mod-sw input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; } .mod-sw input:disabled { cursor: default; } .mod-sw input:disabled + span { opacity: .55; } .mod-r .btn.sm { flex: none; } @media (max-width: 699px) { .mod-grid { grid-template-columns: minmax(0, 1fr); } } /* ======== Бланк заключения – экран (№58, 31.10.2026; js/blank.js `renderBlank`) ======== Заказчик: «тут с дизайном не очень хорошо, надо переделать». Справа – образец листа, главное на экране: крупно, на месте при прокрутке (sticky), своя прокрутка – только у листа выше окна. Слева – настройки группами в порядке листа: свёрнутая группа – общая плашка `.fold-h`, раскрытая – карточкой; подпись слева в одну строку, поле 36 px. «Что печатать» – галочкой (`.bl button.bl-t`, состояние – `aria-pressed`): включено – бирюзовый квадрат с галочкой и текст `--ink`, выключено – пустой квадрат и тихий текст. Цвета – только переменные (тёмная тема и свой цвет фона – сами). Уже 1140 px – одной колонкой, образец под настройками; телефон – подпись над полем. */ .bl { display: grid; grid-template-columns: clamp(370px, 37%, 440px) minmax(0, 1fr); gap: 20px; align-items: start; } .bl-set { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .bl-g { min-width: 0; border-radius: var(--radius); } .bl-g.open { background: var(--paper); box-shadow: var(--shadow); padding: 2px 14px 14px; } .bl-g > .fold-h { min-height: 44px; gap: 10px; } .bl-g.open > .fold-h { padding: 8px 0; margin-bottom: 2px; background: transparent; } /* Свёрнутая – две строки: название и под ним данные (что в шапке, чего нет на листе), как «Прошлые дни не разобраны» (№54). */ .bl-gt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .bl-g > .fold-h b { font-size: calc(15px * var(--fz)); } .bl-g > .fold-h .fold-about { display: block; flex: none; margin: 0; font-size: calc(12.5px * var(--fz)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-g > .fold-h .fold-about:empty, .bl-g.open > .fold-h .fold-about { display: none; } .bl-gb[hidden] { display: none; } /* Поля: подпись слева (по самой длинной в группе), поле – остаток строки. */ .bl-f { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 14px; } .bl-ck + .bl-f { margin-top: 12px; } .bl-f > label { font-size: calc(13.5px * var(--fz)); font-weight: var(--w-text); color: var(--muted); white-space: nowrap; } .bl-f input:not([type]), .bl-sec input:not([type]), .bl-f select { height: 36px; padding: 0 11px; border-radius: 9px; font-size: calc(14px * var(--fz)); } .bl-f textarea { min-height: 58px; max-height: 180px; padding: 8px 11px; border-radius: 9px; font-size: calc(14px * var(--fz)); line-height: 1.35; field-sizing: content; } .bl-f input[type=color] { width: 46px; height: 30px; padding: 3px; border: 0; border-radius: 8px; background: var(--fill); cursor: pointer; } .bl-sel { position: relative; min-width: 0; } .bl-sel select { padding-right: 30px; text-overflow: ellipsis; } .bl-sel::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: calc(12px * var(--fz)); pointer-events: none; } .bl-in { display: flex; align-items: center; min-width: 0; } .bl-f > .bl-logo.bl-span { flex-wrap: wrap; gap: 6px 8px; margin-left: 0; } .bl-logo .bl-t { margin-left: -2px; } .bl-logo img { max-height: 34px; max-width: 110px; border-radius: 6px; } .bl-logo label.btn { display: inline-flex; align-items: center; cursor: pointer; } .bl-logo .linkish { min-height: 30px; font-size: calc(13px * var(--fz)); } .bl-f > .bl-w, .bl-f > .bl-sub, .bl-f > .bl-uzi, .bl-f > .bl-sec, .bl-f > .bl-span { grid-column: 1 / -1; } .bl-f > .bl-sel.bl-span { margin: 0; } .bl-w:empty { display: none; } .bl-sub { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; } .bl-uzi { font-size: calc(12.5px * var(--fz)); line-height: 1.45; color: var(--muted); } .bl-uzi b { color: var(--ink); } .bl-uzi .linkish { display: inline; min-height: 0; padding: 0; font-size: inherit; text-align: left; } /* Галочка «что печатать». */ .bl button.bl-t { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; height: auto; margin: 0; padding: 4px 8px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--muted); font-size: calc(14px * var(--fz)); font-weight: var(--w-text); line-height: 1.25; text-align: left; cursor: pointer; } .bl button.bl-t:hover { background: var(--fill); } .bl button.bl-t[aria-pressed="true"] { color: var(--ink); } .bl button.bl-t > i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--navy-20); color: transparent; } .bl button.bl-t > i svg { width: 12px; height: 12px; } .bl button.bl-t[aria-pressed="true"] > i { background: var(--teal); box-shadow: none; color: var(--on-teal); } .bl button.bl-t:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; } .bl button.bl-t:disabled { cursor: default; opacity: 1; } .bl button.bl-t:disabled:hover { background: transparent; } .bl button.bl-t:disabled > i, .bl button.bl-t.bl-vsegda > i { opacity: .55; } .bl-ck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 2px 6px; margin: 0 -8px; } .bl-ck button.bl-t { width: 100%; } .bl-span { margin-left: -8px; } /* Разделы протокола: галочка с названием блока · своё название на листе. */ .bl-sec { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3px 10px; align-items: center; margin: 2px 0; } .bl-sec-h, .bl-sec-r { display: contents; } .bl-sec-h > span { font-size: calc(12px * var(--fz)); color: var(--muted-2); padding-bottom: 2px; } .bl-sec-h > span:first-child { padding-left: 27px; } .bl-sec button.bl-t { margin-left: -8px; width: calc(100% + 8px); } .bl-sec-r:has(> .bl-t[aria-pressed="false"]) > input { opacity: .55; } .bl-sec > .empty { grid-column: 1 / -1; } /* Образец листа. */ .bl-prev { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: calc(100vh - 24px); } .bl-pbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; } .bl-pcap { min-width: 0; font-size: calc(13px * var(--fz)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-lang { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fill); } .bl-lang button { height: 26px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); cursor: pointer; } .bl-lang button:hover { color: var(--ink); background: transparent; } .bl-lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); } .bl-lang button:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; } .bl-pbox { flex: 0 1 auto; min-height: 0; padding: 1px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } .bl-pbox iframe { display: block; margin: 0 auto; border: 0; background: transparent; box-shadow: var(--shadow); } @media (max-width: 1139px) { .bl { grid-template-columns: minmax(0, 1fr); } .bl-prev { position: static; max-height: none; } .bl-pbox { overflow: visible; scrollbar-gutter: auto; } } @media (max-width: 699px) { .bl-f { grid-template-columns: minmax(0, 1fr); gap: 4px; } .bl-f > label { margin-top: 6px; white-space: normal; } .bl-f input:not([type]), .bl-sec input:not([type]), .bl-f select { height: 40px; font-size: var(--in-fs); } .bl-f textarea { font-size: var(--in-fs); } .bl-sec { grid-template-columns: minmax(0, 1fr); gap: 2px; } .bl-sec-h { display: none; } .bl-sec-r > input:not([type]) { margin-bottom: 6px; } .bl-sec button.bl-t { margin-left: -8px; } .bl-g > .fold-h .fold-about { margin: 0; white-space: normal; } } /* ---------- «Отчёты»: список, как у МедСофта (07.10.2026, «Финансы и отчёты заново») ---------- Группы в две колонки, в каждой — «название – что внутри» строкой. Отчёт — одна таблица: «‹ Все отчёты» над заголовком, период «с — по». */ /* Список отчётов — одним столбцом (08.10.2026, по образцу МедСофта: простота и чистота): раздел — подпись со значком, под ней карточка, группы — строками через тонкую линию, отчёты — под раскрытой строкой (js/rep.js, js/fold.js). */ .rep-list { max-width: none; } .rep-list .rep-part { margin: 0 0 18px; } .rep-part h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; font-size: calc(13px * var(--fz)); font-weight: var(--w-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .rl-ico { width: 18px; height: 18px; flex: none; color: var(--teal-ink); } .rep-list .rl-card { padding: 4px 6px; } .rl-card .rep-g + .rep-g { border-top: 1px solid var(--line); } .rl-card .fold-g { border-bottom: 0; } .rl-card .fold-h { padding: 11px 10px; border-radius: 10px; } .rl-card .fold-h b { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .rl-card .fold-h .fold-about { font-size: calc(12.5px * var(--fz)); } .rep-g ul.fold-body { margin: 0 0 6px; padding: 0 0 0 34px; } .rep-g ul { list-style: none; margin: 0; padding: 0; } .rep-g li { padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.35; font-size: calc(13.5px * var(--fz)); } .rep-g li:first-child { border-top: 0; } /* «Частые» над списком (10.10.2026): те же строки, без отступа под стрелкой группы. */ .rep-ch .rep-g ul { padding: 2px 10px; } .rep-g .rep-link { display: inline; flex: none; padding: 0; min-height: 0; border-radius: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); cursor: pointer; } .rep-g .rep-link:hover { background: none; text-decoration: underline; } .top .tools .rep-q { width: 280px; margin: 0; } .rep-n { white-space: nowrap; align-self: center; } .nav-back.rep-all { font-weight: var(--w-medium); } .kk-dates { gap: 6px; align-items: center; } .kk-dates input[type=date] { width: 150px; } .kk-t tr.kk-h > td { background: #f0f0f3 !important; } .kk-t tr.kk-sub > td:first-child { padding-left: 22px; color: var(--muted); } @media (max-width: 700px) { .top .tools .rep-q { width: 100%; } } /* Поиск отбора в шапке (08.10.2026). */ .tools input.flt-head { width: 220px; margin: 0; height: var(--chip-h); min-height: 0; } /* Подсказка поиска в шапке – общее правило «Подсказки внутри полей» (после `.search`, `.field`): 0,85 размера поля. */ @media (max-width: 699px) { .tools input.flt-head { width: 100%; flex: 1 1 100%; } } .tools input.pat-q { width: 280px; margin: 0; height: var(--chip-h); } @media (max-width: 699px) { .tools input.pat-q { width: 100%; flex: 1 1 100%; } } /* «Справочники» — одним столбцом, строками (08.10.2026, как «Отчёты»). */ .sp-list { max-width: none; } .sp-list .sp-card { padding: 4px 6px; margin-bottom: 12px; } /* Название группы — внутри карточки, в её цвете (как разделы «Отчётов» на макете). */ #view .card > h3.sp-gh { margin: 8px 10px 4px; font-size: calc(12px * var(--fz)); font-weight: var(--w-strong); letter-spacing: .05em; text-transform: uppercase; } .top .tools input.sp-q { width: 360px; margin: 0; height: var(--chip-h); min-height: 0; } @media (max-width: 699px) { .top .tools:has(> input.sp-q) { flex: 1 1 100%; } .top .tools input.sp-q { width: 100%; flex: 1 1 100%; } } .sp-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: var(--ink); padding: 11px 10px; border-radius: 10px; cursor: pointer; } .sp-row + .sp-row { border-top: 1px solid var(--line); border-radius: 0; } .sp-row:hover { background: var(--fill); } .sp-row .sp-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .sp-row .sp-t b { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .sp-row .sp-n { font-weight: var(--w-medium); color: var(--muted); font-size: calc(14px * var(--fz)); } .sp-row .sp-go { font-style: normal; color: var(--muted); font-size: calc(18px * var(--fz)); } @media (max-width: 699px) { .top.top-tabs .top-l { flex: 1 1 100%; min-width: 0; } .top-l .top-t { flex: 1 1 auto; min-width: 0; } .top-tabs-r { max-width: 100%; } .top-t .sk-tabs { min-width: 0; } } /* ======== Главная главврача и проверка карты (макет v2, 09.10.2026; js/proverka.js) ======== */ .pv-home { display: flex; flex-direction: column; gap: var(--gap); } .pv-home > .card { margin: 0; } /* Критический результат — полосой сверху, не карточкой. */ .pv-krit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-radius: 14px; background: var(--rose-soft); color: #8a0d0d; } .pv-krit-t { flex: none; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); padding: 3px 8px; border-radius: 7px; background: var(--rose); color: #fff; white-space: nowrap; } .pv-krit-m { flex: 1 1 340px; min-width: 0; } .pv-krit-h { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .pv-krit-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .pv-tel-w { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .pv-krit .pv-tel { height: 32px; min-height: 32px; padding: 0 10px; font-size: calc(13px * var(--fz)); background: var(--paper); display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); } .pv-krit .btn.sm { height: 32px; min-height: 32px; } :root[data-theme="dark"] .pv-krit { color: #ffd2cf; } /* «Мой приём» — одной строкой. */ .pv-my { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 10px; padding-bottom: 10px; } .pv-my select { margin-left: auto; width: auto; min-width: 160px; height: 36px; padding: 4px 10px; } /* Шесть чисел. */ .pv-k { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .pv-k .pv-t { display: flex; flex-direction: column; gap: 2px; } .pv-k .pv-tl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; line-height: 16px; min-height: 32px; color: var(--muted); } .pv-k .card b { font: var(--w-medium) 26px/1.2 var(--head); margin-top: 2px; white-space: nowrap; } .pv-k .pv-of { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); letter-spacing: 0; } .pv-k .muted.small { font-size: var(--fs-hint); line-height: 16px; } .pv-d { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); letter-spacing: 0; white-space: nowrap; } .pv-d.up { color: var(--teal-ink); } .pv-d.down { color: var(--rose-ink); } :root[data-theme="dark"] .pv-d.up { color: #7fdcc9; } :root[data-theme="dark"] .pv-d.down { color: #ff8a80; } /* Очередь и правая колонка. */ .pv-q .hd, .pv-n .hd, .pv-doc .hd, .pv-check .hd { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .pv-q .hd h3, .pv-n .hd h3, .pv-doc .hd h3, .pv-check .hd h3 { margin-bottom: 8px; } .pv-chips { gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .pv-chips .chip { height: 30px; min-height: 30px; padding: 0 12px; font-size: calc(13px * var(--fz)); margin: 0; } .pv-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); cursor: pointer; } .pv-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } .pv-row .btn.sm { height: 32px; min-height: 32px; padding: 0 12px; font-size: calc(13px * var(--fz)); } .pv-tags { display: flex; flex-wrap: wrap; gap: 4px; } .tag.pv-a, .tag.pv-r, .tag.pv-n { margin: 0; padding: 2px 8px; font-weight: var(--w-medium); white-space: nowrap; } .tag.pv-a { background: var(--amber-soft); color: var(--amber-ink); } .tag.pv-r { background: var(--rose-soft); color: var(--rose-ink); } .tag.pv-n { background: var(--fill); color: var(--ink); } :root[data-theme="dark"] .tag.pv-a { color: #ffd9a0; } :root[data-theme="dark"] .tag.pv-r { color: #ffc2bd; } .pv-foot { padding-top: 8px; border-top: 1px solid var(--line); } .pv-q .home-more { display: block; margin: 6px 0; } @media (max-width: 700px) { .pv-row { grid-template-columns: minmax(0, 1fr) auto; } .pv-row > div:nth-child(2) { grid-column: 1; } .pv-row > .pv-tags { grid-column: 1 / -1; } .pv-row > .btn { grid-column: 2; grid-row: 1; } } .pv-nr { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); } .pv-nr > span { display: flex; flex-direction: column; min-width: 0; } .pv-dt th { font-size: calc(12px * var(--fz)); line-height: 15px; vertical-align: bottom; } .pv-dt td:nth-child(n+2), .pv-dt th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Экран «Проверка карты». */ .pv-flags { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; } .pv-pos { white-space: nowrap; } .pv-rv { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .pv-card { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-size: calc(15px * var(--fz)); line-height: 22px; margin: 0; } .pv-card h3 { margin-bottom: 0; } .pv-bl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); margin-bottom: 2px; line-height: 17px; } .pv-pr { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .pv-pr:first-of-type { padding-top: 0; border-top: 0; } .pv-prh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .pv-pw { border-radius: 10px; padding: 6px 12px; margin: 0 -12px; background: var(--rose-soft); color: var(--rose-ink); font-size: calc(14px * var(--fz)); line-height: 20px; } :root[data-theme="dark"] .pv-pw { color: #ffc2bd; } .pv-b.pv-copy, .pv-b.pv-bad { border-radius: 10px; padding: 8px 12px; margin: 0 -12px; } .pv-b.pv-copy { background: var(--amber-soft); } .pv-b.pv-copy .pv-bl { color: var(--amber-ink); } .pv-b.pv-bad { background: var(--rose-soft); color: var(--rose-ink); } .pv-b.pv-bad .pv-bl { color: var(--rose-ink); } :root[data-theme="dark"] .pv-b.pv-copy .pv-bl { color: #ffd9a0; } :root[data-theme="dark"] .pv-b.pv-bad, :root[data-theme="dark"] .pv-b.pv-bad .pv-bl { color: #ffc2bd; } .pv-open { align-self: flex-start; font-weight: var(--w-medium); } .pv-check { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin: 0; } .pv-check .hd h3 { margin: 0; } .pv-it { display: flex; align-items: center; gap: 10px; font-size: calc(14px * var(--fz)); background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; color: var(--ink); min-height: 32px; } .pv-m { flex: none; width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); background: var(--teal-soft); color: var(--teal-ink); } .pv-m[data-m="warn"] { background: var(--amber-soft); color: var(--amber-ink); } .pv-m[data-m="no"] { background: var(--rose-soft); color: var(--rose-ink); } .pv-check .field { margin: 0; } .pv-check textarea { min-height: 92px; } .pv-btns { display: grid; gap: 8px; } .pv-btns .btn { width: 100%; } .btn.pv-back { background: var(--rose-soft); color: var(--rose-ink); } :root[data-theme="dark"] .btn.pv-back { color: #ffc2bd; } .pv-rule { align-items: center; gap: 8px; margin: 6px 0; } .pv-rule label { flex: 1; font-size: calc(14px * var(--fz)); } .pv-rule input { width: 80px; } @media (max-width: 700px) { .pv-check { max-width: none; } } .btn.pv-nav { width: 40px; padding: 0; font-size: calc(18px * var(--fz)); } .pv-check #pv-w:empty { display: none; } /* ===== Главная менеджера (макет v2, доски Manager и ManagerMove; 09.10.2026, js/menedzher.js) ===== */ .mg-den { display: inline-flex; gap: 2px; padding: 2px; border-radius: 12px; background: var(--fill); } .mg-den .chip { margin: 0; height: 34px; min-height: 34px; padding: 0 12px; font-size: calc(13px * var(--fz)); background: transparent; } .mg-den .chip.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); } .mg-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); } .mg-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mg-tl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--muted); } .mg-tv { font-size: 26px; font-weight: var(--w-medium); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; } .mg-ts { font-size: calc(12.5px * var(--fz)); line-height: 1.35; color: var(--muted); min-height: 34px; } /* Подпись-ссылка плитки переносится, а не залезает на соседнюю (A7-10: таджикские подписи длиннее); «›» – с последним словом. */ .mg-ta { align-self: flex-start; margin-top: auto; background: none; border: 0; padding: 0; font: inherit; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); color: var(--teal-ink); cursor: pointer; white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; } .mg-ta:hover { text-decoration: underline; } .mg-all { margin: 8px 0 0; } .mg-all .linkish { font-weight: var(--w-medium); color: var(--teal-ink); gap: .3em; } /* «3 человека ›»: число и слово – разными узлами (перевод), пробел – отступом */ .mg-g2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; } .mg-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; } .mg-hd h3 { margin: 0; color: var(--ink); } .mg-lg { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: calc(12px * var(--fz)); color: var(--muted); } .mg-lg > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .mg-lg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .mg-lg .linkish { font-size: calc(12px * var(--fz)); color: var(--muted); } .mg .lo { color: var(--rose-ink); font-weight: var(--w-medium); } .mg-scroll { overflow-x: auto; max-width: 100%; } .mg-grid { display: grid; gap: 3px; align-items: center; font-size: calc(13px * var(--fz)); } .mg-h { font-size: calc(12px * var(--fz)); color: var(--muted); white-space: nowrap; } .mg-h.now { color: var(--teal-ink); font-weight: var(--w-medium); } .mg-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; } .mg-n b { font-weight: var(--w-medium); } .mg-c, .mg-lg i { height: 20px; border-radius: 4px; box-sizing: border-box; border: 0; padding: 0; margin: 0; min-width: 0; } .mg-lg i { height: 12px; } .mg-c.b, .mg-lg i.b { background: var(--teal); } .mg-c.b.p { background: color-mix(in srgb, var(--teal) 50%, var(--paper)); } .mg-c.f, .mg-lg i.f { background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); } button.mg-c.f { cursor: pointer; } button.mg-c.f:hover { background: var(--teal-soft); } .mg-c.p, .mg-lg i.p { background: color-mix(in srgb, var(--ink) 20%, var(--paper)); } .mg-c.x, .mg-lg i.x { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 16%, var(--paper)) 0 3px, var(--fill) 3px 6px); } .mg-p { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .mg-p.lo { color: var(--rose-ink); } .mg-btns { margin-top: 12px; gap: 8px; flex-wrap: wrap; } .mg-z { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-top: 1px solid var(--line); } .mg-zh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mg-zf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .mg-zb { margin-left: auto; display: inline-flex; gap: 6px; } .mg-src { font-size: calc(12px * var(--fz)); font-weight: var(--w-text); border-radius: 7px; padding: 2px 8px; background: var(--fill); white-space: nowrap; } .mg-zn { padding-top: 8px; border-top: 1px solid var(--line); margin: 4px 0 0; } .mg .btn.sm { height: 32px; font-size: calc(13px * var(--fz)); padding: 0 12px; } .pr-modal .pr-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .pr-sel { gap: 8px; flex-wrap: wrap; align-items: center; } .pr-sel select, .pr-sel input { width: auto; flex: 0 1 auto; } .pr-scroll { overflow-x: auto; max-height: 55vh; overflow-y: auto; } .pr-t select { width: auto; max-width: 260px; } .pr-off { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; } .pr-ok { display: inline-flex; align-items: center; gap: 6px; } .pr-f { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; } @media (max-width: 1250px) { .mg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .mg-g2 { grid-template-columns: minmax(0, 1fr); } } /* ======== Доска «Лаборатория» (js/lab2.js `renderLabDoska`) – правила во втором блоке («Доска: колонки…»); отсюда убраны старая доска этапов (.lab-et*, .lab-t*) и повторы (A7-26, 22.10.2026). Остался `.lab-pt-n`: он стоит раньше `.kb-pill` нарочно – отступы и цвет метки партнёра берёт у неё. ======== */ .lab-pt-n { padding: 0; color: var(--ink); text-decoration: none; } /* ---------- Остатки склада (макет v2, доска Stock) ---------- */ .chip.zero { background: transparent; color: var(--muted); } .st-chips .chip b, .ob-chips .chip b { font-variant-numeric: tabular-nums; margin-left: 5px; } .st-sum { margin: -4px 0 10px; } .st-chips { margin-top: 4px; align-items: center; } .st-alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--rose-ink); } .st-alarm > span { flex: 1 1 320px; } .st-alarm .small { margin-left: 6px; } :root[data-theme="dark"] .st-alarm { color: #ffc2bd; } .st-table .st-q { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .st-bar { position: relative; display: inline-block; width: 140px; height: 6px; border-radius: 3px; background: var(--fill); } .st-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .st-bar s { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); } .st-bar-ok i { background: var(--ok); } .st-bar-low i { background: var(--amber); } .st-bar-out i { background: var(--rose); } .st-table tr.st-part td { padding-top: 4px; padding-bottom: 4px; font-size: calc(13px * var(--fz)); color: var(--muted); background: color-mix(in srgb, var(--fill) 35%, transparent); } .st-table tr.st-part td:first-child { padding-left: 26px; } @media (max-width: 699px) { .st-bar { width: 70px; } } /* ---------- Обзвон (макет v2, доска Calls) ---------- */ .ob-chips { gap: 6px; } .ob-t td { vertical-align: top; } /* Строка обзвона — две строки в ячейке (имя и телефон, метка и повод), не «второе значение рядом». */ .app.rep-page .table.ob-t td { padding: 7px 8px; } .app.rep-page .table.ob-t td > div { display: block !important; margin-left: 0 !important; font-size: calc(12.5px * var(--fz)); } .ob-t .ob-tel { font-weight: var(--w-medium); color: var(--teal-ink); white-space: nowrap; } .ob-t .ob-why { max-width: 380px; } .ob-t .ob-why .muted { margin-top: 3px; } .ob-t .tag { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); border-radius: 7px; padding: 2px 8px; margin: 0 4px 0 0; white-space: nowrap; display: inline-block; } .ob-t .ob-tr { background: var(--rose-soft); color: var(--rose-ink); } .ob-t .ob-ta { background: var(--amber-soft); color: var(--amber-ink); } .ob-t .ob-tg { background: var(--teal-soft); color: var(--teal-ink); } .ob-t .ob-tn { background: var(--fill); color: var(--ink); } .ob-t .ob-tb { background: #e3ecf7; color: #1f4f86; } :root[data-theme="dark"] .ob-t .ob-tr { color: #ffc2bd; } :root[data-theme="dark"] .ob-t .ob-ta { color: #ffd59a; } :root[data-theme="dark"] .ob-t .ob-tb { background: #23344a; color: #b9d3f2; } .ob-t .ob-done { font-weight: var(--w-medium); color: var(--teal-ink); } /* ---------- Карточка пациента (макет v2, доска Patient) ---------- */ .pat-tags { gap: 6px; margin: -4px 0 12px; } .pat-tags .tag { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); border-radius: 7px; padding: 2px 8px; margin: 0; background: var(--fill); color: var(--ink); } .pat-tags .tag.pt-bad { background: var(--rose-soft); color: var(--rose-ink); } .pat-tags .tag.pt-warn { background: var(--amber-soft); color: var(--amber-ink); } .pat-tags .tag.pt-note { font-weight: var(--w-medium); } :root[data-theme="dark"] .pat-tags .tag.pt-bad { color: #ffc2bd; } :root[data-theme="dark"] .pat-tags .tag.pt-warn { color: #ffd59a; } .pat-tel { font-weight: var(--w-medium); color: var(--teal-ink); } /* Телефон во второй строке списков – серый, как номер карты; бирюзовый только при наведении (замечание 12) */ .l2 .pat-tel, .l2 .pat-tel a, .l2 a[href^="tel:"] { color: var(--muted); font-weight: var(--w-text); } .l2 .pat-tel a:hover, .l2 a[href^="tel:"]:hover { color: var(--teal-ink); } .obr-card .obr-it { padding: 8px 0; border-top: 1px solid var(--line); } .obr-card .obr-it .tag { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); border-radius: 7px; padding: 1px 7px; background: var(--fill); } .obr-card .obr-it .tag.obr-bad { background: var(--rose-soft); color: var(--rose-ink); } .obr-card .obr-text { margin: 3px 0; font-size: calc(14px * var(--fz)); } /* ---------- Экран пациента: «Карточка» и «История» (замечания заказчика 1 и 3, 23.10.2026; макеты pacient-*.html) ---------- */ /* Экран шире обычного (`wide: "pac-wide"`): три колонки на большом экране. */ .app.pac-wide .main { max-width: 1640px; } .pac-s .pac-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 14px; } .pac-s .pac-bar .pat-tags { margin: 0; } .top-t .pac-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--navy-10); flex: none; } .top-t .pac-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font-weight: var(--w-medium); color: var(--muted); white-space: nowrap; } .top-t .pac-seg button b { font-weight: var(--w-medium); margin-left: 4px; } .top-t .pac-seg button.on { background: var(--paper); color: var(--ink); font-weight: var(--w-medium); box-shadow: 0 1px 2px rgba(0, 45, 66, .14); } /* Три колонки: главная (ближайшее и история), данные, деньги. Нет третьей (врач) – две. До 1600 px – две: вторая и третья стопкой. */ .pac-s .pat3 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; } .pac-s .pat3.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pac-s .pat3-c { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .pac-s .pat3-c > .card { margin: 0; min-width: 0; } @media (max-width: 1599px) { .pac-s .pat3, .pac-s .pat3.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pac-s .pat3 .pat3-c.c3 { grid-column: 2; } .pac-s .pat3:not(.two) .pat3-c.c2 { grid-row: 1; } .pac-s .pat3:not(.two) { grid-template-rows: auto 1fr; } .pac-s .pat3:not(.two) .pat3-c.c1 { grid-row: 1 / span 2; } } @media (max-width: 760px) { .pac-s .pat3, .pac-s .pat3.two, .pac-s .pat3:not(.two) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .pac-s .pat3 .pat3-c, .pac-s .pat3 .pat3-c.c3, .pac-s .pat3:not(.two) .pat3-c.c1, .pac-s .pat3:not(.two) .pat3-c.c2 { grid-column: auto; grid-row: auto; } .pac-s .pac-hr { grid-template-columns: 58px minmax(0, 1fr); } .pac-s .pac-hr .r { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .pac-s .pac-bl { grid-template-columns: 74px minmax(0, 1fr); } .pac-s .pac-bl .a { grid-column: 2; justify-content: flex-start; } .pac-s .pac-det { padding-left: 14px; } } /* Заголовок блока: название, число, справа ссылка «… ›». */ .pac-s .pac-ch { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: -2px 0 8px; } .pac-s .pac-ch h3 { margin: 0; } .pac-s .pac-ch .n { font-weight: var(--w-medium); color: var(--muted); } .pac-s .pac-ch .r { margin-left: auto; display: flex; gap: 6px; align-items: center; } .pac-s .go { border: 0; background: none; padding: 0; font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); color: var(--teal-ink); white-space: nowrap; } .pac-s .go::after { content: "\00a0›"; } .pac-s .more { border: 0; background: none; padding: 0; margin-top: 6px; font-weight: var(--w-medium); color: var(--teal-ink); font-size: calc(13.5px * var(--fz)); } .pac-s .lnk { border: 0; background: none; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); } .pac-s .lnk:hover { text-decoration: underline; } /* Короткий блок без содержимого – заголовок и кнопка в одну строку (Файлы, Обращения и жалобы). */ .pac-s .card.pac-mini { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; } .pac-s .card.pac-mini h3 { margin: 0; } .pac-s .card.pac-mini > .row { flex: 1; margin: 0 !important; } .pac-s .fact { align-items: baseline; } .pac-s .fact.big b { font: var(--w-medium) calc(20px * var(--fz))/1.2 var(--head); } .pac-s .fact b { min-width: 0; overflow-wrap: anywhere; } .pac-s .warn-l { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); font-size: calc(13px * var(--fz)); } .pac-s .warn-l button { border: 0; background: none; padding: 0; color: inherit; font-weight: var(--w-medium); text-decoration: underline; } .pac-s .empty-l { color: var(--muted); padding: 4px 0 2px; } .pac-s .foot { margin: 10px 0 0; color: var(--muted); font-size: calc(13px * var(--fz)); } /* «Ближайшее»: дата слева, что и у кого, справа статус или кнопка. */ .pac-s .pac-bl { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line-2); align-items: center; } .pac-s .pac-ch + .pac-bl { border-top: 0; padding-top: 2px; } .pac-s .pac-bl .d { font-weight: var(--w-medium); line-height: 1.2; } .pac-s .pac-bl .d small { display: block; font-weight: var(--w-text); color: var(--muted); font-size: calc(12.5px * var(--fz)); } .pac-s .pac-bl .w b { font-weight: var(--w-medium); } .pac-s .pac-bl .s { color: var(--muted); font-size: calc(13px * var(--fz)); } .pac-s .pac-bl .a { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; text-align: right; } .pac-s .pac-bl.click { cursor: pointer; border-radius: 10px; } .pac-s .pac-bl.click:hover { background: color-mix(in srgb, var(--teal) 5%, transparent); } .pac-s .pac-bl .k { overflow-wrap: anywhere; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .05em; text-transform: uppercase; color: var(--amber-ink); } .pac-s .pac-bl .k.t { color: var(--teal-ink); } /* Строка истории – одна на карточку и вкладку. */ .pac-s .pac-hr { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; align-items: start; } .pac-s .pac-hr:hover { background: color-mix(in srgb, var(--teal) 5%, transparent); } .pac-s .pac-ch + .pac-hr, .pac-s .ysec + .pac-hr, .pac-s .pi-flt2 + * > .ysec + .pac-hr, .pac-s .pi-labs + .pac-hr { border-top: 0; } .pac-s .pac-hr .d { font-weight: var(--w-medium); line-height: 1.2; } .pac-s .pac-hr .d small { display: block; font-weight: var(--w-text); color: var(--muted); font-size: calc(12.5px * var(--fz)); } .pac-s .pac-hr .w { min-width: 0; } .pac-s .pac-hr .w > b { font-weight: var(--w-medium); } .pac-s .pac-hr .w .who { font-weight: var(--w-text); } .pac-s .pac-hr .w .s { color: var(--muted); font-size: calc(13px * var(--fz)); } .pac-s .pac-hr .w .dx { margin-top: 2px; font-weight: var(--w-text); } .pac-s .pac-hr .w .dx i { font-style: normal; font-weight: var(--w-text); color: var(--teal-ink); margin-right: 4px; } .pac-s .pac-hr .r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .pac-s .pac-hr .r .m { font-size: calc(12.5px * var(--fz)); color: var(--muted); white-space: nowrap; } .pac-s .pac-hr .r .status { margin: 0; } .pac-s .pac-hr.dim .w > b, .pac-s .pac-hr.dim .d { color: var(--muted); } .pac-s .pac-hr.open { background: var(--teal-10); border-top-color: transparent; } .pac-s .pac-hr:focus-visible { outline: 3px solid var(--teal); outline-offset: 0; } .pac-s .mk2 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .pac-s .mk2 em { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--fill); font-size: calc(12px * var(--fz)); font-weight: var(--w-text); color: var(--muted); white-space: nowrap; } .pac-s .mk2 em.g { background: var(--ok-soft); color: var(--ok); } .pac-s .mk2 em.a { background: var(--amber-soft); color: var(--amber-ink); } .pac-s .pac-hr .ic { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--fill); margin-bottom: 2px; } .pac-s .pac-hr .ic svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Раскрытая запись: только непустые разделы. */ .pac-s .pac-det { margin: 2px -8px 8px; padding: 12px 14px 12px 90px; border-radius: 0 0 12px 12px; background: var(--teal-10); } .pac-s .dg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; } .pac-s .ds h4 { margin: 0 0 4px; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pac-s .ds p { margin: 0 0 3px; } .pac-s .ds .txt { white-space: pre-line; background: var(--paper); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); font-size: calc(13.5px * var(--fz)); } .pac-s .ds .txt.pac-txt:not(.all) { max-height: 11.2em; overflow: hidden; } .pac-s .ds .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .pac-s .ds .li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; } .pac-s .ds .li b { font-weight: var(--w-medium); } .pac-s .ds .dots { margin: 2px 0 4px; } .pac-s .dact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--teal-soft); align-items: center; } .pac-s .dact .note { color: var(--muted); font-size: var(--fs-hint); margin-left: auto; } .pac-s .flag { color: var(--rose-ink); font-weight: var(--w-medium); } /* Вкладка «История»: лента слева, сводка справа (до 1100 px – сводка над лентой). */ .pac-s .pi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--gap); align-items: start; } @media (max-width: 1100px) { .pac-s .pi-grid { grid-template-columns: minmax(0, 1fr); } .pac-s .pi-side { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); position: static; } } .pac-s .pi-side { display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 12px; min-width: 0; } .pac-s .pi-side > .card { margin: 0; } .pac-s .pi-flt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .pac-s .pi-flt .chip { min-height: 34px; margin: 0; padding: 0 12px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); border: 0; } .pac-s .pi-flt .chip b { font-weight: var(--w-medium); color: var(--muted); margin-left: 4px; } .pac-s .pi-flt .chip.on b { color: var(--ink); } .pac-s .pi-flt2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; } .pac-s .pi-sel, .pac-s .pi-q, .pac-s .pi-d { width: auto; height: 34px; padding: 0 10px; border-radius: 10px; font-size: calc(13px * var(--fz)); } .pac-s .pi-q { flex: 1 1 200px; } .pac-s .pi-own { display: inline-flex; gap: 6px; align-items: center; } .pac-s .pi-own[hidden] { display: none; } .pac-s .ysec { margin: 12px 0 2px; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; } .pac-s .ysec::after { content: ""; flex: 1; height: 1px; background: var(--line); } .pac-s .pi-labs { margin-bottom: 10px; } .pac-s .pi-labs > .card { box-shadow: none; padding: 0; background: none; } .pac-s .pi-main .more { display: block; } .pac-s .dxl { padding: 6px 0; border-top: 1px solid var(--line-2); } .pac-s .dxl:first-of-type { border-top: 0; } .pac-s .dxl b { font-weight: var(--w-medium); } .pac-s .dxl i { font-style: normal; font-weight: var(--w-text); color: var(--teal-ink); margin-right: 4px; } .pac-s .dxl div { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .pac-s .pat-wait .d .k { color: var(--amber-ink); } /* ---------- «Найти…» (макет v2, доска Search) ---------- */ .nav .nav-find { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg); color: var(--muted); font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); padding: 8px 10px; margin: 0 0 10px; border-radius: 10px; box-shadow: var(--shadow); } .nav .nav-find:hover { background: var(--bg); color: var(--ink); } .nav-find-k { font-size: calc(11px * var(--fz)); color: var(--muted); background: var(--paper); border-radius: 6px; padding: 1px 5px; box-shadow: var(--shadow); } /* Телефон: меню за «☰» — кнопка поиска вместе с пунктами, в открытом меню. */ @media (max-width: 980px) { .nav .nav-find { display: none; } .app.nav-open .nav .nav-find { display: flex; flex: 1 1 100%; margin: 8px 0 0; } } #modal:has(> .nj) { width: min(660px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; } #modal:has(> .nj)::before { display: none; } @media (min-width: 700px) { #overlay:has(.nj) { place-items: start center; padding-top: 9vh; } #modal:has(> .nj) { border-radius: 18px; } } .nj { display: flex; flex-direction: column; min-height: 0; max-height: 80vh; } .nj-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .nj-lupa { font-size: 20px; color: var(--muted); } .nj-top input { flex: 1; border: 0; background: transparent; font-size: calc(17px * var(--fz)); padding: 6px 0; outline: none; min-width: 0; } .nj-esc, .nj-k { font-size: calc(11px * var(--fz)); background: var(--fill); border-radius: 6px; padding: 2px 6px; color: var(--muted); } .nj-list { overflow-y: auto; padding: 4px 0 8px; min-height: 60px; } .nj-g { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 18px 4px; } .nj-i { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 18px; font-size: calc(15px * var(--fz)); cursor: pointer; color: var(--ink); } .nj-i.on { background: var(--teal-soft); } .nj-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--fill); display: grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } .nj-ico.p { background: var(--paper); color: var(--teal-ink); box-shadow: 0 0 0 1px var(--line); } .nj-t { flex: 1; min-width: 0; } .nj-n b { font-weight: var(--w-medium); } .nj-hint { flex: none; font-size: var(--fs-hint); color: var(--muted); background: var(--paper); border-radius: 6px; padding: 2px 8px; } .nj-empty { padding: 14px 18px; } .nj-foot { border-top: 1px solid var(--line); background: var(--bg); padding: 8px 18px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; } .nj-foot > div { flex: 1 1 100%; } /* ---------- Особые состояния (макет v2, доска States) ---------- */ .nav-deny { margin: 0 0 12px; font-size: calc(14px * var(--fz)); } .nav-deny span { opacity: .9; } .svyaz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--rose-ink); margin: 0 0 12px; } .svyaz > span { flex: 1 1 360px; } :root[data-theme="dark"] .svyaz { color: #ffc2bd; } /* Сервер не отвечает — одна полоса: «не смогла записать» стойки молчит, пока горит эта. */ body.svz-down #srv-down { display: none !important; } /* Фото пациента в шапке карточки (10.10.2026). */ .pat-ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 10px; } /* ======== «Аналитика» руководства (10.10.2026, макет «Ormin: Аналитика») ======== Свой язык графиков внутри оболочки программы: крупные числа, линия за год, цвет — только смысл (норма бирюзовым, внимание янтарным, тревога розовым). */ /* «Аналитика» — в цветах брендбука (14.10.2026): главный блок — тёмно-синий navy, линии — бирюза, внимание — оранжевый, тревога — служебный красный. */ .an { --an-ok: #1fa39c; --an-warn: #e07814; --an-bad: #c8372d; --an-deep: #002d42; --an-band: rgba(39, 190, 182, .14); --an-muted: var(--muted); display: flex; flex-direction: column; gap: 18px; } :root[data-theme="dark"] .an { --an-ok: #27beb6; --an-warn: #f4a24f; --an-bad: #ff7a6e; --an-deep: #0a3346; --an-band: rgba(39, 190, 182, .18); --an-muted: var(--muted); } .an .muted { color: var(--an-muted); } .an .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .an-per { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .an-seg { display: inline-flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 2px; } .an-seg button { font: inherit; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); min-height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .an-seg button.on { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .an-pl { display: inline-flex; align-items: center; gap: 2px; background: var(--paper); border-radius: 12px; box-shadow: 0 0 0 1px var(--line); min-height: 38px; } .an-pl b { padding: 0 6px; font-size: calc(14px * var(--fz)); white-space: nowrap; } .an-arr { font: inherit; font-size: calc(18px * var(--fz)); border: 0; background: transparent; color: var(--ink); min-width: 34px; min-height: 36px; cursor: pointer; border-radius: 10px; } .an-arr:disabled { opacity: .3; cursor: default; } .an-sh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; } .an-sh h2 { margin: 0; font-size: calc(18px * var(--fz)); font-weight: var(--w-strong); letter-spacing: -.01em; } .an .card { border-radius: 20px; box-shadow: 0 0 0 1px var(--line); } .an a.card { color: inherit; text-decoration: none; } .an a.card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); } .an-eb { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--an-muted); } .an-eb.bad { color: var(--an-bad); } /* обзор: вывод и три числа */ .an-hero { background: var(--an-deep); color: #fff; border-radius: 24px; padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 20px; } .an-hero-sk { min-height: 150px; } .an-verdict { margin: 0; font-size: 23px; line-height: 31px; font-weight: var(--w-medium); letter-spacing: -.01em; max-width: 980px; text-wrap: pretty; } .an-verdict b { color: #ffb4a8; font-weight: var(--w-medium); } .an-verdict em { font-style: normal; color: #7fe0cc; font-weight: var(--w-text); } .an-hks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; } .an-hk { background: rgba(255, 255, 255, .06); border-radius: 18px; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 2px; color: #fff; text-decoration: none; } .an-hk:hover { background: rgba(255, 255, 255, .1); } .an-hl { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: rgba(255, 255, 255, .7); } .an-hv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .an-hv b { font-size: 32px; font-weight: var(--w-medium); letter-spacing: -.02em; } .an-hd { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .an-hd.good { color: #7fe0cc; } .an-hd.bad { color: #ffb4a8; } .an-hs { font-size: calc(12px * var(--fz)); color: rgba(255, 255, 255, .62); } .an-hx { display: flex; justify-content: space-between; font-size: calc(11px * var(--fz)); color: rgba(255, 255, 255, .5); } /* линии */ .an-line { width: 100%; display: block; overflow: visible; margin-top: 6px; } .an-line path.l { fill: none; stroke: var(--an-ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .an-line path.d { fill: none; stroke: var(--an-ok); stroke-linecap: round; vector-effect: non-scaling-stroke; } .an-line.warn path.l { stroke: var(--an-warn); } .an-line.warn path.d { stroke: var(--an-warn); } .an-line.bad path.l { stroke: var(--an-bad); } .an-line.bad path.d { stroke: var(--an-bad); } .an-line.hero path.l { stroke: #7fe0cc; stroke-width: 2.25; } .an-line.hero path.d { stroke: #7fe0cc; } .an-line.hero .an-fill { fill: rgba(127, 224, 204, .14); } .an-line.prev path.l { stroke: var(--an-muted); stroke-dasharray: 4 5; stroke-width: 1.5; } .an-line.big path.l { stroke-width: 3; } .an-line .an-band { fill: var(--an-band); } .an-nol { display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fz)); color: var(--an-muted); border: 1px dashed var(--line); border-radius: 10px; margin-top: 6px; } .an-hk .an-nol { color: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .15); } .an-two { position: relative; } .an-two .an-line.prev { position: absolute; inset: 0; margin: 0; } .an-two .an-line:not(.prev) { position: relative; margin: 0; } .an-xax { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: calc(11px * var(--fz)); color: var(--an-muted); text-align: center; } /* кольца цели */ .an-goal .an-gls { display: flex; flex-wrap: wrap; gap: 12px; } .an-gl { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; } .an-gl > span { display: flex; flex-direction: column; min-width: 0; font-size: calc(14px * var(--fz)); line-height: 19px; } .an-ring { width: 72px; height: 72px; flex: none; } .an-ring circle { fill: none; stroke-width: 7; } .an-ring .bg { stroke: var(--fill); } .an-ring .fg { stroke: var(--an-ok); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 36px 36px; } .an-ring.warn .fg { stroke: var(--an-warn); } .an-ring.bad .fg { stroke: var(--an-bad); } .an-ring text { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); text-anchor: middle; fill: var(--ink); font-family: var(--font); } /* карточки показателей */ .an-att { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; } .an-kpi { display: flex; flex-direction: column; gap: 5px; } .an-kh { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .an-kt { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .an-kv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .an-kv b { font-size: 28px; font-weight: var(--w-medium); letter-spacing: -.02em; } .an-kn { line-height: 16px; } .an-pill { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); border-radius: 20px; padding: 3px 9px 3px 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .an-pill i { width: 6px; height: 6px; border-radius: 3px; display: inline-block; } .an-pill.ok { background: var(--teal-soft); color: var(--ink); } .an-pill.ok i { background: var(--an-ok); } .an-pill.warn { background: var(--amber-soft); color: var(--ink); } .an-pill.warn i { background: var(--an-warn); } .an-pill.bad { background: var(--rose-soft); color: var(--rose-ink); } .an-pill.bad i { background: var(--an-bad); } .an-dl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; } .an-dl.good { color: var(--teal-ink); } .an-dl.bad { color: var(--rose-ink); } .an-dl.flat { color: var(--an-muted); } .an-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; } .an-tk { display: flex; flex-direction: column; gap: 4px; } .an-tk > b { font-size: 30px; font-weight: var(--w-medium); letter-spacing: -.02em; } /* плитки областей */ .an-tiles { display: flex; flex-wrap: wrap; gap: 12px; } /* Сетки «Аналитики» без висячего ряда (A7-19, 22.10.2026): последний ряд растягивается на всю ширину, дыры справа нет; три плитки верхнего блока на 1366 встают в один ряд. */ .an-goal .an-gls > *, .an-tiles > * { flex: 1 1 230px; min-width: 0; } .an-goal .an-gls > * { flex-basis: 260px; } /* Подпись под заголовком «Аналитики» («по 22 октября · к тем же дням прошлого месяца») – переносом, не многоточием. */ #view:has(.an-hero) .top p { white-space: normal; } .an-tile { display: flex; flex-direction: column; gap: 8px; } .an-tile b { font-size: 22px; font-weight: var(--w-medium); } .an-tt { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .an-tt i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .an-cnt { display: flex; flex-wrap: wrap; gap: 10px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--an-muted); } .an-cnt span { display: inline-flex; align-items: center; gap: 4px; } .an-cnt i { width: 6px; height: 6px; border-radius: 3px; display: inline-block; } .an-cnt i.ok { background: var(--an-ok); } .an-cnt i.warn { background: var(--an-warn); } .an-cnt i.bad { background: var(--an-bad); } /* разбор показателя */ .an-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; } .an-strip .an-line, .an-strip .an-xax, .an-strip .an-src, .an-strip .an-nol { flex: 1 1 100%; } .an-big { display: inline-flex; align-items: center; gap: 12px; } .an-big b { font-size: 50px; font-weight: var(--w-strong); letter-spacing: -.03em; line-height: 1; } .an-sb { display: flex; flex-direction: column; gap: 2px; } .an-sb b { font-size: calc(18px * var(--fz)); font-weight: var(--w-medium); } .an-nd { flex: 1 1 100%; font-size: var(--fs-hint); color: var(--amber-ink); background: var(--amber-soft); border-radius: 12px; padding: 8px 12px; } .an-src { margin: 4px 0 0; } .an-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; } .an-acts .card { display: flex; flex-direction: column; gap: 6px; } .an-go { margin-top: auto; font-size: calc(13px * var(--fz)); font-weight: var(--w-strong); color: var(--teal-ink); } /* полосы, доли, мелкие числа */ .an-bars { display: flex; flex-direction: column; gap: 8px; } .an-br { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(64px, auto); gap: 10px; align-items: center; font-size: calc(13.5px * var(--fz)); } .an-br b { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .an-br .t, .an-hb .t { height: 12px; border-radius: 6px; background: var(--fill); overflow: hidden; display: block; } .an-br .t span, .an-hb .t span { display: block; height: 100%; border-radius: 6px; background: var(--an-ok); } .an-br .t span.warn, .an-hb .t span.warn { background: var(--an-warn); } .an-br .t span.bad, .an-hb .t span.bad { background: var(--an-bad); } .an-br .t span.c-napr { background: #3e7cb1; } .an-br .t span.c-apteka { background: #6e5fb0; } .an-hb .t span.c-market, .an-br .t span.c-market { background: var(--an-ok); } .an-hb { display: grid; grid-template-columns: minmax(60px, 1fr) 70px; gap: 8px; align-items: center; } .an-hb b { text-align: right; } .an-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; } .an-mini > div { background: var(--bg); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .an-mini b { font-size: 20px; font-weight: var(--w-medium); } .an-stack { display: flex; height: 34px; border-radius: 11px; overflow: hidden; gap: 3px; } .an-stack i { display: block; min-width: 3px; } .an-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; margin-top: 12px; } .an-lg > div { display: flex; gap: 8px; font-size: calc(13px * var(--fz)); } .an-lg > div > span { display: flex; flex-direction: column; } .an-lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 4px; } .an-g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px; align-items: start; } .an-fc { margin: 10px 0 0; line-height: 17px; } .an-sub { margin: 16px 0 8px; font-size: calc(11px * var(--fz)); font-weight: var(--w-text); letter-spacing: .08em; text-transform: uppercase; color: var(--an-muted); } .an-note { font-size: calc(15px * var(--fz)); line-height: 22px; } /* воронка */ .an-fn { display: flex; flex-direction: column; gap: 5px; } .an-fr { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .an-fb { min-height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; box-sizing: border-box; color: #fff; min-width: 90px; } .an-fb span { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .an-fd { margin-left: 194px; font-size: calc(12px * var(--fz)); color: var(--an-muted); padding: 0 0 3px 14px; border-left: 2px dashed var(--line); } /* тепловая карта удержания */ .an-hmw { overflow-x: auto; } .an-hm { display: grid; grid-template-columns: 110px repeat(12, minmax(34px, 1fr)); gap: 3px; font-size: calc(11px * var(--fz)); min-width: 620px; } .an-hm > span { text-align: center; } .an-hmm { text-align: left !important; font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); display: flex; align-items: center; } .an-hc { height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--an-ok) calc(var(--a) * 100%), transparent); color: var(--ink); } /* круг семьи */ .an-wheel { background: color-mix(in srgb, #d9667a 7%, var(--paper)); border-radius: 24px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 18px; align-items: center; box-shadow: 0 0 0 1px var(--line); } .an-wc { display: flex; flex-direction: column; gap: 12px; } .an-wc .card { display: flex; flex-direction: column; gap: 4px; } .an-weak { box-shadow: 0 0 0 2px var(--an-bad) !important; } .an-weak b { font-size: calc(18px * var(--fz)); line-height: 24px; } .an-weak .btn { align-self: flex-start; margin-top: 6px; } .an-xl { font-size: 28px; font-weight: var(--w-strong); } .an-krug { width: 100%; height: auto; display: block; } .an-krug text { font-family: var(--font); } .an-krug .arc { fill: none; stroke: var(--an-ok); stroke-width: 4; stroke-linecap: round; } .an-krug .arc.weak { stroke: var(--an-bad); stroke-width: 2; stroke-dasharray: 5 6; } .an-krug .arc.fut { stroke: #b7b3aa; stroke-width: 2.5; stroke-dasharray: 3 6; } .an-krug .node { fill: var(--paper); stroke: var(--an-ok); stroke-width: 2.5; } .an-krug .node.weak { stroke: var(--an-bad); stroke-width: 3; } .an-krug .node.fut { stroke: #b7b3aa; stroke-dasharray: 4 4; } .an-krug .node.goal { fill: var(--an-deep); stroke: var(--an-deep); } .an-krug .v { font-size: calc(17px * var(--fz)); font-weight: var(--w-medium); text-anchor: middle; fill: var(--ink); } .an-krug .v.inv { fill: #fff; } .an-krug .n { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); fill: var(--ink); } .an-krug .s { font-size: calc(11.5px * var(--fz)); fill: var(--an-muted); } .an-krug .c { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); text-anchor: middle; fill: var(--an-muted); } .an-list { display: flex; flex-direction: column; } .an-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; } .an-li > span { display: flex; flex-direction: column; } /* таблицы */ .an-tw { overflow-x: auto; } .an .table td.an-bad, .an-bad { color: var(--rose-ink); font-weight: var(--w-medium); } .an-good { color: var(--teal-ink); font-weight: var(--w-medium); } .an-tag { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); border-radius: 6px; padding: 1px 6px; background: var(--amber-soft); color: var(--amber-ink); } .an-lane { display: block; position: relative; height: 22px; min-width: 150px; border-radius: 11px; background: linear-gradient(to right, var(--fill) 0, var(--fill) var(--lo), var(--teal-soft) var(--lo), var(--teal-soft) var(--hi), var(--fill) var(--hi)); } .an-lane i { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 7px; margin-left: -7px; background: var(--an-ok); box-shadow: 0 0 0 3px var(--paper); } .an-lane i.off { background: var(--an-warn); } .an-lane b { position: absolute; top: 2px; margin-left: 12px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } /* карта направлений */ .an-map { width: 100%; height: auto; display: block; } .an-map text { font-family: var(--font); } .an-map .gl { stroke: var(--line); stroke-width: 1; } .an-map .md { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; stroke-dasharray: 4 5; } .an-map .ax { font-size: calc(11px * var(--fz)); fill: var(--an-muted); } .an-map .ax.b { font-weight: var(--w-medium); } .an-map .q { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); fill: #9a968d; letter-spacing: .02em; } .an-map .q.bad { fill: var(--an-bad); } .an-map .dot { cursor: pointer; } .an-map .dot circle { opacity: .85; } .an-map .dot:hover circle { opacity: 1; } .an-map .lb { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); fill: var(--ink); } .an-map .ls { font-size: calc(11.5px * var(--fz)); fill: var(--an-muted); } /* нормы и план обследований */ .an-nr .an-nsrc { flex: 1 1 100%; } .bp { display: flex; flex-direction: column; gap: 12px; } .bp-r .row { align-items: center; flex-wrap: wrap; gap: 8px; } .bp-n { flex: 1 1 260px; } .bp-s { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } @media (max-width: 760px) { .an-verdict { font-size: 19px; line-height: 26px; } .an-hv b { font-size: 26px; } .an-wheel { grid-template-columns: 1fr; } .an-fr { grid-template-columns: 110px minmax(0, 1fr); } .an-fd { margin-left: 124px; } .an-big b { font-size: 40px; } } /* ввод для «Аналитики» (10.10.2026): оценка визита на стойке, семья в карточке */ .nps { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; } .nps-b { gap: 4px; flex-wrap: wrap; margin-top: 6px; } .nps-b .chip { min-width: 34px; justify-content: center; } .nps-t { width: 100%; margin-top: 6px; } /* ======== Главная директора, 14.10.2026 (макет «Ormin: новый вид программы») ======== js/home.js (шапка, «Требует внимания» главврача), js/pult.js (пульт), js/diagramma.js (линия, столбики), js/menu.js (полоса разделов на телефоне). Строится на токенах брендбука в начале файла; цвета — только переменными (тёмная тема — их же). Движение — короткое и выключается системной настройкой (внизу блока). */ :root { --on-navy: #ffffff; --pult-up: color-mix(in srgb, var(--mint) 40%, var(--paper)); } /* Шапка: приветствие вместо «Главная» (заголовок остаётся для чтеца), строка дня. */ .home-top { align-items: flex-end; } .home-hi { font: var(--w-medium) var(--h1-fs)/1.2 var(--head); letter-spacing: -.01em; color: var(--ink); } .home-top .top-t p { font-size: calc(15px * var(--fz)); color: var(--muted); white-space: normal; } .home-top .top-t p b { color: var(--ink); } .home-top .tools { align-items: center; gap: 10px; } .home-rf { min-height: 34px; font-size: calc(13.5px * var(--fz)); color: var(--muted); } .home-rf:hover { color: var(--teal-ink); } /* Период — одной кнопкой в белой рамке: «‹ Октябрь 2026 · 1–14 к 1–14 сен ▾ ›». */ .pult-per { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); } .pult-per .chip { margin: 0; height: 32px; min-height: 32px; background: transparent; font-size: calc(14px * var(--fz)); } .pult-per .chip:not(.on):hover { background: var(--fill); } .pult-pl { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 0 8px; } .pult-pk { font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); } .pult-arr { min-width: 28px; justify-content: center; padding: 0 6px; color: var(--muted); } .pult-arr:disabled { opacity: .35; } .pult-pm { gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; } .pult-pm input, .pult-pm select { width: auto; margin-left: 6px; } /* Плитки: сетка сама встаёт 5 → 4 → 2 → 1 по ширине окна. */ .pult-k, .pult-sk-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; } .pult-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; transition: box-shadow .2s ease; } .pult-t[role=button] { cursor: pointer; } .pult-t[role=button]:hover { box-shadow: var(--shadow), var(--shadow-lift); } .pult-tl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .pult-tvr { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; } .pult-tv { font: var(--w-medium) 27px/1.2 var(--head); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); } .pult-tv.minus { color: var(--rose); } /* Метка сравнения: лучше — мята, хуже — служебный красный, без изменений — серая. */ .pult-dl { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--fill); color: var(--ink); } .pult-dl.up { background: var(--pult-up); color: var(--ink); } .pult-dl.dn { background: var(--rose-soft); color: var(--rose-ink); } .pult-ts { font-size: calc(12.5px * var(--fz)); line-height: 1.35; color: var(--muted); } .pult-early { margin: 6px 0 0; align-self: flex-start; } .pult-t .dg-spark, .pult-t .dg-split, .pult-t .pult-lb { margin-top: auto; } .pult-t > .pult-ts { margin-bottom: 8px; } .pult-lb { height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; } .pult-lb i { display: block; height: 100%; background: var(--teal); border-radius: 5px; } .dg-split i.in { background: var(--teal); } /* Линия-«молния»: бирюзой, прошлый месяц — серым пунктиром, последняя точка — оранжевая. */ .dg-spark { position: relative; height: 34px; } .dg-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dg-spark polyline { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .dg-spark polyline.pv { stroke: var(--muted); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 3 3; } .dg-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; } .dg-hit { position: absolute; inset: -4px 0; display: flex; } .dg-hit span { flex: 1; border-radius: 4px; } .dg-hit span:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); } /* Две колонки: «Требует внимания» и «Финансы» с «Деньгами сейчас». */ /* ======== «Финансы» директора, 22.10.2026 (замечание №14; js/finansy.js; макет makety-2026-10-22/zhurnal-finansy.html) ======== Три равные колонки, ряды одной высоты: плитки-отчёты; «Что с деньгами» на две колонки и «Деньги сейчас» на одну; три карточки внизу. Цвета – переменными (тёмная тема берёт свои). Ниже 1000 px – одна колонка. */ .main:has(> #body > .fz-g) { max-width: 1640px; } /* Карточка – по высоте содержимого, без своей прокрутки (31.10.2026, №57, заказчик: «у этих модулей появились ползунки, и это дико неудобно»): раньше сводка шла «во весь экран, как Касса» – оболочка на высоту окна, «Что с деньгами» и «Деньги сейчас» листались внутри, последняя строка обрезалась. Теперь листается страница; в «Что с деньгами» – главные строки (`FIN_ROWS`) и «ещё N». */ .fz-date { color: var(--muted); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); white-space: nowrap; margin-right: 6px; } .fz-date .s { display: none; } @media (max-width: 1599px) { .fz-date .f { display: none; } .fz-date .s { display: inline; } } .fz-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .fz-g .link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .fz-g .link:hover { text-decoration: underline; } .fz-g .link.mut { color: var(--muted); font-weight: var(--w-text); } .fz-lbl { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4px 18px; margin: 2px 2px -6px; flex-wrap: wrap; } .fz-lbl h2 { margin: 0; font: var(--w-medium) calc(16px * var(--fz))/1.2 var(--head); } .fz-lbl .muted { font-size: calc(13.5px * var(--fz)); } .fz-lbl .r { margin-left: auto; display: flex; gap: 18px; } .fz-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 12px; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s; min-width: 0; } .fz-tile:hover { box-shadow: var(--shadow), var(--shadow-lift); transform: translateY(-1px); } .fz-tile .tl { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); } .fz-tile .tl .pult-dl { margin-left: auto; } .fz-big { font: var(--w-medium) calc(30px * var(--fz))/1.1 var(--head); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); } .fz-big small { font-size: .55em; margin-left: 3px; } .fz-big.minus { color: var(--rose-ink); } .fz-tile .cmp { color: var(--muted); font-size: calc(13px * var(--fz)); min-height: 2.8em; } .fz-tile .cmp b { color: var(--ink); } .fz-tile .chart { flex: none; height: clamp(60px, 8.6vh, 100px); display: flex; flex-direction: column; justify-content: center; margin-top: 6px; } .fz-tile .chart .dg-spark { height: 100%; } .fz-tile .legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: calc(12.5px * var(--fz)); color: var(--muted); margin: 8px 0 10px; min-height: 1.3em; } .fz-tile .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; } .fz-tile .legend i.pv { background: var(--muted); opacity: .55; } .fz-tile .legend b { color: var(--ink); margin-left: 4px; } .fz-tile .foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-2); margin-top: auto; padding-top: 9px; font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); color: var(--teal-ink); } .fz-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; font-size: calc(13px * var(--fz)); color: var(--muted); } .fz-flow .fr { display: contents; } .fz-flow .fr b { color: var(--ink); white-space: nowrap; text-align: right; } .fz-flow .fr > span:first-child { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fz-flow .tr { height: 14px; border-radius: 7px; background: var(--fill); overflow: hidden; } .fz-flow .tr span { display: block; height: 100%; border-radius: 7px; } .fz-blk { display: flex; flex-direction: column; padding: 14px 8px 8px; min-height: 0; min-width: 0; } .fz-blk .hd { display: flex; align-items: baseline; gap: 10px; padding: 0 12px 6px; } .fz-blk .hd h3 { margin: 0; font: var(--w-medium) calc(17.5px * var(--fz))/1.2 var(--head); } .fz-blk .hd h3 .c { color: var(--muted); font-family: var(--font); font-weight: var(--w-medium); font-size: .85em; margin-left: 6px; } .fz-blk .hd .r { margin-left: auto; font-weight: var(--w-medium); color: var(--muted); font-size: calc(14px * var(--fz)); white-space: nowrap; } .fz-blk .hd .r b { color: var(--ink); font-size: calc(15px * var(--fz)); } .fz-prob { grid-column: span 2; } .fz-gl { padding: 8px 12px 2px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; } .fz-ln { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 150px 32px; gap: 14px; align-items: center; min-height: 60px; padding: 8px 12px; border-radius: 12px; text-align: left; border: 0; background: none; width: 100%; font: inherit; color: inherit; } .fz-ln + .fz-ln { box-shadow: 0 -1px 0 var(--line-2); } .fz-ln:hover { background: var(--bg); box-shadow: none; } .fz-ln:hover + .fz-ln { box-shadow: none; } .fz-ln > .t { min-width: 0; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } .fz-ln > .t b { display: block; font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); line-height: 1.25; } .fz-ln > .t span { display: block; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.3; margin-top: 2px; } .fz-ln .num { font-weight: var(--w-strong); white-space: nowrap; font-size: calc(15px * var(--fz)); text-align: right; } .fz-ln .num.minus { color: var(--rose-ink); } .fz-ln .num.zero { color: var(--muted-2); } .fz-ln .act { justify-self: end; border: 0; background: none; padding: 0; font: inherit; font-weight: var(--w-medium); white-space: nowrap; color: var(--ink); font-size: calc(14px * var(--fz)); cursor: pointer; } .fz-ln:hover .act, .fz-ln .act:hover { color: var(--teal-ink); } .fz-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-med); } .fz-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fz-ic.fin { background: var(--c-fin); } .fz-ic.pac { background: var(--c-pac); } .fz-ic.skl { background: var(--c-skl); } .fz-ic.med { background: var(--c-med); } .fz-ic.red { background: var(--rose-soft); } .fz-ic.red svg { stroke: var(--rose-ink); } .fz-done { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); display: grid; place-items: center; color: var(--muted-2); padding: 0; cursor: pointer; } .fz-done svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .fz-done:hover { border-color: var(--teal); color: var(--teal-ink); background: var(--teal-10); } .fz-now .fz-ln { cursor: pointer; grid-template-columns: 34px minmax(0, 1fr) auto 14px; grid-template-areas: "ic tt num go" "ic sb sb sb"; row-gap: 1px; column-gap: 14px; } .fz-now .fz-ln .fz-ic { grid-area: ic; } .fz-now .fz-ln .tt { grid-area: tt; font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); line-height: 1.25; text-align: left; } .fz-now .fz-ln .num { grid-area: num; } .fz-now .fz-ln .go { grid-area: go; color: var(--muted-2); font-size: 20px; line-height: 1; } .fz-now .fz-ln .sb { grid-area: sb; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.3; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fz-now .fz-ln .sb .st { display: inline-flex; align-items: center; gap: 6px; } .fz-now .fz-ln .sb .st i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mint); } .fz-now .fz-ln .sb .st.old { color: var(--amber); font-weight: var(--w-medium); } .fz-now .fz-ln .sb .st.old i { background: var(--orange); } .fz-foot2 { margin: auto 4px 0; padding: 11px 12px; border-radius: 12px; background: var(--bg); font-size: calc(13.5px * var(--fz)); color: var(--muted); } .fz-foot2 b { color: var(--ink); } .fz-foot2 b.minus { color: var(--rose-ink); } .fz-calm { padding: 24px 12px; color: var(--muted); } .fz-more { padding: 6px 12px 4px; } .fz-sec { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 14px; align-items: center; padding: 14px 18px; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s; min-width: 0; } .fz-sec:hover { box-shadow: var(--shadow), var(--shadow-lift); } .fz-sec .tx > b { display: block; font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); } .fz-sec .tx { min-width: 0; } .fz-sec .tx > span { display: block; color: var(--muted); font-size: calc(13px * var(--fz)); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fz-sec .tx > span.warn { color: var(--amber); font-weight: var(--w-medium); } .fz-sec .go { color: var(--muted-2); font-size: 20px; } @media (max-height: 820px) { .fz-tile { padding: 12px 16px 10px; gap: 2px; } .fz-big { font-size: calc(26px * var(--fz)); } .fz-tile .cmp { min-height: 1.4em; } .fz-g { gap: 12px; } .fz-tile .cmp { margin-bottom: 4px; } .fz-tile .chart { height: 58px; margin-top: 4px; } .fz-tile .legend { margin: 4px 0 6px; } .fz-tile .foot { padding-top: 5px; } .fz-flow { row-gap: 5px; } .fz-flow .tr { height: 11px; } .fz-ln { min-height: 52px; padding: 6px 12px; } .fz-blk { padding-top: 10px; } .fz-blk .hd { padding-bottom: 2px; } .fz-now .fz-ln { min-height: 42px; padding: 2px 12px; row-gap: 0; } .fz-now .fz-ln .tt { font-size: calc(14.5px * var(--fz)); } .fz-foot2 { padding: 6px 12px; margin-bottom: 2px; } .fz-gl { padding-top: 4px; } .fz-sec { padding: 8px 16px; } } @media (max-width: 1400px) { .fz-ln { column-gap: 12px; grid-template-columns: 34px minmax(0, 1fr) auto 140px 32px; } .fz-ln .act { font-size: calc(13px * var(--fz)); } } @media (max-width: 1000px) { .fz-g { grid-template-columns: minmax(0, 1fr); } .fz-prob { grid-column: auto; } .fz-lbl .r { margin-left: 0; } } @media (max-width: 560px) { .fz-ln { grid-template-columns: 34px minmax(0, 1fr) 32px; grid-template-areas: "ic t dn" "ic num act"; row-gap: 2px; } .fz-ln > .fz-ic { grid-area: ic; } .fz-ln > .t { grid-area: t; } .fz-ln > .fz-done { grid-area: dn; } .fz-ln > .num { grid-area: num; text-align: left; } .fz-ln > .act { grid-area: act; justify-self: start; } .fz-now .fz-ln { grid-template-columns: 34px minmax(0, 1fr) auto 14px; grid-template-areas: "ic tt num go" "ic sb sb sb"; } } /* ======== «Журнал», 22.10.2026 (замечание №15; js/zhurnal.js; макет makety-2026-10-22/zhurnal-finansy.html) ======== Слева – отбор и список событий по дням, справа – «Кто сколько сделал» и «Важное» либо деталь события. Во весь экран, как «Касса»: список и правая панель листаются внутри, страница – нет. Строка: время · кто · значок · «Глагол · Имя» · деталь · «›»; в узком списке (< 780 px) имя уходит в подпись, при выбранном сотруднике его колонки нет. Блок «Журнал · сегодня» для «Главной» – `.zh-hj` (js/zhurnal.js `zhurnalBlok`). */ @media (min-width: 700px) { .app.zh-wide { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); } .app.zh-wide > .main { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; max-width: 1640px; padding: 16px 24px 18px; } .app.zh-wide > .main > .top { flex: none; margin: 0; } .app.zh-wide > .main > .nav-row { flex: none; } .app.zh-wide > .main > #body { flex: 1; min-height: 0; display: flex; flex-direction: column; } } .zh-per { display: inline-flex; align-items: stretch; height: 42px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); } .zh-per button { border: 0; background: none; padding: 0 12px; font: inherit; font-weight: var(--w-medium); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 12px; cursor: pointer; } .zh-per button:hover { background: var(--fill); } .zh-per .ar { width: 38px; justify-content: center; padding: 0; color: var(--muted); font-size: 20px; } .zh-per .lab { font-size: calc(14.5px * var(--fz)); } .zh-per .lab svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zh-per .ar[disabled] { opacity: .3; cursor: default; } .zh-per .ar[disabled]:hover { background: none; } .zh-jr { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 430px); gap: 16px; } .zh-jr .link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .zh-jr .link:hover { text-decoration: underline; } .zh-jl { display: flex; flex-direction: column; min-height: 0; min-width: 0; container-type: inline-size; container-name: zhjl; padding: 0; } .zh-jt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2); } .zh-find { flex: 1 1 220px; max-width: 420px; min-width: 160px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--fill); cursor: text; } .zh-find:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); } .zh-find svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .zh-find input { flex: 1; min-width: 0; width: auto; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; font-size: calc(14px * var(--fz)); } .zh-find input:focus-visible { outline: 0; } .zh-find .x { border: 0; background: none; color: var(--muted); font-size: calc(18px * var(--fz)); padding: 0 2px; line-height: 1; cursor: pointer; } .zh-pick { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; border-radius: 12px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); white-space: nowrap; color: var(--ink); cursor: pointer; } .zh-pick:hover { background: var(--fill); } .zh-pick.on { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .zh-pick .zh-av { width: 24px; height: 24px; font-size: max(11px, calc(10px * var(--fz))); } .zh-pick .x { margin-left: 2px; color: var(--muted); font-size: calc(17px * var(--fz)); line-height: 1; } .zh-pick svg.i { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zh-chips { display: flex; flex-wrap: wrap; gap: 6px; } .zh-chip { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 17px; border: 0; background: var(--fill); font: inherit; font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); white-space: nowrap; color: var(--ink); cursor: pointer; } .zh-chip:hover { background: var(--navy-10); } .zh-chip em { font-style: normal; color: var(--muted); font-weight: var(--w-text); } .zh-chip.on { background: var(--navy); color: #fff; } .zh-chip.on em { color: rgba(255, 255, 255, .72); } .zh-chip.imp i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } .zh-chip[disabled] { opacity: .45; cursor: default; } .zh-feed { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: var(--navy-20) transparent; } .zh-dh { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 12px 12px 6px; background: var(--paper); } .zh-dh b { font: var(--w-medium) calc(15.5px * var(--fz))/1.2 var(--head); } .zh-dh span { color: var(--muted); font-size: calc(13.5px * var(--fz)); } .zh-dh .n { margin-left: auto; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); } .zh-er { display: grid; grid-template-columns: 50px minmax(0, 190px) 34px minmax(0, 1fr) minmax(96px, 172px) 14px; column-gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 7px 10px; border: 0; background: none; text-align: left; border-radius: 12px; position: relative; font: inherit; color: inherit; cursor: pointer; } .zh-er + .zh-er { box-shadow: 0 -1px 0 var(--line-2); } .zh-er:hover { background: var(--bg); box-shadow: none; } .zh-er:hover + .zh-er { box-shadow: none; } .zh-er.sel { background: var(--teal-10); box-shadow: inset 0 0 0 1.5px var(--teal); } .zh-er.sel + .zh-er { box-shadow: none; } .zh-er .tm { font-weight: var(--w-text); font-size: calc(14.5px * var(--fz)); } .zh-er .who { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: calc(14px * var(--fz)); color: var(--muted); font-weight: var(--w-text); } .zh-er .who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-er .who .ns { display: none; } .zh-jl.one .zh-er { grid-template-columns: 50px 34px minmax(0, 1fr) minmax(96px, 172px) 14px; } .zh-jl.one .zh-er .who { display: none; } .zh-jl.one .zh-er .what .by { display: none !important; } .zh-er .what { min-width: 0; } .zh-er .what > span { display: block; } .zh-er .what .l1 { font-size: calc(15px * var(--fz)); line-height: 1.3; } .zh-er .what .l1 b { font-weight: var(--w-strong); } .zh-er .what .by { display: none; color: var(--ink); font-weight: var(--w-medium); } .zh-er .what .l2 { color: var(--muted); font-size: var(--fs-hint); line-height: 1.3; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-er .rt { text-align: right; font-weight: var(--w-medium); white-space: nowrap; font-size: calc(14.5px * var(--fz)); overflow: hidden; text-overflow: ellipsis; } .zh-er .rt.mn { color: var(--muted); font-weight: var(--w-medium); } .zh-er .rt s { color: var(--muted-2); font-weight: var(--w-text); } .zh-er .go { color: var(--muted-2); font-size: 20px; line-height: 1; } .zh-er.imp::before, .zh-hr.imp::before { content: ""; position: absolute; left: 1px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--orange); } .zh-mark { background: var(--amber-soft); color: inherit; border-radius: 3px; } @container zhjl (max-width: 780px) { .zh-er { grid-template-columns: 46px 30px minmax(0, 1fr) minmax(90px, 150px) 12px; column-gap: 10px; } .zh-er > .zh-ic { display: none; } .zh-er .who .nm { display: none; } .zh-er .what .by { display: inline; } .zh-er .rt { font-size: calc(14px * var(--fz)); } .zh-jl.one .zh-er { grid-template-columns: 46px 34px minmax(0, 1fr) minmax(90px, 156px) 12px; } .zh-jl.one .zh-er > .zh-ic { display: grid; } } .zh-empty { padding: 40px 12px; text-align: center; color: var(--muted); } .zh-more { display: block; margin: 8px auto 4px; border: 0; border-radius: 12px; background: var(--fill); padding: 9px 16px; font: inherit; font-weight: var(--w-medium); cursor: pointer; color: var(--ink); } .zh-more:hover { background: var(--navy-10); } .zh-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-med); } .zh-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zh-ic.fin { background: var(--c-fin); } .zh-ic.pac { background: var(--c-pac); } .zh-ic.skl { background: var(--c-skl); } .zh-ic.med { background: var(--c-med); } .zh-ic.red { background: var(--rose-soft); } .zh-ic.red svg { stroke: var(--rose-ink); } .zh-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font: var(--w-strong) calc(11.5px * var(--fz))/1 var(--head); color: var(--ink); background: var(--c-fin); } .zh-av.a1 { background: var(--c-pac); } .zh-av.a2 { background: var(--navy-10); } .zh-av.a3 { background: var(--c-skl); } .zh-av.a4 { background: var(--amber-soft); } .zh-av.big { width: 40px; height: 40px; font-size: calc(13px * var(--fz)); } .zh-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 16px 18px; } .zh-side .sl { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 6px; } .zh-side .sl:first-child { margin-top: 0; } .zh-ppl button { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 6px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; } .zh-ppl button:hover { background: var(--bg); } .zh-ppl button.on { background: var(--teal-10); } .zh-ppl .c { min-width: 0; } .zh-ppl .nm { display: block; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-ppl .rl { color: var(--muted); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); } .zh-ppl .br { display: block; height: 6px; border-radius: 3px; background: var(--fill); margin-top: 4px; overflow: hidden; } .zh-ppl .br span { display: block; height: 100%; background: var(--teal); border-radius: 3px; } .zh-ppl .k { font-weight: var(--w-medium); } .zh-impl button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; } .zh-impl button:hover { background: var(--bg); } .zh-impl b { display: block; font-size: calc(14px * var(--fz)); } .zh-impl .tx { min-width: 0; } .zh-impl .tx > span { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); } .zh-impl .v { font-weight: var(--w-medium); white-space: nowrap; } .zh-hint { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: var(--bg); color: var(--muted); font-size: var(--fs-hint); } .zh-dt-h { display: flex; align-items: flex-start; gap: 12px; } .zh-dt-h .t { flex: 1; min-width: 0; } .zh-dt-h .t b { display: block; font: var(--w-medium) calc(18px * var(--fz))/1.2 var(--head); } .zh-dt-h .t span { color: var(--muted); font-size: calc(13px * var(--fz)); } .zh-dt-h .x { border: 0; background: var(--fill); width: 32px; height: 32px; border-radius: 50%; font-size: calc(18px * var(--fz)); color: var(--muted); flex: none; cursor: pointer; } .zh-dt-h .x:hover { background: var(--navy-10); } .zh-dt-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg); } .zh-dt-who b { display: block; font-size: calc(14.5px * var(--fz)); } .zh-dt-who div span { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); } .zh-dt-obj { margin-top: 12px; font-size: calc(14.5px * var(--fz)); } .zh-dt-obj b { font-weight: var(--w-text); } .zh-chg { margin-top: 2px; font-size: calc(14.5px * var(--fz)); } .zh-chg .cr { padding: 8px 0; border-top: 1px solid var(--line-2); } .zh-chg .cr:first-child { border-top: 0; padding-top: 2px; } .zh-chg .f { color: var(--muted); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); margin-bottom: 2px; } .zh-chg .v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; } .zh-chg .v > span { white-space: normal; } .zh-chg .was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); } .zh-chg .was.none { text-decoration: none; color: var(--muted-2); } .zh-chg .now { font-weight: var(--w-medium); } .zh-chg .ar { color: var(--muted-2); } .zh-keep { color: var(--muted); font-size: calc(13px * var(--fz)); margin-top: 8px; } .zh-why { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amber-soft); font-size: calc(13.5px * var(--fz)); } .zh-why.ok { background: var(--bg); } .zh-tline { position: relative; margin: 4px 0 0; padding-left: 16px; } .zh-tline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .zh-tline div { position: relative; padding: 4px 0; font-size: calc(13.5px * var(--fz)); } .zh-tline div::before { content: ""; position: absolute; left: -16px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--navy-20); } .zh-tline div.cur::before { background: var(--teal); box-shadow: none; } .zh-tline div.cur { font-weight: var(--w-medium); } .zh-tline time { color: var(--muted); margin-right: 8px; font-weight: var(--w-medium); } .zh-dt-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; } .zh-pop { position: fixed; z-index: 160; min-width: 260px; max-height: 70vh; overflow-y: auto; background: var(--paper); border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 45, 66, .16); padding: 8px; } .zh-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; font-weight: var(--w-medium); color: var(--ink); cursor: pointer; } .zh-pop button:hover { background: var(--bg); } .zh-pop button.on { background: var(--teal-10); font-weight: var(--w-medium); } .zh-pop button em { margin-left: auto; font-style: normal; color: var(--muted); font-weight: var(--w-text); } .zh-pop button.btn { width: auto; } .zh-pop .zh-av { width: 24px; height: 24px; font-size: max(11px, calc(10px * var(--fz))); } .zh-pop .pl { padding: 6px 10px 4px; font-size: calc(12px * var(--fz)); color: var(--muted-2); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: .04em; } .zh-pop .rng { display: flex; gap: 8px; align-items: center; padding: 6px 10px 8px; color: var(--muted); } .zh-pop .rng input { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 0; background: var(--fill); padding: 0 8px; font: inherit; font-weight: var(--w-medium); color: var(--ink); } /* Блок «Журнал · сегодня» (для «Главной») */ .zh-hj { display: flex; flex-direction: column; padding: 14px 8px 8px; min-width: 0; } .zh-hj .zh-hd { display: flex; align-items: baseline; gap: 10px; padding: 0 12px 8px; } .zh-hj .zh-hd h3 { margin: 0; font: var(--w-medium) calc(17.5px * var(--fz))/1.2 var(--head); } .zh-hj .zh-hd .r { margin-left: auto; } .zh-hj .link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .zh-hj .link:hover { text-decoration: underline; } .zh-cnt { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .zh-cnt .zh-chip { height: 30px; font-size: calc(13px * var(--fz)); } .zh-hr { display: grid; grid-template-columns: 46px 26px minmax(0, 1fr) auto 12px; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border: 0; background: none; width: 100%; text-align: left; border-radius: 10px; position: relative; font: inherit; color: inherit; cursor: pointer; } .zh-hr + .zh-hr { box-shadow: 0 -1px 0 var(--line-2); } .zh-hr:hover { background: var(--bg); box-shadow: none; } .zh-hr:hover + .zh-hr { box-shadow: none; } .zh-hr .tm { font-weight: var(--w-text); font-size: calc(14px * var(--fz)); } .zh-hr .zh-av { width: 26px; height: 26px; font-size: max(11px, calc(10px * var(--fz))); } .zh-hr .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14.5px * var(--fz)); } .zh-hr .tx b { font-weight: var(--w-medium); } .zh-hr .rt { font-weight: var(--w-medium); white-space: nowrap; font-size: calc(14px * var(--fz)); } .zh-hr .rt.mn { color: var(--muted); font-weight: var(--w-medium); } .zh-hr .go { color: var(--muted-2); font-size: calc(18px * var(--fz)); } .zh-hr.imp::before { top: 10px; bottom: 10px; } .zh-hj .zh-empty { padding: 22px 12px; } @media (max-height: 820px) { .zh-er { min-height: 50px; padding: 5px 10px; } } @media (max-width: 1000px) { .app.zh-wide { height: auto; overflow: visible; } .app.zh-wide > .main { overflow: visible; } .zh-jr { grid-template-columns: minmax(0, 1fr); } .zh-jl { max-height: 80vh; } .zh-side { min-height: 240px; } } .pult-sig .hd, .pult-fin .hd, .pult-money .hd, .pult-napr .hd, .home-att .hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 4px; } .pult-sig .hd h3, .pult-fin .hd h3, .pult-money .hd h3, .pult-napr .hd h3, .home-att .hd h3, .pult-napr > h3 { margin: 0; font: var(--w-medium) calc(17px * var(--fz))/1.3 var(--head); letter-spacing: -.01em; color: var(--ink); text-transform: none; } /* «Очередь сейчас» на Главной директора (21.10.2026, js/pult-ochered.js) */ .pult-och { margin-top: 10px; padding: 12px 14px; } .pult-och .hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 4px; } .pult-och .hd h3 { margin: 0; } .pult-och .hd > .linkish { margin-left: auto; min-height: 32px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); } .po-r { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(130px, .8fr) minmax(0, 2.4fr); gap: 4px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: calc(13.5px * var(--fz)); } .po-r:first-of-type { border-top: 0; } .po-n { font-weight: var(--w-medium); white-space: nowrap; } .po-r.late .po-n { color: var(--amber); } .po-k { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .po-more { margin-top: 2px; font-size: calc(13px * var(--fz)); } @media (max-width: 760px) { .po-r { grid-template-columns: 1fr; gap: 1px; } } .pult-n { margin-left: 4px; font: var(--w-medium) calc(15px * var(--fz)) var(--font); color: var(--muted); } .pult-sig .hd > .linkish:last-child, .pult-fin .hd > .linkish:last-child, .pult-money .hd > .linkish:last-child, .pult-napr .hd > .linkish:last-child { margin-left: auto; } .pult-sig .hd .linkish, .pult-fin .linkish, .pult-money .hd .linkish, .pult-napr .linkish { min-height: 32px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); } .pult-sig .linkish:hover, .pult-fin .linkish:hover, .pult-money .linkish:hover, .pult-napr .linkish:hover { color: var(--teal-ink); } /* «Требует внимания»: группы «Сейчас / Сегодня / На этой неделе», у строки — кружок раздела. */ .pult-all-tel { display: none; } .pult-grp { padding: 12px 0 4px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pult-s { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); } .pult-grp + .pult-s { border-top: 0; } .pult-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-med); } .pult-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pult-ic.fin { background: var(--c-fin); } .pult-ic.skl { background: var(--c-skl); } .pult-ic.pac { background: var(--c-pac); } .pult-ic.med { background: var(--c-med); } .pult-ic.urg { background: var(--rose-soft); } .pult-ic.urg svg { stroke: var(--rose); } .pult-x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .pult-x b { font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); line-height: 1.3; } .pult-x .small { font-size: var(--fs-hint); line-height: 1.35; color: var(--muted); } .pult-x:hover b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); } .pult-sum { flex: none; font-size: calc(14.5px * var(--fz)); font-weight: var(--w-strong); white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-s .pult-go { flex: none; min-height: 32px; padding: 0 2px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-strong); color: var(--ink); white-space: nowrap; } .pult-s .pult-go::after { content: "\00a0›"; } .pult-s .pult-go:hover { color: var(--teal-ink); } .pult-ok { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; } .pult-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pult-ok:hover { border-color: var(--teal); } .pult-ok:hover svg { stroke: var(--teal-ink); } .pult-sf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--line-2); } .pult-sf .chip.pult-more { margin: 0; height: auto; min-height: 32px; white-space: normal; text-align: left; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); max-width: 100%; background: var(--fill); } .pult-sf .pult-dn { color: var(--muted); } .pult-calm { padding: 10px 0; text-align: left; } /* «Финансы <месяца>»: четыре числа и столбики по дням. */ .pult-f4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 10px; } .pult-fv { display: flex; flex-direction: column; min-width: 0; } .pult-fl { font-size: calc(12.5px * var(--fz)); color: var(--muted); } .pult-fn { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; } .pult-fn b { font-size: calc(18px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-fs { font-size: calc(12px * var(--fz)); line-height: 1.35; color: var(--muted); } .pult-fb { position: relative; display: flex; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--fill); } .pult-fb i { display: block; height: 100%; } .pult-fb i.a { background: var(--teal); border-radius: 3px 0 0 3px; } .pult-fb i.b { background: repeating-linear-gradient(135deg, var(--teal) 0 3px, transparent 3px 6px); opacity: .6; } .pult-fb s { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); } .pult-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .pult-ch > b { color: var(--ink); } .pult-ch > .linkish { margin-left: auto; min-height: 28px; } .pult-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .pult-lg > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .pult-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .pult-lg i.in { background: var(--teal); } .pult-lg i.avg { width: 12px; height: 0; border-radius: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); } .pult-fin .dg-cols { margin-top: 10px; } .pult-fin .dg-plot { height: 160px; margin-left: 0; gap: 4px; border-bottom: 1px solid var(--line); } .pult-fin .dg-grid { display: none; } .dg-plot { position: relative; display: flex; align-items: stretch; } .dg-avg { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); z-index: 1; pointer-events: none; } .dg-c { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; } .dg-c i { display: block; width: 100%; max-width: 26px; min-height: 1px; background: var(--teal); border-radius: 6px 6px 2px 2px; } .dg-c.today i { background: repeating-linear-gradient(135deg, var(--teal) 0 5px, color-mix(in srgb, var(--teal) 50%, var(--paper)) 5px 10px); } .dg-c.best i { background: var(--ink); } .dg-c.best.today i { background: repeating-linear-gradient(135deg, var(--ink) 0 5px, color-mix(in srgb, var(--ink) 55%, var(--paper)) 5px 10px); } .dg-c.go { cursor: pointer; } .dg-c:hover i { filter: brightness(.9); } .dg-c > b { position: absolute; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); white-space: nowrap; z-index: 2; } .dg-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); font-style: normal; } .dg-grid span { position: absolute; right: calc(100% + 6px); top: -8px; font-size: calc(11px * var(--fz)); color: var(--muted); white-space: nowrap; } .dg-pv { position: absolute; left: -1px; right: -1px; height: 0; border-top: 2px solid var(--ink); opacity: .45; text-decoration: none; pointer-events: none; } /* Подсказка столбика — тёмной плашкой над ним («Пн, 12 окт · 13 000 с. · 61 приём»). */ .dg-tip { display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--navy); color: var(--on-navy); font-size: calc(12px * var(--fz)); line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-lift); pointer-events: none; } .dg-tip.l { left: 0; transform: none; } .dg-tip.r { left: auto; right: 0; transform: none; } .dg-tip b { font-weight: var(--w-medium); } .dg-tip .pv { opacity: .75; } .dg-c:hover .dg-tip { display: flex; } .dg-x { display: flex; gap: 4px; padding-top: 6px; } .pult-fin .dg-x { margin-left: 0; } .dg-x span { flex: 1; min-width: 0; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; } .dg-x span.on { color: var(--ink); font-weight: var(--w-medium); } .pult-df { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; font-size: calc(13.5px * var(--fz)); } .pult-df > span { display: flex; flex-direction: column; min-width: 0; } .pult-df b { font-variant-numeric: tabular-nums; white-space: nowrap; } /* «Деньги сейчас»: счета одной рамкой с разделителями, долги — плитками-ссылками. */ .pult-money .pult-mt { min-height: 28px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .pult-acc { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; } .pult-ab { display: flex; flex-direction: column; min-width: 0; padding: 10px 14px; box-shadow: -1px 0 0 var(--line); } .pult-ab .small { font-size: var(--fs-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pult-ab b { font-size: calc(18px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-dol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .pult-dg { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--bg); font: inherit; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); text-align: left; cursor: pointer; } .pult-dg b { white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-dg:not(:disabled):hover { background: var(--fill); } .pult-dg:disabled { cursor: default; opacity: 1; } /* «Направления»: строка — название, полоса доли, сумма, процент; две колонки. */ .pult-nl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); column-gap: 40px; margin-top: 4px; } .pult-nr { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 96px 48px; gap: 12px; align-items: center; width: 100%; min-height: 34px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: calc(14px * var(--fz)); color: inherit; text-align: left; } button.pult-nr { cursor: pointer; } button.pult-nr:hover .pult-nn { text-decoration: underline; } .pult-nn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pult-nb { display: block; height: 8px; } .pult-nb i { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: var(--teal); } .pult-nr.rest .pult-nb i { background: var(--navy-20); } .pult-nr > b, .pult-nr > .muted { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pult-one-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } .pult-one-line > .linkish { margin-left: auto; } /* Загрузка: серые места тех же размеров. */ .pult-wait .pult-t { min-height: calc(160px + (var(--fz) - 1) * 93px); } /* 21.10.2026: плитка крупнее вместе с текстом (--fz), серое место = готовая плитка; 31.10.2026 (№54): подписи плиток короче на строку – 180 → 160 px, иначе экран прыгает */ .pult-wait .pult-t .pult-sk { margin: 5px 0; } /* «Требует внимания» главврача — тем же видом строки. */ .home-att .home-i { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); cursor: pointer; font: inherit; color: inherit; } .home-att .home-i:first-of-type { border-top: 0; } .home-att .home-i:hover b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); } .home-att .home-i > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; } .home-att .home-i b { font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); line-height: 1.3; } .home-att .home-i .small { font-size: var(--fs-hint); } /* Плитки главврача и менеджера — тем же шрифтом числа и подписи. */ .pv-k .pv-tl, .mg-tl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } .mg-tv { font: var(--w-medium) 27px/1.2 var(--head); letter-spacing: -.01em; } .pv-k .card b { font: var(--w-medium) 27px/1.2 var(--head); } /* Полоса разделов внизу — только телефон (ниже). */ .tabbar { display: none; } /* Движение выключено системной настройкой — без докручивания, перестроения и мерцания. */ @media (prefers-reduced-motion: reduce) { .pult *, .pult-t, .pult-sk { transition: none !important; animation: none !important; } } @media (max-width: 699px) { /* Шапка: на Главной (у руководства с полосой разделов) без «Назад», приветствие помельче, даты в строке нет, переключатель — во всю ширину, «Обновить» — нет (Telefon.dc; числа и так берутся заново раз в минуту). */ .app.tb-home #view .top .nav-back, .home-top .home-rf { display: none; } .home-hi { font-size: 23px; } .home-date { display: none; } .home-top .top-t p { font-size: calc(13.5px * var(--fz)); } .home-top .tools { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; } /* Плитки два на два: Получено, Приёмы, Средний чек, Загрузка; число и метка. */ .pult-k, .pult-sk-k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pult-sk-k .card:nth-child(5) { display: none; } .pult-t-profit { display: none !important; } .pult-t { padding: 10px 12px; border-radius: 14px; } .pult-t .pult-ts, .pult-t .dg-spark, .pult-t .dg-split, .pult-t .pult-lb { display: none; } .pult-tvr { flex-direction: column; align-items: flex-start; gap: 4px; } .pult-tv { font-size: 21px; } .pult-tl { font-size: calc(12px * var(--fz)); } .pult-dl { height: 20px; padding: 0 8px; font-size: calc(11.5px * var(--fz)); } /* «Требует внимания»: первые три и «Все ›»; без групп и кнопок строки. */ .pult-fin, .pult-napr, .pult-por, .pult-sf, .pult-s .pult-go, .pult-s .pult-ok, .pult-grp { display: none !important; } .pult-all-tel { display: inline-flex; margin-left: auto; } .pult-sig:not(.all) .pult-s.p4 { display: none; } .pult-s { gap: 10px; padding: 10px 0; } .pult-ic { width: 30px; height: 30px; } .pult-ic svg { width: 15px; height: 15px; } .pult-x b { font-size: calc(14px * var(--fz)); } .pult-x .small { font-size: var(--fs-hint); } /* «Деньги сейчас» коротко: всего и счета одной строкой. */ .pult-money .hd .pult-acc-go, .pult-dol { display: none; } .pult-money .hd .pult-mt { margin-left: auto; font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); } .pult-acc { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; box-shadow: none; border-radius: 0; } .pult-ab { flex-direction: row; gap: 4px; padding: 0; box-shadow: none; font-size: calc(13px * var(--fz)); color: var(--muted); } .pult-ab b, .pult-ab .small { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } /* Полоса разделов внизу (руководство): Главная · Финансы · Аналитика · Отчёты · Ещё. */ .tabbar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 4px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); } .tabbar button { flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 0; border: 0; background: transparent; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tabbar button.on { color: var(--ink); } .tabbar button.on svg { stroke: var(--teal-ink); stroke-width: 2; } .app.has-tb .main { padding-bottom: 96px; } .app.has-tb .nav-burger { display: none !important; } } /* ======== Касса и Зарплата, 14.10.2026 (макет «Ormin: новый вид программы») ======== js/kassa.js, js/zarplata.js. Метка — точка и слово на подложке; числа дня — одной карточкой с разделителями; строка таблицы — кружок с буквами, имя, второстепенное серым под ним, суммы справа столбиком. Цвета — только переменными: тёмная тема берёт свои значения из :root[data-theme="dark"]. */ :root { --on-navy: #ffffff; } /* текст на тёмно-синей метке и кружке — в обеих темах белый */ .kas-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font: var(--w-medium) calc(12px * var(--fz))/1 var(--font); letter-spacing: 0; white-space: nowrap; background: var(--fill); color: var(--ink); vertical-align: middle; } .kas-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; } .top-t:has(> .kas-pill) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; } .top-t:has(> .kas-pill) > p { grid-column: 1 / -1; } .top-t > .kas-pill { justify-self: start; } .kas-st { height: 20px; } .kas-st.st-wait { background: var(--bg); } .kas-st.st-in { background: var(--teal-10); } .kas-st.st-in .kas-dot, .kas-st.st-room .kas-dot { background: var(--teal); } .kas-st.st-room { background: var(--navy); color: var(--on-navy); } .kas-st.st-pay { background: var(--amber-soft); } .kas-st.st-pay .kas-dot { background: var(--orange); } .kas-st.st-done { background: var(--ok-soft); } .kas-st.st-done .kas-dot { background: var(--ok); } .kas-st.st-off .kas-dot { background: var(--rose); } /* Кружок с буквами: цвет по имени из меток разделов, выбранный — тёмно-синий. */ .av-b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font: var(--w-medium) calc(12px * var(--fz))/1 var(--font); color: var(--ink); background: var(--c-fin); } .av-b.av-1 { background: var(--c-pac); } .av-b.av-2 { background: var(--c-skl); } .av-b.av-3 { background: var(--c-med); } .av-b.on { background: var(--navy); color: var(--on-navy); } .av-b.big { width: 42px; height: 42px; font-size: calc(13px * var(--fz)); } /* Строка действий: главная — одна, поиск растягивается, «Фильтр» — за ним. */ .kas-find { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--tap); padding: 0 12px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: text; } .kas-find:focus-within { box-shadow: inset 0 0 0 2px var(--teal); } .kas-find svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .kas-find input { flex: 1; min-width: 0; width: auto; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font-size: calc(14.5px * var(--fz)); } .kas-find input:focus-visible { outline: 0; } /* ======== «Касса» администратора, 22.10.2026 (замечание №8; js/kassa-ekran.js; макет makety-2026-10-22/kassa.html) ======== Две части во всю высоту окна: «Ждут оплаты» слева, «Смена» справа. Длинные списки прокручиваются внутри блоков, страница не листается; ползунка вбок нет (столбец кнопки подгоняет `kasFitAct`). Окно ниже ~700 px – «Смена» прокручивается целиком. Цвета – переменными: тёмная тема берёт свои значения из :root[data-theme="dark"]. */ :root { --ks-qr: #7f9fae; } #kas-pay { display: inline-flex; align-items: center; gap: 8px; } #kas-pay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .kas-st.st-plan { background: var(--teal-10); } .kas-st.st-plan .kas-dot { background: var(--teal-ink); } @media (min-width: 700px) { .app.kas-wide { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); } .app.kas-wide > .main { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; max-width: none; padding: 16px 24px 18px; } .app.kas-wide > .main > .top { flex: none; margin: 0; } .app.kas-wide > .main > #body { flex: 1; min-height: 0; display: flex; flex-direction: column; } } .ks-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 470px); gap: 16px; } .ks-grid .link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .ks-grid .link:hover { text-decoration: underline; } .ks-grid .link.mut { color: var(--muted); font-weight: var(--w-text); } .ks-grid .card { padding: 0; min-width: 0; } .ks-grid .card h3 { margin: 0; font: var(--w-medium) calc(17.5px * var(--fz))/1.2 var(--head); } /* --- Ждут оплаты --- */ .ks-wait { display: flex; flex-direction: column; min-height: 0; container-type: inline-size; container-name: ks-wait; } .ks-wait-h { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 14px 16px 10px 20px; } .ks-meta { color: var(--muted); font-size: calc(14px * var(--fz)); white-space: nowrap; } .ks-meta b { color: var(--ink); font-weight: var(--w-text); } .ks-meta .ov { color: var(--amber); font-weight: var(--w-text); } .ks-tools { margin-left: auto; display: flex; gap: 8px; flex: 1 1 240px; justify-content: flex-end; min-width: 0; } .ks-find { flex: 1 1 220px; max-width: 380px; min-width: 140px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--fill); cursor: text; } .ks-find:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); } .ks-find svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .ks-find input { flex: 1; min-width: 0; width: auto; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; font-size: calc(14px * var(--fz)); } .ks-find input:focus-visible { outline: 0; } .ks-find .x { border: 0; background: none; color: var(--muted); font-size: calc(18px * var(--fz)); padding: 0 2px; line-height: 1; cursor: pointer; } .ks-wait .btn.flt { display: inline-flex; align-items: center; height: 40px; gap: 7px; padding: 0 14px; } .ks-wait .btn.flt svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-wait .btn.flt.on { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .ks-wait .btn.flt .cnt { min-width: 20px; height: 20px; border-radius: 10px; background: var(--teal); color: var(--on-teal); font-size: calc(12px * var(--fz)); display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .ks-flt-bar { padding: 0 16px 0 20px; } .ks-flt-bar .row { margin-bottom: 6px !important; } .ks-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: var(--navy-20) transparent; } /* Таблица – строками-сеткой: сумма и кнопка всегда своими столбиками, ползунка вбок нет. */ .ks-t, .ks-t > tbody { display: block; width: 100%; border: 0; } .ks-t td { display: block; padding: 0; border: 0; background: none; min-width: 0; } .ks-rw { display: grid; grid-template-columns: minmax(0, 1fr) 100px var(--act-w, 124px); grid-template-areas: "pac sum act"; column-gap: 12px; align-items: center; padding: 10px 10px 10px 8px; border-top: 1px solid var(--line-2); transition: background .12s; } .ks-rw:hover { background: var(--bg); } .ks-rw.hot { background: color-mix(in srgb, var(--amber-soft) 38%, var(--paper)); } .ks-rw.hot:hover { background: color-mix(in srgb, var(--amber-soft) 60%, var(--paper)); } .ks-rw .ks-pac { grid-area: pac; } .ks-rw .ks-sum { grid-area: sum; } .ks-rw .ks-act { grid-area: act; } .ks-rw .ks-srvw, .ks-rw .ks-docw { display: none; } .ks-gh { display: block; position: sticky; top: 0; z-index: 2; background: var(--paper); } .ks-gh > td { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px 8px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .ks-gh:first-child > td { padding-top: 2px; } .ks-gh .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .ks-gh .s { margin-left: auto; font-weight: var(--w-medium); white-space: nowrap; padding-right: 2px; } .ks-gh.g1 > td { color: var(--amber); } .ks-gh.g1 .dot { background: var(--orange); } .ks-gh.g2 .dot { background: var(--teal); } .ks-gh.g3 .dot { background: var(--rose); } .ks-pac { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .ks-pac .av-b { margin-top: 2px; width: 38px; height: 38px; } .ks-pac-t { min-width: 0; flex: 1; } .ks-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; } .ks-nm { font-weight: var(--w-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; } .ks-past { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--rose); line-height: 1.35; } .ks-past.ovr { color: var(--amber); } .ks-srv { margin-top: 3px; font-size: calc(13px * var(--fz)); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; } .ks-srv .sv { color: var(--ink); } .ks-srv .nb { white-space: nowrap; } /* Широкий блок (монитор 1920): услуги и врач – своими столбиками. */ @container ks-wait (min-width: 880px) { .ks-rw { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .62fr) 110px max(140px, var(--act-w, 0px)); grid-template-areas: "pac srv doc sum act"; } .ks-rw .ks-srv { display: none; } .ks-rw .ks-srvw { display: block; grid-area: srv; font-size: calc(13.5px * var(--fz)); line-height: 1.35; overflow-wrap: anywhere; } .ks-rw .ks-docw { display: block; grid-area: doc; font-size: calc(13px * var(--fz)); color: var(--muted); overflow-wrap: anywhere; } } .ks-sum { text-align: right; white-space: nowrap; } .ks-sum b { font: var(--w-strong) calc(16px * var(--fz))/1.2 var(--font); } .ks-sum .dsc { display: block; color: var(--muted); font-size: calc(12px * var(--fz)); margin-top: 2px; } .ks-sum .ovs { color: var(--amber); font-weight: var(--w-strong); } .ks-act { text-align: right; white-space: nowrap; } .ks-act .btn { min-width: 110px; margin: 0; } .ks-list .ks-act .btn[data-fit] { width: 100%; } .ks-act .ks-kept { display: block; white-space: normal; text-align: right; } .ks-act .btn.ks-long { white-space: normal; width: 100%; height: auto; min-height: 30px; padding: 4px 10px; line-height: 1.2; } .btn.soft.sm.kas-take { height: 36px; border-radius: 10px; font-weight: var(--w-strong); } .ks-pusto { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; } .ks-pusto .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .ks-pusto .ic svg { width: 30px; height: 30px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ks-pusto h4 { margin: 0; font: var(--w-medium) calc(18px * var(--fz))/1.2 var(--head); } .ks-pusto p { margin: 0; color: var(--muted); max-width: 420px; } .ks-nofind { padding: 18px 12px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } /* --- Смена --- */ .ks-shift { display: flex; flex-direction: column; min-height: 0; padding: 14px 18px !important; } .ks-shift > * { flex: none; } .ks-sh-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ks-who { display: flex; gap: 10px; align-items: baseline; color: var(--muted); font-size: calc(13px * var(--fz)); margin-top: 2px; } .ks-who .link { margin-left: auto; font-size: calc(13px * var(--fz)); } .ks-auto { color: var(--muted); font-size: calc(13px * var(--fz)); margin-top: 2px; } .ks-drugie { margin-top: 4px; } .ks-drugie .linkish { display: block; min-height: 0; padding: 0; text-align: left; color: var(--muted); } .ks-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--ink); } .ks-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .ks-pill.ok { background: var(--ok-soft); } .ks-pill.ok i { background: var(--ok); } .ks-pill.warn { background: var(--amber-soft); } .ks-pill.warn i { background: var(--orange); } .ks-note { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amber-soft) 70%, var(--paper)); font-size: calc(13.5px * var(--fz)); line-height: 1.4; } .ks-note b { font-weight: var(--w-text); } .ks-note .btn { margin-top: 10px; } .ks-note.calm { background: var(--bg); } .ks-note.done { background: var(--ok-soft); } .ks-note.done.bad { background: var(--amber-soft); } .ks-note-b { margin-top: 10px; display: flex; gap: 14px; align-items: center; } .ks-note-b .btn { margin: 0; } .ks-note .btn.amber { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--orange); color: var(--ink); } .ks-note .btn.amber:hover { background: color-mix(in srgb, var(--amber-soft) 70%, var(--orange)); } .ks-note .btn.wide, .ks-sh-f .btn.wide { width: 100%; } .ks-cash { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: var(--teal-10); } .ks-cash .lbl, .ks-blk .lbl, .ks-acc .lbl { font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); } .ks-cash .big { font: var(--w-medium) 34px/1.1 var(--head); letter-spacing: -.015em; margin: 2px 0 4px; white-space: nowrap; } .ks-cash .big b { font-weight: var(--w-medium); } .ks-cash .big small { font-size: 24px; } .ks-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .ks-eq b { color: var(--ink); font-weight: var(--w-medium); white-space: nowrap; } .ks-eq .op { color: var(--muted); font-weight: var(--w-medium); } .ks-outd { margin-top: 3px; font-size: calc(12.5px * var(--fz)); color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 10px; } .ks-outd b { color: var(--ink); font-weight: var(--w-medium); } .ks-acc { margin-top: 8px; padding: 9px 16px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); } .ks-blk { margin-top: 14px; } .ks-acc .hd, .ks-blk .hd { display: flex; align-items: baseline; gap: 8px; } .ks-acc .hd b, .ks-blk .hd b { margin-left: auto; font: var(--w-medium) calc(16px * var(--fz))/1.2 var(--font); white-space: nowrap; } .ks-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--fill); margin: 8px 0; gap: 2px; } .ks-bar span { display: block; height: 100%; min-width: 4px; transition: flex-grow .4s; } .ks-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 14px; font-size: calc(13px * var(--fz)); } .ks-legend div { display: flex; align-items: center; gap: 7px; min-width: 0; } .ks-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .ks-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-legend b { margin-left: auto; font-weight: var(--w-medium); white-space: nowrap; } .ks-legend .z { color: var(--muted); } .ks-legend .z b { font-weight: var(--w-medium); } .ks-feed-h { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; } .ks-feed-h .c { color: var(--muted); font-size: calc(13px * var(--fz)); } .ks-feed { flex: 1 1 auto !important; min-height: 60px; overflow-y: auto; overflow-x: hidden; margin: 6px -8px 0; padding: 0 8px; scrollbar-width: thin; scrollbar-color: var(--navy-20) transparent; } .ks-lenta, .ks-lenta > tbody { display: block; width: 100%; border: 0; } .ks-lenta td { display: block; padding: 0; border: 0; min-width: 0; } .ks-mv { display: grid; grid-template-columns: 42px 10px minmax(0, 1fr) auto auto; column-gap: 8px; align-items: baseline; padding: 7px 6px; border-radius: 10px; position: relative; } .ks-mv + .ks-mv { box-shadow: 0 -1px 0 var(--line-2); } .ks-mv:hover, .ks-mv:focus-within { background: var(--bg); } .ks-mv .t { color: var(--muted); font-size: calc(12.5px * var(--fz)); padding-top: 2px; } .ks-mv .d i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); align-self: center; } .ks-mv.out .d i { background: var(--orange); } .ks-mv.ann .d i { background: var(--rose); } .ks-mv.sys .d i { background: var(--navy-20); } .ks-mv .k { min-width: 0; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(14px * var(--fz)); } .ks-mv .w { color: var(--muted); font-size: calc(12.5px * var(--fz)); white-space: nowrap; } .ks-mv .a { font-weight: var(--w-medium); white-space: nowrap; text-align: right; font-size: calc(14px * var(--fz)); } .ks-mv.ann .a { color: var(--muted); font-weight: var(--w-medium); } .ks-mv.sys .a, .ks-mv.sys .k { color: var(--muted); font-weight: var(--w-medium); } .ks-mv .sub { grid-column: 3 / -1; } .ks-mv .warn { color: var(--rose); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); line-height: 1.35; } .ks-mv .dela { grid-column: 3 / -1; display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .ks-mv .dela .linkish { min-height: 0; padding: 0; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .ks-mv .dela .linkish:hover { color: var(--teal-ink); } /* Дела движения (квитанция, аннулировать, ордер, исправить) – у строки под мышью и в фокусе клавиатуры; без мыши (планшет, телефон) – всегда. */ @media (hover: hover) { .ks-mv .dela { max-height: 0; overflow: hidden; opacity: 0; transition: opacity .12s; } .ks-mv:hover .dela, .ks-mv:focus-within .dela { max-height: 60px; opacity: 1; margin-top: 3px; } } .ks-more { padding: 8px 6px 4px 56px; color: var(--muted); font-size: calc(12.5px * var(--fz)); } .ks-sh-f { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); } .ks-lenta td.empty { padding: 8px 0; color: var(--muted); } /* Окно «Закрыть смену»: что получится, пока человек вписывает число. */ .ks-verdict { display: none; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); } .ks-verdict.ok { display: block; background: var(--ok-soft); color: var(--ok); } .ks-verdict.bad { display: block; background: var(--amber-soft); color: var(--amber); } /* Невысокое окно: блок «Смена» прокручивается целиком, лента – в полный рост. */ @media (max-height: 700px) { .ks-shift { overflow-y: auto; scrollbar-width: thin; } .ks-feed { flex: none !important; overflow: visible; } } /* --- Окно «Принять оплату» (оплата в два касания) --- */ .modal.ks-pay { width: min(560px, 100%); max-height: calc(100dvh - 24px); padding-bottom: 0; } .ks-pay .ks-m-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ks-pay .ks-m-h .av-b { width: 44px; height: 44px; font-size: calc(14px * var(--fz)); } .ks-pay .ks-m-t { min-width: 0; } .ks-pay .link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); white-space: nowrap; cursor: pointer; } .ks-pay .link:hover { text-decoration: underline; } .ks-pay .link.mut { color: var(--muted); font-weight: var(--w-text); } .ks-bill { border-radius: 14px; background: var(--bg); padding: 8px 14px 10px; } .ks-bill .bl { display: flex; gap: 12px; padding: 3px 0; font-size: calc(14px * var(--fz)); } .ks-bill .bl > span:first-child { min-width: 0; flex: 1; } .ks-bill .bl .dr { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .ks-bill .bl b { white-space: nowrap; font-weight: var(--w-medium); } .ks-bill .bl.minus b { color: var(--teal-ink); } .ks-bill .tot { display: flex; align-items: baseline; gap: 12px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); } .ks-bill .tot .lbl { font-size: calc(13px * var(--fz)); font-weight: var(--w-strong); color: var(--muted); } .ks-bill .tot b { margin-left: auto; font: var(--w-medium) 26px/1.1 var(--head); white-space: nowrap; } .ks-pay .op-also { margin-top: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 12px; } .ks-pay .op-also-l { display: flex; align-items: center; gap: 10px; padding: 3px 0; cursor: pointer; } .ks-sp { margin-top: 12px; } .ks-sp .lbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); } .ks-sp-r { margin-left: auto; display: inline-flex; gap: 14px; } .ks-pay [hidden] { display: none !important; } .ks-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; } .ks-seg button { min-height: var(--tap); padding: 4px 4px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); line-height: 1.2; overflow-wrap: break-word; word-break: normal; color: var(--ink); cursor: pointer; } .ks-seg button:hover { background: var(--bg); } .ks-seg button.on { background: var(--teal); box-shadow: none; color: var(--on-teal); } .ks-sumrow { margin-top: 8px; } .ks-pay .op-line { margin-top: 8px; } .ks-cashbox { margin-top: 12px; } .ks-cashbox > .lbl { font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); margin-bottom: 6px; } .ks-cashrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; } .ks-pay input.ks-big { width: 100%; height: var(--tap); padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: var(--w-medium) 22px/1 var(--head); outline: 0; margin: 0; } .ks-pay input.ks-big:focus { box-shadow: inset 0 0 0 2px var(--teal); } .ks-change { text-align: right; min-width: 130px; } .ks-change .lbl { display: block; font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); } .ks-change b { font: var(--w-medium) 24px/1.3 var(--head); white-space: nowrap; } .ks-change.bad b { color: var(--rose); font-size: calc(18px * var(--fz)); } .ks-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ks-chip { height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--fill); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); white-space: nowrap; color: var(--ink); cursor: pointer; } .ks-chip:hover { background: var(--navy-10); } .ks-chip.on { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); } .ks-pay #op-total { margin-top: 8px; } .ks-pay .ks-disc { margin-top: 12px; } .ks-pay .rk-field { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; } .ks-pay .rk-field > label { margin: 0; font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); } .ks-pay .rk-pick { display: flex; gap: 6px; flex-wrap: wrap; } .ks-pay .rk-b i { display: none; } .ks-pay .rk-note { flex-basis: 100%; } .ks-pay .pay-more-w { margin-top: 10px; } .ks-pay input.ks-big::-webkit-outer-spin-button, .ks-pay input.ks-big::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ks-pay input.ks-big { -moz-appearance: textfield; appearance: textfield; } /* Кнопка «Принять» всегда на виду: окно прокручивается, подвал прилипает. */ .ks-m-f { display: flex; gap: 10px; margin-top: 10px; position: sticky; bottom: 0; background: var(--paper); padding: 12px 0 20px; z-index: 1; } .ks-m-f .btn.teal { flex: 1; height: 50px; font-size: calc(16px * var(--fz)); border-radius: 14px; gap: 6px; } .ks-m-f .btn.teal b { font-weight: var(--w-strong); } .ks-m-f .btn.ghost { height: 50px; border-radius: 14px; } @media (max-height: 820px) { .ks-pay .ks-bill .bl .dr { display: none; } .ks-seg button { min-height: 40px; } .ks-pay input.ks-big { height: 40px; font-size: 20px; } .ks-chip { height: 30px; } .ks-pay .ks-m-h .av-b { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .ks-rw, .ks-bar span { transition: none; } } /* Телефон: две части друг под другом, страница листается; строка – карточкой. */ @media (max-width: 699px) { .ks-grid { display: flex; flex-direction: column; flex: none; } .ks-list { overflow: visible; } .ks-rw { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pac pac" "sum act"; row-gap: 6px; } .ks-rw .ks-sum { text-align: left; } .ks-tools { flex: 1 1 100%; margin-left: 0; } .ks-find { max-width: none; } .ks-feed { flex: none !important; overflow: visible; } .ks-shift { overflow: visible !important; } } /* Своё поле поиска «Зарплаты» – поле отбора, пока пустое, не показываем (то же правило, что `filterOneFind`, но без ожидания перерисовки). */ .top:has(~ #body .zp-find) input.flt-find:placeholder-shown { display: none; } /* Блоки «Финансов» врача (js/vrach-finansy.js): плитки, карточка с заголовком, строки, таблица. */ .rv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; } .rv-tiles > div { background: var(--teal-10); border-radius: 8px; padding: 8px 12px; } .rv-tiles > div.warn { background: var(--amber-soft); } .rv-tiles span { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); margin-bottom: 1px; } .rv-tiles b { font: var(--w-medium) calc(22px * var(--fz))/1.15 var(--head); color: var(--ink); } .rv-b { padding: 12px 14px; margin-top: 10px; } .rv-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .rv-h b { font: var(--w-medium) calc(15px * var(--fz))/1.3 var(--head); color: var(--ink); } .rv-h .muted { margin-left: auto; } .rv-li { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: calc(14px * var(--fz)); } .rv-li > span { color: var(--muted); } .rv-li b { font-weight: var(--w-medium); white-space: nowrap; } .rv-lt { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 7px; } .rv-tb { width: 100%; } .rv-tb th, .rv-tb td { padding: 7px 8px; } .rv-nb { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: calc(14px * var(--fz)); padding: 0 2px; } .rv-nb:hover, .rv-nb.on { color: var(--orange); } @media (max-width: 760px) { .rv-tb th, .rv-tb td { padding: 7px 5px; } } /* Расчёт с сотрудниками (21.10.2026, js/zarplata.js, js/raschet-vrachi.js): четыре числа, сужение, таблица со столбцами-разделами; страница человека – карточки разделов слева, сводка справа. Цвета – брендбук (макет: тёмная плитка «клиника должна», тёплая «осталось», оранжевый долг). */ .zp-k4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: 14px; } .zp-k { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .zp-k > b { font: var(--w-medium) calc(26px * var(--fz))/1.15 var(--head); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .zp-kl { font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); } .zp-kd { font-size: calc(12.5px * var(--fz)); color: var(--muted); } .zp-k.dark { background: var(--navy); color: #fff; box-shadow: none; } .zp-k.dark .zp-kl, .zp-k.dark .zp-kd { color: color-mix(in srgb, #fff 72%, var(--navy)); } .zp-k.warm { background: var(--amber-soft); box-shadow: none; } .zp-k.warm .zp-kl, .zp-k.warm .zp-kd { color: var(--amber); } .zp-bar { height: 6px; border-radius: 3px; background: var(--line-2); margin-top: 6px; overflow: hidden; } .zp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); } .zp-bar.full i { background: var(--mint); } .zp-part { margin-bottom: 12px; } .zp-tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .zp-seg { display: inline-flex; flex-wrap: wrap; background: var(--fill); border-radius: 12px; padding: 3px; font-size: calc(13.5px * var(--fz)); } .zp-seg-b { border: 0; background: none; border-radius: 9px; padding: 5px 12px; color: var(--muted); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .zp-seg-b.on { background: var(--paper); color: var(--ink); font-weight: var(--w-medium); box-shadow: var(--shadow); } .zp-seg-n { font-variant-numeric: tabular-nums; opacity: .8; } .zp-find { flex: 0 1 260px; height: 36px; margin-left: auto; } .zp-ok { background: var(--ok-soft); } .zp-prev { color: var(--amber); font-weight: var(--w-medium); } .zp-hint { margin: 8px 2px 0; } .zp-multi { margin-left: 6px; } .zp-range { display: inline-flex; align-items: center; gap: 6px; } .zp-range input[type=month] { width: 150px; margin: 0; height: var(--chip-h); } .btn.zp-close { background: var(--navy); color: #fff; border-color: var(--navy); } .btn.zp-close:hover { background: color-mix(in srgb, var(--navy) 88%, #fff); } .zp-st { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--muted); } .zp-st-ok { background: var(--ok-soft); color: var(--ok); } .zp-st-wait { background: var(--amber-soft); color: var(--amber); } .zp-st-chg { background: var(--rose-soft); color: var(--rose); } body:has(.zp-tbar) .kk-card { overflow-x: auto; } body:has(.zp-tbar) .kk-t td:first-child { min-width: 170px; } body:has(.zp-tbar) .kk-t tr.click:hover > td { background: var(--teal-10); } /* Страница человека: слева разделы карточками, справа сводка (макет «Расчёт: Валиева, сентябрь»). */ .zc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .zc-sp { flex: 1 1 0; } .zc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zc-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--teal-10); color: var(--teal-ink); border-radius: 12px; padding: 3px 6px 3px 11px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } .zc-chip:not(:has(.zc-x)) { padding-right: 11px; } .zc-x { border: 0; background: none; color: inherit; width: 22px; height: 22px; border-radius: 11px; font-size: calc(16px * var(--fz)); line-height: 1; cursor: pointer; } .zc-x:hover { background: color-mix(in srgb, var(--teal) 25%, transparent); } .zc-chip2 { display: inline-block; padding: 3px 11px; border-radius: 12px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--muted); } .zc-chip2.rv-ok, .zc-chip2.rv-paid { background: var(--ok-soft); color: var(--ok); } .zc-chip2.rv-wait, .zc-chip2.rv-part { background: var(--amber-soft); color: var(--amber); } .zc-chip2.rv-chg { background: var(--rose-soft); color: var(--rose); } .zc-g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; } .zc-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .zc-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; position: sticky; top: 12px; } .zc-sec { padding: 0; overflow: hidden; } .zc-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; } .zc-sh h2 { margin: 0; font: var(--w-medium) calc(18px * var(--fz))/1.25 var(--head); } .zc-ss { font: var(--w-medium) calc(18px * var(--fz))/1.25 var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; } .zc-sc { padding: 0 6px 8px; overflow-x: auto; } .zc-t { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--fz)); } .zc-t th { text-align: left; font-size: calc(12px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .zc-t td { padding: 8px 10px; border-top: 1px solid var(--line-2); vertical-align: top; } .zc-t thead + tbody tr:first-child td { border-top: 0; } .zc-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .zc-t .minus { color: var(--rose); } .zc-src { font-style: normal; font-size: calc(12px * var(--fz)); color: var(--muted); } .zc-g1 { cursor: pointer; } .zc-g1:hover td { background: var(--teal-10); } .zc-g1 td { font-weight: var(--w-medium); } .zc-g1 td:first-child { white-space: normal; } .zc-tw { display: inline-block; width: 14px; color: var(--teal-ink); } .zc-ln td { font-size: calc(13px * var(--fz)); background: color-mix(in srgb, var(--bg) 55%, var(--paper)); } .zc-ind { padding-left: 34px !important; } .zc-nbc { width: 30px; text-align: right; } .zc-nb { border: 0; background: none; color: var(--muted); cursor: pointer; width: 28px; height: 28px; border-radius: 8px; font-size: calc(15px * var(--fz)); opacity: .55; } .zc-nb:hover, .zc-nb.on { opacity: 1; background: var(--fill); color: var(--teal-ink); } .zc-ntr td { padding-top: 0; border-top: 0; background: var(--amber-soft); font-size: calc(13px * var(--fz)); } .zc-more { margin: 4px 12px 8px; } .zc-absent { padding: 4px 4px 0; } .zc-absent span + span::before { content: ""; } .zc-note { margin: 2px 4px; } .zc-sum { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow), var(--shadow-lift); } .zc-li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; font-size: calc(14px * var(--fz)); } .zc-li .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .zc-li a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--muted); } .zc-li a:hover { color: var(--teal-ink); } .zc-bold { font-weight: var(--w-medium); } .zc-out { color: var(--ok); } .zc-hr { border-top: 1px solid var(--line); margin: 6px 0; } .zc-left { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .zc-left > span { font-weight: var(--w-medium); } .zc-left > b { font: var(--w-medium) calc(30px * var(--fz))/1.1 var(--head); font-variant-numeric: tabular-nums; } .zc-pay { width: 100%; margin: 10px 0 0; } .zc-ver { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .zc-ver h3 { margin: 0; } .zc-nt, .zc-nt2 { color: var(--amber); font-weight: var(--w-medium); } .rv-chg-b ul { margin: 6px 0 0; padding-left: 18px; } .rv-nastr { max-width: 640px; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 1100px) { .zc-g { grid-template-columns: minmax(0, 1fr) 320px; } .zp-k > b { font-size: calc(22px * var(--fz)); } } @media (max-width: 699px) { /* Касса (js/kassa-ekran.js): метка – в шапке, как у «Зарплаты». */ .top:has(.top-t > .kas-pill) .top-l { flex: 1 1 100%; } .top-t:has(> .kas-pill) { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .top-t > .kas-pill { max-width: 100%; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.3; white-space: normal; } .kas-find { flex: 1 1 100%; } /* Расчёт с сотрудниками: числа – по два в ряд, сужение и поиск – на всю ширину, таблица листается вбок; страница человека – одной колонкой, сводка под разделами. */ .zp-k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zp-k { padding: 10px 12px; } .zp-k > b { font-size: calc(20px * var(--fz)); } .zp-find { flex: 1 1 100%; margin-left: 0; } .zp-seg { flex-wrap: wrap; max-width: 100%; } .zp-seg-b { padding: 5px 9px; } .zp-hint { display: none; } .zp-range { flex-wrap: wrap; } .zp-range input[type=month] { width: 140px; } .zc-g { grid-template-columns: minmax(0, 1fr); } .zc-side { position: static; } .zc-bar { gap: 6px; } .zc-sh { padding: 12px 12px 6px; } .zc-sc { padding: 0 2px 6px; } .zc-t td, .zc-t th { padding: 7px 6px; } .zc-pt th:nth-child(3), .zc-pt td:nth-child(3) { display: none; } .zc-left > b { font-size: calc(26px * var(--fz)); } } /* ======== Лаборатория доской, 14.10.2026 (макет «Ormin: новый вид программы») ======== «Лаборатория › Заказы» — пять колонок этапов на серой подложке, в колонке карточки заказов (js/lab2.js `renderLabDoska`). Общее: колонка `.lab-col`, карточка `.lab-k`, метка `.kb-pill`, переключатель вида `.kb-sw`. Цвета — только переменные брендбука (тёмная тема — их же). */ .kb-sw { display: inline-flex; align-items: center; background: var(--fill); border-radius: 12px; padding: 3px; gap: 0; max-width: 100%; } .kb-sw > button, .kb-sw .tiho-w > button { border: 0; background: transparent; color: var(--muted); padding: 0 12px; height: 32px; border-radius: 9px; font: var(--w-medium) calc(13.5px * var(--fz)) var(--font); cursor: pointer; white-space: nowrap; } .kb-sw > button.on, .kb-sw .tiho-w > button.on { background: var(--paper); color: var(--ink); font-weight: var(--w-medium); box-shadow: var(--shadow); } .kb-sw > button:focus-visible, .kb-sw .tiho-w > button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } /* Метка — строчным блоком, а не flex: текст «ждёт 18 мин» копируется и читается одной строкой. */ .kb-pill { display: inline-block; height: 20px; line-height: 20px; padding: 0 8px; border-radius: 10px; border: 0; flex: none; vertical-align: middle; font: var(--w-medium) calc(11.5px * var(--fz))/20px var(--font); white-space: nowrap; background: var(--fill); color: var(--ink); } .kb-pill .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; vertical-align: 1px; margin-right: 5px; background: currentColor; } .kb-pill.warn { background: var(--amber-soft); } .kb-pill.warn .dot { background: var(--orange); } .kb-pill.bad { background: var(--rose-soft); color: var(--rose); } .kb-pill.bad .dot { background: var(--rose); } .kb-pill.crit { background: var(--rose); color: var(--paper); } .kb-pill.pt { background: var(--teal-soft); } .kb-pill.ok { background: var(--ok-soft); } .kb-pill.ok .dot { background: var(--mint); } .kb-pill.soft { background: var(--teal-10); } /* Доска: колонки на серой подложке; шире экрана — листается в своей рамке. */ .lab-d { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .lab-d > .card { margin: 0; } .tools input.lab-q { width: 260px; height: var(--chip-h); min-height: 0; margin: 0; } /* №54: поиск доски не выше кнопок – шапка в одну строку (56 px) */ .lab-vb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .lab-b { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; min-width: 0; padding-bottom: 2px; } .lab-col { background: var(--fill); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lab-col-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); } .lab-col-n { margin-left: auto; font-size: calc(12px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .lab-col-w { font-size: calc(12px * var(--fz)); line-height: 16px; color: var(--muted); padding: 0 4px; } .lab-col-w.bad { color: var(--rose); font-weight: var(--w-medium); } .lab-col-e { font-size: calc(12.5px * var(--fz)); color: var(--muted); padding: 4px; } .lab-more { display: inline-block; align-self: flex-start; font-size: calc(13px * var(--fz)); padding: 4px; color: var(--ink); font-weight: var(--w-medium); text-decoration: none; } /* Карточка: пациент, откуда, анализы метками, этап полоской, низ — кто и когда. */ .lab-k { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .lab-k[role="button"] { cursor: pointer; } .lab-k[role="button"]:hover { box-shadow: var(--shadow-lift); } .lab-k:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .lab-k.crit { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 5%, var(--paper)); } .lab-k.done { opacity: .85; } .lab-k-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; } .lab-k-n { min-width: 0; } .lab-k-n > b { display: block; font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); line-height: 18px; overflow-wrap: break-word; } .lab-k-h > b { flex: none; font-size: calc(13px * var(--fz)); font-variant-numeric: tabular-nums; } .lab-k-id { font-size: calc(11.5px * var(--fz)); line-height: 16px; color: var(--muted); font-weight: var(--w-medium); overflow-wrap: break-word; margin-top: -4px; } .lab-k-kr { font-size: calc(12.5px * var(--fz)); line-height: 17px; } .lab-tgs { line-height: 0; font-size: 0; margin-bottom: -4px; } .lab-tg-c { font-size: 0; } .lab-tg { display: inline-block; font-size: calc(11.5px * var(--fz)); line-height: 16px; padding: 2px 7px; margin: 0 4px 4px 0; border-radius: 6px; background: var(--bg); font-weight: var(--w-medium); } .lab-seg { display: flex; gap: 3px; } .lab-seg i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .lab-seg i.on { background: var(--teal); } .lab-k-f { display: flex; align-items: baseline; gap: 6px; font-size: calc(12px * var(--fz)); line-height: 16px; color: var(--muted); } .lab-k-f > span { min-width: 0; overflow-wrap: break-word; } .lab-k-f > b { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--ink); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; } .lab-k-a, .lab-k-q { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: calc(12.5px * var(--fz)); } .lab-k .linkish { font-size: calc(12.5px * var(--fz)); padding: 0; } .lab-k .an-free { font-size: calc(12px * var(--fz)); } .lab-k-b .btn { height: 28px; min-height: 28px; padding: 0 10px; font-size: calc(12.5px * var(--fz)); } .tag.lab-q-t { margin: 0; padding: 2px 8px; font-weight: var(--w-medium); white-space: nowrap; } .tag.lab-q-t.good { background: var(--teal-soft); color: var(--teal-ink); } .tag.lab-q-t.bad { background: var(--rose-soft); color: var(--rose); } :root[data-theme="dark"] .tag.lab-q-t.bad { color: #ffc2bd; } .lab-q-b { padding: 0; text-decoration: none; } /* Найдено поиском — карточки одной подложкой. */ .lab-found { background: var(--fill); border-radius: 16px; padding: 10px; margin-bottom: 6px; } .lab-found-h { justify-content: space-between; align-items: center; margin-bottom: 8px; } .lab-found-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } /* По партнёрам / по врачам — дорожки: имя слева, этапы колонками. */ .lab-ln { grid-template-columns: minmax(110px, 150px) repeat(5, minmax(180px, 1fr)); gap: 8px; } .lab-ln > .lab-col-h { padding: 4px 8px 0; } .lab-ln-name { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; font-size: calc(13.5px * var(--fz)); position: sticky; left: 0; z-index: 1; background: var(--bg); } .lab-ln-name > span { font-size: calc(12px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); } .lab-cell { background: var(--fill); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 44px; min-width: 0; } /* Строка партнёров под доской. */ .lab-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; } .lab-pt { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: calc(14px * var(--fz)); margin: 0; } .lab-pt .kb-pill.lab-pt-n { height: 24px; min-height: 24px; line-height: 24px; cursor: pointer; font-size: calc(12.5px * var(--fz)); } .lab-pt-d { margin-left: auto; white-space: nowrap; } .lab-pt-b { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; } .lab-pt a.btn { text-decoration: none; display: inline-flex; align-items: center; } .pt { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .pt-note { margin: 0; } @media (max-width: 699px) { .tools input.lab-q { width: 100%; flex: 1 1 100%; } .lab-krit .pv-krit-b { width: 100%; } .lab-pt-b { margin-left: 0; } /* Колонки — бок о бок, листаются пальцем в своей рамке; страница не шире экрана. */ .lab-b { grid-template-columns: repeat(5, minmax(240px, 80vw)); scroll-snap-type: x proximity; } .lab-b > .lab-col { scroll-snap-align: start; } .lab-ln { grid-template-columns: 96px repeat(5, minmax(220px, 72vw)); } .lab-vb .kb-sw { flex-wrap: wrap; } .kb-sw > button, .kb-sw .tiho-w > button { height: 32px; padding: 0 10px; } .lab-pt-d { margin-left: 0; } /* Подпись шапки лаборатории («Среда, 14 октября · 10:30 · каждый заказ…») — переносом, а не многоточием. */ .top:has(#lab-q) .top-sub { white-space: normal; width: auto; flex: 1 1 100%; } .lab-pt .kb-pill.lab-pt-n { height: 32px; min-height: 32px; line-height: 32px; border-radius: 16px; } } /* Безопасность назначений (s70, js/rxbez.js): подсказки в окне назначения — списком, красное (нельзя, аллергия) и оранжевое (осторожно, повтор, «не сочетать»); экран «Настройки › Безопасность назначений». */ .rx-w:not(:empty) { margin: 4px 0 8px; } .rxb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .banner.rxb-h { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; } .banner.rxb-h > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; } .banner.rxb-h.alert > svg { color: var(--rose); } .banner.rxb-h.warn > svg { color: var(--amber); } .banner.rxb-h .small { color: var(--muted); margin-top: 2px; } .rxb-pod { display: block; margin: 4px 0 6px; } .rxb-korm { gap: 8px; align-items: center; margin: -4px 0 8px; } .rx-t tr.rx-bez td:first-child { box-shadow: inset 3px 0 0 var(--amber); padding-left: 8px; } /* схема назначения кнопками (js/naznacheniya-shemy.js) */ .rx-ch { gap: 0; align-items: center; margin-top: 4px; flex-wrap: wrap; } .rx-ch .chip { min-height: 28px; padding: 2px 9px; font-size: calc(12.5px * var(--fz)); margin: 0 4px 4px 0; } .rx-sch .chip { min-height: 28px; padding: 2px 10px; font-size: calc(12.5px * var(--fz)); } .rxs-row { margin: 8px 0; } .rxb-ban { display: flex; flex-direction: column; gap: 8px; } .rxb-find { margin: 0 0 10px; } .rxb-find input { width: 280px; max-width: 100%; } .rxb-tab td { vertical-align: top; } .tag.rxb-t { margin: 0; padding: 2px 8px; font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--ink); } .tag.rxb-t.bad { background: var(--rose-soft); color: var(--rose-ink); } .tag.rxb-t.warn { background: var(--amber-soft); color: var(--amber-ink); } .tag.rxb-t.ok { background: var(--teal-soft); color: var(--teal-ink); } .rxb-two { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .rxb-two > .card { flex: 1 1 380px; min-width: 0; } .rxb-nm, .rxb-pr { padding: 6px 0; border-top: 1px solid var(--line); } .rxb-nm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rxb-nm select { margin-left: auto; width: auto; } .rxb-pv { margin: 0 0 10px; } .rxe-ch { gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .rxe-avr { gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; } .rxe-avr select { flex: 0 0 40%; } .rxe-avr input { flex: 1 1 auto; min-width: 0; } /* Таблица «Безопасность назначений» – в окно 1366 (A7-23, старая №7: страница была шире на 119–177 px): узкие столбцы уже, состояние и «Утверждаю» – друг под другом; что всё же шире – листается в своей рамке. */ .rxb-tab td:nth-child(2) { min-width: 140px; } .rxb-tab td:nth-child(6) { min-width: 150px; } .rxb-tab td:nth-child(7) { max-width: 160px; } .rxb-tab td.rxb-st { white-space: normal; width: 1%; } .rxb-tab td.rxb-st .btn.sm { margin-top: 4px; } .rxb-tab th, .rxb-tab td { padding-left: 6px; padding-right: 6px; } .rxb-card .scroll { overflow-x: auto; } /* ======== Телефония, 14.10.2026 (макет «Ormin: телефония и подсказки безопасности»; js/telefoniya*.js) ======== */ /* Панель звонка — справа внизу над любым экраном, под окнами (окно — z-index 40). */ .tel-p { position: fixed; right: 16px; bottom: 16px; z-index: 35; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .tel-p > * { pointer-events: auto; } .tel-p:empty { display: none; } .tel-c { margin: 0; box-shadow: var(--shadow), var(--shadow-lift); } .tel-big { padding: 0; overflow: hidden; } .tel-h { display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; padding: 10px 16px; } .tel-h .tel-t { margin-left: auto; font-variant-numeric: tabular-nums; } .tel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; } .tel-h.ring .tel-dot { box-shadow: 0 0 0 4px rgba(39, 190, 182, .3); } .tel-dot.w { background: var(--orange); } .tel-b { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; } .tel-b h2 { margin: 0; font-size: 20px; } .tel-rows { display: flex; flex-direction: column; gap: 6px; } .tel-rows > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .tel-btns { gap: 8px; flex-wrap: wrap; } .tel-sm { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; } .tel-sh { gap: 8px; justify-content: space-between; align-items: center; flex-wrap: nowrap; } .tel-sh > b, .tel-sh > h3 { margin: 0; flex: 1; min-width: 0; } .tel-sh > .tel-dot { margin-right: 0; } .tag.tel-tn { background: var(--fill); color: var(--ink); } .tel-n .tag { white-space: nowrap; } .tel-r.tel-col > div:first-child { flex: none; } .tel-f input.tel-num, .tel-sub input.tel-num { width: 72px; flex: none; display: inline-block; } .tel-x { margin-left: 4px; } .tel-mr { justify-content: space-between; gap: 8px; flex-wrap: nowrap; } .tel-mr > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag.tel-tg { background: var(--teal-soft); color: var(--teal-ink); } .tag.tel-ta { background: var(--amber-soft); color: var(--amber); font-weight: var(--w-medium); } .tel-off b { color: var(--rose); } /* «Обзвон › Пропущенные». */ .tel-moi { margin: 0 0 8px; } .tel-kv { gap: 28px; margin-bottom: 12px; flex-wrap: wrap; } .tel-kv > div { display: flex; flex-direction: column; } .tel-kv b { font-family: var(--head); font-size: 26px; line-height: 1.1; } .tel-warn b { color: var(--amber); } .tel-pt { overflow-x: auto; } .tel-pt tr.tel-late { background: #fff8f1; } .tel-pt td .btn + .tiho-w { margin-left: 4px; } .tel-after h3 { margin: 0; } .tel-after .tel-btns { margin-top: 10px; } .tel-done summary { cursor: pointer; } .tel-rf { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; } .tel-rf select { width: auto; } /* «Настройки › Телефония»: строки «что — как» одной карточкой. */ .tel-n { max-width: 980px; } .tel-rows-c { padding: 6px 16px; } .tel-r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; } .tel-r:last-child { border-bottom: 0; } .tel-r > div:first-child { flex: 1 1 280px; min-width: 0; } .tel-r.tel-col { flex-direction: column; align-items: stretch; } .tel-r.tel-sub { padding-top: 0; } .tel-f { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 0; } .tel-f .row { gap: 6px; flex-wrap: nowrap; } .tel-f input { min-width: 0; } .tel-li { gap: 8px; align-items: center; } .tel-li b { white-space: nowrap; } .tel-ck { white-space: nowrap; margin-right: 10px; } .tel-snd { gap: 6px; flex-wrap: wrap; align-items: center; } .tag.tel-st { display: inline-flex; align-items: center; gap: 6px; } .tag.tel-st.ok, .tel-n .tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.tel-st.bad, .tel-n .tag.bad { background: var(--rose-soft); color: var(--rose); } .tag.tel-st.ok .tel-dot { background: var(--ok); } .tag.tel-st.bad .tel-dot { background: var(--rose); } .tag.tel-st:not(.ok):not(.bad) .tel-dot { background: var(--muted); } .tel-mt { overflow-x: auto; } .tel-mt input, .tel-mt select { width: auto; min-width: 0; } .tel-pre { white-space: pre-wrap; font-size: calc(12.5px * var(--fz)); background: var(--fill); border-radius: 10px; padding: 10px 12px; max-height: 50vh; overflow: auto; } /* «Аналитика › Звонки». */ .tel-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; } .tel-kpi .card { margin: 0; display: flex; flex-direction: column; gap: 2px; } .tel-kpi b { font-family: var(--head); font-size: 28px; line-height: 1.2; } .tel-g2 { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .tel-g2 > .card { flex: 1 1 380px; min-width: 0; margin: 0; overflow-x: auto; } .tel-g2 > .card + .card { flex: 1.5 1 520px; } .tel-hb { display: flex; align-items: flex-end; gap: 8px; height: 150px; border-bottom: 1px solid var(--line); padding: 0 4px; } .tel-hc { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; } .tel-hc i { display: block; width: 100%; background: var(--navy-20); border-radius: 6px 6px 0 0; } .tel-hc.bad i { background: var(--orange); } .tel-hc span { font-size: calc(11px * var(--fz)); color: var(--muted); order: -1; } .tel-hx { display: flex; gap: 8px; padding: 6px 4px 0; font-size: calc(12px * var(--fz)); color: var(--muted); } .tel-hx span { flex: 1; text-align: center; } @media (max-width: 699px) { .tel-p { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom)); } .tel-kv { gap: 16px; } } :root[data-theme="dark"] .tel-pt tr.tel-late { background: rgba(244, 137, 31, .12); } /* ---------- Анкета до визита и планшет (14.10.2026, s70; js/anketa.js, js/planshet.js) ---------- */ .ank-card { padding: 8px 12px; } .ank-hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ank-hd .btn { margin-left: auto; } .ank-items { margin: 6px 0 8px; } .ank-it { padding: 3px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fz)); } .ank-it:last-child { border-bottom: 0; } .ank-ed { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; } .ank-no { min-width: 22px; } .ank-ed-h { gap: 6px; flex-wrap: nowrap; } .ank-ed-h .ank-type { width: auto; min-width: 140px; } .ank-q { padding: 8px 0; border-bottom: 1px solid var(--line); } .ank-q:last-child { border-bottom: 0; } .ank-qt { font-weight: var(--w-medium); margin-bottom: 6px; } .ank-req, .ank-q.miss .ank-qt { color: var(--rose); } .ank-many { color: var(--muted); font-weight: var(--w-text); font-size: calc(13px * var(--fz)); } .ank-in { width: 100%; } .ank-chs { display: flex; flex-wrap: wrap; gap: 8px; } .ank-ch { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 22px; padding: 6px 12px; cursor: pointer; } .ank-ch input { accent-color: var(--teal); width: 18px; height: 18px; } .ank-desk { margin: 4px 0 10px; } .app.planshet-mode { grid-template-columns: 1fr; } .app.planshet-mode .nav, .app.planshet-mode .tabbar, .app.planshet-mode .top, .app.planshet-mode .nav-row { display: none; } .app.planshet-mode .main { max-width: 860px; } .pl-wait { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; } .pl-big { font-size: 26px; font-family: var(--head); color: var(--ink); max-width: 640px; } .pl-big.pl-tj { font-size: 22px; color: var(--muted); } .pl-out { position: fixed; right: 12px; bottom: 12px; opacity: .55; } .pl-doc { font-size: calc(17px * var(--fz)); padding-bottom: 40px; } .pl-doc h2 { font-family: var(--head); margin: 10px 0 2px; } .pl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pl-text { max-height: 46vh; overflow-y: auto; margin: 10px 0; line-height: 1.5; } .pl-sgn-h { margin-top: 8px; } .pl-canvas { display: block; width: 100%; height: 220px; margin: 6px 0; background: var(--paper); border: 2px dashed var(--teal); border-radius: 12px; touch-action: none; } .pl-go { min-width: 200px; } .pl-form { margin: 10px 0; } /* Снимки к приёму (js/snimki.js, 15.10.2026): миниатюры в карте и в окне «Из папки аппарата». */ .sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .sn-it { display: flex; flex-direction: column; gap: 4px; } .sn-it img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--fill); cursor: pointer; } .sn-m { display: flex; flex-wrap: wrap; gap: 4px; } .sn-m .chip.sm { min-height: 28px; padding: 2px 8px; font-size: calc(12.5px * var(--fz)); } .sn-p { border-radius: 10px; padding: 3px; box-shadow: inset 0 0 0 2px transparent; cursor: pointer; } .sn-p.on { box-shadow: inset 0 0 0 3px var(--teal); } /* ---------- «Доступ» сотрудника и «Кто что может» (js/dostup.js; №55–56, макет «Доступ», 31.10.2026) ---------- Карточка › «Доступ»: «Кем работает» чипами, полный развёрнутый список прав с галочками (группы – подзаголовками, не сворачиваются: исключение из п. 22 по слову заказчика), справа – «Так она увидит меню». Список в две колонки, когда ему хватает места (контейнер от 900 px: на экране 1920 – почти весь список сразу). Цвета – токены брендбука (тёмная тема – их же). */ .dz-pp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } /* Широкий экран – шире, как «Пациент» и «Финансы» (1640): список прав в две колонки по строке на право. */ .main:has(#body .dz-pp), .main:has(#body > .dz-kto) { max-width: 1640px; } .dz-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; container-type: inline-size; container-name: dzmain; } .dz-side { position: sticky; top: 12px; align-self: start; min-width: 0; } .dz-ic { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* «Кем работает» */ .dz-who { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .dz-who h2, .dz-kh h2 { margin: 0; font-size: calc(16.5px * var(--fz)); font-weight: var(--w-medium); line-height: 1.25; } .dz-who-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dz-posts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 300px; min-width: 0; } .dz-pc { height: 38px; padding: 0 12px 0 10px; border-radius: 11px; border: 0; background: var(--teal-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--teal-line); display: inline-flex; align-items: center; gap: 7px; font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .dz-pc:hover { background: var(--teal-10); } .dz-pc .dz-st { width: 16px; height: 16px; flex: none; fill: var(--teal-ink); } .dz-pc .dz-st.o { fill: none; stroke: var(--teal-ink); stroke-width: 1.6; opacity: .5; } .dz-pc .dz-cv, .dz-pv .dz-cv { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; } .dz-pc.add { background: var(--paper); color: var(--teal-ink); box-shadow: none; border: 1.5px dashed var(--teal-line); padding: 0 13px; } .dz-pc.lock { background: var(--navy-10); box-shadow: none; cursor: default; } .dz-pc:focus-visible, .dz-ri:focus-visible, .dz-op:focus-visible, .dz-ab:focus-visible, .dz-pr:focus-visible, .dz-nochips button:focus-visible, .sk-pick button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } .dz-note { margin: -4px 0 0; font-size: calc(13px * var(--fz)); color: var(--muted); } .dz-fs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: calc(14.5px * var(--fz)); } .dz-k { color: var(--muted); } .dz-lgn { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: var(--w-text); } .dz-lgn input { width: 160px; height: 32px; min-height: 32px; padding: 0 10px; font-size: calc(14.5px * var(--fz)); font-weight: var(--w-medium); } .dz-v2 { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Поиск – отбор того же списка */ .dz-find { position: relative; } .dz-find input { width: 100%; height: 42px; min-height: 42px; padding: 0 40px 0 38px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); font-size: calc(15.5px * var(--fz)); } .dz-find input:focus { box-shadow: inset 0 0 0 1.5px var(--teal); outline: none; } .dz-find input::-webkit-search-cancel-button { display: none; } .dz-fi { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; fill: none; stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .dz-fx { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 8px; border: 0; background: var(--line-2); color: var(--muted); display: none; cursor: pointer; } .dz-find.has .dz-fx { display: block; } /* Полный список прав */ .dz-plist { padding: 4px 6px 8px; } .dz-cols { column-gap: 12px; } @container dzmain (min-width: 900px) { .dz-cols { columns: 2; } } .dz-pg { break-inside: avoid; } .dz-pgh { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); } .dz-pg:first-child .dz-pgh { padding-top: 6px; } .dz-pgh .dz-ic { width: 15px; height: 15px; stroke-width: 1.9; color: var(--teal-ink); } .dz-pg.med .dz-pgh .dz-ic { color: var(--amber); } .dz-ri { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "bx tx so"; align-items: center; column-gap: 12px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .dz-ri:hover:not(:disabled):not(.fx) { background: var(--teal-10); } .dz-bx { grid-area: bx; width: 22px; height: 22px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy-20); display: inline-flex; align-items: center; justify-content: center; } .dz-bx svg { width: 15px; height: 15px; fill: none; stroke: var(--on-teal); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .dz-ri[aria-checked="true"] .dz-bx { background: var(--teal); box-shadow: none; } .dz-ri[aria-checked="true"] .dz-bx svg { opacity: 1; } .dz-ri.fx, .dz-ri:disabled { cursor: default; } .dz-ri.fx .dz-bx, .dz-ri:disabled[aria-checked="true"] .dz-bx { background: var(--navy-20); } .dz-tx { grid-area: tx; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 1.3; } .dz-tx b { font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); } .dz-tx span { font-size: calc(12.5px * var(--fz)); color: var(--muted); } .dz-so { grid-area: so; font-size: calc(12.5px * var(--fz)); color: var(--muted-2); white-space: nowrap; } .dz-so.l { color: var(--amber-ink); } .dz-so.s { color: var(--rose); } .dz-ri mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 1px; } .dz-ri.hl { animation: dz-hl 2.4s ease-out 1; } @keyframes dz-hl { 0%, 35% { background: var(--teal-soft); } 100% { background: transparent; } } .dz-pfl { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 10px 0; font-size: calc(13px * var(--fz)); color: var(--muted); } .dz-pfl .linkish { margin: 0; min-height: 0; padding: 0 2px; } .dz-ruk { font-size: calc(13px * var(--fz)); color: var(--muted); margin: 0; padding: 0 4px; line-height: 1.45; } .dz-ruk b { font-weight: var(--w-medium); color: var(--ink); } .dz-foot { padding: 11px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: calc(14px * var(--fz)); } .dz-foot .dz-lg { color: var(--muted); min-width: 0; flex: 1 1 280px; } .dz-foot .dz-lg b { color: var(--ink); font-weight: var(--w-medium); } /* «Так она увидит меню» */ .dz-pv { padding: 12px 10px 10px; } .dz-pv summary { list-style: none; } .dz-pv summary::-webkit-details-marker { display: none; } .dz-pv-h { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; } .dz-pv-hw { min-width: 0; flex: 1 1 auto; } .dz-pv-nm { font-weight: var(--w-strong); font-size: calc(14.5px * var(--fz)); line-height: 1.2; } .dz-pv-q { font-size: calc(12.5px * var(--fz)); color: var(--muted); } .dz-av { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); flex: none; } .dz-av.t { background: var(--teal-soft); color: var(--teal-ink); } .dz-av.g { background: var(--navy-10); color: var(--muted); } .dz-pv-g { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 8px 8px 2px; } .dz-pv-it { display: flex; align-items: flex-start; gap: 9px; padding: 5px 8px; border-radius: 8px; } .dz-pv-it .dz-ic { margin-top: 1px; color: var(--muted); } .dz-pv-w { min-width: 0; display: flex; flex-direction: column; } .dz-pv-w b { font-weight: var(--w-text); font-size: calc(14.5px * var(--fz)); line-height: 1.3; } .dz-pv-w span { font-size: calc(12px * var(--fz)); color: var(--muted); line-height: 1.3; } .dz-pv-it.first { background: var(--teal-10); } .dz-pv-it.first .dz-pv-w b { font-weight: var(--w-strong); } .dz-fp { margin-left: auto; font-size: calc(11px * var(--fz)); color: var(--teal-ink); white-space: nowrap; padding-top: 2px; } .dz-pv-it.nw { animation: dz-nw 3s ease-out 1; box-shadow: inset 3px 0 0 var(--teal); } .dz-pv-it.nw .dz-pv-w b { font-weight: var(--w-strong); } @keyframes dz-nw { 0%, 40% { background: var(--teal-soft); } 100% { background: transparent; } } .dz-new { margin-left: auto; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--teal-ink); background: var(--teal-soft); padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .dz-gone { margin: 6px 4px 0; padding: 6px 8px; border-radius: 8px; background: var(--rose-soft); color: var(--rose); font-size: calc(12.5px * var(--fz)); } .dz-pv-none { padding: 12px 8px; color: var(--muted); font-size: calc(14px * var(--fz)); } .dz-pv-f { margin-top: 8px; padding: 8px 6px 0; border-top: 1px solid var(--line-2); font-size: calc(13px * var(--fz)); color: var(--muted); } .dz-pv-f b { color: var(--ink); font-weight: var(--w-medium); } @media (prefers-reduced-motion: reduce) { .dz-ri.hl, .dz-pv-it.nw { animation: none; } } /* Окна «Добавить должность» и должности */ .dz-gv { font-size: calc(14px * var(--fz)); color: var(--muted); line-height: 1.45; margin: 0 0 10px; } .dz-gv b { color: var(--ink); font-weight: var(--w-medium); } .dz-ops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .dz-op { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--fill); color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .dz-op:hover:not(:disabled) { background: var(--teal-10); } .dz-op b { font-weight: var(--w-medium); } .dz-op span { font-size: calc(13px * var(--fz)); color: var(--muted); } .dz-op:disabled { opacity: .5; cursor: default; } /* «Кто что может»: слева права (список выбора – своя прокрутка, устав interfeys-vid), справа – разбор. */ .dz-kto { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; } .dz-kl { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 8px; } .dz-kq { width: 100%; height: 36px; min-height: 36px; margin: 2px 0 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill); font-size: calc(15px * var(--fz)); } .dz-kg { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 10px 8px 3px; } .dz-ab { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); text-align: left; font-size: calc(15px * var(--fz)); cursor: pointer; } .dz-ab:hover { background: var(--line-2); } .dz-ab.on { background: var(--teal-soft); font-weight: var(--w-medium); } .dz-ab i { margin-left: auto; font-style: normal; font-size: calc(12.5px * var(--fz)); color: var(--muted); min-width: 22px; text-align: right; } .dz-kd-w { min-width: 0; container-type: inline-size; container-name: dzkd; } .dz-kd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .dz-kh { display: flex; flex-direction: column; gap: 3px; } .dz-kd .dz-kh h2 { font-size: 20px; font-weight: var(--w-strong); } .dz-kcols { display: flex; flex-direction: column; gap: 14px; } @container dzkd (min-width: 900px) { .dz-kcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } } .dz-sec { display: flex; flex-direction: column; gap: 4px; } .dz-lb { font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); padding: 0 2px 4px; } .dz-pr { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; border: 0; background: none; color: var(--ink); text-align: left; width: 100%; font: inherit; } button.dz-pr { cursor: pointer; } button.dz-pr:hover { background: var(--teal-10); } .dz-pr-w { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; } .dz-pr-w b { font-weight: var(--w-medium); } .dz-pr-w span { font-size: calc(12.5px * var(--fz)); color: var(--muted); } .dz-pr .dz-so { white-space: normal; text-align: right; } .dz-ar { color: var(--muted-2); } .dz-tg.ruk { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); background: var(--navy); color: var(--paper); } .dz-nochips { display: flex; flex-wrap: wrap; gap: 6px; } .dz-nochips button { height: 32px; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 0; background: var(--fill); color: var(--ink); font-size: calc(14px * var(--fz)); white-space: nowrap; cursor: pointer; } .dz-nochips button:hover { background: var(--teal-10); color: var(--teal-ink); } .dz-dl { font-size: calc(13.5px * var(--fz)); color: var(--muted); padding: 2px 2px 0; } .dz-kback { display: none; align-self: flex-start; } /* «Сотрудники»: колонка «Кем работает» – главная должность, остальные тише, «лично N» */ .sk-ps { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .sk-p2 { color: var(--muted); } .staff-all .tag.sk-lich { background: var(--amber-soft); color: var(--amber-ink); } .sk-kem { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: var(--tap); } .sk-kem .linkish { margin: 0; } /* «Новый сотрудник»: «Кем работает» чипами, справа – будущее меню */ .sk-nw { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .sk-nwf { min-width: 0; max-width: 860px; } .sk-nw-side { position: sticky; top: 12px; align-self: start; min-width: 0; } .sk-lb { display: block; font-size: var(--fs-hint); color: var(--muted); margin-bottom: 6px; } .sk-pick { display: flex; flex-wrap: wrap; gap: 8px; } .sk-pick button { min-height: 40px; padding: 6px 13px; border-radius: 11px; border: 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--navy-20); font-size: calc(15px * var(--fz)); display: inline-flex; align-items: center; gap: 7px; text-align: left; cursor: pointer; } .sk-pick button:hover { background: var(--line-2); } .sk-pick button.on { background: var(--teal-soft); box-shadow: inset 0 0 0 1.5px var(--teal); font-weight: var(--w-medium); } .sk-pick button .dz-st { width: 15px; height: 15px; fill: var(--teal-ink); } .sk-sep { flex-basis: 100%; height: 0; } .sk-lb2 { flex-basis: 100%; font-size: calc(12.5px * var(--fz)); color: var(--muted); margin-top: 2px; } .sk-more { margin: 4px 0 8px; } .sk-more > summary { cursor: pointer; color: var(--teal-ink); font-size: calc(14.5px * var(--fz)); list-style: none; padding: 6px 0; } .sk-more > summary::-webkit-details-marker { display: none; } .sk-nw-b { align-items: center; gap: 12px; flex-wrap: wrap; } @media (min-width: 1560px) { .dz-pp { grid-template-columns: minmax(0, 1fr) 320px; } .sk-nw { grid-template-columns: minmax(0, 860px) 320px; } } @media (max-width: 1180px) and (min-width: 700px) { .dz-pp, .sk-nw { grid-template-columns: minmax(0, 1fr) 270px; } .dz-kto { grid-template-columns: 290px minmax(0, 1fr); } } @media (max-width: 699px) { /* Телефон: меню человека – свёрнутым сверху, список – одной колонкой, источник – строкой под названием. */ .dz-pp, .sk-nw { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .dz-side, .sk-nw-side { order: -1; position: static; width: 100%; } .dz-pv summary { cursor: pointer; } .dz-pv summary .dz-pv-h { margin: 0; border: 0; padding-bottom: 0; } .dz-pv[open] summary .dz-pv-h { border-bottom: 1px solid var(--line-2); padding-bottom: 10px; margin-bottom: 6px; } .dz-pv[open] summary .dz-cv { transform: rotate(180deg); } .dz-ri { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "bx tx" ". so"; align-items: start; row-gap: 1px; padding: 8px; } .dz-bx { margin-top: 1px; } .dz-tx { flex-direction: column; } .dz-so:empty { display: none; } .dz-pc { height: 36px; font-size: calc(14.5px * var(--fz)); } .dz-lgn input { width: 140px; } .dz-kto { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .dz-kl { position: static; max-height: none; overflow: visible; } .dz-kto.det .dz-kl { display: none; } .dz-kto:not(.det) .dz-kd-w { display: none; } .dz-kback { display: inline-flex; } .dz-pr { flex-wrap: wrap; } } /* Документы приложения пациента (s72, js/prilsvyaz.js): текст версии — как написан, со своей прокруткой. */ .dp-tekst { white-space: pre-line; max-height: 420px; overflow: auto; font-size: calc(14px * var(--fz)); line-height: 1.5; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 8px; padding: 10px 12px; margin: 8px 0; } /* ===== Вкладки пункта списком слева (16.10.2026, js/vkladki.js) ===== С пяти вкладок – как настройки iPhone и Mac: слева список разделов (название и строка состояния), справа открытый раздел. Экран не шире: правая часть берёт оставшееся место. Телефон – список или раздел (`.vk-spisok`). */ .vk { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 0 22px; align-items: start; } .vk-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .vk-back { display: flex; } .vk-cap { font-size: var(--fs-hint); font-weight: var(--w-text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 0; } .vk-list { display: flex; flex-direction: column; gap: 2px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; } .vk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 7px 10px; min-height: 40px; font: inherit; color: var(--ink); cursor: pointer; } .vk-row:hover { background: var(--fill); } .vk-row.on { background: var(--teal-soft); } .vk-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .vk-t { grid-column: 1; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); line-height: 1.25; } .vk-row.on .vk-t { font-weight: var(--w-medium); } .vk-n { grid-column: 2; grid-row: 1; color: var(--muted); font-size: calc(13px * var(--fz)); font-variant-numeric: tabular-nums; } .vk-s { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(12.5px * var(--fz)); color: var(--muted); line-height: 1.3; } .vk-s > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vk-s .sec-dot { width: 7px; height: 7px; } .vk-s.warn { color: var(--amber); } .vk-s.bad { color: var(--rose); } .vk-gt { display: none; grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-style: normal; font-size: calc(18px * var(--fz)); } .vk-main { min-width: 0; } .vk-main > .top .vk-to-list { display: none; } @media (max-width: 699px) { .vk { grid-template-columns: minmax(0, 1fr); } .vk-side { position: static; } .vk.vk-spisok .vk-main, .vk:not(.vk-spisok) .vk-side { display: none; } .vk-main > .top .vk-to-list { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vk-main > .top { flex-direction: column; align-items: stretch; } .vk-main > .top .top-l { flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; } .vk-main > .top .top-t { max-width: 100%; } .vk-cap { font-size: 22px; font-weight: var(--w-text); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 2px 4px 4px; } .vk-row { min-height: 52px; padding: 8px 12px; } .vk-t { font-size: calc(15px * var(--fz)); } .vk-gt { display: block; } } /* ===== Экран «Расписание» врача (16.10.2026, js/vrach-ekran.js): расписание главное, справа колонкой ~300 px — вопросы пациентов, мои результаты, вознаграждение; на узком экране — под расписанием. ===== */ .ve-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; } .ve-main { min-width: 0; } .ve-main > .card:first-child { margin-top: 0 !important; } .ve-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; } .ve-b { padding: 12px 14px; } .ve-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .ve-h b { font: var(--w-medium) calc(15px * var(--fz))/1.3 var(--head); color: var(--ink); } .ve-h .ve-all, .ve-h > .muted { margin-left: auto; } .ve-n { background: var(--teal-soft); color: var(--ink); border-radius: 10px; padding: 0 7px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); } .ve-n.late { background: var(--amber-soft); color: var(--amber); } .ve-tiho { padding: 2px 0; } .ve-q { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); padding: 7px 0; cursor: pointer; font: inherit; color: var(--ink); } .ve-q:first-of-type { border-top: 0; padding-top: 2px; } .ve-q:hover .ve-q1 b { color: var(--teal-ink); } .ve-q1 { display: flex; gap: 8px; align-items: baseline; } .ve-q1 b { font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ve-w { margin-left: auto; color: var(--muted); font-size: calc(12.5px * var(--fz)); white-space: nowrap; } .ve-q.late .ve-w { color: var(--amber); font-weight: var(--w-medium); } .ve-q.late { box-shadow: inset 3px 0 0 var(--orange); padding-left: 8px; } .ve-q2 { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ve-more { margin-top: 4px; } .ve-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .ve-two > div { background: var(--teal-10); border-radius: 8px; padding: 7px 10px; } .ve-two b { font: var(--w-medium) 22px/1.1 var(--head); color: var(--ink); } .ve-two span { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); margin-bottom: 1px; } .ve-d { font-style: normal; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); margin-left: 6px; color: var(--muted); } .ve-d.up { color: var(--ok); } .ve-d.dn { color: var(--amber); } .ve-li { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: calc(13.5px * var(--fz)); } .ve-li span { color: var(--muted); } .ve-li b { font-weight: var(--w-medium); white-space: nowrap; } .ve-li b small { color: var(--muted); font-weight: var(--w-medium); } .ve-li.warn b, .ve-li.warn span { color: var(--amber); } .ve-prev { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 6px; } .ve-sum { font: var(--w-strong) 24px/1.15 var(--head); color: var(--teal-ink); margin: -2px 0 6px; } .ve-pod { margin-top: 6px; font-size: calc(12px * var(--fz)); } .ve-open { cursor: pointer; } .ve-open:hover, .ve-open:focus-visible { box-shadow: 0 0 0 2px var(--teal-soft); outline: 0; } @media (max-width: 1199px) { .ve-grid { grid-template-columns: minmax(0, 1fr); } .ve-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } /* ======== Окно на пол-экрана: меню – полосой значков (16.10.2026) ======== Заказчик: «когда свернуть программу на пол-экрана… надо оптимизировать». Было: от 700 до 980 px меню переставало быть колонкой и разворачивалось во всю ширину над экраном – экран начинался ниже первого экрана. Теперь меню остаётся слева узкой полосой: значки разделов (название – при наведении), логотип знаком, «Найти» – лупой, человек – кружком с буквами. «☰» вверху раскрывает полное меню поверх экрана; выбрали пункт – оно закрылось (menuRender). Ниже 700 px – телефон, как было. */ @media (min-width: 700px) and (max-width: 980px) { .app { grid-template-columns: 64px minmax(0, 1fr); } .nav { position: sticky; top: 0; height: 100vh; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 10px 8px; overflow-y: auto; overflow-x: hidden; z-index: 35; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .brand { padding: 0 0 6px; display: flex; justify-content: center; } .brand-logo { width: 40px; margin: 0; } .brand.txt b, .brand.svoy b { display: none; } .nav .nav-burger { display: flex; justify-content: center; align-items: center; width: 100%; height: 36px; min-height: 0; padding: 0; margin: 0 0 6px; font-size: calc(18px * var(--fz)); border-radius: 10px; background: var(--fill); } .nav .nav-find { display: flex; justify-content: center; padding: 8px 0; margin-bottom: 4px; } .nav .nav-find > span, .nav .nav-burger-t { display: none; } .nav button { justify-content: center; padding: 9px 0; position: relative; gap: 0; } .nav .nav-t, .nav .nav-grp { display: none; } .nav .nav-grp + button, .nav button + .nav-grp + button { margin-top: 8px; } .nav .nav-n { position: absolute; top: 1px; right: 0; } .nav .nav-n::after { min-width: 16px; height: 15px; padding: 0 4px; font-size: calc(11px * var(--fz)); border-radius: 8px; } .nav .badge { position: absolute; top: 1px; right: 0; margin: 0; } .nav .nav-warn { position: absolute; top: 5px; right: 8px; } .nav .who { padding: 4px; flex-direction: column; gap: 4px; box-shadow: none; background: transparent; } .nav .who .who-t { display: none; } .nav .who .out { width: 32px; height: 32px; } /* «☰» – полное меню поверх экрана, шириной как на компьютере. */ .app.nav-open .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 252px; padding: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); } .app.nav-open .brand { justify-content: flex-start; padding: 0 6px 8px; } .app.nav-open .brand-logo { width: 136px; } .app.nav-open .brand.txt b, .app.nav-open .brand.svoy b { display: block; } .app.nav-open .nav .nav-find { justify-content: space-between; padding: 8px 12px; } .app.nav-open .nav .nav-find > span, .app.nav-open .nav .nav-burger-t { display: inline; } .app.nav-open .nav button { justify-content: flex-start; padding: var(--nav-pad); gap: 10px; } .app.nav-open .nav .nav-t, .app.nav-open .nav .nav-grp { display: block; } .app.nav-open .nav .nav-grp + button, .app.nav-open .nav button + .nav-grp + button { margin-top: 0; } .app.nav-open .nav .nav-n, .app.nav-open .nav .badge, .app.nav-open .nav .nav-warn { position: static; } .app.nav-open .nav .nav-n::after { min-width: 22px; height: 20px; padding: 0 6px; font-size: calc(12px * var(--fz)); border-radius: 10px; } .app.nav-open .nav .who { flex-direction: row; padding: 8px 4px 8px 8px; gap: 8px; box-shadow: var(--shadow); background: var(--paper); } .app.nav-open .nav .who .who-t { display: block; } .app.nav-open .nav .nav-burger { width: auto; padding: 0 12px; align-self: flex-start; font-size: calc(14px * var(--fz)); } .app.nav-open > .main { grid-column: 2; } .app.nav-open .nav .nav-find { flex: none; margin: 0 0 4px; } .app.nav-open .nav .nav-burger { height: 32px; flex: none; } .app.nav-open::after { content: ""; position: fixed; inset: 0 0 0 252px; background: rgba(0,0,0,.18); z-index: 34; } } /* Окно «Расход» (16.10.2026): частые статьи – кнопками над списком, чек – кнопкой. */ .ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .ex-chips .chip { min-height: 30px; height: 30px; padding: 3px 11px; font-size: calc(13px * var(--fz)); margin: 0; } .ex-ym-b { margin-left: 8px; font-weight: var(--w-medium); } .ex-chek-add { opacity: .55; } tr:hover .ex-chek-add { opacity: 1; } /* Раскладка экрана записи – у каждого своя (16.10.2026, js/zapis-vid.js): граница между полями и окнами тянется мышью, у модуля – «⇄ ↑ ↓ –» в заголовке при наведении, свёрнутый модуль – одна строка-заголовок. */ .kk-per .pl-in { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Шапка отчёта (16.10.2026): заголовок отчёта чаще помещается одной строкой – чуть мельче шрифт и уже поля дат (дата «16.10.2026» помещается в 128 px). */ @media (min-width: 700px) { .app.rep-page .top h1 { font-size: 22px; } .app.rep-page .top .tools .kk-dates input[type=date] { width: 128px; padding-left: 8px; padding-right: 6px; } } /* Главная на пол-экрана (16.10.2026): «Доброе утро» и строка дня не жмутся в узкий столбик рядом с кнопками – кнопки встают строкой ниже. */ @media (min-width: 700px) and (max-width: 1250px) { .top.home-top { flex-wrap: wrap; } .top.home-top > .top-l { flex: 1 1 100%; } .top.home-top > .tools { flex: 1 1 100%; justify-content: flex-start; } } /* ======== Стойка: режимы «Стойка / Админ», шапка, уведомления в углу (17.10.2026; js/stoyka.js) ======== Шапка `#st-top` – над экраном стойки, во всю ширину колонки содержимого; меню слева тянется на обе строки. Экран под шапкой – свой (`#view`). */ .app.st-on { grid-template-rows: auto minmax(0, 1fr); } .app.st-on > .nav { grid-row: 1 / span 2; } .app.st-on > #st-top { grid-column: 2; grid-row: 1; } .app.st-on > .main { grid-column: 2; grid-row: 2; } #st-top[hidden] { display: none; } /* Боковые поля 16, не 20: при развёрнутом меню (1366 px) «смена не открыта · сохранено» (29.10.2026, смена без автооткрытия) длиннее прежнего «Касса 0 с.», и плашки не помещались в строку на 5 px – шапка вырастала на 40 px (stoyka_f3vid_t). */ #st-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); } .st-btns { display: flex; gap: 8px; flex: none; } .st-big { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 14px; border-radius: 12px; border: 0; background: var(--paper); color: var(--ink); font-weight: var(--w-strong); font-size: var(--tap-fs); box-shadow: inset 0 0 0 1px var(--navy-20); cursor: pointer; } .st-big:hover { background: var(--bg); } .st-big.on { background: var(--teal); color: var(--on-teal); box-shadow: none; } .st-big kbd, .st-kbd { font: var(--w-medium) calc(11px * var(--fz))/1 var(--font); padding: 3px 5px; border-radius: 6px; background: var(--navy-10); color: var(--ink); } .st-big.on kbd { background: rgba(0, 45, 66, .14); color: var(--on-teal); } .st-chips { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .st-chip-w { position: relative; } .st-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; cursor: pointer; background: var(--paper); color: var(--ink); font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); box-shadow: inset 0 0 0 1px var(--navy-20); white-space: nowrap; } .st-chip b { font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); } .st-chip:hover, .st-chip.open { background: var(--bg); } .st-chip.warn { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--orange); } .st-chip.next { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .st-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 380px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; padding: 10px 12px; margin: 0; box-shadow: var(--shadow-lift, 0 6px 24px rgba(0, 0, 0, .15)); } .st-pop-h { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 6px; } .st-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: calc(13.5px * var(--fz)); } .st-row:first-of-type { border-top: 0; } .st-row-l { flex: 1 1 auto; min-width: 0; } .st-row-r { flex: none; display: flex; align-items: center; gap: 8px; } .st-row .btn { height: 34px; padding: 0 12px; font-size: calc(13.5px * var(--fz)); } .btn.st-prinyat { background: var(--orange); color: #fff; } .btn.st-prinyat:hover { background: var(--amber); } .st-pop-f { padding-top: 8px; } .st-more { padding-top: 6px; } .st-save { flex: none; display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); white-space: nowrap; } .st-save b { color: var(--ink); } .st-sep { margin: 0 2px; } .st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .st-dot.bad { background: var(--rose); } .st-save .st-wait { color: var(--rose); } /* Переключатель «Стойка / Админ» – вверху левой полосы. */ .nav .st-rezhim { display: flex; gap: 2px; padding: 3px; margin: 0 0 8px; border-radius: 12px; background: var(--fill); } .nav .st-rezhim button { flex: 1 1 0; width: auto; margin: 0; justify-content: center; padding: 7px 8px; border-radius: 9px; font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .nav .st-rezhim button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); } .nav .st-nav .st-kbd { margin-left: auto; flex: none; } /* Ноутбук 1366×768: меню руководства с переключателем – без прокрутки (interfeys_t). */ @media (max-height: 820px) and (min-width: 700px) { .nav .st-rezhim { padding: 2px; margin-bottom: 4px; } .nav .st-rezhim button { padding: 3px 8px; font-size: calc(13px * var(--fz)); } } /* Заглушка экрана стойки (до волны 2). */ .st-zag { padding: 24px 4px; } .st-zag h1 { margin: 0 0 6px; } /* Угол уведомлений: правый нижний, поверх экрана, ничего не сдвигает. */ #st-ugol { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(440px, calc(100vw - 32px)); pointer-events: none; } #st-ugol > * { pointer-events: auto; } .st-toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: calc(14px * var(--fz)); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } .st-toast-t { flex: 1 1 auto; min-width: 0; } .st-toast-u { border: 0; background: transparent; color: var(--teal); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); padding: 4px 6px; cursor: pointer; } .st-toast-x, .ugol-x { border: 0; background: transparent; color: inherit; font-size: calc(18px * var(--fz)); line-height: 1; padding: 2px 6px; cursor: pointer; opacity: .7; flex: none; } .banner.ugol { display: flex; align-items: flex-start; gap: 6px; margin: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } /* Одно уведомление: одинаковые – одной карточкой «×N», длинное – три строки и «подробнее» (js/store.js, storeUgol). */ .banner.ugol .ugol-b { flex: 1 1 auto; min-width: 0; } .ugol-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .banner.ugol-full .ugol-t { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } .ugol-more { font-size: calc(12px * var(--fz)); margin-top: 2px; } .ugol-n { flex: none; align-self: center; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .12); } .ugol-n:empty { display: none; } @media (max-width: 699px) { .app.st-on { grid-template-rows: none; } .app.st-on > .nav, .app.st-on > #st-top, .app.st-on > .main { grid-column: auto; grid-row: auto; } } /* Пол-экрана (700–980 px, меню полосой слева, 21.10.2026): сетка «Стойки» остаётся двухстрочной – шапка и экран в правой колонке (раньше, как на телефоне, экран падал в узкую левую колонку и справа было пусто). */ @media (max-width: 980px) { #st-top { flex-wrap: wrap; padding: 8px 16px; position: static; } .nav .st-rezhim { display: none; } .app.nav-open .nav .st-rezhim { display: flex; flex: 1 1 100%; margin: 8px 0 0; } } @media (max-width: 699px) { .st-btns { flex: 1 1 100%; } .st-big { flex: 1 1 0; justify-content: center; } .st-save { flex: 1 1 100%; } } /* ======== Стойка: «Реестр заказов» (бывшая «Лента дня», 17.10.2026; js/stoyka-lenta.js, docs/ustav/zapis-lenta.md) Весь день – в один экран 1366×768: строка кассы, строка отборов, таблица в ширину экрана без ползунка вбок; прокрутка – внутри таблицы, шапка прилипает. */ #view.main:has(> #body > .ln) { padding: 12px 20px 12px; max-width: none; } .ln { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .ln-kassa { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 3px 6px 3px 3px; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); } .ln-kassa .daybar { height: 34px; box-shadow: none; background: var(--bg); border-radius: 10px; } .ln-kassa .daybar-nav { width: 32px; height: 34px; font-size: 20px; } .ln-kassa .daybar-date { height: 34px; min-width: 128px; font-size: calc(14px * var(--fz)); } .ln-day.ne .daybar-date { color: var(--amber); } .ln-seg { height: 34px; padding: 0 12px; font-size: calc(13.5px * var(--fz)); } .ln-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 0; font-size: calc(13.5px * var(--fz)); min-width: 0; flex: 1 1 auto; } .ln-k:empty { display: none; } .ln-k > span { white-space: nowrap; } .ln-k-v b { font: var(--w-medium) calc(18px * var(--fz))/1 var(--head); } .ln-dot { display: inline-block; width: 1px; height: 13px; background: var(--line); margin: 0 10px; vertical-align: middle; } /* черта, не точка: «180 с. . нал» читалось как две точки */ .ln-k-now { font-size: calc(12.5px * var(--fz)); color: var(--muted); white-space: nowrap; padding-right: 6px; word-spacing: 1px; } .ln-k-now b { display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 3px; border-radius: 9px; text-align: center; background: var(--fill); color: var(--ink); font-weight: var(--w-medium); line-height: 1.2; } .ln-k-now b.ln-bad { background: var(--rose-soft); color: var(--rose); } .ln-bar { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .ln-chips { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; } .ln-chip { height: 32px; padding: 0 8px; border-radius: 10px; border: 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .ln-chip b { font-weight: var(--w-medium); } .ln-chip:hover { background: var(--bg); } .ln-chip.on { background: var(--ink); color: var(--paper); box-shadow: none; } .ln-chip.nol:not(.on) { color: var(--muted); } .ln-sp { flex: 1 1 0; } .ln-vid > button { height: 28px; padding: 0 9px; font-size: calc(12.5px * var(--fz)); white-space: nowrap; } .ln-q { width: 200px; height: 34px; padding: 0 10px; font-size: calc(13px * var(--fz)); flex: 4 1 150px; min-width: 110px; max-width: 200px; } /* основа 150: в таджикском строка не падает вторым рядом (22.10.2026, замечание 4) */ .ln-unm { font-size: calc(13px * var(--fz)); white-space: nowrap; } /* Оранжевые ссылки строки кассы – аккуратными плашками: слово, число кружком, стрелка (22.10.2026, замечание 4: «Дела3›»). */ .ln-unm .linkish { color: var(--amber); font-weight: var(--w-medium); gap: 8px; min-height: 0; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--amber-soft); } .ln-unm .linkish b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #fff; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); line-height: 1; } .ln-unm.calm .linkish { color: var(--teal-ink); background: var(--teal-10); } .ln-tw { overflow-y: auto; overflow-x: hidden; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; } .ln-t { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: calc(13.5px * var(--fz)); } .ln-t th { position: sticky; top: 0; z-index: 2; background: var(--bg); text-align: left; padding: 7px 10px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); border-bottom: 1px solid var(--line); } .ln-t td { padding: 1px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; overflow-wrap: anywhere; } .ln-t th:nth-child(2) { width: 25%; } .ln-t th:nth-child(3) { width: 17%; } .ln-t .ln-c-t { overflow: hidden; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .ln-t .ln-c-s { width: 108px; text-align: right; font-weight: var(--w-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ln-t .ln-c-o { width: 232px; } .ln-t th.ln-c-s { text-align: right; } .ln-r { cursor: pointer; } .ln-r:hover td { background: var(--bg); } .ln-r:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .ln-r { user-select: none; } .ln-r.ln-sel td { background: var(--teal-10); } .ln-r.ln-sel td:first-child { box-shadow: inset 3px 0 0 var(--teal); } .ln-c-t b { display: block; line-height: 1.12; } .ln-gde { display: block; font-size: max(11px, calc(10.5px * var(--fz))); line-height: 1; font-weight: var(--w-medium); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ln-gde.ln-bad { color: var(--rose); } .ln-gde.ln-done { font-weight: var(--w-medium); } .ln-lab { display: block; font-size: calc(11px * var(--fz)); line-height: 1.05; font-weight: var(--w-medium); color: var(--muted); } .ln-lab.ready { color: var(--teal-ink); font-weight: var(--w-medium); } .ln-pn b, .ln-pn > span { display: block; line-height: 1.12; } .ln-pn b { font-size: calc(13.5px * var(--fz)); } .ln-pn small { display: block; font-size: calc(11px * var(--fz)); line-height: 1; color: var(--muted); font-weight: var(--w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ln-srv > span { font-weight: var(--w-medium); } .ln-disc s { color: var(--muted); font-weight: var(--w-text); margin-right: 1px; } .ln-pale td { color: var(--muted); } .ln-pale td b { font-weight: var(--w-medium); } .ln-pl { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 8px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); } .ln-pl.opl { background: var(--ok-soft); color: var(--ok); } .ln-pl.zhdet { background: var(--amber-soft); color: var(--amber); padding-right: 2px; } .ln-pl.dolg { background: var(--rose-soft); color: var(--rose); } .ln-pl.kab { background: var(--teal-10); color: var(--teal-ink); } .ln-pl.zap { background: var(--fill); color: var(--muted); } .ln-pl.net { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); } .ln-prin { border: 0; border-radius: 6px; height: 20px; padding: 0 8px; margin-left: 2px; background: var(--orange); color: #fff; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); cursor: pointer; } .ln-prin:hover { background: var(--amber); } .ln-grp td { background: var(--bg); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); padding-top: 6px; padding-bottom: 6px; } .ln-later td { color: var(--muted); font-weight: var(--w-medium); } .ln-empty td { padding: 14px 12px; } /* Блок под таблицей: «В других днях и в картотеке» (поиск от трёх знаков). */ .ln-ar { background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); padding: 6px 10px 8px; max-height: 38vh; overflow-y: auto; font-size: calc(13px * var(--fz)); min-width: 0; } .ln-ar[hidden] { display: none; } .ln-ar-t { color: var(--muted); font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); padding: 2px 0 4px; } .ln-ar-g + .ln-ar-g { margin-top: 4px; } .ln-ar-h { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 3px 0 2px; border-bottom: 1px solid var(--line-2); } .ln-ar-k { margin-left: auto; color: var(--teal-ink); font-weight: var(--w-text); font-size: calc(12.5px * var(--fz)); } .ln-ar-r { display: grid; grid-template-columns: 44px 44px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 2fr) auto; gap: 0 10px; align-items: center; min-height: 26px; padding: 0 4px; border-bottom: 1px solid var(--line-2); cursor: pointer; } .ln-ar-r > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln-ar-r:hover { background: var(--bg); } .ln-ar-r:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .ln-ar-d { font-weight: var(--w-medium); } @media (max-width: 699px) { .ln-t .ln-c-o { width: 132px; } .ln-t th:nth-child(3), .ln-t td:nth-child(3) { display: none; } .ln-q { flex: 1 1 100%; width: auto; } .ln-k-now { margin-left: 0; } } /* ======== Стойка: «Звонок» – поиск Ctrl K (17.10.2026; js/stoyka-poisk.js) ======== */ #modal:has(> .zk) { width: min(720px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; } #modal:has(> .zk)::before { display: none; } @media (min-width: 700px) { #overlay:has(.zk) { place-items: start center; padding-top: 8vh; } #modal:has(> .zk) { border-radius: 18px; } } .zk { display: flex; flex-direction: column; min-height: 0; max-height: 82vh; } .zk-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .zk-lupa { font-size: 20px; color: var(--teal-ink); } .zk-top input { flex: 1; border: 0; background: transparent; font-size: calc(17px * var(--fz)); padding: 6px 0; outline: none; min-width: 0; } .zk-list { overflow-y: auto; padding: 4px 0 10px; min-height: 60px; } .zk-empty { padding: 14px 18px; } .zk-fraza { display: flex; align-items: baseline; gap: 10px; margin: 8px 14px 4px; padding: 10px 12px; border-radius: 12px; background: var(--teal-10); font-size: calc(14.5px * var(--fz)); font-weight: var(--w-medium); } .zk-fraza-t { flex: 1 1 auto; min-width: 0; } .zk-g { padding: 8px 18px 6px; border-top: 1px solid var(--line-2); } .zk-g:first-of-type { border-top: 0; } .zk-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: calc(15px * var(--fz)); } .zk-cena { font-weight: var(--w-medium); } .zk-d { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 0; font-size: calc(13.5px * var(--fz)); } .zk-dn { min-width: 170px; } .zk-ok { display: flex; gap: 6px; flex-wrap: wrap; } .zk-o { height: 30px; padding: 0 10px; border-radius: 9px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .zk-o.on { background: var(--teal); color: var(--on-teal); box-shadow: none; } .zk-week { padding: 3px 0 0; } .zk-foot { border-top: 1px solid var(--line); background: var(--bg); padding: 8px 18px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } .zk-foot .linkish { margin-left: auto; } /* ======== «Записать на приём» стойки (F3, 17.10.2026; js/stoyka-zapisat.js, js/stoyka-perenos.js) ======== Слева «Отделения и врачи», в середине календарь (прокрутка внутри, строка дней закреплена); запись из окошка – окно записи поверх (js/stoyka-okno-zapisi.js), формы справа нет. Окошко: белая клетка с рамкой на сером столбце; занятое — та же клетка цветом типа услуги с полоской слева; нерабочее и перерыв — ровный серый. */ .sz { display: flex; gap: 12px; align-items: stretch; min-height: 420px; } .sz-docs, .sz-cal { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); min-height: 0; } .sz { --sz-w0: 204px; } .sz-docs { flex: 0 0 var(--sz-w0); display: flex; flex-direction: column; overflow: hidden; } .sz.sz-wc .sz-docs { flex-basis: min(var(--sz-w), max(180px, calc(100% - 812px))); } /* календарю – не меньше 800 px (SZ_KAL_MIN, js/stoyka-zapisat.js): «Неделе» нужно 780 + полоса прокрутки; 812 = 800 + промежуток 12 */ .sz-q { width: 100%; height: 42px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 12px; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); background: transparent; color: var(--ink); outline: none; } .sz-dl { overflow: auto; flex: 1 1 auto; padding: 6px 0; } .sz-cal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* Шапка календаря – одна тонкая строка (замечание №5, 22.10.2026): «‹ › Сегодня», даты, врач, «День · Неделя · Месяц · Список». */ .sz-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; padding: 7px 14px; border-bottom: 1px solid var(--line); min-width: 0; } .sz-nb { flex: none; height: 34px; min-width: 34px; padding: 0 12px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); color: var(--ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); cursor: pointer; } .sz-nb:hover { background: var(--bg); } .sz-nb.on { background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); } .sz-nb:disabled { color: var(--navy-20); background: var(--bg); cursor: default; } .sz-title { flex: none; font: var(--w-strong) calc(16px * var(--fz)) var(--head); margin: 0 6px 0 8px; white-space: nowrap; } .sz-seg { flex: none; display: inline-flex; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--navy-20); } .sz-seg button { height: 34px; padding: 0 13px; border: 0; background: transparent; color: var(--ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); cursor: pointer; } .sz-seg button + button { border-left: 1px solid var(--line); } .sz-seg button.on { background: var(--ink); color: var(--paper); } .sz-who { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; padding: 0 6px; } .sz-who h2 { margin: 0; font: var(--w-strong) calc(16px * var(--fz)) var(--head); } .sz-who small { flex: none; font-size: calc(12px * var(--fz)); color: var(--muted); } .sz-past { padding: 6px 14px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); } /* Внизу календаря одна строка одной высоты: условные обозначения, «Перенос: …» или «Запись: …» – сетка не сдвигается. */ .sz-move { display: flex; align-items: center; gap: 10px; justify-content: flex-start; box-sizing: border-box; min-height: 46px; padding: 4px 14px; border-top: 1px solid var(--line); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); background: var(--amber-soft); } .sz-move.sz-pre { background: var(--teal-10); } .sz-move-t { flex: 0 1 auto; min-width: 0; /* кнопки – сразу за словами, а не у правого края: там уголок с сообщениями и «лист ожидания» */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sz-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--line); } .sz-grid { display: grid; position: relative; } .sz-corner, .sz-dh { position: sticky; top: 0; z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); } .sz-dh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; overflow: hidden; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: center; min-width: 0; font: inherit; } .sz-dh:hover { background: var(--bg); } .sz-dh b { font: var(--w-strong) calc(15px * var(--fz)) var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sz-dh b.sz-dn { white-space: normal; line-height: 1.15; text-align: center; font-size: calc(12.5px * var(--fz)); } .sz-dh b.sz-dn span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sz-dh small { font-size: calc(11.5px * var(--fz)); color: var(--muted); } .sz-dh.today { box-shadow: inset 0 -3px 0 var(--teal); } .sz-dh.on { background: var(--teal-10); } .sz-td { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--teal-ink); } .sz-fr { display: inline-block; padding: 1px 8px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: var(--w-medium); font-size: calc(11.5px * var(--fz)); white-space: nowrap; } .sz-fr.no { background: var(--bg); color: var(--muted); } .sz-times { position: relative; } .sz-t { position: absolute; right: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .sz-t.hh { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); } .sz-col { position: relative; border-left: 1px solid var(--line); background: var(--bg); cursor: pointer; } .sz-col.today { background: var(--bg); } .sz-work { position: absolute; left: 0; right: 0; background: var(--line); } .sz-brk, .sz-offday { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; } .sz-offday { top: 10px; background: transparent; padding: 0 6px; text-transform: none; letter-spacing: 0; font-size: calc(12px * var(--fz)); } .sz-hl { position: absolute; left: 0; right: 0; height: 2px; background: var(--paper); opacity: .9; pointer-events: none; } .sz-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange); z-index: 1; pointer-events: none; } .sz-sl, .sz-v, .sz-ghost { position: absolute; left: 4px; right: 4px; border-radius: 8px; display: flex; align-items: center; gap: 0; padding: 0 9px; white-space: nowrap; overflow: hidden; font-size: calc(14px * var(--fz)); } .sz-sl { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy-20); color: var(--muted); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); opacity: .85; } .sz-sl i { display: none; margin-left: auto; font-style: normal; font-weight: var(--w-text); } .sz-sl:not(.past):hover { box-shadow: inset 0 0 0 2px var(--teal); color: var(--teal-ink); opacity: 1; } .sz-sl:not(.past):hover i { display: inline; } /* Прошедшее окошко сегодняшнего дня недоступно (замечание №6): серое, не нажимается. */ .sz-sl.pod > span { margin-left: 50%; } .sz-sl.past { cursor: not-allowed; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); opacity: .6; } /* «День» одного врача (замечание №5): два столбца пополам по времени во всю высоту, без прокрутки. */ .sz-scroll.fill { display: flex; flex-direction: column; } .sz-day2 { flex: 1 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sz-half { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-width: 0; } .sz-half + .sz-half { border-left: 2px solid var(--line); } .sz-half .sz-times { position: relative; } .sz-v { font-weight: var(--w-medium); cursor: pointer; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); z-index: 2; } .sz-v b { flex: none; } .sz-v.fit3, .sz-grid .sz-v.fit3 { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); padding-left: 5px; padding-right: 3px; letter-spacing: -.2px; } .sz-v.fit4 b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sz-v.hold span:last-child { overflow: hidden; text-overflow: ellipsis; } .sz-v .sz-tm { font-size: calc(13px * var(--fz)); font-weight: var(--w-text); color: var(--muted); margin-right: 6px; flex: none; } .sz-v .sz-sv { margin-left: 12px; font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .sz-v .sz-ini { margin-left: .3em; flex: none; } .sz-v.fit1 .sz-ini, .sz-v.fit2 .sz-tm { display: none; } .sz-v.k { background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal), inset 0 0 0 1px var(--teal); } .sz-v.u { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok), inset 0 0 0 1px var(--mint); } .sz-v.p { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--orange), inset 0 0 0 1px var(--orange); } .sz-v.site { background: var(--paper); box-shadow: none; border: 1.5px dashed var(--orange); } .sz-v.over { border: 1.5px dashed var(--muted); } /* Неявка – непрозрачная серая плашка (A7-02): окошко под ней не просвечивает. */ .sz-v.noshow { background: var(--bg); box-shadow: inset 4px 0 0 var(--navy-20), inset 0 0 0 1px var(--line); color: var(--muted); } .sz-v.noshow b { text-decoration: line-through; } .sz-v.hold { gap: 4px; background: transparent; box-shadow: none; border: 1.5px dashed var(--navy-20); color: var(--muted); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); cursor: default; } .sz-v.moving { outline: 2px solid var(--orange); outline-offset: 1px; } .sz-v.drag { cursor: grab; } .sz-v.lift { background: transparent; box-shadow: none; border: 1.5px dashed var(--muted); opacity: .55; } .sz-v.flash { animation: sz-fl 1.4s ease; } @keyframes sz-fl { 0% { box-shadow: 0 0 0 0 rgba(39, 190, 182, .9); } 100% { box-shadow: 0 0 0 10px rgba(39, 190, 182, 0); } } body.sz-dragging, body.sz-dragging * { cursor: grabbing !important; user-select: none; } .sz-ghost { z-index: 5; pointer-events: none; font-size: calc(12.5px * var(--fz)); gap: 6px; background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); justify-content: space-between; } .sz-ghost .sz-gi { font-style: normal; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); } .sz-ghost.bad { background: var(--rose-soft); box-shadow: inset 0 0 0 2px var(--rose); } .sz-ghost.over { background: var(--amber-soft); box-shadow: inset 0 0 0 2px var(--orange); } .sz-ghost.same { background: var(--bg); box-shadow: inset 0 0 0 2px var(--navy-20); } .sz-col.drop-ok { box-shadow: inset 0 0 0 2px var(--teal); } .sz-col.drop-bad { box-shadow: inset 0 0 0 2px var(--rose); } .sz-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 14px; } .sz-mh { font: var(--w-medium) calc(11px * var(--fz)) var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; } .sz-mc { height: 74px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--navy-20); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; min-width: 0; } .sz-mc b { font: var(--w-strong) calc(16px * var(--fz)) var(--head); } .sz-mc.out { box-shadow: none; background: transparent; cursor: default; } .sz-mc.past, .sz-mc.off { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); } .sz-mc.today { box-shadow: inset 0 0 0 2px var(--teal); } .sz-mf { font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--ok); background: var(--ok-soft); padding: 1px 7px; border-radius: 7px; white-space: nowrap; } .sz-mo { font-size: calc(12px * var(--fz)); color: var(--muted); } .sz-list { width: 100%; border-collapse: collapse; } .sz-list th { position: sticky; top: 0; background: var(--paper); text-align: left; padding: 8px 10px; font: var(--w-medium) calc(12.5px * var(--fz)) var(--font); color: var(--muted); border-bottom: 1px solid var(--line); } .sz-list td { padding: 7px 10px; font-size: calc(14px * var(--fz)); border-top: 1px solid var(--line-2); } .sz-list tr.click { cursor: pointer; } .sz-list tr.click:hover td { background: var(--bg); } .sz-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--navy-20); } .sz-dot.k { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); } .sz-dot.u { background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok); } .sz-dot.p { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--orange); } .sz-dot.site, .sz-dot.over { background: var(--paper); box-shadow: none; border: 1.5px dashed var(--orange); } .sz-lg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; box-sizing: border-box; min-height: 46px; padding: 6px 14px; border-top: 1px solid var(--line); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .sz-lg-r { margin-left: auto; color: var(--ink); } .sz-lg i { display: inline-block; width: 16px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; } .sz-lg i.free { background: var(--paper); box-shadow: inset 0 0 0 1px var(--navy-20); } .sz-lg i.k { background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal); } .sz-lg i.u { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok); } .sz-lg i.p { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--orange); } .sz-lg i.site { border: 1.5px dashed var(--orange); } .sz-lg i.over { border: 1.5px dashed var(--muted); } .sz-lg i.off { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } /* Общее: окно «Перенести к другому врачу» (услуги), «Сообщить пациенту», второй приём и «− 1 +» окна записи */ .sz-srvs { display: flex; flex-direction: column; gap: 4px; } .sz-svc { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; font: inherit; font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); } .sz-svc.on { box-shadow: inset 0 0 0 1.5px var(--teal); background: var(--teal-10); } .sz-pr { margin-left: auto; color: var(--muted); white-space: nowrap; font-weight: var(--w-medium); } .sz-soob { border: 0; background: transparent; color: var(--teal); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); padding: 4px 6px; cursor: pointer; white-space: nowrap; } .sz-2t { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); color: var(--orange); white-space: nowrap; } .sz-qty { display: inline-flex; align-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--navy-20); overflow: hidden; flex: none; } .sz-qty button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink); font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); cursor: pointer; } .sz-qty button:disabled { color: var(--line); cursor: default; } .sz-qty b { min-width: 18px; text-align: center; font-size: calc(13.5px * var(--fz)); } .sz-rm { border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--fz)); line-height: 1; padding: 2px 4px; cursor: pointer; } .sz-v2 { padding: 6px 9px; border-radius: 9px; background: var(--amber-soft); font-size: calc(12.5px * var(--fz)); } .sz-move-b { display: inline-flex; gap: 6px; flex: none; } @media (max-width: 1180px) and (min-width: 700px) { .sz { --sz-w0: 180px; } } /* Меню «Стойки» свёрнуто (21.10.2026): врачи слева на 200 px – «Ишмерзоев Д.А.» и часы помещаются и на 1100 px. */ @media (max-width: 1180px) and (min-width: 981px) { .sz { --sz-w0: 200px; } } @media (max-width: 899px) { .sz-bar { flex-wrap: wrap; } .sz-who { order: 5; flex-basis: 100%; } } @media (max-width: 699px) { .sz { flex-direction: column; height: auto; } .sz-docs, .sz.sz-wc .sz-docs { flex: none; max-height: 33vh; } .sz-rs, .sz-rst { display: none; } .sz-cal { min-height: 70vh; } .sz-scroll { max-height: 70vh; } .sz-grid { min-width: 0; } .sz-title { margin-right: 0; } } /* ======== Стойка: Регистрация F2 (17.10.2026; js/stoyka-registr.js, zapis-registr.md) ======== Окно из двух зон (22.10.2026, замечания №1–№4, макет docs/zhurnal/makety-2026-10-22/zapis.html): слева шаги одной карточкой (Пациент, Врач, Услуга, Направитель), справа светлая бирюзовая колонка «Оплата» с рамкой и тенью. Всё на одном экране (1366×768 и 1920×1080), страница не прокручивается: у текущего шага список листается внутри. Пройденный шаг – строкой со значением и «изменить», будущий – полем-подсказкой. Из графика – то же окно листом поверх календаря, справа «Записать» (js/stoyka-okno-zapisi.js). */ .rg { display: flex; flex-direction: column; gap: 8px; max-width: 1560px; margin: 0 auto; min-height: 0; } .rg-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px); gap: 14px; align-items: start; flex: 1 1 auto; min-height: 0; } .rg-card { max-height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); } .rg-st { display: grid; grid-template-columns: 28px 144px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 12px; padding: 9px 18px; border-top: 1px solid var(--line); flex: 0 0 auto; min-height: 0; position: relative; } .rg-st:first-child { border-top: 0; } .rg-st.cur { flex: 0 1 auto; min-height: 112px; box-shadow: inset 3px 0 0 var(--teal); } .rg-n { width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); background: var(--fill); color: var(--muted); } .rg-st.cur .rg-n, .rg-pay.cur .rg-n { background: var(--teal); color: var(--on-teal); } .rg-st.done .rg-n { background: var(--ok-soft); color: var(--ok); } .rg-b { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; } .rg-l { font-size: calc(15.5px * var(--fz)); font-weight: var(--w-medium); color: var(--ink); padding-top: 4px; flex: none; } .rg-st.fut .rg-l { color: var(--muted); font-weight: var(--w-medium); } .rg-svod { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; flex: 1 1 auto; font-size: calc(14px * var(--fz)); } .rg-svod > b { font-size: calc(15.5px * var(--fz)); } /* поле шага: у пройденного – значение без рамки, у будущего – серая подсказка */ .rg-fv { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 38px; padding: 4px 0; box-sizing: border-box; flex: none; } .rg-fv.fut { padding: 4px 14px; border-radius: 10px; background: var(--fill); color: var(--muted); font-size: calc(14.5px * var(--fz)); font-weight: var(--w-medium); min-height: 42px; } .rg-fv .rg-izm { margin-left: auto; } .rg-fv.rows { align-items: flex-start; } .rg-fv.rows .rg-usl { flex: 1 1 auto; } .rg-pat { gap: 4px 12px; } .rg-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-soft); color: var(--on-teal); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); align-self: center; } .rg-pat-t { display: flex; flex-direction: column; min-width: 0; } /* пройденный «Пациент» (форма нового на месте) – плотнее */ .rg-st[data-step="1"]:not(.cur) .rg-nov { gap: 4px 12px; } .rg-st[data-step="1"]:not(.cur) .rg-fld { gap: 1px; } .rg .rg-st[data-step="1"]:not(.cur) .rg-fld input { height: 34px; } .rg-st[data-step="1"]:not(.cur) .rg-seg.sm button { height: 32px; } .rg-st[data-step="1"]:not(.cur) .rg-pred { margin-top: 2px; padding: 4px 10px 6px; gap: 2px; } .rg-izm { border: 0; background: transparent; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); padding: 0 2px; cursor: pointer; white-space: nowrap; } .rg-izm:hover { text-decoration: underline; } .rg-meta { font-size: calc(12.5px * var(--fz)); color: var(--muted); font-weight: var(--w-text); } .rg-hint { font-size: var(--fs-hint); color: var(--muted); padding: 6px 2px; } .rg-pod { margin-top: 2px; } .rg input.rg-big { width: 100%; height: 46px; border: 2px solid var(--teal); border-radius: 12px; padding: 0 14px 0 42px; font-size: calc(17px * var(--fz)); font-weight: var(--w-medium); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6c7b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 13px center / 18px 18px; color: var(--ink); box-sizing: border-box; flex: none; } .rg input.rg-big.sm { height: 42px; font-size: calc(15.5px * var(--fz)); } .rg input.rg-big:focus { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); } .rg-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; } .rg-st.cur .rg-b { overflow: auto; } .rg-ro { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; } .rg-ro:hover { background: var(--fill); } .rg-ro.sel { background: var(--teal-10); border-color: var(--teal); } .rg-ro-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .rg-ro-t b { font-size: calc(14.5px * var(--fz)); } .rg-ro-n { display: flex; align-items: baseline; gap: 4px 8px; min-width: 0; } .rg-ro.rg-new.big { padding: 12px; border: 1.5px dashed var(--teal); } .rg-ro.rg-new.big b { font-size: calc(16px * var(--fz)); } .rg-ent { flex: none; font: var(--w-medium) calc(11px * var(--fz))/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--navy-10); color: var(--ink); opacity: 0; } .rg-ro.sel .rg-ent { opacity: 1; } .rg-pr { flex: none; font-size: calc(14px * var(--fz)); white-space: nowrap; } .rg-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .rg-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 7px; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--ink); } .rg-tag.c-pay, .rg-tag.c-dog { background: var(--amber-soft); } .rg-tag.c-appt, .rg-tag.c-new { background: var(--teal-10); } .rg-tag.c-ref { background: var(--navy-10); } .rg-tag.c-res { background: var(--ok-soft); } .rg-tag.c-debt { background: var(--rose-soft); color: var(--rose); } .rg-dela { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; } .rg-delo { display: flex; align-items: center; gap: 10px; padding: 3px 4px 3px 10px; border-radius: 10px; font-size: calc(13px * var(--fz)); background: var(--fill); } .rg-delo-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; } .rg-delo.c-pay { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--orange); } .rg-delo.c-appt { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .rg-delo.c-ref { background: var(--navy-10); } .rg-delo.c-res { background: var(--ok-soft); } .rg-delo.c-debt { background: var(--rose-soft); } .rg-delo .btn { flex: none; white-space: nowrap; } /* новый пациент */ .rg-nov { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: 6px 12px; } .rg-nov .w2 { grid-column: span 2; } .rg-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* Поля пациента всегда открыты (22.10.2026): ФИО – ещё и поиск, найденные – выпадающим списком под ним; выбранный из картотеки – те же поля, заполнены (серым, не правятся). */ .rg-fio { position: relative; } .rg-drop { display: none; position: absolute; z-index: 8; top: 100%; left: 0; width: max(100%, 600px); margin-top: 3px; padding: 4px; flex-direction: column; gap: 2px; background: var(--paper); border-radius: 12px; box-shadow: 0 10px 30px -8px rgba(0, 45, 66, .32), 0 0 0 1px var(--line); max-height: 300px; overflow: auto; } .rg-fio:focus-within .rg-drop:not(:empty) { display: flex; } .rg-drop .rg-hint { padding: 3px 8px 2px; font-size: var(--fs-hint); } .rg-drop .rg-hint kbd { font: var(--w-text) max(11px, calc(10.5px * var(--fz)))/1 var(--font); padding: 2px 5px; border-radius: 5px; background: var(--navy-10); color: var(--ink); } .rg .rg-fld input.rg-ro-in { background: var(--fill); border-color: transparent; color: var(--ink); cursor: default; } .rg .rg-fld input.rg-ro-in:focus { box-shadow: none; border-color: transparent; } .rg-known .rg-seg button:disabled { cursor: default; opacity: 1; } .rg-known + .rg-fv { min-height: 22px; padding: 0; } .rg-known .rg-seg button:not(.on):disabled { color: var(--muted); } .rg-st.cur[data-step="1"] .rg-b { overflow: visible; } .rg-fld label, .rg-lb { font-size: calc(11px * var(--fz)); font-weight: var(--w-text); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .rg .rg-fld label, .rg .rg-fld .rg-lb { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-text); letter-spacing: 0; text-transform: none; } .rg-dr { position: relative; } .rg-age { position: absolute; right: 12px; bottom: 9px; font-size: calc(13px * var(--fz)); color: var(--teal-ink); pointer-events: none; } .rg-dr input { padding-right: 62px; } .rg .rg-fld input, .rg input.rg-in { height: 38px; border: 1px solid var(--navy-20); border-radius: 10px; padding: 0 12px; font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); background: var(--paper); color: var(--ink); min-width: 0; box-sizing: border-box; } .rg input.rg-in.sm { height: 32px; font-size: calc(14px * var(--fz)); width: 150px; } .rg .rg-fld input:focus, .rg input.rg-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .rg .rg-fld select { height: 38px; border: 1px solid var(--navy-20); border-radius: 10px; padding: 0 8px; font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); background: var(--paper); color: var(--ink); min-width: 0; } .rg .rg-fld select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } /* несколько услуг: строки «− 1 +», второй приём (поле «Записать на приём» — .sz-qty, .sz-v2) */ .rg-usl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rg-uln { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px 22px; align-items: center; gap: 4px 12px; min-width: 0; padding: 4px 0; } .rg-uln + .rg-uln { border-top: 1px solid var(--line-2); } .rg-un { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; } .rg-uln .rg-pr { text-align: right; font-size: calc(15px * var(--fz)); } .rg-rm { text-align: center; } .rg-uadd { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding-top: 4px; } .rg .sz-qty button { width: 30px; height: 30px; } .rg-un > b { font-size: calc(15px * var(--fz)); } .rg-dob { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; color: var(--teal-ink); } .rg-st.cur .rg-usl { flex: none; padding-bottom: 4px; } .rg-min { flex: none; font-size: calc(12.5px * var(--fz)); color: var(--muted); white-space: nowrap; } .rg-bil { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); color: var(--teal-ink); margin-left: 4px; } .rg-tag.c-allerg { background: var(--rose-soft); color: var(--rose); } .rg-tag.c-slot { background: var(--navy-10); color: var(--muted); font-weight: var(--w-medium); } /* направитель – кнопками в строку; «другой» – поле рядом */ .rg-refrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .rg-refs { display: contents; } .rg-chip.big { height: auto; min-height: 38px; padding: 4px 14px; border-radius: 12px; font-size: calc(14.5px * var(--fz)); gap: 6px; align-items: baseline; } .rg-chip.big small { font-size: calc(12px * var(--fz)); } .rg-chip.big.on { background: var(--teal-10); border-color: var(--teal); } .rg-chip.big.hi { box-shadow: 0 0 0 3px var(--teal-soft); border-color: var(--teal); } .rg-chip.rg-new { border-style: dashed; flex-wrap: wrap; text-align: left; } .rg .rg-refq { height: 38px; min-width: 180px; flex: 1 1 180px; border: 1px dashed var(--navy-20); border-radius: 12px; padding: 0 12px; font-size: calc(14.5px * var(--fz)); background: transparent; color: var(--ink); } .rg .rg-refq:focus { outline: none; border-style: solid; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); background: var(--paper); } .rg-w100 { flex: 1 1 100%; } /* «Дополнить карточку» знакомого с неполной карточкой */ .rg-dop { flex: 1 1 100%; font-size: calc(13px * var(--fz)); } .rg-dop-b { font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); } .rg-dop-f { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 4px 8px; margin-top: 4px; } .rg-dop-f .w2 { grid-column: auto; } .rg .rg-dop-f input, .rg .rg-dop-f select { height: 32px; font-size: calc(14px * var(--fz)); } .rg-pred { margin-top: 4px; padding: 8px 10px; border-radius: 12px; background: var(--fill); display: flex; flex-direction: column; gap: 6px; } .rg-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 10px; background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--orange); font-size: calc(13px * var(--fz)); } .rg-dv { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .rg-ok { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--ok); } .rg-msg { padding: 6px 10px; border-radius: 10px; background: var(--rose-soft); color: var(--rose); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } .rg-bad { color: var(--rose); font-weight: var(--w-medium); } /* переключатели */ .rg-seg { display: inline-flex; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--navy-20); overflow: hidden; flex-wrap: nowrap; } .rg-seg button { height: 38px; padding: 0 9px; border: 0; background: transparent; color: var(--ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); cursor: pointer; white-space: nowrap; flex: 1 1 auto; } .rg-seg.sm button { height: 34px; } .rg-seg button + button { box-shadow: inset 1px 0 0 var(--line); } .rg-seg button.on { background: var(--teal-10); box-shadow: inset 0 0 0 2px var(--teal); } .rg-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); cursor: pointer; white-space: nowrap; } .rg-chip.on { background: var(--teal-10); border-color: var(--teal); } .rg-chip small { color: var(--muted); } /* врачи */ .rg-otds { columns: 230px; column-gap: 10px; } .rg-otd { break-inside: avoid; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .rg-gt { font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 0 2px; } .rg-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .rg-doc { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 7px 11px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-size: calc(13.5px * var(--fz)); } .rg-doc:hover { border-color: var(--navy-20); } .rg-doc.sel { border-color: var(--teal); background: var(--teal-10); box-shadow: 0 0 0 3px var(--teal-soft); } .rg-doc-t { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .rg-doc-t b { font-size: calc(15px * var(--fz)); } .rg-fld .rg-seg { align-self: flex-start; } .rg-lb .rg-meta, .rg-fld label .rg-meta { text-transform: none; letter-spacing: 0; font-weight: var(--w-text); } .rg-stt { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); } .rg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); } .rg-dot.g { background: var(--ok); } .rg-dot.o { background: var(--orange); } .rg-svc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 2px 0 4px; font-size: calc(14px * var(--fz)); } .rg-svc > b:first-of-type { padding: 4px 10px; border-radius: 9px; background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .rg-ne { margin-top: 2px; } /* оплата: поле скидки (было общим с узкой формой «Записать на приём», снята 22.10.2026) */ .rg-box { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); box-sizing: border-box; } .rg-box.dsc { box-shadow: inset 0 0 0 1.5px var(--navy-20); } .rg-box.dsc:focus-within { box-shadow: inset 0 0 0 2px var(--teal); } .rg-box.dsc .rg-lb { display: flex; align-items: center; gap: 8px; } .rg-unit { display: inline-flex; margin-left: auto; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--navy-20); overflow: hidden; text-transform: none; letter-spacing: 0; } .rg-unit button { height: 24px; min-width: 32px; border: 0; background: transparent; color: var(--ink); font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); cursor: pointer; } .rg-unit button.on { background: var(--ink); color: var(--paper); } .rg-why { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .rg-eq { margin-right: 6px; white-space: nowrap; } .rg-kod-l { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--rose); margin-left: 6px; } /* колонка «Оплата» F2 (js/stoyka-registr-oplata.js): светлая бирюзовая, с рамкой и тенью – заметно отличается от шагов слева; пока нет пациента, врача и услуги – сжата. Жирного нет: главное – размером и цветом, кроме крупной суммы. */ .rg-pay { display: flex; flex-direction: column; gap: 8px; max-height: 100%; overflow: auto; padding: 16px 18px 14px; border-radius: 18px; background: var(--teal-wash); border: 1.5px solid var(--teal-line); box-shadow: 0 14px 30px -14px rgba(14, 127, 121, .45), 0 2px 6px rgba(0, 45, 66, .05); box-sizing: border-box; min-width: 0; } .rg-pay.cur { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft), 0 14px 30px -14px rgba(14, 127, 121, .45); } .rg-pay.off { background: var(--teal-wash-2); border-color: var(--teal-line-2); box-shadow: 0 6px 16px -10px rgba(14, 127, 121, .3); } .rg-pay .rg-n { margin: 0; flex: none; background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--teal-line-2); } .rg-ph { display: flex; align-items: center; gap: 10px; } .rg-pt { font-family: var(--head, inherit); font-size: calc(17px * var(--fz)); color: var(--ink); } .rg-ph-r { margin-left: auto; font-size: calc(12.5px * var(--fz)); color: var(--muted); text-align: right; } .rg-tk { font-size: calc(13px * var(--fz)); color: var(--muted); } .rg-tv { font: var(--w-medium) calc(44px * var(--fz))/1.05 var(--head, inherit); color: var(--ink); display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .rg-tv small { font-size: calc(19px * var(--fz)); font-weight: var(--w-text); } .rg-pay.off .rg-tv { color: var(--muted-3); } .rg-was { font-size: calc(13px * var(--fz)); color: var(--muted); min-height: 0; } .rg-was:empty { display: none; } .rg-wait { font-size: calc(14px * var(--fz)); color: var(--muted); } .rg-pb { display: flex; flex-direction: column; gap: 8px; min-height: 0; } .rg-sep { height: 1px; background: var(--teal-line-2); flex: none; } .rg-r { display: flex; align-items: center; gap: 8px; min-width: 0; } .rg-r.rg-top { align-items: flex-start; } .rg-k { flex: none; min-width: 64px; font-size: calc(14px * var(--fz)); color: var(--muted); font-weight: var(--w-text); text-transform: none; letter-spacing: 0; } .rg-k2 { min-width: 0; margin-left: auto; } .rg .rg-pay input.rg-in { height: 40px; width: 100%; min-width: 0; border: 1px solid var(--navy-20); border-radius: 10px; padding: 0 12px; font-size: calc(16px * var(--fz)); font-weight: var(--w-text); background: var(--paper); color: var(--ink); box-sizing: border-box; } .rg .rg-pay input.rg-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .rg .rg-pay input.rg-dsum { width: 96px; flex: none; } .rg .rg-pay input.rg-code { width: 84px; flex: none; } .rg .rg-pay .rg-dala input, .rg .rg-pay input#rg-dala { width: 110px; flex: none; } .rg-pay .rg-unit { margin-left: 0; box-shadow: inset 0 0 0 1px var(--navy-20); background: var(--paper); border-radius: 10px; } .rg-pay .rg-unit button { height: 38px; min-width: 38px; font-weight: var(--w-text); font-size: calc(15px * var(--fz)); } .rg-pay .rg-unit button.on { background: var(--ink); color: var(--paper); font-weight: var(--w-medium); } .rg-eq { font-size: calc(14px * var(--fz)); color: var(--teal-ink); white-space: nowrap; } .rg-dx { display: flex; flex-direction: column; gap: 6px; } .rg-dx:empty { display: none; } .rg-kinds { display: flex; flex-wrap: wrap; gap: 4px 6px; } .rg-pay .rg-chip { height: 28px; padding: 0 10px; font-weight: var(--w-text); font-size: calc(13px * var(--fz)); } .rg-kod-l { font-size: calc(12.5px * var(--fz)); color: var(--rose); margin: 0; font-weight: var(--w-text); } /* способы – плитки 3 × 2 */ .rg-pmg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .rg-pm { height: 42px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--navy-20); background: var(--paper); color: var(--ink); font-size: calc(13.5px * var(--fz)); cursor: pointer; white-space: nowrap; overflow: hidden; } .rg-pm:hover { border-color: var(--teal); } .rg-pm.on { border: 2px solid var(--teal); background: var(--paper); font-weight: var(--w-medium); box-shadow: 0 0 0 2px var(--teal-soft); } .rg-more { text-align: right; margin-top: -2px; } .rg-chv { border: 0; background: transparent; color: var(--teal-ink); font-size: calc(13.5px * var(--fz)); cursor: pointer; padding: 2px 0; } .rg-chv:hover, .rg-chv.on { text-decoration: underline; } .rg-chs { display: flex; flex-direction: column; gap: 4px; } .rg-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(14px * var(--fz)); } .rg .rg-ch input { height: 36px; width: 120px; border: 1px solid var(--navy-20); border-radius: 10px; padding: 0 10px; font-size: calc(15px * var(--fz)); background: var(--paper); color: var(--ink); box-sizing: border-box; text-align: right; } .rg .rg-ch input[data-auto] { background: var(--fill); color: var(--muted); } .rg .rg-ch input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .rg-ost { font-size: calc(13px * var(--fz)); color: var(--rose); text-align: right; } .rg-dala { justify-content: space-between; } .rg-sd { font: var(--w-medium) calc(19px * var(--fz))/1 var(--head, inherit); white-space: nowrap; margin-left: 6px; } .rg-warn.rg-w100, .rg-pay .rg-warn { font-size: calc(13px * var(--fz)); } /* печать: значок и переключатели «Чек», «Талон», «Согласие» */ .rg-pech { display: flex; align-items: center; gap: 8px; } .rg-pico { width: 20px; height: 20px; flex: none; color: var(--muted); } .rg-pech-l { display: flex; flex-wrap: wrap; gap: 6px; } .rg-tg { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--navy-20); background: var(--paper); color: var(--ink); font-size: calc(14.5px * var(--fz)); cursor: pointer; } .rg-tg i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--navy-20); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; } .rg-tg i svg { width: 12px; height: 12px; } .rg-tg.on { border: 2px solid var(--teal); padding: 0 11px; font-weight: var(--w-medium); } .rg-tg.on i { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .rg-tg[aria-disabled="true"] { cursor: default; } /* главная кнопка и подпись */ .rg-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--teal); color: var(--on-teal); font-size: calc(18px * var(--fz)); font-weight: var(--w-strong); cursor: pointer; box-shadow: 0 8px 18px -8px rgba(14, 127, 121, .6); flex: none; } .rg-go:hover:not(:disabled) { filter: brightness(1.04); } .rg-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .rg-go:disabled { background: color-mix(in srgb, var(--teal) 18%, var(--fill)); color: var(--muted-3); box-shadow: none; cursor: default; } .rg-go kbd { font: var(--w-text) calc(11px * var(--fz))/1 var(--font); padding: 3px 6px; border-radius: 6px; background: rgba(0, 45, 66, .14); } .rg-note { font-size: calc(13px * var(--fz)); color: var(--muted); text-align: center; } .rg-note:empty { display: none; } /* колонка «Записать» (из графика) */ .rg-when { display: flex; flex-direction: column; gap: 2px; } .rg-tv2 { font: var(--w-medium) calc(25px * var(--fz))/1.15 var(--head, inherit); color: var(--ink); } .rg-wsub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: calc(13.5px * var(--fz)); color: var(--muted); } .rg-lnk { border: 0; background: transparent; color: var(--teal-ink); font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); cursor: pointer; padding: 0; } .rg-lnk:hover { text-decoration: underline; } .rg-kan { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; } .rg-kan .rg-pm { height: 38px; padding: 0 14px; font-size: calc(14.5px * var(--fz)); } .rg-sms { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fz)); color: var(--muted); } .rg-wb { display: flex; flex-wrap: wrap; gap: 2px 14px; } .rg-vid { display: flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fz)); color: var(--ink); } .rg-sms svg { width: 16px; height: 16px; flex: none; color: var(--teal-ink); } .rg-quiet { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; } .rg-quiet button { border: 0; background: transparent; color: var(--muted); font-size: calc(13.5px * var(--fz)); cursor: pointer; padding: 3px 0; } .rg-quiet button:hover { color: var(--teal-ink); text-decoration: underline; } .rg-ne-w { display: flex; flex-direction: column; gap: 6px; font-size: calc(13.5px * var(--fz)); } /* окно «из графика»: лист поверх календаря, ниже шапки «Стойки» */ .rg-ov { position: fixed; right: 0; bottom: 0; z-index: 36; display: flex; align-items: flex-start; justify-content: center; padding: 12px 16px; background: rgba(0, 45, 66, .22); backdrop-filter: blur(2px); overflow: auto; } .rg-ov-sheet { width: 100%; max-width: 1320px; padding: 12px 18px 16px; border-radius: 18px; background: color-mix(in srgb, var(--teal-10) 50%, var(--bg)); box-shadow: 0 24px 60px -16px rgba(0, 45, 66, .4), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; } .rg-ov-top { display: flex; align-items: center; gap: 10px; } .rg-ov-t { font-family: var(--head, inherit); font-size: calc(19px * var(--fz)); } .rg-ov-x { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: calc(14px * var(--fz)); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .rg-ov-x:hover { color: var(--ink); } .rg-ov-x kbd { font: var(--w-medium) calc(11px * var(--fz))/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--navy-10); color: var(--ink); } .rg.rg-slot { max-width: none; margin: 0; height: auto !important; } .rg.rg-slot .rg-grid { align-items: start; } /* под карточкой */ .main:has(> #body > .rg) { padding-top: 16px; padding-bottom: 10px; max-width: 1640px; } .rg-niz { flex: none; display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; padding: 0 6px; } .rg-last { flex: 1 1 320px; font-size: calc(13px * var(--fz)); color: var(--muted); min-height: 18px; } .rg-last b { color: var(--ink); } .rg-keys { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12px * var(--fz)); color: var(--muted); margin-left: auto; } .rg-keys kbd, .rg-pod kbd, .rg-warn kbd { font: var(--w-medium) calc(11px * var(--fz))/1 var(--font); padding: 2px 5px; border-radius: 6px; background: var(--navy-10); color: var(--ink); } /* «Настройки › Правила регистрации» */ .rgp-row { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--fz)); cursor: pointer; } .rgp-time { width: 110px; padding: 4px 8px; font-size: calc(15px * var(--fz)); } .lab-k-vyd { color: var(--teal-ink); } @media (max-width: 699px) { .rg-nov, .rg-dop-f { grid-template-columns: minmax(0, 1fr); } .rg-grid { grid-template-columns: minmax(0, 1fr); } .rg-nov .w2 { grid-column: auto; } .rg-st { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 12px; } .rg-st.cur { min-height: 0; } .rg-b { grid-column: 1 / -1; } .rg-l { padding-top: 6px; } .rg-card, .rg-st.cur .rg-b { overflow: visible; } .rg-pay { overflow: visible; } .rg-otds { columns: auto; } .rg-keys { display: none; } .rg-uln { grid-template-columns: minmax(0, 1fr) auto auto 22px; } .rg-ov { padding: 0; } .rg-ov-sheet { border-radius: 0; min-height: 100%; } } /* «Лист ожидания» в «Стойке» (21.10.2026): заголовок и кнопка – одной строкой над таблицей. */ .oz-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .oz-t { min-width: 0; flex: 1 1 320px; } .oz-t h2 { margin: 0; font-size: 20px; line-height: 1.2; } .oz-t p { margin: 2px 0 0; } /* Цена и минуты врача у услуги (пакет 3, 21.10.2026): строка врача во вкладке «Кто делает». */ .sv-docrow { display: flex; align-items: center; gap: 8px; } .sv-docrow .sv-doc { flex: 1; min-width: 0; } .sv-own { display: flex; gap: 6px; flex: none; } .sv-own input { width: 74px; padding: 4px 6px; font-size: calc(13px * var(--fz)); text-align: right; } .sv-own-m { width: 58px !important; } .sv-own-h { margin: 0 0 6px; } /* Клетка группы в «Кто что делает» (пакет 3, 21.10.2026): вся группа сразу. */ .wd-t tr.sec-row td.wd-g { position: static; text-align: center; cursor: pointer; font-size: calc(13px * var(--fz)); text-transform: none; letter-spacing: 0; padding: 3px 2px; } .wd-t tr.sec-row td.wd-g.ro { cursor: default; } .wd-t tr.sec-row td.wd-g:not(.ro):hover { background: var(--line); } .wd-t tr.sec-row td.wd-g-on { color: var(--teal-ink); } .wd-t tr.sec-row td.wd-g-part { color: var(--amber); } .wd-t tr.sec-row td.wd-g.ban { color: var(--rose); } .wd-t tr.sec-row td.wd-g:focus { outline: 2px solid var(--teal); outline-offset: -2px; } /* Оплата по услугам и группам (пакет 3, 21.10.2026): вкладка «Оплата» врача. */ .sk-usl-d { border-top: 1px solid var(--line); padding: 6px 0; } .sk-usl-d > summary { cursor: pointer; padding: 4px 0; } .sk-usl-t { width: 100%; margin: 4px 0 2px; } .sk-usl-t td { padding: 5px 8px; font-size: calc(14px * var(--fz)); } .sk-usl-t tr { cursor: pointer; } .sk-usl-t tr:hover { background: var(--line); } .sk-usl-t tr:focus { outline: 2px solid var(--teal); outline-offset: -2px; } .sk-usl-d, .sk-usl-g td, .sk-usl-d td { text-align: left; } .sk-usl-t td.num { text-align: right; white-space: nowrap; } .sk-usl-g td, .sk-usl-d td[colspan] { background: transparent; } .sk-usl-g > td:first-child { padding-left: 8px; } .sk-usl-s > td:first-child { padding-left: 22px; } .sk-usl-go { float: right; color: var(--teal-ink); font-size: calc(13px * var(--fz)); } .sk-usl-t-srv { background: var(--teal); color: var(--on-teal); } .sk-usl-t-grp, .sk-usl-t-dep { background: var(--line); } .sk-usl-t-rate { background: transparent; color: var(--muted); border: 1px solid var(--line); } /* «Мои услуги» врача (пакет 3, 21.10.2026; рабочий раздел – 29.10.2026, замечания 4 и 5). Шкала шрифтов волны 1: вес 400/500/700 (--w-*), подсказка – --fs-hint. */ .mu-top { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; } .mu-top input { flex: 1 1 260px; max-width: 420px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: calc(15px * var(--fz)); } .mu-hint { flex: 1 1 260px; } .mu-d { padding: 8px 14px 6px; margin-bottom: 8px; } .mu-d > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 4px 0; cursor: pointer; } .mu-d > summary::-webkit-details-marker { display: none; } .mu-d > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--muted); font-size: calc(18px * var(--fz)); line-height: 1; } .mu-d[open] > summary::before { transform: rotate(90deg); } .mu-d > summary b { font: var(--w-medium) calc(16px * var(--fz))/1.3 var(--head); } .mu-d .sm-t { flex: 1; min-width: 0; } .mu-d .sm-r b { color: var(--ink); font-size: calc(14px * var(--fz)); margin-left: 4px; font-weight: var(--w-medium); } .mu-t { width: 100%; margin-top: 4px; table-layout: fixed; font-size: calc(14px * var(--fz)); } .mu-t col.c-pr { width: 140px; } .mu-t col.c-tm { width: 162px; } .mu-t col.c-n { width: 82px; } .mu-t col.c-pt { width: 214px; } .mu-t col.c-act { width: 130px; } .mu-t th.num, .mu-t td.num { text-align: right; white-space: nowrap; } .mu-t td.act { text-align: right; } .mu-t td.mu-p, .mu-t th:nth-child(5) { padding-left: 20px; } .mu-t td .tag { padding: 1px 7px; margin-left: 5px; font-size: calc(11px * var(--fz)); } .mu-t td .tag.mine { margin-left: 4px; background: var(--teal-10); color: var(--teal-ink); } .mu-t tr.mu-g td { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); padding-top: 12px; padding-bottom: 4px; } .mu-t tr.mu-g td span { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: var(--w-text); } .mu-t tr.mu-s td:first-child { font-weight: var(--w-medium); } .mu-t td b { font-weight: var(--w-medium); } .mu-t .mu-l { display: none; } tr.mu-s:hover td { background: var(--fill); } .mu-note { margin-top: 8px; } .ask-btn { border: 0; background: none; padding: 4px 6px; border-radius: 8px; color: var(--teal-ink); font-weight: var(--w-strong); font-size: calc(13.5px * var(--fz)); cursor: pointer; } .ask-btn::after { content: " ›"; } .ask-btn:hover { background: var(--teal-10); } .mu-pt { border: 0; background: none; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 45%, transparent); text-underline-offset: 3px; } .mu-pt.gen { color: var(--muted); font-weight: var(--w-text); text-decoration-color: var(--line); } .ask-l { font-weight: var(--w-text); font-size: var(--fs-hint); color: var(--teal-ink); margin-top: 1px; } tr.mu-x td { background: var(--fill); } tr.mu-x td:first-child { color: var(--muted); } .mu-t td.why-x { color: var(--muted); font-size: var(--fs-hint); padding-left: 20px; } .status.s-x { background: var(--navy-10); color: var(--muted); margin-left: 6px; font-size: var(--fs-hint); font-weight: var(--w-medium); } .mu-in { margin-bottom: 10px; padding: 10px 14px; } .mu-in h3 { margin: 0 0 4px; } .mu-msg { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; max-width: 760px; } .mu-msg .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--teal-10); color: var(--teal-ink); display: flex; align-items: center; justify-content: center; } .mu-msg .ic svg { width: 22px; height: 22px; } .mu-msg .tx { font-size: calc(15px * var(--fz)); line-height: 1.45; } .mu-msg .row { margin-top: 12px; } .mu-nf { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 760px; padding: 12px 14px; flex-wrap: wrap; } .modal .m-sub { margin: 0 0 14px; } .modal .m-sub b { color: var(--ink); font-weight: var(--w-medium); } .modal .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mu-sug { margin-top: 4px; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .mu-sug > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line-2); } .mu-sug > div:first-child { border-top: 0; } .mu-sug > div[onclick] { cursor: pointer; } .mu-sug > div.on { background: var(--teal-10); } .mu-sug b { font-weight: var(--w-medium); } @media (max-width: 699px) { .mu-d { padding: 8px 10px; } .mu-t { table-layout: auto; } .mu-t thead, .mu-t colgroup { display: none; } .mu-t, .mu-t tbody { display: block; } .mu-t tr.mu-s, .mu-t tr.mu-g { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--line-2); } .mu-t tr.mu-g { border-top: 0; padding: 8px 0 2px; } .mu-t th, .mu-t td { padding: 0; font-size: calc(13px * var(--fz)); border: 0; } .mu-t tr.mu-s td:first-child, .mu-t tr.mu-g td { flex: 1 1 100%; } .mu-t td.mu-p { padding-left: 0; flex: 1 1 100%; } .mu-t td.act { margin-left: auto; } .mu-t td.num { white-space: normal; text-align: left; } .mu-t .mu-l { display: inline; color: var(--muted); font-size: var(--fs-hint); margin-right: 4px; } .mu-t td.why-x { padding-left: 0; flex: 1 1 100%; } .mu-t tr.mu-x td:first-child { flex: 1 1 100%; } .modal .two { grid-template-columns: 1fr; } } /* ======== Личный размер карты приёма (21.10.2026, js/razmer.js) ======== */ .rz-w { position: relative; display: inline-flex; } .rz-b { min-width: 44px; padding: 0 12px; font-weight: var(--w-medium); letter-spacing: -.02em; } .rz-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: 440px; max-width: calc(100vw - 24px); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(10, 60, 50, .16); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .rz-pop[hidden] { display: none; } .rz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rz-n { font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); } .rz-seg { display: inline-flex; gap: 4px; } .rz-seg button { border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: calc(13px * var(--fz)); cursor: pointer; color: var(--ink); white-space: nowrap; } .rz-seg button.on { background: var(--teal); border-color: var(--teal); color: var(--on-teal); font-weight: var(--w-medium); } .rz-obrazec { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--fill); } .rz-obrazec > b { font-size: calc(11.5px * var(--fz)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .rz-obrazec > span { font-size: calc(14px * var(--fz)); } .rz-obrazec input { width: 220px; padding: var(--mod-in-pad); font-size: var(--in-fs); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); } .rz-bt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rz-sub { font-size: var(--fs-hint); color: var(--muted); } .rz-bt .chip { min-height: var(--mchip-h); padding: var(--mchip-pad); font-size: var(--mchip-fs); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; } /* ======== Ошибка входа (21.10.2026, js/auth.js `authOshibka`) ======== Заказчик: «надпись «не тот логин или пароль» почти не видно – надо красным». Красная плашка над кнопкой «Войти» и красная рамка у полей; пустая – не занимает места. */ .au-err { display: none; margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--rose-soft); color: var(--rose); border: 1px solid var(--rose); font-size: calc(15px * var(--fz)); font-weight: var(--w-strong); line-height: 1.35; } .au-err.on { display: block; } .au-err.on::before { content: "!"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 8px; border-radius: 50%; background: var(--rose); color: #fff; font-size: .85em; vertical-align: 1px; } input.bad { box-shadow: inset 0 0 0 2px var(--rose) !important; } /* ======== «Диагноз поставлен на основании» (21.10.2026, js/basis.js) ======== Заказчик: «прячется между другими, и может врач не заметит – надо выделить». Бирюзовая плашка с жирной подписью и рамкой слева; пока основание не отмечено у «ясного» диагноза – оранжевая («внимание», брендбук) с меткой. */ .basis { margin: 12px 0 6px; padding: 10px 12px 12px; border-radius: 12px; background: var(--teal-10); box-shadow: inset 4px 0 0 var(--teal), inset 0 0 0 1px var(--teal-soft); } .basis-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); color: var(--ink); } .basis-h::before { content: "✓"; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--teal); color: var(--on-teal); font-size: .8em; font-weight: var(--w-medium); } .basis.pust { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--orange), inset 0 0 0 1px var(--orange); } .basis.pust .basis-h::before { content: "!"; background: var(--orange); } .basis-need { padding: 1px 9px; border-radius: 999px; background: var(--orange); color: var(--on-teal); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } /* ======== СВЁРНУТОЕ – КНОПКОЙ (21.10.2026, пакет 2) ======== Заказчик: «свёрнутые тоже надо кнопкой, чтобы было видно, а то почти не видны». Одно место на всё свёрнутое: группа (`.fold-h`: списки, шаблоны, настройки), свёрнутый блок карты (`.module.folded`), блок в редакторе шаблона (`.builder-mod.click`), анкета пациента (`.ank-hd`), отделение в списке врачей стойки. Свёрнутое – плашка с рамкой и стрелкой в кружке справа или слева, при наведении – бирюзовая; раскрытое – спокойный заголовок, стрелка та же. Новая свёртка берёт эти классы, а не своё оформление. */ .fold-h:not(.open), .ank-card:not(.open) .ank-hd { background: var(--paper); box-shadow: inset 0 0 0 1px var(--navy-20); border-radius: 12px; } .fold-h:not(.open):hover, .ank-card:not(.open) .ank-hd:hover { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .fold-h .fold-a, .ank-hd .fold-a { flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font-style: normal; line-height: 1; background: var(--fill); color: var(--ink); font-size: calc(12px * var(--fz)); } .fold-h:not(.open) .fold-a, .ank-card:not(.open) .ank-hd .fold-a { background: var(--teal); color: var(--on-teal); } .ank-hd.click { cursor: pointer; padding: 7px 10px; border-radius: 12px; } /* Свёрнутый блок карты и блок в редакторе шаблона: стрелка-кружок справа. */ .module.folded, .builder-mod.click { position: relative; padding-right: 52px; } .module.folded { outline: 1px solid var(--navy-20); outline-offset: -1px; } .module.folded:hover { outline-color: var(--teal); } .builder-mod.click { box-shadow: inset 0 0 0 1px var(--navy-20); } .module.folded::after, .builder-mod.click::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--on-teal); font-size: calc(12px * var(--fz)); } .builder-mod.click:hover { box-shadow: inset 0 0 0 1.5px var(--teal); } .builder-mod.click { cursor: pointer; } /* «свернуть» в раскрытом блоке – маленькая кнопка со стрелкой вверх. */ .module .fold-x, .builder-mod > .row .linkish { border: 1px solid var(--navy-20); border-radius: 999px; background: var(--paper); color: var(--ink); padding: 0 12px 0 10px; min-height: calc(32px * var(--fb)); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); } .module .fold-x::before, .builder-mod > .row .linkish::before { content: "▴"; margin-right: 6px; font-size: .85em; color: var(--teal-ink); } .module .fold-x:hover, .builder-mod > .row .linkish:hover { border-color: var(--teal); background: var(--teal-10); color: var(--ink); } /* Крупный шрифт (пакет 2, 21.10.2026): таблицы «Услуги и цены» и «Склад» на ноутбуке не шире окна – заголовки и числа переносятся. */ .table.sv-t th, .table.st-table th, .table.sv-t th.num, .table.st-table th.num { white-space: normal; } .table.sv-t th, .table.sv-t td, .table.st-table th, .table.st-table td { padding-left: 7px; padding-right: 7px; } .table.sv-t td.sv-st { padding-right: 36px; } .table.sv-t td.sv-st { padding-right: 30px; } .table.sv-t th, .table.sv-t td { padding-left: 6px; padding-right: 6px; } /* Крупный шрифт (пакет 2, 21.10.2026): длинная фамилия на плашке недели (~140 px) остаётся целиком. */ .sz-grid .sz-v { font-size: calc(14px * var(--fz) * .9); padding-left: 7px; padding-right: 7px; } /* Крупный шрифт (пакет 2, 21.10.2026): «Реестр заказов» – рабочая таблица в один экран (18+ строк на 1366×768), потому шрифт в ней растёт меньше общего, время не переносится. */ .ln-t { font-size: calc(13.5px * var(--fz) * .93); } .ln-t .ln-c-t { width: 116px; white-space: nowrap; } .ln-t td, .ln-t th { padding-left: 8px; padding-right: 8px; } .ln-pn b { font-size: calc(13.5px * var(--fz) * .93); } .ln-pn small { font-size: max(11px, calc(11px * var(--fz) * .93)); } .ln-t th:nth-child(2) { width: 22%; } .ln-t th:nth-child(3) { width: 15%; } .ln-t .ln-c-o { width: 226px; } .ln-t .ln-c-s { width: 88px; } /* ======== «Стойка»: левое меню – узкая полоса значков (заказчик 21.10.2026; js/stoyka.js `stNavApply`) ======== На экране «Стойки» меню само сворачивается (класс `nav-min` на `.app`, ставится вместе с `st-on`), рабочему экрану хватает места. Шире 980 px – полоса 64 px, как на пол-экрана (блок выше «Окно на пол-экрана»); «☰» там сворачивает и разворачивает насовсем (настройка компьютера), а не раскрывает меню поверх. Переключатель «Стойка / Админ» – двумя значками, «Найти» – лупой, подписи – подсказками. Только вид: права и состав меню – те же. */ .st-rezhim .nav-ic { display: none; } @media (min-width: 981px) { .app.nav-min { grid-template-columns: 64px minmax(0, 1fr); } .app.nav-min > .nav { padding: 10px 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .app.nav-min > .nav::-webkit-scrollbar { display: none; } .app.nav-min .brand { padding: 0 0 6px; display: flex; justify-content: center; } .app.nav-min .brand-logo { width: 40px; margin: 0; } .app.nav-min .brand.txt b, .app.nav-min .brand.svoy b { display: none; } .app.nav-min .nav .nav-burger { display: flex; justify-content: center; align-items: center; width: 100%; height: 36px; min-height: 0; padding: 0; margin: 0 0 6px; font-size: calc(18px * var(--fz)); border-radius: 10px; background: var(--fill); } .app.nav-min .nav-burger-t { display: none; } .app.nav-min .nav .nav-find { justify-content: center; padding: 8px 0; margin-bottom: 4px; } .app.nav-min .nav .nav-find > span, .app.nav-min .nav .st-nav .nav-t { display: none; } .app.nav-min .nav button { justify-content: center; padding: 9px 0; gap: 0; } .app.nav-min .nav .who { padding: 4px; flex-direction: column; gap: 4px; box-shadow: none; background: transparent; } .app.nav-min .nav .who .who-t { display: none; } .app.nav-min .nav .who .out { width: 32px; height: 32px; } /* Развёрнутое меню в «Стойке»: «‹‹» вверху справа сворачивает его обратно. */ .app.st-on:not(.nav-min) .nav .nav-burger { display: flex; justify-content: center; align-items: center; position: absolute; top: 14px; right: 10px; width: 32px; height: 32px; min-height: 0; padding: 0; margin: 0; border-radius: 10px; background: var(--fill); font-size: 0; } .app.st-on:not(.nav-min) .nav .nav-burger::before { content: "\00AB"; font-size: calc(20px * var(--fz)); line-height: 1; padding-bottom: 2px; } .app.st-on:not(.nav-min) .nav .nav-burger-t { display: none; } } @media (min-width: 700px) { .app.nav-min:not(.nav-open) .nav .st-nav .st-kbd { display: none; } /* Переключатель «Стойка / Админ» в полосе: два значка столбиком, выбранный – на белом. */ .app.nav-min:not(.nav-open) .nav .st-rezhim { display: flex; flex-direction: column; flex: none; gap: 2px; padding: 2px; margin: 0 0 6px; } .app.nav-min:not(.nav-open) .nav .st-rezhim button { flex: none; height: 34px; padding: 0; gap: 0; } .app.nav-min:not(.nav-open) .nav .st-rezhim button > span { display: none; } .app.nav-min:not(.nav-open) .nav .st-rezhim .nav-ic { display: block; } .app.nav-min:not(.nav-open) .nav .st-rezhim button.on .nav-ic { stroke: var(--ink); } } /* ======== «Записать на приём»: перенос записи – гладко (заказчик 21.10.2026; js/stoyka-perenos.js) ======== Взяли запись – карточка идёт за курсором, на её месте пунктирное «гнездо»; окошки, куда нельзя, притушены; у курсора – подсказка со словами; отпустили – карточка садится на место. Режим «Перенести»: полоса внизу календаря вместо условных обозначений (сетка не сдвигается), окошки так же притушены, при наведении – «сюда». */ .sz-who h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* имя сжимается с многоточием, а не уезжает за переключатель (находка №5, 29.10.2026) */ .sz-who .sz-fr { flex: none; } .sz-who-d { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* первым сжимается отделение, часы – нет */ /* Тесно (`szFitKto`, js/stoyka-zapisat.js) – по очереди уходит: отделение с «окошко N мин» целиком (а не «Т…»), слово «свободно», число свободных, часы; имя врача держится до последнего и только потом сжимается с многоточием. */ .sz-who.who1 .sz-who-d, .sz-who.who1 .sz-who-s { display: none; } .sz-who.who2 .sz-fr > span:first-child { display: none; } .sz-who.who3 .sz-fr, .sz-who.who4 .sz-ch { display: none; } .sz-who-s { flex: none; } @media (max-width: 1500px) { .sz-who-s { display: none; } } .sz-sl { gap: 6px; } .sz-v.drag { transition: filter .12s ease; } .sz-v.drag:hover { filter: drop-shadow(0 3px 6px rgba(0, 45, 66, .22)); } .sz-v.moving { animation: sz-mv 1.3s ease-in-out infinite; } @keyframes sz-mv { 0%, 100% { outline-color: var(--orange); } 50% { outline-color: rgba(255, 140, 0, .25); } } /* Карточка в руке. */ .sz-fly { position: fixed !important; left: 0 !important; top: 0 !important; right: auto !important; z-index: 9000; pointer-events: none; margin: 0; box-shadow: 0 10px 28px rgba(0, 45, 66, .30), inset 0 0 0 1px var(--teal) !important; transform-origin: 20px 12px; will-change: transform; opacity: .94; } /* Окошки, куда запись не ляжет: притушены (причина – подсказкой окошка). */ .sz-sl.no-s { background: repeating-linear-gradient(135deg, var(--bg) 0 6px, var(--paper) 6px 12px); box-shadow: inset 0 0 0 1px var(--line); opacity: .55; cursor: not-allowed; } .sz-sl.no-s:hover { box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); opacity: .55; } .sz-sl.no-s:hover i { color: var(--rose); } .sz-sl.ov-s { box-shadow: inset 0 0 0 1.5px var(--orange); border: 0; } .sz.moving .sz-sl:not(.past):not(.no-s):hover { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); color: var(--ink); } .sz.moving .sz-sl:not(.past):not(.no-s):hover i { color: var(--ok); } body.sz-dragging .sz-sl:hover { box-shadow: inset 0 0 0 1.5px var(--navy-20); color: var(--muted); opacity: .85; } body.sz-dragging .sz-sl:hover i { display: none; } body.sz-dragging .sz-sl.no-s:hover { opacity: .55; } /* Подсказка у курсора: можно / нельзя и почему. */ .sz-dtip { position: fixed; z-index: 9001; max-width: 320px; padding: 6px 10px; border-radius: 10px; pointer-events: none; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); line-height: 1.3; background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px rgba(0, 45, 66, .28); border-left: 4px solid var(--ok); } .sz-dtip[hidden] { display: none; } .sz-dtip.bad { border-left-color: var(--rose); } .sz-dtip.over { border-left-color: var(--orange); } .sz-dtip.same { border-left-color: var(--navy-20); } /* «Перенесено» в углу: что сделано, откуда → куда, «Сообщить пациенту», полоска времени «Отменить». */ .st-toast.st-undo { position: relative; overflow: hidden; padding-bottom: 13px; } .st-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); transform-origin: left center; animation: st-bar var(--ms, 6s) linear forwards; } @keyframes st-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } .sz-pt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .sz-pt-h b { font-weight: var(--w-medium); } .sz-pt-w { opacity: .85; font-size: calc(13px * var(--fz)); } .sz-pt .sz-soob { padding: 2px 0; } @media (prefers-reduced-motion: reduce) { .sz-v.moving, .st-toast-bar { animation: none; } .sz-v.drag { transition: none; } } /* ======== Реестр заказов: меню заказа и «Изменить заказ» (22.10.2026; js/stoyka-zakaz.js, docs/ustav/zapis-lenta.md) Меню – рядом со строкой, без шестерёнки: шапка (кто, когда, оплаты), пункты с буквой клавиатуры, недоступное серым с причиной справа. */ .zak-menu { position: fixed; z-index: 60; width: 440px; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); padding: 4px 0 6px; outline: none; } .zak-hd { padding: 9px 14px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; } .zak-hd1 { font-size: calc(13.5px * var(--fz)); color: var(--muted); } .zak-hd1 b { color: var(--ink); font-weight: var(--w-medium); margin-right: 4px; } .zak-fakty { font-size: calc(12px * var(--fz)); color: var(--muted); line-height: 1.45; margin-top: 3px; } .zak-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 14px; border: 0; background: none; color: var(--ink); font-size: calc(14px * var(--fz)); font-weight: var(--w-text); text-align: left; cursor: pointer; } .zak-mi:hover, .zak-mi:focus-visible { background: var(--teal-10); outline: none; } .zak-mi.off { color: var(--muted); cursor: default; } .zak-mi.off .zak-ic, .zak-mi.off .zak-t { opacity: .55; } .zak-mi.off:hover { background: none; } .zak-ic { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .zak-t { flex: 1 1 auto; white-space: nowrap; } .zak-sum { color: var(--amber); font-weight: var(--w-strong); margin-left: 4px; } .zak-why { font-size: var(--fs-hint); font-weight: var(--w-text); color: var(--muted); white-space: nowrap; } .zak-b { font: var(--w-medium) calc(11px * var(--fz))/1 var(--font, inherit); color: var(--muted); background: var(--bg); border-radius: 5px; padding: 3px 6px; box-shadow: inset 0 0 0 1px var(--line); } .zak-mi.zak-warn:not(.off) { color: var(--rose); } .zak-hr { height: 1px; background: var(--line-2); margin: 4px 0; } .ln-r.ln-sel td { background: var(--teal-10); } /* «Изменить заказ» – окно, компактно: пациент строкой, услуги списком, четыре поля в две колонки. */ /* «Изменить заказ», 22.10.2026 (замечание №2; макет makety-2026-10-22/zakaz-izmenit.html): кто и когда, услуги с замком, справа счёт, «Ещё» свёрнуто строкой, одна главная кнопка. Цвета – переменными (тёмная тема своя). */ #modal.zak-win { width: min(640px, 100%); } .zak-win [hidden] { display: none !important; } .zak-hd { display: flex; align-items: center; margin-bottom: 10px; } /* Шапка меню строки «Реестра заказов» – тоже `.zak-hd`, но не строка: две строки по смыслу (находка №16, 29.10.2026; без этого правило выше делало из неё flex-ряд и текст рвался: «карта / 00002»). */ .zak-menu .zak-hd { display: block; margin-bottom: 4px; } .zak-menu .zak-hd1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zak-menu .zak-sum { display: inline; margin-top: 0; } /* то же имя у блока итога окна «Изменить заказ» (grid, ниже) – сумма «Оплатить 150» уходила на вторую строку */ .zak-menu .zak-f { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .zak-hd h3 { margin: 0; font: var(--w-medium) calc(19px * var(--fz))/1.2 var(--head); } .zak-close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill); font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; } .zak-close:hover { background: var(--navy-10); } .zak-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg); } .zak-who .av-b { grid-row: span 2; width: 44px; height: 44px; font-size: calc(14px * var(--fz)); } .zak-n { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .zak-n b { font-size: calc(16px * var(--fz)); } .zak-c { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .zak-w2 { grid-column: 2; font-size: calc(13.5px * var(--fz)); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .zak-w2 b { color: var(--ink); font-weight: var(--w-medium); } .zak-w2 select { height: 32px; min-height: 32px; border: 0; border-radius: 10px; background-color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); padding: 0 10px; font-weight: var(--w-medium); color: var(--ink); margin: 0; width: auto; } .zak-card { grid-row: 1 / span 2; grid-column: 3; } .zak-lk { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .zak-lk:hover { text-decoration: underline; } .zak-lk:disabled { opacity: .4; cursor: default; text-decoration: none; } .zak-banner { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); } .zak-sec { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .zak-srv { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); } .zak-li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 5px 6px 5px 14px; border-bottom: 1px solid var(--line-2); font-size: calc(14.5px * var(--fz)); } .zak-li.new { background: var(--teal-10); } .zak-li.gone .zak-nm { text-decoration: line-through; color: var(--muted); } .zak-nm { flex: 1 1 auto; min-width: 0; font-weight: var(--w-medium); } .zak-tg { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); background: var(--fill); border-radius: 7px; padding: 2px 7px; white-space: nowrap; } .zak-tg.ok { background: var(--ok-soft); color: var(--ok); } .zak-tg.new { background: var(--teal-soft); color: var(--teal-ink); } .zak-tg.bad { background: var(--rose-soft); color: var(--rose); } .zak-q { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 84px; } .zak-qb { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--fill); color: var(--ink); font-weight: var(--w-medium); cursor: pointer; } .zak-qb:disabled { opacity: .35; cursor: default; } .zak-q span { min-width: 22px; text-align: center; font-weight: var(--w-medium); } .zak-pr { width: 70px; text-align: right; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .zak-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: calc(20px * var(--fz)); line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0; } .zak-x:hover { background: var(--rose-soft); color: var(--rose); } .zak-x.off { font-size: calc(15px * var(--fz)); } .zak-x.off:hover { background: var(--fill); color: var(--ink); } .zak-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zak-lockline { flex: 0 0 100%; margin: -2px 0 2px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .zak-add { position: relative; padding: 6px; } .zak-add input { width: 100%; height: 40px; margin: 0; border: 0; border-radius: 10px; padding: 0 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); outline: 0; font-size: calc(15px * var(--fz)); } .zak-add input:focus { box-shadow: inset 0 0 0 2px var(--teal); } .zak-found { position: absolute; left: 6px; right: 6px; top: 46px; z-index: 5; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); padding: 4px; } .zak-f { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; color: var(--ink); } .zak-f span:first-child { flex: 1 1 auto; } .zak-f.on, .zak-f:hover { background: var(--teal-10); } .zak-found0 { padding: 4px 8px 6px; } .zak-sum { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; margin-top: 10px; align-items: start; } .zak-sum > .zak-bill { grid-column: 2; } .zak-why-l { margin-bottom: 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .zak-why-l .req { color: var(--rose); } .zak-why-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .zak-why .chip { height: 30px; } .zak-why input { flex: 1 1 150px; height: 32px; margin: 0; font-size: calc(14px * var(--fz)); } .zak-why.bad .chip:not(.on) { box-shadow: inset 0 0 0 1.5px var(--rose); } .zak-bill { border-radius: 14px; background: var(--bg); padding: 8px 14px 10px; } .zak-ln { display: flex; gap: 12px; padding: 2px 0; font-size: calc(14px * var(--fz)); } .zak-ln span:first-child { flex: 1; min-width: 0; } .zak-ln b { white-space: nowrap; font-weight: var(--w-medium); } .zak-ln.minus b { color: var(--teal-ink); } .zak-ln s { color: var(--muted); font-weight: var(--w-text); } .zak-tot { display: flex; align-items: baseline; gap: 12px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); } .zak-tot span { font-size: calc(13px * var(--fz)); font-weight: var(--w-strong); color: var(--muted); } .zak-tot b { margin-left: auto; font: var(--w-medium) 26px/1.1 var(--head); white-space: nowrap; } .zak-tot.zero b { color: var(--ok); font-size: 20px; } .zak-more { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg); font-size: calc(13.5px * var(--fz)); color: var(--muted); } .zak-more b { color: var(--ink); font-weight: var(--w-medium); } .zak-more .zak-lk { margin-left: auto; } .zak-more-f { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .zak-more-f .field { margin-bottom: 8px; } .zak-more-f .field label { font-size: calc(12.5px * var(--fz)); } .zak-more-f .zak-full { grid-column: 1 / -1; } .zak-more-f input, .zak-more-f select { height: 40px; min-height: 40px; } .zak-w { margin: 8px 0 0; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--rose); } .zak-w:empty { display: none; } .zak-kn { flex-wrap: wrap; margin-top: 10px; gap: 10px; } .zak-kn .btn.teal { flex: 1; height: 50px; font-size: calc(16px * var(--fz)); border-radius: 14px; gap: 6px; } .zak-kn .btn.teal b { font-weight: var(--w-strong); } .zak-kn .btn.ghost { height: 50px; border-radius: 14px; } .zak-quiet { flex: 0 0 100%; text-align: center; color: var(--muted); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); padding: 2px 0; } @media (max-height: 820px) { .zak-li { min-height: 40px; } .zak-kn .btn.teal, .zak-kn .btn.ghost { height: 44px; } .zak-tot b { font-size: 22px; } } .zak-rez, .zak-uv { display: flex; flex-direction: column; gap: 4px; } .zak-rez-l, .zak-uv-l { display: flex; align-items: center; gap: 8px; min-height: 32px; } .zak-gotovo { color: var(--teal-ink); font-weight: var(--w-strong); } @media (max-width: 600px) { .zak-sum, .zak-more-f { grid-template-columns: 1fr; } .zak-sum > .zak-bill { grid-column: 1; } .zak-menu { width: calc(100vw - 16px); } .zak-pr { width: 56px; } .zak-q { min-width: 0; } } /* ======== Главная директора и главврача, 22.10.2026 (макет «Главная», замечания 12, 13, 18) ======== js/home.js (шапка, главврач), js/pult.js (директор), js/pult-ochered.js, js/proverka.js. Одна сетка на шесть долей: на мониторе от 1600 px – «Требует внимания» и «Финансы» по три, «Деньги», «Направления» и «Очередь» по две; на ноутбуке – две колонки, очередь во всю ширину; уже 1250 px – одна. Числа плиток на одной линии: у каждой плитки общие строки (subgrid). Цвета – токены; телефон – только в @media (max-width: 699px) внизу блока. */ /* Главная – во всю ширину окна (у остальных экранов 1320 px). */ .app.home-wide .main { max-width: none; padding-top: 18px; } /* Шапка: приветствие слева; дата, период, «данные на ЧЧ:ММ» – справа одним рядом, одной высоты. */ .home-top { align-items: center; margin-bottom: 12px; } .home-top .tools { flex-wrap: nowrap; gap: 12px; } .home-date { color: var(--muted); font-size: calc(14.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; } .home-date .home-ds { display: none; } .pult-per, .home-rf { height: 44px; } .pult-per { padding: 0 6px; } .home-rf { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .home-rf:hover { box-shadow: var(--shadow), var(--shadow-lift); } .home-rf svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .home-rf:hover svg { stroke: var(--teal-ink); } /* Главврач: период – подписью с чертой слева (выбора периода у него нет). */ .per-cap { display: inline-flex; align-items: baseline; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: calc(14px * var(--fz)); white-space: nowrap; } .per-cap b { color: var(--ink); } @media (max-width: 1599px) { .home-date .home-df { display: none; } .home-date .home-ds { display: inline; } .home-top .tools { gap: 10px; } } /* Метки */ .pill { display: inline-flex; align-items: center; align-self: center; height: 22px; padding: 0 9px; border-radius: 11px; font: var(--w-medium) calc(12px * var(--fz))/1 var(--font); white-space: nowrap; background: var(--fill); color: var(--ink); } .pill.rose { background: var(--rose-soft); color: var(--rose-ink); } /* Плитки директора: подпись и метка сравнения | число | пояснение | линия (макет). */ .pult-k5, .pult-sk-k { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pult-th { display: flex; align-items: center; justify-content: space-between; gap: 4px 6px; min-height: 22px; } .pult-viz { margin-top: auto; padding-top: 6px; } .pult-k5 .dg-spark { height: 30px; } .pult-viz:empty { display: none; } .pult-t .pult-tvr { margin-top: 0; } @supports (grid-template-rows: subgrid) { .pult-k5 > .pult-t { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 2px; align-content: start; padding: 12px 16px 14px; } .pult-k5 > .pult-t > .pult-th { align-self: end; } .pult-k5 > .pult-t > .pult-viz { align-self: end; margin-top: 0; } .pult-k5 > .pult-t > .pult-viz:empty { display: block; } } /* Сетка блоков директора. */ .pult-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; } .pult-grid > .pult-a3 { grid-column: span 3; } .pult-grid > .pult-a2 { grid-column: span 3; } .pult-grid:not(.two) > .pult-a2 { grid-column: span 2; } .pult-grid > .pult-a6, .pult-grid > .zh-hj { grid-column: 1 / -1; } .pult-grid > .card, .pult-grid > .pult-wr > .card { margin: 0; } .pult-wr { display: flex; flex-direction: column; min-width: 0; } .pult-wr > .card { flex: 1; } .pult-sig, .pult-fc, .pult-money, .pult-napr, .pult-och { display: flex; flex-direction: column; } .pult-och { margin-top: 0; padding: var(--card-pad); } @media (max-width: 1599px) { .pult-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pult-grid > .pult-a3, .pult-grid > .pult-a2, .pult-grid:not(.two) > .pult-a2 { grid-column: span 1; } .pult-grid > .pult-a2.pult-q, .pult-grid:not(.two) > .pult-a2.pult-q { grid-column: 1 / -1; } } @media (max-width: 1250px) { .pult-k5, .pult-sk-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pult-grid { grid-template-columns: minmax(0, 1fr); } .pult-grid > .pult-a3, .pult-grid > .pult-a2, .pult-grid:not(.two) > .pult-a2, .pult-grid > .pult-a2.pult-q { grid-column: 1 / -1; } } /* «Требует внимания»: заголовок со счётчиком и меткой «N срочно»; справа – «решённые» и «Пороги». */ .pult-sig .hd, .pult-fin .hd, .pult-money .hd, .pult-napr .hd, .home-att .hd, .pult-och .hd { gap: 2px 10px; margin-bottom: 6px; } .pult-sig .hd .pult-dn { margin-left: auto; color: var(--muted); font-weight: var(--w-medium); } .pult-sig .hd .pult-dn + .pult-por { margin-left: 0; } .pult-s { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px; width: auto; padding: 8px 6px; margin: 0 -6px; border-radius: 12px; border-top: 1px solid var(--line-2); transition: background .15s; } .pult-s.no-ok { grid-template-columns: 32px minmax(0, 1fr) auto; } .pult-grp + .pult-s { border-top-color: transparent; } .pult-s:hover { background: var(--teal-10); border-top-color: transparent; } .pult-s:hover + .pult-s { border-top-color: transparent; } .pult-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; } .pult-r .pult-go { margin: -6px 0; } /* цель нажатия – 32 px, строка при этом не растёт */ .pult-sl { min-width: 0; } .pult-grp { padding: 8px 0 2px; } .pult-sf { margin-top: auto; padding-top: 12px; border-top: 0; display: block; } .pult-more { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--fill); font-size: calc(13.5px * var(--fz)); line-height: 1.35; text-align: left; color: var(--ink); cursor: pointer; } .pult-more:hover { background: var(--teal-10); } .pult-more b { flex: none; font-weight: var(--w-medium); white-space: nowrap; } .pult-more span { color: var(--muted); } .pult-more::after { content: "\203a"; margin-left: auto; font-weight: var(--w-medium); } /* «Всё спокойно» и «Решено сегодня». */ .pult-rest { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin: 4px 0 6px; border-radius: 14px; background: var(--ok-soft); } .pult-rest .big { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); } .pult-rest .big svg { width: 26px; height: 26px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pult-rest > span:last-child { display: flex; flex-direction: column; min-width: 0; } .pult-rest b { font: var(--w-medium) calc(18px * var(--fz))/1.25 var(--head); } .pult-rest span span { color: var(--muted); font-size: calc(14px * var(--fz)); } .pult-dr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); } .pult-grp + .pult-dr { border-top-color: transparent; } .pult-dr small { color: var(--muted); font-size: calc(13px * var(--fz)); white-space: nowrap; } .pult-di { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ok-soft); } .pult-di svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* Окно «Ещё N» справа (на телефоне – во весь экран, правило окон выше). */ .pult-sh-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-right: 44px; margin-bottom: 8px; } .pult-sh-h h3 { margin: 0; font: var(--w-medium) calc(19px * var(--fz))/1.3 var(--head); } .pult-sh-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; } .pult-sh-x:hover { background: var(--fill); } .modal.pult-sheet { position: relative; } @media (min-width: 700px) { #overlay:has(> .pult-sheet) { place-items: stretch end; padding: 0; } .modal.pult-sheet { width: min(560px, 100%); height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-sizing: border-box; padding: 20px 22px 28px; box-shadow: var(--shadow-lift); animation: pult-sheet-in .22s ease-out; } } @keyframes pult-sheet-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .modal.pult-sheet { animation: none; } } /* «Финансы месяца»: четыре числа рамкой, столбики занимают остаток высоты. */ .pult-f4 { gap: 0; margin-top: 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); } .pult-f4 > .pult-fv { padding: 8px 14px 9px; gap: 1px; } .pult-f4 > .pult-fv:nth-child(2) { box-shadow: -1px 0 0 var(--line); } .pult-f4 > .pult-fv:nth-child(3) { box-shadow: 0 -1px 0 var(--line); } .pult-f4 > .pult-fv:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); } .pult-fl { font-weight: var(--w-medium); } .pult-ch { margin-top: 12px; margin-bottom: 4px; } .pult-lg i.tdy { background: repeating-linear-gradient(135deg, var(--teal) 0 2px, var(--teal-soft) 2px 4px); } .pult-days .dg-cols { flex: 1; display: flex; flex-direction: column; min-height: 0; } .pult-days .dg-plot { flex: 1; height: auto; min-height: 140px; } .pult-df { margin-top: 10px; } /* «Деньги сейчас»: счета рамкой, ниже – строки-ссылки на сером. */ .pult-acc { margin-top: 6px; } .pult-dol { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .pult-dg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; width: 100%; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 12px; background: var(--fill); font: inherit; color: inherit; text-align: left; cursor: pointer; } .pult-dg:disabled { cursor: default; } .pult-dg:not(:disabled):hover { background: var(--teal-10); } .pult-dg > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; font-weight: var(--w-medium); } .pult-dg small { font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); line-height: 1.3; } .pult-dg > b { font-weight: var(--w-medium); } /* «Направления»: одним столбцом. */ .pult-nl { display: block; margin-top: 4px; } .pult-nr { grid-template-columns: minmax(96px, 9em) minmax(40px, 1fr) auto 4.2em; padding: 0 6px; margin: 0 -6px; width: calc(100% + 12px); min-height: 30px; border-radius: 9px; } button.pult-nr:hover { background: var(--teal-10); } button.pult-nr:hover .pult-nn { text-decoration: none; } /* «Очередь сейчас»: врач – две строки. */ .po-l { display: grid; grid-template-columns: minmax(0, 1fr); } .po-r { display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: calc(100% + 12px); padding: 7px 6px; margin: 0 -6px; border: 0; border-top: 1px solid var(--line-2); border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .po-r:first-child { border-top-color: transparent; } .po-r:hover { background: var(--teal-10); border-top-color: transparent; } .po-d { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .po-d .po-n { margin-left: auto; font-size: calc(13.5px * var(--fz)); } .po-k { display: block; overflow: visible; text-overflow: clip; font-size: calc(13px * var(--fz)); line-height: 1.4; } .po-k > span { white-space: nowrap; } .po-k em { font-style: normal; } .po-f { margin-top: auto; padding-top: 10px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } @media (max-width: 1599px) { .pult-q .po-l { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; } .pult-q .po-r { border-top-color: transparent; } .pult-q .po-d .po-n { margin-left: 0; flex-basis: 100%; } } @media (max-width: 899px) { .pult-q .po-l { grid-template-columns: minmax(0, 1fr); } } /* «Журнал дня»: строка-заглушка под сеткой (блок журнала – отдельным заданием). */ /* ---- Главврач ---- */ .pv-home { gap: 16px; } .pv-my { gap: 8px 16px; padding: 10px 16px; } .pv-my > b { font: var(--w-medium) calc(17px * var(--fz))/1.25 var(--head); white-space: nowrap; } .pv-my > .linkish { margin-left: auto; color: var(--ink); font-weight: var(--w-medium); } .pv-my .vps { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0; min-width: 0; } .vp { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 12px; border: 0; border-radius: 12px; background: var(--fill); font-size: calc(13.5px * var(--fz)); color: var(--ink); cursor: pointer; } .vp:hover { background: var(--teal-10); } .vp .vp-t { font-weight: var(--w-medium); } .vp.now { background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal); } .pv-my .btn.sm { height: 34px; min-height: 34px; } .pv-k { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .pv-k > .pv-t { padding: 12px 16px 14px; margin: 0; min-width: 0; } .pv-k .pv-tl { min-height: 0; line-height: 1.3; } .pv-tvr { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; } .pv-k .pv-tvr b { margin-top: 0; font-size: 25px; } .pv-k .pv-ts { line-height: 1.35; } @supports (grid-template-rows: subgrid) { .pv-k > .pv-t { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; align-content: start; } .pv-k > .pv-t > .pv-tl { align-self: start; } } /* Метка сравнения у главврача – та же таблетка, что у директора. */ .pv-d { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-d.up { background: var(--pult-up); color: var(--ink); } .pv-d.down { background: var(--rose-soft); color: var(--rose-ink); } .pv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .pv-bq, .pv-bd, .pv-nt { display: flex; flex-direction: column; min-width: 0; } .pv-bq > .card, .pv-bd > .card, .pv-nt > .card { flex: 1; margin: 0; } .pv-bq, .pv-bd { grid-column: span 4; } .pv-att, .pv-nt { grid-column: span 2; } .pv-att { margin: 0; } .pv-att .home-i, .pv-att .home-kr { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 12px; } .pv-att .home-i { width: calc(100% + 12px); } .pv-att .home-i:hover { background: var(--teal-10); } .pv-att .home-i > span:last-child { color: var(--muted); } .home-kr { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: start; gap: 12px; padding: 10px 6px; margin: 0 -6px; border-top: 1px solid var(--line-2); } .home-kr:first-of-type { border-top-color: transparent; } .home-kr .pult-ic { margin-top: 2px; } .kr-m { min-width: 0; } .kr-t { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .kr-t b { font-size: calc(14.5px * var(--fz)); line-height: 1.3; font-weight: var(--w-medium); } .kr-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .kr-d { display: none; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--rose-soft); font-size: calc(13px * var(--fz)); color: var(--ink); } .home-kr.open .kr-d { display: flex; } .kr-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: transform .2s; } .kr-x:hover { background: var(--fill); } .kr-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .home-kr.open .kr-x { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .kr-x { transition: none; } } @media (max-width: 1599px) { .pv-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-bq, .pv-bd { grid-column: 1 / -1; } .pv-att, .pv-nt { grid-column: span 1; } .pv-nt { order: 1; } .pv-bd { order: 2; } } @media (max-width: 1250px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } .pv-att, .pv-nt { grid-column: 1 / -1; } } /* Таблица «Врачи»: заголовки переносятся (таблица умещается в карточку), список – без внутренней прокрутки (31.10.2026, №57). */ .pv-dt th, .pv-dt th:nth-child(n+2) { white-space: normal; } .pv-dt td:first-child { min-width: 9em; } /* ---- Телефон ---- */ @media (max-width: 699px) { .home-top .tools { flex-wrap: wrap; } .home-date { display: none; } .home-rf { display: none; } .per-cap { padding-left: 0; border-left: 0; } .pult-k5, .pult-sk-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pult-k5 > .pult-t { display: flex; grid-row: auto; padding: 10px 12px; } .pult-th { flex-wrap: wrap; } .pult-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; } .pult-grid > .pult-a3, .pult-grid > .pult-a2, .pult-grid:not(.two) > .pult-a2, .pult-grid > .pult-a2.pult-q { grid-column: 1 / -1; } .pult-s, .pult-s.no-ok { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; margin: 0; } .pult-r .pult-go, .pult-dn, .pult-dr, .pult-grp + .pult-dr { display: none !important; } .pult-sig .pult-more { display: none; } .pv-k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pv-k > .pv-t { padding: 10px 12px; } .pv-grid { gap: 12px; } .pv-my > .linkish { margin-left: 0; } .po-d .po-n { margin-left: 0; } } /* ======== «Реестр регистраций и оплат» (22.10.2026, замечание 8; js/karkas.js `quick`, js/rep.js `deskPills`) ======== Панель периода в теле отчёта: «Сегодня · Вчера · Неделя · Месяц», рядом «с — по»; справа тихие плашки (долг, смена) – подробности подсказкой. Сверка с пересчётом кассы – свёрнутой строкой (раскрыта, если есть расхождение). Таблица – как у остальных отчётов; долг – тонкой полоской слева и красной суммой, а не оранжевой строкой. */ .rd-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; } .rd-qs { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); } .rd-q { height: 30px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: calc(13.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: pointer; } .rd-q:hover { background: var(--fill); } .rd-q.on { background: var(--ink); color: var(--paper); } .rd-bar .kk-dates { display: inline-flex; margin: 0; } .rd-bar .kk-dates input[type=date] { width: 146px; min-width: 0; height: 36px; margin: 0; } .rd-pills { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .rd-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 9px; background: var(--fill); color: var(--muted); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; cursor: help; } .rd-pill b { font-weight: var(--w-medium); } .rd-pill.warn { background: var(--amber-soft); color: var(--amber-ink); } .rd-pill.bad { background: var(--rose-soft); color: var(--rose-ink); } .rd-pill.ok { background: var(--ok-soft); color: var(--ok-ink); } .kk-t tr.rd-debt > td { background: color-mix(in srgb, var(--rose-soft) 28%, transparent); } .kk-t tr.rd-debt > td:first-child { box-shadow: inset 3px 0 0 var(--rose); } .kk-t tr.rd-pale > td { color: var(--muted); } .kk-t tr.rd-pale > td b { font-weight: var(--w-medium); } .rd-sv { margin: 0 0 10px; padding: 8px 14px; background: var(--paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(13.5px * var(--fz)); } .rd-sv > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; font-weight: var(--w-medium); list-style: none; } .rd-sv > summary::-webkit-details-marker { display: none; } .rd-sv > summary::before { content: "›"; color: var(--muted); font-weight: var(--w-text); width: 10px; transition: transform .15s; } .rd-sv[open] > summary::before { transform: rotate(90deg); } .rd-sv-r { margin-left: auto; font-weight: var(--w-medium); color: var(--ok-ink); } .rd-sv-r.bad { color: var(--rose-ink); font-weight: var(--w-medium); } .rd-sv > .table { margin-top: 6px; } @media (max-width: 699px) { .rd-pills { margin-left: 0; justify-content: flex-start; } .rd-bar .kk-dates input[type=date] { width: 132px; } } .kk-t .rd-sub { display: block; font-size: var(--fs-hint); line-height: 1.15; color: var(--muted); font-weight: var(--w-medium); max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .app.rep-page .kk-t td { vertical-align: middle; } .app.rep-page .table td.rd-wrap { white-space: normal; min-width: 140px; } /* ======== Журнал «Пациенты» (22.10.2026, замечание 17; 29.10.2026 – №9 и №13; вечер 29.10 – №24–26, правила таблиц; js/pacienty-zhurnal.js) ======== Утверждённый вид – «kartoteka-soderzhanie» (29.10.2026). Быстрые отборы – чипы первой строкой карточки, справа «Колонки · Excel · Печать». Ширина колонок фиксирована (`table-layout: fixed`), длинное – многоточием в своей ячейке (полное – в подсказке); строка 56 px – две линии; зебра, вертикальных линий нет, между колонками воздух (22 px), «Телефон» – тоном. `.pz-adm` – Пациент · Важно · Телефон · Приёмы · Врач; `.pz-med` – Пациент · Важно · Открытое · Диагноз · Приёмы. Цвета – токенами (тёмная тема – те же). */ .pz { container-type: inline-size; container-name: pz; padding: 4px 8px 6px; position: relative; } .pz-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 6px 10px; } .pz-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .pz-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; } .pz-chip { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 18px; border: 0; background: var(--fill); color: var(--ink); font: var(--w-medium) calc(13.5px * var(--fz)) var(--font); white-space: nowrap; cursor: pointer; flex: none; } .pz-chip:hover { background: var(--navy-10); } .pz-chip em { font-style: normal; color: var(--muted); font-weight: var(--w-text); font-size: calc(13px * var(--fz)); } .pz-chip.zero { background: transparent; color: var(--muted-3); padding: 0 9px; } .pz-chip.zero:hover { background: var(--fill); } .pz-chip.on, .pz-chip.zero.on { background: var(--navy); color: #fff; padding: 0 13px; } .pz-chip.on em { color: #b9c9d1; } /* «Колонки · Excel · Печать» – одна группа со значками (общий механизм js/kolonki.js, строка таблицы переезжает в `.pz-bar`) */ .pz .tt-bar.tt-set { margin: 0 0 0 auto; height: auto; flex: none; display: inline-flex; gap: 0; justify-content: flex-start; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); position: relative; } .pz .tt-bar.tt-set > button { height: 34px; min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 0; color: var(--ink); font: var(--w-medium) calc(13px * var(--fz)) var(--font); white-space: nowrap; } .pz .tt-bar.tt-set > button + button { box-shadow: -1px 0 0 var(--line); } .pz .tt-bar.tt-set > button:hover { background: var(--fill); } .pz .tt-bar.tt-set > button:first-child { border-radius: 10px 0 0 10px; } .pz .tt-bar.tt-set > button:last-child { border-radius: 0 10px 10px 0; } .pz .tt-bar.tt-set svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .pz .tt-bar.tt-set .cnt { color: var(--muted); font-weight: var(--w-text); } .pz .tt-bar.tt-set .tt-pop { right: 0; top: 40px; min-width: 260px; } .pz .tt-pop .g { font-size: var(--fs-hint); font-weight: var(--w-medium); color: var(--muted); margin: 6px 2px 2px; } .pz-sc { overflow-x: auto; } .pz-t { table-layout: fixed; width: 100%; border-collapse: collapse; } .pz-t.pz-wait tbody { opacity: .55; transition: opacity .15s; } .pz-t thead th { position: static; background: none; padding: 4px 10px 8px 22px; vertical-align: bottom; line-height: 1.2; text-align: left; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pz-t td { padding: 8px 6px 6px 22px; height: 56px; box-sizing: border-box; border: 0; vertical-align: top; overflow: hidden; overflow-wrap: normal; } .pz-t thead th:first-child, .pz-t td:first-child { padding-left: 16px; } /* зебра; «Телефон» – тоном бирюзы (правила таблиц, №25) */ .pz-t tr.pz-r:nth-child(even) td { background: var(--bg); } .pz-t tr.pz-r td.pz-c-tel { background: color-mix(in srgb, var(--teal) 6%, var(--paper)); } .pz-t tr.pz-r:nth-child(even) td.pz-c-tel { background: color-mix(in srgb, var(--teal) 8%, var(--bg)); } .pz-t tr.pz-r:hover td, .pz-t tr.pz-r:hover td.pz-c-tel { background: var(--fill); } /* каждая ячейка – до двух строк, каждая в одну линию: высота ряда 56 px */ .pz-t .l1, .pz-t .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pz-t .l1 { font-size: calc(15px * var(--fz)); line-height: 22px; height: 22px; } .pz-t .l2 { color: var(--muted); font-size: var(--fs-hint); line-height: 18px; height: 18px; margin-top: 1px; font-weight: var(--w-text); } /* «Важно» шире всех коротких меток («нет даты рождения», «однофамилец»), «Приёмы» у врача и главврача – с фамилией чужого врача в первой строке (проверка c1, №8) */ .pz-adm .pz-c-pat { width: 27%; } .pz-adm .pz-c-vazh { width: 17%; } .pz-adm .pz-c-tel { width: 18%; } .pz-adm .pz-c-pri { width: 20%; } .pz-adm .pz-c-vrach { width: 18%; } .pz-med .pz-c-pat { width: 24%; } .pz-med .pz-c-vazh { width: 17%; } .pz-med .pz-c-otkr { width: 15%; } .pz-med .pz-c-dx { width: 12%; } .pz-med .pz-c-pri { width: 32%; } .pz-med .pz-c-tel { width: 14%; } .pz-t .pz-c-age { width: 9%; } .pz-t .pz-c-card { width: 8%; } .pz-t .pz-c-berem { width: 12%; } .pz-t .pz-c-last { width: 14%; } .pz-t .pz-c-next { width: 14%; } .pz-t .pz-c-debt { width: 9%; } .pz-t .pz-c-rep { width: 14%; } .pz-t .pz-c-visits { width: 8%; } .pz-t .pz-c-region { width: 11%; } .pz-t .pz-c-src { width: 13%; } .pz-t th.pz-c-debt, .pz-t td.pz-c-debt { text-align: right; } /* имя – многоточием в своей ячейке (полное – в подсказке), под ним «дата рождения · возраст» */ .pz-nam { display: block; font-weight: var(--w-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* «Важно»: метки столбиком, по одной в строке; не влезли – «+N» с подсказкой */ .pz-vz { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .pz-vk { display: block; max-width: 100%; height: 20px; padding: 0 7px; border-radius: 10px; font: var(--w-medium) calc(11.5px * var(--fz))/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--fill); color: var(--muted); } .pz-vk.bad { background: var(--rose-soft); color: var(--rose-ink); } .pz-vk.vip, .pz-vk.amber, .pz-vk.preg { background: var(--amber-soft); color: var(--amber-ink); } .pz-vk.line { background: transparent; color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--w-text); } .pz-vk.test { background: transparent; color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--muted-3); } .pz-vm { height: 20px; padding: 0 2px; color: var(--muted); font: var(--w-medium) calc(11.5px * var(--fz))/20px var(--font); cursor: default; } .pz-berem { color: var(--amber-ink); font-weight: var(--w-text); } .pz-berem::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange, #f4891f); margin: 0 5px 1px 0; vertical-align: middle; } /* «Телефон»: номер тёмной бирюзой; у ребёнка второй строкой – чей («мама») */ .pz-t td.pz-c-tel .l1 { font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .pz-t td.pz-c-tel a { color: var(--teal-ink); text-decoration: none; } .pz-t td.pz-c-tel a:hover { text-decoration: underline; } /* «Приёмы»: «запись» мелко серым, будущее – тёмным (сегодня – бирюзой), прошлое – серой датой; «впервые» – бирюзой */ .pz-t td.pz-c-pri .l1 { font-size: calc(14px * var(--fz)); } .pz-w { color: var(--muted-2); font-size: var(--fs-hint); font-weight: var(--w-text); } .pz-fut { color: var(--ink); font-weight: var(--w-medium); } .pz-today, .pz-fut.pz-today { color: var(--teal-ink); font-weight: var(--w-medium); } .pz-pd { color: var(--muted); } .pz-new { color: var(--teal-ink); font-size: var(--fs-hint); } .pz-oth { color: var(--muted); font-size: var(--fs-hint); } .pz-t td.pz-c-vrach .l1 { color: var(--muted-2); } .pz-none { color: var(--muted-3); } .pz-debt { color: var(--rose-ink); font-weight: var(--w-medium); white-space: nowrap; } .pz-nw { white-space: nowrap; } /* «Диагноз»: код серым, текст – до двух строк */ .pz-dx2 { font-size: calc(14px * var(--fz)); line-height: 20px; max-height: 40px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pz-dx2 .code { font-weight: var(--w-text); color: var(--muted); margin-right: 6px; } /* «Открытое»: одна метка в одну линию и «+N»; под меткой мелко – что сделать / кто и зачем */ .pz-ol { display: flex; align-items: center; gap: 6px; } .pz-mk { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; height: 22px; padding: 0 9px; border: 0; border-radius: 11px; font: var(--w-medium) calc(12.5px * var(--fz))/22px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--fill); color: var(--ink); text-align: left; cursor: pointer; } .pz-mk:hover { box-shadow: inset 0 0 0 1.5px currentColor; } .pz-mk.bad { background: var(--rose-soft); color: var(--rose-ink); } .pz-mk.amber { background: var(--amber-soft); color: var(--amber-ink); } .pz-mk.teal { background: var(--teal-10, var(--teal-soft)); color: var(--teal-ink); } .pz-more { flex: none; height: 22px; padding: 0 7px; border: 0; border-radius: 11px; background: none; color: var(--muted); font: var(--w-medium) calc(12.5px * var(--fz))/22px var(--font); cursor: pointer; } .pz-more:hover, .pz-more.on { background: var(--fill); color: var(--ink); } .pz-ml { position: absolute; z-index: 20; width: min(420px, 90%); background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 45, 66, .16); padding: 8px; } .pz-mi { display: flex; gap: 10px; align-items: flex-start; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .pz-mi:hover { background: var(--bg); } .pz-mi .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--teal); } .pz-mi .dot.bad { background: var(--rose); } .pz-mi .dot.amber { background: var(--orange, #f4891f); } .pz-mi .tx { flex: 1 1 auto; min-width: 0; } .pz-mi .tx b { display: block; white-space: nowrap; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); } .pz-mi .tx span { display: block; color: var(--muted); font-size: var(--fs-hint); font-weight: var(--w-text); } .pz-mi .go { margin-left: auto; color: var(--teal-ink); font-weight: var(--w-medium); font-size: var(--fs-hint); margin-top: 3px; white-space: nowrap; } .pz-foot { padding: 10px 12px 4px; color: var(--muted); font-size: var(--fs-hint); } /* пусто: чип без пациентов и «ничего не нашлось» */ .pz .empty { padding: 36px 12px; text-align: center; color: var(--muted); white-space: normal; } .pz .empty .t { color: var(--ink); font-size: calc(15px * var(--fz)); font-weight: var(--w-medium); margin-bottom: 4px; } .pz .empty .h, .pz .empty .h2 { font-size: var(--fs-hint); margin-top: 6px; } .pz .empty .act { margin-top: 16px; display: flex; justify-content: center; } /* поиск: белый, с рамкой и лупой, подсказка читается (№13); не уже 282 px – подсказка «…, МКБ» целиком и рядом с вкладками (A7-25) */ .tools input#pz-q { width: 340px; min-width: 282px; max-width: 100%; flex-shrink: 0; padding-left: 40px; background: var(--paper) no-repeat 13px center / 18px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7a88' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 1px var(--navy-20); } .tools input#pz-q:focus { box-shadow: inset 0 0 0 1.5px var(--teal); } .tools input#pz-q::placeholder { color: var(--muted-2); } /* журнал уже 960 px: воздуха меньше, кнопки «Колонки · Excel · Печать» – значками */ @container pz (max-width: 959px) { .pz-t td, .pz-t thead th { padding-left: 14px; } .pz .tt-bar.tt-set .tx { display: none; } .pz .tt-bar.tt-set > button { padding: 0 10px; } } /* планшет (журнал 700–899 px): врачу диагноз уходит, администратору – колонка «Врач» (данные целы: Excel, «Колонки») */ @container pz (max-width: 899px) { .pz-med .pz-c-dx, .pz-adm .pz-c-vrach { display: none; } } /* у врача и главврача чипов шесть: пока журнал уже 1100 px, «Колонки · Excel · Печать» – значками, чтобы не уходить второй строкой (№23) */ @container pz (max-width: 1099px) { .pz-med .tt-bar.tt-set .tx { display: none; } .pz-med .tt-bar.tt-set > button { padding: 0 10px; } } /* телефон (журнал уже 700 px): строка – карточка: имя и метки; дата рождения; «Открытое»; приёмы и телефон рядом */ @container pz (max-width: 699px) { .pz { padding: 0; } .pz-bar { padding: 6px 0 8px; } .pz-chips { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .pz-bar .tt-bar { display: none; } .pz-sc { overflow: visible; } .pz-t thead { display: none; } .pz-t, .pz-t tbody { display: block; } .pz-t tr.pz-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pat pat" "vazh vazh" "otkr otkr" "pri tel"; column-gap: 12px; position: relative; padding: 10px 14px; } .pz-t td { display: block; width: auto; height: auto; padding: 0; border: 0; background: none !important; min-width: 0; } /* проценты ширины колонок (`.pz-adm .pz-c-pat` и др., две класса) в карточке не нужны: ячейка – по своей области сетки (проверка c1, №2) */ .pz-t tr.pz-r > td { width: auto; } /* у врача и главврача телефона нет: «Приёмы» – на всю ширину карточки, чтобы запись и фамилия врача читались целиком */ .pz-med .pz-t tr.pz-r { grid-template-areas: "pat pat" "vazh vazh" "otkr otkr" "pri pri"; } .pz-t td.pz-c-pat { grid-area: pat; } .pz-t td.pz-c-vazh { grid-area: vazh; } .pz-t td.pz-c-vazh .pz-vz { flex-direction: row; flex-wrap: wrap; margin-top: 4px; } .pz-t td.pz-c-otkr { grid-area: otkr; margin-top: 6px; } .pz-t td.pz-c-otkr .l2 { display: none; } .pz-t td.pz-c-pri { grid-area: pri; margin-top: 4px; } .pz-t td.pz-c-tel { grid-area: tel; margin-top: 4px; text-align: right; } .pz-t td.pz-c-dx, .pz-t td.pz-c-vrach { display: none; } .pz-t tr > td.empty { display: block; } .pz .empty { padding: 30px 8px; } } @media (max-width: 699px) { .top .tools:has(> input#pz-q) { flex: 1 0 100%; } .tools input#pz-q { width: 100%; } } /* Пациент одной строкой в окнах выбора и списках (js/pacient-vid.js, `pacStroka`; замечание №20, 29.10.2026): имя, метки, подпись серым «дата рождения · возраст · № карты · телефон». Одна строка на все окна – вид тот же, что в журнале. */ span.pac-s { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; min-width: 0; } .pac-s-n { font-weight: var(--w-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .pac-s-p { color: var(--muted); font-size: var(--fs-hint); font-weight: var(--w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pac-mk { align-self: center; height: 18px; padding: 0 6px; border-radius: 9px; font: var(--w-medium) calc(11px * var(--fz))/18px var(--font); white-space: nowrap; background: var(--fill); color: var(--muted); } .pac-mk.bad { background: var(--rose-soft); color: var(--rose-ink); } .pac-mk.vip { background: var(--amber-soft); color: var(--amber-ink); } .pac-mk.test { background: transparent; color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--muted-3); } /* ======== «Финансы» врача: Итог смены (vs-*) и Аналитика (va-*), 22.10.2026, замечания 19 и 20 ======== Макеты: docs/zhurnal/makety-2026-10-22/vrach-itog-smeny.html, vrach-analitika.html. Цвета – переменные программы (в тёмной теме меняются сами); шкала загрузки --q0…--q5 – один оттенок бирюзы, своя для тёмной. */ :root { --q0: #eef4f5; --q1: #c9ece9; --q2: #8fd8d3; --q3: #3fbcb4; --q4: #128a83; --q5: #0b5d58; } :root[data-theme="dark"] { --q0: #12313f; --q1: #12454a; --q2: #145d5c; --q3: #1b8580; --q4: #2bb3aa; --q5: #7dd8d3; } .vs, .va { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .vs-who { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px 0 12px; border-radius: 16px; background: var(--teal-10); box-shadow: inset 0 0 0 1px var(--teal-line); font-size: calc(13px * var(--fz)); } .vs-x { border: 0; background: none; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: calc(17px * var(--fz)); line-height: 1; cursor: pointer; } .vs-x:hover { background: var(--paper); } .vs-day { display: inline-flex; align-items: stretch; min-height: var(--chip-h, 34px); border-radius: 12px; background: var(--paper); border: 1px solid var(--line); } .vs-ar { border: 0; background: none; padding: 0 12px; font-size: 19px; line-height: 1; color: var(--teal-ink); cursor: pointer; border-radius: 12px; } .vs-ar:hover:not(:disabled) { background: var(--fill); } .vs-ar:disabled { color: var(--muted); opacity: .35; cursor: default; } .vs-cal { position: relative; display: inline-flex; align-items: center; padding: 0 10px; font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); cursor: pointer; white-space: nowrap; } .vs-cal:hover { background: var(--fill); } .vs-cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .vs-tiles { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; } .vs-t { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vs-tl { color: var(--muted); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); white-space: nowrap; } .vs-big { font: var(--w-medium) calc(26px * var(--fz))/1.15 var(--head); letter-spacing: -.01em; white-space: nowrap; } .vs-big small { font-size: .55em; margin-left: 2px; } .vs-sub { color: var(--muted); font-size: var(--fs-hint); line-height: 1.35; } .vs-sub b { color: var(--ink); } .vs-cmp { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; color: var(--muted); font-size: calc(12.5px * var(--fz)); } .vs-t.hero { background: var(--navy); color: #fff; box-shadow: none; } .vs-t.hero .vs-tl, .vs-t.hero .vs-sub, .vs-t.hero .vs-cmp { color: rgba(255, 255, 255, .78); } .vs-t.hero .vs-sub b { color: #fff; } :root[data-theme="dark"] .vs-t.hero { background: #0f4a47; } .vs-bd { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; background: var(--fill); color: var(--ink); } .vs-bd.up { background: var(--ok-soft); color: var(--ok-ink, #2f6e40); } .vs-bd.dn { background: var(--rose-soft); color: var(--rose-ink, #a1281d); } .vs-t.hero .vs-bd { background: rgba(255, 255, 255, .14); color: #fff; } .vs-t.hero .vs-bd.up { background: rgba(140, 210, 154, .2); color: #a8e6b4; } .vs-t.hero .vs-bd.dn { background: rgba(255, 122, 110, .2); color: #ffb3ad; } .vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); gap: 14px; align-items: start; } .vs-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .vs-b { padding: var(--card-pad); } .vs-b h3, .vs-tab h3 { margin: 0 0 8px; } .vs-c { color: var(--muted); font-family: var(--font); font-weight: var(--w-medium); font-size: .82em; margin-left: 4px; } .vs-tab { padding: 6px 8px 8px; } .vs-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 10px 4px; } .vs-hd h3 { margin: 0; } .vs-hd .muted { margin-left: auto; } .vs-r { --cp: 110px; --cy: 132px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 124px; grid-template-areas: "tm pt st" ". ls ."; column-gap: 14px; row-gap: 6px; align-items: start; padding: 10px; border-radius: 12px; width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; } button.vs-r { cursor: pointer; } button.vs-r:hover { background: var(--bg); } .vs-r + .vs-r { box-shadow: 0 -1px 0 var(--line-2); } button.vs-r:hover + .vs-r { box-shadow: none; } .vs-r > .vs-tm { grid-area: tm; } .vs-r > .vs-pt { grid-area: pt; } .vs-r > .vs-st { grid-area: st; } .vs-r > .vs-ls { grid-area: ls; } .vs-r.head { grid-template-areas: "tm ls st"; padding-top: 4px; padding-bottom: 6px; color: var(--muted-2); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); } .vs-r.head .vs-ls span { text-align: right; } .vs-r.head .vs-ls span:first-child { text-align: left; } .vs-r.foot { grid-template-areas: "tm pt st" ". ls ."; background: var(--bg); margin-top: 6px; box-shadow: none !important; } .vs-tm { font-weight: var(--w-text); font-size: calc(15px * var(--fz)); padding-top: 1px; } .vs-pt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vs-pt b { font-weight: var(--w-strong); font-size: calc(15px * var(--fz)); line-height: 1.25; } .vs-pt > span { display: inline-flex; gap: 6px; flex-wrap: wrap; } .vs-k { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-text); background: var(--fill); color: var(--muted); } .vs-k.p1 { background: var(--teal-10); color: var(--teal-ink); } .vs-ls { display: grid; grid-template-columns: minmax(0, 1fr) var(--cp) var(--cy); column-gap: 12px; row-gap: 4px; align-items: baseline; } .vs-n { min-width: 0; font-size: calc(14px * var(--fz)); line-height: 1.3; } .vs-p, .vs-y { text-align: right; white-space: nowrap; font-size: calc(14px * var(--fz)); } .vs-y b { font-weight: var(--w-medium); } .vs-y small, .vs-p small { margin-left: 6px; color: var(--muted); font-size: calc(11.5px * var(--fz)); font-weight: var(--w-text); } .vs-r.foot .vs-y small { display: block; margin: 0; } .vs-y.wait { color: var(--muted); } .vs-y.wait b { font-weight: var(--w-medium); } .vs-st { justify-self: end; text-align: right; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); white-space: nowrap; } .vs-st i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--ok); } .vs-st.debt { color: var(--amber); } .vs-st.debt i { background: var(--orange); } .vs-st.open { color: var(--teal-ink); } .vs-st.open i { background: var(--teal); } .vs-st.off { color: var(--muted); } .vs-st.off i { background: var(--muted-2); } .vs-st small { display: block; color: var(--muted); font-weight: var(--w-text); font-size: calc(11.5px * var(--fz)); } .vs-r.dim .vs-pt b, .vs-r.dim .vs-tm { color: var(--muted); font-weight: var(--w-text); } .vs-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; background: none; border-radius: 12px; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); text-align: left; cursor: pointer; } .vs-fold:hover { background: var(--bg); } .vs-fold .ch { display: inline-block; transition: transform .15s; } .vs-fold.on .ch { transform: rotate(90deg); } .vs-nt { margin-top: 6px; } .vs-li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: calc(14px * var(--fz)); } .vs-li + .vs-li { box-shadow: 0 -1px 0 var(--line-2); } .vs-li > span:first-child { min-width: 0; } .vs-li .num { margin-left: auto; white-space: nowrap; font-weight: var(--w-strong); } .vs-li .num.muted { font-weight: var(--w-text); } .vs-li .muted { font-size: calc(12.5px * var(--fz)); } .vs-li.tot { font-weight: var(--w-strong); box-shadow: 0 -1px 0 var(--line) !important; } .vs-big2 { font: var(--w-medium) calc(22px * var(--fz))/1.15 var(--head); } .vs-acts { display: flex; gap: 16px; margin-top: 8px; } /* «Не закрыто» (29.10.2026, замечание 6; макет docs/zhurnal/makety-2026-10-29/maket-itog-smeny.html): сразу под шапкой, на всю ширину, «Сегодня» и «Раньше»; пустой день – одна строка `vs-day0`. */ .vs-oc { position: relative; padding: 12px 16px 12px 20px; box-shadow: var(--shadow), inset 4px 0 0 var(--orange); } .vs-oh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 2px; } .vs-oh h3 { margin: 0; } .vs-oh .muted { margin-left: auto; } .vs-og { font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 0 2px; } .vs-ol { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr) 150px; gap: 14px; align-items: center; padding: 6px 0; } .vs-ol + .vs-ol { box-shadow: 0 -1px 0 var(--line-2); } .vs-ol .when { font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); white-space: nowrap; } .vs-ol .when small { display: block; font-weight: var(--w-text); font-size: var(--fs-hint); color: var(--muted); } .vs-ol .when small.late { color: var(--amber); } .vs-ol .pt { font-weight: var(--w-strong); font-size: calc(15px * var(--fz)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-ol .why { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fz)); min-width: 0; } .vs-ol .why i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } .vs-ol .why.ret { color: var(--amber); font-weight: var(--w-medium); } .vs-ol .why.ret i, .vs-ol .why.old i { background: var(--orange); } .vs-ol .btn { width: 150px; } .vs-more { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0 2px; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); cursor: pointer; } .vs-stk { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--bg); font-size: calc(14px * var(--fz)); } .vs-stk svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .vs-stk .who { min-width: 0; } .vs-stk .who b { font-weight: var(--w-medium); } .vs-stk .who span { color: var(--muted); } .vs-stk .say { margin-left: auto; flex: none; font-weight: var(--w-medium); color: var(--muted); white-space: nowrap; } .vs-stk.solo { margin-top: 0; padding: 10px 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); } .vs-day0 { display: flex; align-items: center; gap: 22px; padding: 12px 16px; } .vs-day0 .t b { display: block; font: var(--w-medium) calc(17px * var(--fz))/1.25 var(--head); } .vs-day0 .t span { color: var(--muted); font-size: var(--fs-hint); } .vs-day0 .m { margin-left: auto; text-align: right; padding: 0 20px; box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); white-space: nowrap; } .vs-day0 .m b { font: var(--w-medium) calc(19px * var(--fz))/1.2 var(--head); } .vs-day0 .m div { color: var(--muted); font-size: var(--fs-hint); } .vs-d0b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .vs-day0 .t + .vs-d0b { margin-left: auto; } .vs-grid.one { grid-template-columns: minmax(0, 1fr); } .vs-rash:empty { display: none; } /* Аналитика */ .va-per { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .va-line b { color: var(--ink); } .va-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: start; } .va-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .va-b { padding: var(--card-pad); min-width: 0; } .va-b h3 { margin: 0; } .va-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .va-hd > .muted, .va-r { margin-left: auto; min-width: 0; max-width: 100%; } .va-r .an-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .va-ch .dg-plot { height: 210px; margin-left: 46px; gap: 4px; border-bottom: 1px solid var(--line); } .va-ch .dg-x { margin-left: 46px; } .va-ch .dg-grid { border-top-color: var(--line-2); } .va-ch .dg-c { cursor: default; } .va-ch .dg-c.go { cursor: pointer; } :root[data-theme="dark"] .va-ch .dg-c.best i { background: #e6eef1; } .va-lg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: calc(12.5px * var(--fz)); color: var(--muted); align-items: center; } .va-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--teal); } .va-lg i.best { background: var(--navy); } :root[data-theme="dark"] .va-lg i.best { background: #e6eef1; } .va-lg i.today { background: repeating-linear-gradient(135deg, var(--teal) 0 3px, color-mix(in srgb, var(--teal) 45%, var(--paper)) 3px 6px); } .va-lg i.avg { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); } .va-lg b { color: var(--ink); } .va-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: calc(13.5px * var(--fz)); color: var(--muted); } .va-facts b { color: var(--ink); } .va-f0 { margin: 0 0 10px; padding: 0; border: 0; } .va-hint { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 11px 0; } .va-hint + .va-hint { box-shadow: 0 -1px 0 var(--line-2); } .va-hint .ic { grid-row: span 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-10); color: var(--teal-ink); } .va-hint .ic.w { background: var(--amber-soft); color: var(--amber); } .va-hint .ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .va-hint > b { font-weight: var(--w-text); font-size: calc(14.5px * var(--fz)); line-height: 1.3; } .va-hint .tx { color: var(--muted); font-size: calc(13.5px * var(--fz)); line-height: 1.4; } .va-hint .tx b { color: var(--ink); } .va-hint .ac { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 2px; } .va-hint .eff { margin-left: auto; font-weight: var(--w-text); font-size: calc(13px * var(--fz)); color: var(--teal-ink); white-space: nowrap; } .va-hint .calc { grid-column: 2; background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: calc(12.5px * var(--fz)); color: var(--muted); line-height: 1.45; } .va-nt { margin-top: 6px; } .va-sv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(60px, 1fr) 44px 92px 84px 70px; gap: 12px; align-items: center; width: 100%; padding: 8px 6px; border: 0; background: none; text-align: left; font: inherit; color: inherit; border-radius: 10px; } .va-sv.nm { grid-template-columns: minmax(0, 1.6fr) minmax(60px, 1fr) 44px 92px; } button.va-sv { cursor: pointer; } button.va-sv:hover { background: var(--bg); } .va-sv + .va-sv { box-shadow: 0 -1px 0 var(--line-2); } .va-sv.head { color: var(--muted-2); font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); padding-top: 0; cursor: default; } .va-nm { min-width: 0; font-size: calc(14px * var(--fz)); line-height: 1.3; } .va-nm small { display: block; color: var(--muted); font-size: calc(12px * var(--fz)); } .va-bar { display: block; height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; } .va-bar i { display: block; height: 100%; background: var(--teal); border-radius: 5px; min-width: 2px; } .va-n { text-align: right; white-space: nowrap; font-size: calc(14px * var(--fz)); } .va-n b { font-weight: var(--w-medium); } .va-open { margin: 0 6px 8px; padding: 6px 10px; border-radius: 10px; background: var(--bg); font-size: calc(13px * var(--fz)); } .va-ic { padding: 2px 0 6px; } .va-ic .va-bar { height: 8px; margin-top: 2px; } .va-hm { display: grid; gap: 4px; margin-top: 4px; } .va-h { font-size: calc(11.5px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); text-align: center; } .va-w { font-size: calc(12.5px * var(--fz)); color: var(--muted); font-weight: var(--w-medium); display: flex; align-items: center; } .va-cell { height: 34px; border-radius: 6px; border: 0; padding: 0; font: var(--w-medium) calc(11.5px * var(--fz))/1 var(--font); color: var(--ink); cursor: pointer; } .va-cell.q4, .va-cell.q5 { color: #fff; } :root[data-theme="dark"] .va-cell.q4, :root[data-theme="dark"] .va-cell.q5 { color: #002d42; } .va-cell.none { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line-2) 4px 7px); cursor: default; } .va-cell.q0, .va-scale i.q0 { background: var(--q0); } .va-cell.q1, .va-scale i.q1 { background: var(--q1); } .va-cell.q2, .va-scale i.q2 { background: var(--q2); } .va-cell.q3, .va-scale i.q3 { background: var(--q3); } .va-cell.q4, .va-scale i.q4 { background: var(--q4); } .va-cell.q5, .va-scale i.q5 { background: var(--q5); } .va-cell:hover:not(.none) { outline: 2px solid var(--ink); outline-offset: 1px; } .va-scale { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fz)); color: var(--muted); margin-top: 10px; flex-wrap: wrap; } .va-scale i { width: 26px; height: 10px; border-radius: 3px; display: inline-block; } .va-scale .nn { margin-left: 12px; display: inline-flex; align-items: center; gap: 6px; } .va-scale .nn i { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 5px); box-shadow: inset 0 0 0 1px var(--line-2); } .va-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin: 8px 0 6px; } .va-split i, .va-sl i { display: block; } .va-split i { height: 100%; } .va-split .a, .va-sl i.a { background: var(--teal); } .va-split .b, .va-sl i.b { background: var(--navy); } :root[data-theme="dark"] .va-split .b, :root[data-theme="dark"] .va-sl i.b { background: #9db2bc; } .va-sl { display: flex; justify-content: space-between; margin-top: 8px; font-size: calc(13px * var(--fz)); color: var(--muted); } .va-sl b { color: var(--ink); } .va-sl i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; } .va-modal { max-height: 60vh; overflow: auto; margin: 8px 0 12px; } @media (max-width: 1250px) { .vs-grid { grid-template-columns: minmax(0, 1fr); } .vs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vs-tiles .vs-t.hero { grid-column: span 2; } .vs-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .vs-ol { grid-template-columns: 130px minmax(0, 1fr) 140px; row-gap: 0; } .vs-ol .when { grid-row: 1 / span 2; white-space: normal; } .vs-ol .pt { grid-column: 2; grid-row: 1; } .vs-ol .why { grid-column: 2; grid-row: 2; font-size: var(--fs-hint); color: var(--muted); } .vs-ol .why.ret { color: var(--amber); } .vs-ol .btn { grid-column: 3; grid-row: 1 / span 2; width: 140px; } .vs-oh .muted { display: none; } .va-cols { display: flex; flex-direction: column; align-items: stretch; } .va-col { display: contents; } .va-hints { order: -1; } } @media (max-width: 699px) { .vs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs-tiles .vs-t.hero { grid-column: 1 / -1; order: -1; } .vs-r { --cp: 64px; --cy: 80px; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 6px; } .vs-r > .vs-ls { grid-column: 1 / -1; } .vs-r.head { display: none; } .vs-pt { flex-direction: column; align-items: flex-start; gap: 3px; } .vs-y small, .vs-p small { display: block; margin: 0; font-size: calc(11px * var(--fz)); } .vs-tab { padding: 4px; } .va-ch .dg-plot { height: 170px; margin-left: 38px; gap: 2px; } .va-ch .dg-x { margin-left: 38px; gap: 2px; } .va-ch .dg-x span { font-size: max(11px, calc(9px * var(--fz))); } .va-sv, .va-sv.nm { grid-template-columns: minmax(0, 1fr) 36px 70px 60px; } .va-sv.nm { grid-template-columns: minmax(0, 1fr) 36px 70px; } .va-sv .va-bar, .va-sv .va-n.cost { display: none; } .va-cell { height: 30px; font-size: max(11px, calc(10px * var(--fz))); } .va-hd > .muted, .va-r { margin-left: 0; } .vs-hd .muted { margin-left: 0; } .vs-side { grid-template-columns: minmax(0, 1fr); } .vs-oc { padding: 10px 12px 10px 16px; } .vs-ol { grid-template-columns: minmax(0, 1fr) auto; } .vs-ol .when { grid-column: 1; grid-row: 1; } .vs-ol .pt { grid-column: 1; grid-row: 2; } .vs-ol .why { grid-column: 1; grid-row: 3; } .vs-ol .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; } .vs-stk { flex-wrap: wrap; } .vs-stk .say { margin-left: 30px; } .vs-day0 { flex-wrap: wrap; } .vs-day0 .m { margin-left: 0; padding: 0; text-align: left; box-shadow: none; } .vs-d0b { justify-content: flex-start; } } @media print { .vs-ar, .vs-cal input, .vs-fold, .vs-rash, .vs-who, .vs-print, .vs-ol .btn, .vs-stk, .vs-more, .vs-acts { display: none !important; } .vs-grid { grid-template-columns: minmax(0, 1fr) 280px; } .vs-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vs-t.hero { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; } .vs-t.hero .vs-tl, .vs-t.hero .vs-sub, .vs-t.hero .vs-cmp, .vs-t.hero .vs-sub b { color: #000; } } .zc-vf-l { display: flex; gap: 18px; margin-top: 6px; } .ve-links { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline; } .ve-links .ve-more { margin-top: 4px; } /* ======== Перенос товара (22.10.2026, замечания 12 и 18; js/perenos.js, макет sklad-perenos.html) ======== Одно окно: склад ↔ склад, склад → кабинет (с получателем), возврат из кабинета. Приставка pr-. */ .modal.pz-modal { width: min(780px, 100%); padding: 0; display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; } .modal.pz-modal::before { display: none; } .modal.pz-modal .kb-fhint { display: none; } .pz-body { padding: 18px 22px 6px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; flex: 1 1 auto; min-height: 0; } .pz-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .pz-h h3 { margin: 0; font: var(--w-medium) calc(19px * var(--fz))/1.2 var(--head); } .pz-sub { color: var(--muted); font-size: var(--fs-hint); margin-top: 2px; } .pz-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill); font-size: calc(20px * var(--fz)); line-height: 1; color: var(--muted); flex: none; } .pz-lbl { font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .pz-fld { margin-top: 14px; } .pz-fld > .pz-lbl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; } .pz-req { font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); color: var(--amber); } .pz-opt { font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); } .pz-hint { font-weight: var(--w-text); font-size: var(--fs-hint); color: var(--teal-ink); } .pz-popw { position: relative; display: block; min-width: 0; } /* откуда → куда, свёрнуто */ .pz-route { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.25fr) auto; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--bg); } .pz-rp { min-width: 0; width: 100%; border: 0; background: none; text-align: left; padding: 2px 4px; border-radius: 8px; } .pz-rp:hover { background: var(--paper); } .pz-rp b { display: block; font-weight: var(--w-medium); font-size: calc(15.5px * var(--fz)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pz-rp b .dd { color: var(--muted); font-weight: var(--w-medium); font-size: calc(12px * var(--fz)); margin-left: 4px; } .pz-rp small { display: block; color: var(--muted); font-size: calc(12.5px * var(--fz)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; } .pz-arr { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; } .pz-arr svg { width: 16px; height: 16px; fill: none; stroke: var(--on-teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pz-link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(13.5px * var(--fz)); white-space: nowrap; } .pz-link:hover { text-decoration: underline; } .pz-from { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pz-from .pz-popw { display: inline-block; } .pz-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border-radius: 18px; border: 0; background: var(--fill); font-weight: var(--w-medium); } .pz-pill i { font-style: normal; color: var(--muted); font-size: calc(11px * var(--fz)); } .pz-pop { position: absolute; z-index: 5; margin-top: 6px; width: min(300px, 86vw); background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 45, 66, .16); padding: 8px; } .pz-pop .pz-dg { margin: 6px 8px 4px; } .pz-pop button { display: flex; width: 100%; align-items: baseline; gap: 8px; border: 0; background: none; padding: 9px 10px; border-radius: 10px; text-align: left; font-weight: var(--w-medium); } .pz-pop button:hover { background: var(--bg); } .pz-pop button small { margin-left: auto; color: var(--muted); font-weight: var(--w-text); font-size: calc(12.5px * var(--fz)); } .pz-pop button.on { background: var(--teal-10); } /* плитки «Куда» */ .pz-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; } .pz-dg { grid-column: 1 / -1; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; } .pz-tile { position: relative; text-align: left; min-height: 64px; padding: 9px 12px; border: 0; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; } .pz-tile:hover { box-shadow: inset 0 0 0 1px var(--teal); background: var(--teal-10); } .pz-tile b { font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); line-height: 1.2; padding-right: 4px; } .pz-tile b small { font-weight: var(--w-text); color: var(--muted); font-size: inherit; } .pz-tile > span { color: var(--muted); font-size: calc(12.5px * var(--fz)); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pz-tile em { align-self: flex-start; margin-top: 3px; font-style: normal; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-text); padding: 1px 8px; border-radius: 9px; background: var(--amber-soft); color: var(--amber); } .pz-tile.store { background: var(--bg); box-shadow: none; } .pz-tile.store:hover { box-shadow: inset 0 0 0 1px var(--teal); } .pz-noroom { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft); } .pz-noroom p { margin: 0; flex: 1; font-size: calc(13.5px * var(--fz)); line-height: 1.4; } .pz-nobox { grid-column: 1 / -1; font-size: calc(13px * var(--fz)); padding: 2px 2px 4px; } /* кому выдаю */ .pz-ppl { display: flex; flex-wrap: wrap; gap: 8px; } .pz-pers { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px 0 6px; border: 0; border-radius: 23px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--w-medium); } .pz-pers:hover { background: var(--fill); } .pz-pers .pn { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; } .pz-pers small { font-weight: var(--w-text); color: var(--muted); font-size: calc(12px * var(--fz)); } .pz-pers .av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: var(--w-strong) calc(12px * var(--fz))/1 var(--head); background: var(--navy-10); flex: none; } .pz-pers.on { background: var(--teal-10); box-shadow: inset 0 0 0 2px var(--teal); } .pz-pers.on .av { background: var(--teal); } .pz-pers.other { padding: 0 16px; color: var(--teal-ink); } /* строки товара */ .pz-lh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pz-lh .pz-lbl { margin-right: auto; } .pz-find { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--fill); } .pz-find:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); } .pz-find svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .pz-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0; height: auto; font-size: calc(14.5px * var(--fz)); } .pz-find input.bad { color: var(--rose); } .pz-find kbd { font: var(--w-medium) calc(11px * var(--fz))/1 var(--font); color: var(--muted); padding: 3px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); } .pz-freq { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .pz-freq button { height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--teal-10); font-weight: var(--w-medium); font-size: calc(12.5px * var(--fz)); } .pz-freq button:hover { background: var(--teal-soft); } .pz-lh .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pz-lh .btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .pz-lines { margin-top: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; } .pz-lr { display: grid; grid-template-columns: minmax(0, 1fr) 92px 104px 132px 30px; column-gap: 10px; align-items: center; padding: 9px 10px 9px 14px; } .pz-lr + .pz-lr { border-top: 1px solid var(--line-2); } .pz-lr.hd { padding-top: 7px; padding-bottom: 6px; background: var(--bg); font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .pz-lr.hd > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pz-lr .pz-c { text-align: right; white-space: nowrap; } .pz-nm b { font-weight: var(--w-medium); } .pz-nm small { color: var(--muted); margin-left: 4px; } .pz-pku { margin-left: 6px; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); padding: 1px 6px; border-radius: 6px; background: var(--navy); color: #fff; vertical-align: 1px; } .pz-d { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 3px; font-size: calc(12.5px * var(--fz)); color: var(--muted); line-height: 1.3; } .pz-d:empty { display: none; } .pz-tag { font-weight: var(--w-medium); padding: 0 7px; border-radius: 8px; background: var(--teal-10); color: var(--teal-ink); } .pz-tag.need { background: var(--amber-soft); color: var(--amber); } .pz-d .bad { color: var(--rose); font-weight: var(--w-medium); } .pz-d .warn { color: var(--amber); font-weight: var(--w-medium); } .pz-q b { font-weight: var(--w-medium); } .pz-q .mn { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .pz-q.low b { color: var(--amber); } .pz-q.out b { color: var(--rose); } .pz-stp { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: var(--paper); } .pz-stp button { border: 0; background: var(--bg); font-size: calc(18px * var(--fz)); color: var(--muted); } .pz-stp button:hover { background: var(--fill); color: var(--ink); } .pz-stp input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; box-shadow: none; border-radius: 0; padding: 0; text-align: center; font-weight: var(--w-medium); font-size: calc(15px * var(--fz)); background: transparent; } .pz-stp:focus-within { box-shadow: inset 0 0 0 2px var(--teal); } .pz-stp.bad { box-shadow: inset 0 0 0 2px var(--rose); } .pz-stp.bad input { color: var(--rose); } .pz-del { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: calc(18px * var(--fz)); } .pz-del:hover { background: var(--fill); color: var(--rose); } .pz-lr.lock { background: color-mix(in srgb, var(--rose-soft) 40%, var(--paper)); } .pz-in { width: 100%; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(15px * var(--fz)); outline: 0; } .pz-in:focus { box-shadow: inset 0 0 0 2px var(--teal); } .pz-in.bad { box-shadow: inset 0 0 0 2px var(--rose); } .pz-nt { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: calc(13px * var(--fz)); color: var(--muted); line-height: 1.45; } .pz-nt b { color: var(--ink); } /* низ окна */ .pz-f { display: flex; align-items: center; gap: 10px; padding: 12px 22px 16px; border-top: 1px solid var(--line-2); background: var(--paper); flex: none; } .pz-tot { margin-right: auto; min-width: 0; flex: 0 1 auto; } .pz-tot div:first-child { font-weight: var(--w-strong); } .pz-tot div:last-child { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .pz-why { color: var(--amber); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); text-align: right; flex: 0 1 auto; min-width: 0; line-height: 1.25; } .pz-why.err { color: var(--rose); } .pz-f .btn { height: 48px; border-radius: 14px; flex: none; } .pz-f .btn.teal { min-width: 170px; font-size: calc(16px * var(--fz)); } /* готово */ .pz-done { padding: 28px 24px 10px; text-align: center; } .pz-done .ic { width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; } .pz-done .ic svg { width: 32px; height: 32px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .pz-done h3 { margin: 0; font: var(--w-medium) calc(20px * var(--fz))/1.25 var(--head); } .pz-done p { margin: 6px 0 0; color: var(--muted); } .pz-done .doc { display: inline-flex; margin-top: 14px; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 12px; background: var(--bg); font-weight: var(--w-medium); } .pz-done-f { display: flex; gap: 10px; justify-content: center; padding: 14px 22px 22px; } .pz-done-f .btn { height: 48px; border-radius: 14px; min-width: 170px; } @media (max-width: 699px) { .modal.pz-modal { max-height: none; } .pz-body { padding: 14px 14px 6px; } .pz-lr { grid-template-columns: minmax(0, 1fr) 118px 26px; grid-template-areas: "nm stp del"; } .pz-lr .pz-nm { grid-area: nm; } .pz-lr .pz-stp { grid-area: stp; } .pz-lr .pz-del { grid-area: del; } .pz-lr .pz-c { display: none; } .pz-lr.hd { display: none; } .pz-route { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); } .pz-route .pz-link { grid-column: 1 / -1; justify-self: start; } .pz-f { flex-wrap: wrap; padding: 10px 14px 14px; } .pz-tot { flex: 1 1 100%; margin-right: 0; } .pz-why { flex: 1 1 100%; text-align: left; } .pz-f .btn { flex: 1 1 0; padding: 0 8px; } .pz-f .btn.teal { flex: 2 1 0; min-width: 0; } } @media (max-height: 760px) { .pz-body { padding-top: 14px; } .pz-fld { margin-top: 10px; } .pz-tile { min-height: 56px; padding: 7px 10px; } .pz-pers { min-height: 40px; } .pz-pers .av { width: 30px; height: 30px; } } /* ======== «Расходники на мне» в «Финансах» врача (22.10.2026, замечание 18; js/vrach-rashodniki.js) ======== */ .vr-b { padding: 14px 18px 12px; margin-top: 14px; } .vr-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .vr-h h3 { margin: 0; font: var(--w-medium) calc(17.5px * var(--fz))/1.2 var(--head); } .vr-rooms { color: var(--muted); font-size: calc(13px * var(--fz)); } .vr-rooms b { color: var(--ink); font-weight: var(--w-medium); } .vr-sum { display: grid; gap: 8px; margin-top: 12px; } .vr-sum > div { padding: 9px 12px; border-radius: 12px; background: var(--bg); min-width: 0; } .vr-sum span { display: block; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-strong); color: var(--muted); } .vr-sum b { display: block; font: var(--w-medium) calc(20px * var(--fz))/1.2 var(--head); white-space: nowrap; } .vr-sum small { display: block; color: var(--muted); font-size: calc(12px * var(--fz)); line-height: 1.3; } .vr-sum small span { display: inline; font-size: inherit; font-weight: inherit; } .vr-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--amber-soft); font-size: calc(13.5px * var(--fz)); line-height: 1.4; } .vr-warn i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: var(--w-text); font-size: calc(13px * var(--fz)); display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; } .vr-t { width: 100%; border-collapse: collapse; margin-top: 10px; } .vr-t th { text-align: right; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); padding: 6px 8px; white-space: nowrap; } .vr-t th:first-child, .vr-t td:first-child { text-align: left; padding-left: 2px; } .vr-t td { text-align: right; padding: 8px 8px; border-top: 1px solid var(--line-2); white-space: nowrap; } .vr-t td:first-child { white-space: normal; } .vr-t td b { font-weight: var(--w-medium); } .vr-t td small { color: var(--muted); font-size: calc(12px * var(--fz)); margin-left: 3px; } .vr-t td .mn { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .vr-t td.low b { color: var(--amber); } .vr-t td.out b { color: var(--rose); } .vr-t td .src { display: block; color: var(--muted); font-size: calc(11.5px * var(--fz)); } .vr-t tr.tot td { font-weight: var(--w-strong); border-top: 1px solid var(--line); } .vr-t .z { color: var(--muted-3); } .vr-f { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 8px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .vr-fold { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: calc(13px * var(--fz)); } .vr-docs { margin-top: 6px; border-radius: 12px; background: var(--bg); padding: 4px 12px; font-size: calc(13px * var(--fz)); } .vr-docs > div { display: flex; gap: 10px; padding: 6px 0; } .vr-docs > div + div { border-top: 1px solid var(--line); } .vr-docs > div span:last-child { margin-left: auto; color: var(--muted); } .vr-empty { margin-top: 10px; color: var(--muted); font-size: calc(14px * var(--fz)); } @media (max-width: 699px) { .vr-sum { grid-template-columns: 1fr 1fr !important; } .vr-sum > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .vr-t th.hm, .vr-t td.hm { display: none; } .vr-t th { white-space: normal; } .vr-t td { padding: 8px 4px; } .vr-t tr.tot { display: none; } } /* ======== Окно «Возврат», 22.10.2026 (замечание №10; js/vozvrat.js; макет makety-2026-10-22/kassa-vozvrat.html) ======== Два шага в одном окне: «Кому» (поиск и подсказки) и «Что вернуть» (карточки приёмов с оплатой, низ прилипает: сумма, способ, причина, главная кнопка). Цвета – переменными: тёмная тема берёт свои значения из :root[data-theme="dark"]. */ .modal.rf-win { width: min(620px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px 14px; } .modal.rf-s2 { padding-bottom: 0; } .rf-win [hidden] { display: none !important; } .rf-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: none; } .rf-h h3 { margin: 0; font: var(--w-medium) calc(19px * var(--fz))/1.2 var(--head); } .rf-who { min-width: 0; } .rf-who h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rf-sub { color: var(--muted); font-size: var(--fs-hint); margin-top: 2px; } .rf-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill); font-size: 20px; line-height: 1; color: var(--muted); flex: none; cursor: pointer; } .rf-x:hover { background: var(--navy-10); } .rf-find { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--fill); flex: none; } .rf-find:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); } .rf-find svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .rf-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; font-size: calc(16px * var(--fz)); } .rf-res { min-height: 0; overflow-y: auto; max-height: 56vh; scrollbar-width: thin; } .rf-gh { display: flex; align-items: center; gap: 6px; padding: 12px 4px 4px; font-size: calc(12.5px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .rf-gh i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: 2px; } .rf-gh.amb { color: var(--amber); } .rf-gh.amb i { background: var(--orange); } .rf-p { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 12px; color: var(--ink); cursor: pointer; } .rf-p:hover, .rf-p.sel, .rf-p:focus-visible { background: var(--bg); outline: none; } .rf-p .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rf-p .t .s { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .rf-p .r { font-weight: var(--w-medium); white-space: nowrap; text-align: right; font-size: calc(14px * var(--fz)); } .rf-p .r small { display: block; font-weight: var(--w-text); color: var(--muted); font-size: calc(12px * var(--fz)); } .rf-p .r.amb { color: var(--amber); } .rf-mut { color: var(--muted); font-weight: var(--w-text); } .rf-empty { padding: 18px 8px; color: var(--muted); font-size: calc(13.5px * var(--fz)); } .rf-top { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); flex: none; } .rf-lk { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .rf-lk:hover { text-decoration: underline; } .rf-top .rf-lk { margin-left: auto; font-size: calc(13px * var(--fz)); } .rf-list { margin: 0 -6px; padding: 0 6px 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; } .rf-vk { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; overflow: hidden; } .rf-vh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px 3px; font-size: calc(13.5px * var(--fz)); } .rf-vh .d { font-weight: var(--w-medium); } .rf-vh .r { margin-left: auto; color: var(--muted); font-size: calc(12.5px * var(--fz)); white-space: nowrap; } .rf-vh .r b { color: var(--ink); } .rf-it { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 12px; font-size: calc(14px * var(--fz)); cursor: pointer; } .rf-it:hover { background: var(--bg); } .rf-it input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .rf-it .o { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--navy-20); } .rf-it:has(input:checked), .rf-it.on { background: var(--teal-10); } .rf-it:has(input:checked) .o, .rf-it.on .o { box-shadow: inset 0 0 0 5px var(--teal-ink); } .rf-it:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: -3px; border-radius: 12px; } .rf-it .t { display: flex; flex-direction: column; min-width: 0; } .rf-it small { color: var(--muted); font-size: calc(12px * var(--fz)); } .rf-it b { white-space: nowrap; } .rf-it.dis { cursor: default; color: var(--muted); grid-template-columns: 20px minmax(0, 1fr) auto auto; } .rf-it.dis .o { box-shadow: inset 0 0 0 2px var(--line); background: var(--bg); } .rf-it.dis:hover { background: none; } .rf-vf { padding: 2px 12px 9px 42px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .rf-pk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: calc(14px * var(--fz)); } .rf-pk .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rf-pk small { color: var(--muted); font-size: calc(12px * var(--fz)); } .rf-det { flex: none; background: var(--paper); margin: 4px -20px 0; padding: 10px 20px 14px; box-shadow: 0 -10px 14px -12px rgba(0, 45, 66, .35); } .rf-row2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; } .rf-fld { margin-top: 10px; min-width: 0; } .rf-row2 .rf-fld { margin-top: 2px; } .rf-lbl { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .rf-lbl .req { color: var(--rose); } .rf-in { width: 100%; height: var(--tap); padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(16px * var(--fz)); outline: 0; margin: 0; } .rf-in:focus { box-shadow: inset 0 0 0 2px var(--teal); } .rf-big { font: var(--w-medium) 22px/1 var(--head); } .rf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } .rf-seg button { min-height: var(--tap); padding: 4px 8px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); line-height: 1.15; color: var(--ink); cursor: pointer; } .rf-seg button small { display: block; font-weight: var(--w-text); font-size: calc(11.5px * var(--fz)); color: var(--muted); } .rf-seg button:hover { background: var(--bg); } .rf-seg button.on { background: var(--teal); box-shadow: none; color: var(--on-teal); } .rf-seg button.on small { color: var(--on-teal); } .rf-why { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rf-why .chip { height: 30px; } .rf-why .rf-n { height: 30px; flex: 1 1 160px; min-width: 140px; font-size: calc(14px * var(--fz)); } .rf-info { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .rf-info:empty { display: none; } .rf-info .w { color: var(--amber); font-weight: var(--w-medium); } p.rf-info { margin-bottom: 0; } .rf-hint { margin-top: 6px; font-size: var(--fs-hint); color: var(--muted); } .rf-hint.rf-lim { margin-top: 4px; font-size: var(--fs-hint); } .rf-hint.bad, .rf-hint.minus { color: var(--rose); font-weight: var(--w-text); } .rf-hint:empty { display: none; } .rf-f { display: flex; gap: 10px; margin-top: 10px; align-items: center; } .rf-f .btn.teal { flex: 1; height: 50px; font-size: calc(16px * var(--fz)); border-radius: 14px; gap: 6px; } .rf-f .btn.teal b { font-weight: var(--w-strong); } .rf-f .btn.ghost { height: 50px; border-radius: 14px; } .rf-win .kb-fhint { margin: 0; padding: 4px 0 8px; flex: none; } .st-toast-l { background: none; border: 0; padding: 0 0 0 8px; color: var(--teal); font-weight: var(--w-medium); font-size: inherit; cursor: pointer; } @media (max-height: 820px) { .rf-in { height: 40px; } .rf-seg button { min-height: 40px; } .rf-why .chip { height: 28px; } .rf-f .btn.teal, .rf-f .btn.ghost { height: 44px; } } @media (max-width: 520px) { .modal.rf-win { padding-left: 14px; padding-right: 14px; } .rf-det { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; } .rf-row2 { grid-template-columns: 1fr; } .rf-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .rf-vh .r { margin-left: 0; white-space: normal; } } /* ======== Окно «Выемка из кассы», 22.10.2026 (замечание заказчика; js/vyemka.js; макет makety-2026-10-22/kassa-vyemka.html) ======== Плашка «В кассе сейчас / останется», сумма, «Куда» четырьмя кнопками (на телефоне 2×2), поля по выбору, одна главная кнопка. Цвета – переменными: тёмная тема берёт свои значения из :root[data-theme="dark"]. */ .modal.vym-win { width: min(580px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; padding: 18px 20px 16px; } .vym-win [hidden] { display: none !important; } .vym-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .vym-h h3 { margin: 0; font: var(--w-medium) calc(19px * var(--fz))/1.2 var(--head); } .vym-sub { color: var(--muted); font-size: var(--fs-hint); margin-top: 2px; } .vym-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill); font-size: 20px; line-height: 1; color: var(--muted); flex: none; cursor: pointer; } .vym-x:hover { background: var(--navy-10); } .vym-yash { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; padding: 12px 16px; border-radius: 14px; background: var(--bg); } .vym-yash .l { color: var(--muted); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } .vym-yash .v { font: var(--w-medium) 26px/1.1 var(--head); white-space: nowrap; } .vym-yash .r { text-align: right; } .vym-yash .v.after { color: var(--teal-ink); } .vym-yash .v.after.low { color: var(--amber); } .vym-yash .v.after.neg { color: var(--rose); } .vym-yash .note { grid-column: 1 / -1; font-size: var(--fs-hint); color: var(--muted); } .vym-yash .note:empty { display: none; } .vym-fld { margin-top: 12px; min-width: 0; } .vym-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .vym-lbl { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); color: var(--muted); } .vym-lbl .req { color: var(--rose); } .vym-opt { font-weight: var(--w-medium); } .vym-in { width: 100%; height: var(--tap); padding: 0 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(16px * var(--fz)); outline: 0; margin: 0; } .vym-in:focus { box-shadow: inset 0 0 0 2px var(--teal); } .vym-in.bad, .vym-in.bad:focus { box-shadow: inset 0 0 0 2px var(--rose); } select.vym-in { padding-right: 30px; } .vym-big { font: var(--w-medium) 22px/1 var(--head); } .vym-big::placeholder { font: var(--w-text) calc(13px * var(--fz)) var(--font); } .vym-q { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .vym-q:empty { display: none; } .vym-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } .vym-seg button { min-height: var(--tap); padding: 4px 8px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--w-medium); font-size: calc(14px * var(--fz)); line-height: 1.15; color: var(--ink); cursor: pointer; } .vym-seg button small { display: block; font-weight: var(--w-text); font-size: calc(11.5px * var(--fz)); color: var(--muted); } .vym-seg button:hover { background: var(--bg); } .vym-seg button.on { background: var(--teal); box-shadow: none; color: var(--on-teal); } .vym-seg button[disabled] { color: var(--muted); opacity: .65; background: var(--bg); box-shadow: none; cursor: default; } .vym-seg.bad button:not(.on):not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--rose); } .vym-help { margin-top: 6px; font-size: calc(12.5px * var(--fz)); color: var(--muted); } .vym-tick { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: calc(13.5px * var(--fz)); cursor: pointer; } .vym-tick input { width: 18px; height: 18px; accent-color: var(--teal-ink); flex: none; margin: 0; } .vym-tick .vym-opt { color: var(--muted); font-size: calc(12.5px * var(--fz)); } .vym-raz { margin-top: 10px; font-size: calc(13px * var(--fz)); color: var(--muted); } .vym-lk { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: var(--w-medium); font-size: inherit; white-space: nowrap; cursor: pointer; } .vym-lk:hover { text-decoration: underline; } .vym-hint { margin-top: 8px; font-size: var(--fs-hint); color: var(--muted); } .vym-hint.minus, .vym-hint.bad { color: var(--rose); font-weight: var(--w-text); } .vym-hint:empty { display: none; } .vym-f { display: flex; gap: 10px; margin-top: 14px; align-items: center; } .vym-f .btn.teal { flex: 1; height: 50px; font-size: calc(16px * var(--fz)); border-radius: 14px; gap: 6px; } .vym-f .btn.teal b { font-weight: var(--w-strong); } .vym-f .btn.ghost { height: 50px; border-radius: 14px; } @media (max-height: 820px) { .vym-in { height: 40px; } .vym-seg button { min-height: 40px; } .vym-f .btn.teal, .vym-f .btn.ghost { height: 44px; } .vym-yash .v { font-size: 22px; } } @media (max-width: 520px) { .modal.vym-win { padding-left: 14px; padding-right: 14px; } .vym-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .vym-two { grid-template-columns: 1fr; } } .vym-q .chip { height: 30px; gap: 4px; } /* «В прошлый раз» (шаг 8 схемы, замечание №5, 28.10.2026; js/priem-proshloe.js): карточка итога прошлого приёма по этому же протоколу. Ширину карточки мерит она сама (`container`): над блоками до 1500 px она во всю ширину карты – строка «подпись · текст · кнопка»; колонкой справа (после 1500 px, `.in-col` ставит экран карты) она узкая – кнопка уходит под текст. Макет: docs/zhurnal/makety-2026-10-28/maket-karta.html. */ .prosh-w { container-type: inline-size; container-name: prosh; margin-bottom: var(--gap, 12px); } .prosh.card { border-left: 4px solid var(--teal); padding: 12px 14px 10px; margin: 0; } .prosh .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .prosh .ph .phl { min-width: 0; } .prosh .ph .ttl { font-weight: var(--w-medium); font-size: calc(15.5px * var(--fz)); line-height: 1.3; overflow-wrap: anywhere; } .prosh .ph .who { font-size: calc(13px * var(--fz)); color: var(--muted); margin-top: 1px; } .prosh .ph .pa { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .prosh .pr { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: calc(14px * var(--fz)); } .prosh .pl { color: var(--muted); font-size: calc(13px * var(--fz)); min-width: 0; overflow-wrap: anywhere; } .prosh .pt { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .prosh .pt .late { color: var(--amber); font-weight: var(--w-medium); } .prosh .pt .early, .prosh .pt .inday { color: var(--ok); font-weight: var(--w-medium); } .prosh .pb { justify-self: end; align-self: center; } .prosh .pb .done { font-size: calc(12.5px * var(--fz)); color: var(--ok); font-weight: var(--w-medium); white-space: nowrap; min-height: 0; padding: 2px; } .prosh .pdoc { white-space: pre-wrap; font-size: calc(13.5px * var(--fz)); line-height: 1.5; padding: 8px 0 4px; border-top: 1px solid var(--line-2); max-height: 60vh; overflow: auto; } .prosh .pf { font-size: calc(12.5px * var(--fz)); color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line-2); } .prosh .pf .linkish { font-size: inherit; min-height: 0; padding: 0 2px; } .prosh.folded .pr, .prosh.folded .pf, .prosh.folded .pdoc { display: none; } @container prosh (max-width: 520px) { .prosh .pr { grid-template-columns: 112px minmax(0, 1fr); } .prosh .pb { grid-column: 2; justify-self: start; } .prosh .ph { flex-direction: column; } .prosh .ph .pa { justify-content: flex-start; } } @media (min-width: 1500px) { /* Колонка справа от блоков: видна, пока врач заполняет карту. */ .prosh-w.in-col { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; } } /* Вкладки протоколов приёма (шаг 5 схемы, замечание №7, 28.10.2026; js/priem-vkladki.js). Макет: docs/zhurnal/makety-2026-10-28/maket-karta.html. Раскладка карты со вкладками и/или карточкой «В прошлый раз» (`.cardwrap.vk`): полоса пациента | вкладки, карточка, лента; от 1500 px карточка – колонкой справа (только вид «в столбец»; `.prosh-w.in-col` липнет, пока врач заполняет карту). */ .cardwrap.vk { grid-template-columns: 208px minmax(0, 1fr); grid-template-areas: "rail tabs" "rail prog" "rail prev" "rail main"; row-gap: 0; } .cardwrap.vk > .progress { grid-area: prog; margin: 0 0 var(--gap, 12px); } .cardwrap.vk > .cardrail { grid-area: rail; } .cardwrap.vk > .vk-tabs { grid-area: tabs; } .cardwrap.vk > .prosh-w { grid-area: prev; } .cardwrap.vk > .cardflow { grid-area: main; min-width: 0; } .cardwrap.vk.lenta > .vk-tabs, .cardwrap.vk.lenta > .progress, .cardwrap.vk.lenta > .prosh-w { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } /* Уже 1500 px колонка не сужается до 880 с пустотой слева (проверка 29.10 №10): блоки на всю ширину рядом с полосой пациента, как в макете. */ @media (max-width: 1499px) { .cardwrap.vk.lenta > .vk-tabs, .cardwrap.vk.lenta > .progress, .cardwrap.vk.lenta > .prosh-w, .cardwrap.vk.lenta > .cardflow { max-width: none; margin-left: 0; margin-right: 0; } } @media (min-width: 1500px) { .cardwrap.vk.lenta.has-prev { grid-template-columns: 208px minmax(0, 880px) minmax(300px, 380px); grid-template-areas: "rail tabs tabs" "rail prog prog" "rail main prev"; justify-content: center; } .cardwrap.vk.lenta.has-prev > .vk-tabs, .cardwrap.vk.lenta.has-prev > .progress { max-width: none; margin-left: 0; margin-right: 0; } .cardwrap.vk.lenta.has-prev > .prosh-w { max-width: none; margin: 0; align-self: start; } } /* Телефон и узкое окно: вкладки – первыми, над полосой пациента (она занимает экран и прятала их). */ @media (max-width: 900px) { .cardwrap.vk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "prog" "rail" "prev" "main"; } } .vk-tabs { margin-bottom: var(--gap, 12px); } .vk-tabs .vk-row { display: flex; gap: 6px; background: var(--fill); padding: 5px; border-radius: 14px; overflow-x: auto; } .vk-tab { flex: 1 1 0; min-width: 170px; border: 0; background: transparent; border-radius: 10px; padding: 7px 12px 8px; text-align: left; display: flex; gap: 9px; align-items: flex-start; color: var(--ink); font: inherit; cursor: pointer; } .vk-tab:hover { background: rgba(255,255,255,.55); } .vk-tab.on { background: var(--paper); box-shadow: 0 1px 0 rgba(0,45,66,.06), inset 0 -3px 0 var(--teal); } .vk-tab .vk-tx { min-width: 0; display: flex; flex-direction: column; } .vk-tab .nm { font-weight: var(--w-medium); font-size: calc(14.5px * var(--fz)); line-height: 1.2; overflow-wrap: anywhere; } .vk-tab .st { font-size: calc(12.5px * var(--fz)); color: var(--muted); margin-top: 2px; } .vk-tab .st.need { color: var(--amber); font-weight: var(--w-medium); } .vk-tab .st.ready { color: var(--teal-ink); font-weight: var(--w-medium); } .vk-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); } .vk-dot.need { box-shadow: inset 0 0 0 2px var(--orange); } .vk-dot.ready { background: var(--teal); color: var(--on-teal); } .vk-dot.closed { background: var(--mint); color: var(--ink); } .vk-nm { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .cardflow .itog-h { margin: 16px 0 8px; font-size: calc(12px * var(--fz)); font-weight: var(--w-strong); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .banner.ok { background: var(--ok-soft); box-shadow: inset 0 0 0 1px rgba(63,143,85,.35); } /* Вкладка закрытого протокола при открытом приёме: блоки читают, красных «без него не закрыть» нет (как у закрытой карты). */ .cardflow.vk-closed .module.m-need { background: var(--paper); box-shadow: var(--shadow); } .cardflow.vk-closed .module.m-need .hd h3 { color: var(--ink); } .cardflow.vk-closed .module .need, .cardflow.vk-closed .module .mk.need { display: none; } /* Телефон: вкладки компактные, названия в две строки без разрыва слов, статус – точкой; кнопка закрытия без названия. */ @media (max-width: 520px) { .vk-tabs .vk-row { gap: 4px; padding: 4px; } .vk-tab { flex: 1 0 96px; min-width: 0; padding: 6px 7px; gap: 6px; } .vk-tab .nm { font-size: calc(12.5px * var(--fz)); overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vk-tab .st { display: none; } .vk-dot { width: 16px; height: 16px; font-size: max(11px, calc(10px * var(--fz))); } .vk-full { display: none; } } .vk-short { display: none; } @media (max-width: 520px) { .vk-short { display: inline; } } /* «В прошлый раз» свёрнута (уже 1500 px – по умолчанию): одна строка «В прошлый раз · протокол · дата · врач перенести всё развернуть» (проверка 29.10 №3: развёрнутая на 1366×768 уводила первый блок под нижнюю полосу). */ .prosh.folded.card { padding: 7px 12px 7px 14px; } .prosh.folded .ph { flex-direction: row; align-items: center; margin-bottom: 0; } .prosh.folded .ph .phl { display: flex; gap: 10px; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; } .prosh.folded .ph .ttl { font-size: calc(14.5px * var(--fz)); overflow: hidden; text-overflow: ellipsis; min-width: 0; } .prosh.folded .ph .who { margin: 0; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .prosh.folded .ph .pa { flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; } /* «Как увидит врач» – пробный приём (js/proba.js, замечание №6): плашка сверху поверх карты врача. Карта под ней – та же, что у врача; плашка сдвигает её вниз на свою высоту. */ .proba-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--amber-soft); color: var(--ink); border-bottom: 2px solid var(--amber); box-shadow: 0 2px 8px rgba(0, 45, 66, .12); font-size: calc(14px * var(--fz)); white-space: nowrap; overflow: hidden; } .proba-bar .muted { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .proba-bar .btn { margin-left: auto; flex: none; } body.proba-on { padding-top: 44px; } body.proba-on .cardrail { top: 60px; } body.proba-on .vk-side, body.proba-on .prosh-w.in-col { top: 56px; } body.proba-on .prosh-w.in-col { max-height: calc(100vh - 68px); } /* ======== Ввод УЗИ с телефона (29.10.2026, js/vvod-tel.js) ======== Только телефон: на 700 px и шире этих экранов нет (там карта приёма). Цвета и шрифты – из :root. */ @media (max-width: 699px) { .vt { padding: 4px 0 168px; color: var(--ink); } .vt button { font-family: inherit; } .vt-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .vt-back { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; } .vt-back svg { width: 22px; height: 22px; } .vt-who { min-width: 0; } .vt-pat { font: var(--w-medium) calc(22px * var(--fz))/1.2 var(--head); overflow-wrap: anywhere; } .vt-sub { font-size: calc(14px * var(--fz)); color: var(--muted); margin-top: 2px; } .vt-hint { margin: 10px 0 12px; font-size: calc(15px * var(--fz)); color: var(--muted); } .vt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vt-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 96px; padding: 14px; text-align: left; border: 2px solid transparent; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); color: var(--ink); } .vt-tile.next { border-color: var(--teal); background: var(--teal-10); } .vt-tile.flag { background: var(--amber-soft); } .vt-tn { font: var(--w-medium) calc(17px * var(--fz))/1.2 var(--head); overflow-wrap: anywhere; } .vt-tc { font-size: calc(13px * var(--fz)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-pr { display: block; height: 6px; border-radius: 3px; background: var(--navy-10); overflow: hidden; } .vt-pr i { display: block; height: 100%; background: var(--teal); } .vt-net { margin: 12px 0 0; font-size: calc(13px * var(--fz)); color: var(--muted); } .vt-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); } .vt-bar.two { display: flex; gap: 10px; } .vt-bar.two .vt-btn:first-child { flex: 1; } .vt-bar.two .vt-btn:last-child { flex: 2; } .vt-bn { margin: 6px 0 0; text-align: center; font-size: calc(13px * var(--fz)); color: var(--muted); } .vt-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 16px; border: 2px solid transparent; border-radius: var(--radius); font-size: calc(17px * var(--fz)); font-weight: var(--w-strong); } .vt-btn.pri { background: var(--teal); color: var(--ink); } .vt-btn.ghost { background: var(--paper); border-color: var(--navy-20); color: var(--ink); } .vt-btn.tall { min-height: 60px; } .vt-btn:disabled { opacity: .6; } .vt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vt-lnk { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--teal-ink); font-size: calc(16px * var(--fz)); font-weight: var(--w-medium); } .vt-seg { display: flex; gap: 4px; margin: 4px 0 10px; } .vt-seg i { flex: 1; height: 4px; border-radius: 2px; background: var(--navy-20); } .vt-seg i.done { background: var(--teal); } .vt-seg i.cur { background: var(--ink); } .vt-cap { margin: 0 0 6px; font-size: calc(14px * var(--fz)); color: var(--muted); } .vt-h { margin: 0 0 10px; font: var(--w-medium) calc(32px * var(--fz))/1.15 var(--head); overflow-wrap: anywhere; } .vt-norm { display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: var(--teal-soft); font-size: calc(14px * var(--fz)); font-weight: var(--w-medium); } .vt-in { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .vt-fld { flex: 1; min-width: 0; box-sizing: border-box; height: 84px; padding: 0 16px; border: 3px solid var(--teal); border-radius: 16px; background: var(--paper); color: var(--ink); font: var(--w-medium) calc(44px * var(--fz)) var(--head); } .vt-in.txt .vt-fld { font-size: calc(28px * var(--fz)); } .vt-fld:focus { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); } .vt-un { flex: none; font: var(--w-medium) calc(20px * var(--fz)) var(--head); color: var(--muted); } .vt-opts { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; } .vt-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 72px; padding: 8px 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; font: var(--w-medium) calc(20px * var(--fz)) var(--head); } .vt-opt.on { border: 3px solid var(--teal); background: var(--teal-10); } .vt-opt > span { min-width: 0; overflow-wrap: anywhere; } .vt-nt { flex: none; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--teal-soft); font: var(--w-medium) calc(13px * var(--fz)) var(--font); font-style: normal; } .vt-gk { flex: none; width: 26px; height: 26px; color: var(--teal-ink); } .vt-list { border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; } .vt-ln { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--ink); text-align: left; } .vt-ln:last-child { border-bottom: 0; } .vt-ll { font-size: calc(16px * var(--fz)); min-width: 0; overflow-wrap: anywhere; } .vt-lv { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 55%; text-align: right; font-size: calc(16px * var(--fz)); } .vt-lv.mute { color: var(--muted); } .vt-lv b { overflow-wrap: anywhere; } .vt-ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; } .vt-ck .vt-gk { width: 16px; height: 16px; color: inherit; } .vt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; } .vt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; font-size: calc(16px * var(--fz)); } .vt-chip.on { border-color: var(--teal); background: var(--teal-soft); } .vt-chip.none { border-style: dashed; } .vt-chip .vt-gk { width: 20px; height: 20px; } .vt-lb { display: block; margin: 4px 0 6px; font-size: calc(14px * var(--fz)); color: var(--muted); font-weight: var(--w-text); } .vt-ta { display: block; width: 100%; box-sizing: border-box; height: 112px; padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: calc(16px * var(--fz)); resize: none; } .vt-ta:focus { outline: none; border-color: var(--teal); } .vt-kod { margin: 8px 0 0; min-height: 1.2em; font-size: calc(14px * var(--fz)); color: var(--muted); } .vt-fin { padding-top: 40px; text-align: center; } .vt-fin .vt-btn { margin-top: 12px; } .vt-big { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 14px; border-radius: 50%; background: var(--teal-soft); } .vt-big .vt-gk { width: 56px; height: 56px; } .vt-fl { margin: 0 0 8px; font-size: calc(16px * var(--fz)); color: var(--muted); } .vt-fl.warn { color: var(--amber); font-weight: var(--w-medium); } .vt-empty { padding: 56px 0 0; text-align: center; } .vt-et { margin: 0 0 24px; font: var(--w-medium) calc(24px * var(--fz))/1.2 var(--head); } .vt-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 14px; padding: 16px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 2px var(--teal); } .vt-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--teal-soft); font-size: calc(13px * var(--fz)); font-weight: var(--w-medium); } .vt-cp { font: var(--w-medium) calc(32px * var(--fz))/1.15 var(--head); overflow-wrap: anywhere; } .vt-cp.long { font-size: calc(24px * var(--fz)); } .vt-ct { font-size: calc(15px * var(--fz)); color: var(--muted); } .vt-cn { margin-top: 4px; font-size: calc(14px * var(--fz)); color: var(--muted); } .vt-card .vt-btn { margin-top: 8px; } .vt-ln2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--line-2); background: transparent; color: var(--ink); text-align: left; font-size: calc(15px * var(--fz)); } .vt-ln2 i { flex: none; font-style: normal; color: var(--muted-2); } /* Общее правило телефона `#view button { min-height: 32px }` сильнее класса: высоты экрана ввода – с #view. */ #view .vt-btn { min-height: 56px; } #view .vt-btn.tall { min-height: 60px; } #view .vt-lnk, #view .vt-back, #view .vt-ln2 { min-height: 44px; } #view .vt-opt { min-height: 72px; } #view .vt-ln { min-height: 60px; } #view .vt-chip { min-height: 48px; } #view .vt-tile { min-height: 96px; } } /* Передача пациента между врачами (замечания 29.10.2026 №1–3): «Направили ко мне» и лист протокола коллеги на экране */ .ref-km .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ref-km .from { color: var(--muted); font-size: var(--fs-hint); margin-top: 2px; } .ref-km .why { margin-top: 3px; } .ref-km .why i { font-style: normal; color: var(--muted); } .ref-km > .row { flex: none; } .pv-list { min-width: 0; overflow: hidden; } .pv-fr { display: block; width: 794px; height: 1123px; border: 0; background: #fff; margin: 0 auto; } .pv-prl { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: .5px solid var(--line); } .pv-prl .nm { font-weight: var(--w-medium); } .pv-prl .no { color: var(--muted); font-size: var(--fs-hint); margin-top: 1px; } .pv-msg { max-width: 760px; padding: 22px 24px; } .pv-msg .muted { margin-top: 6px; } .pv-msg .row { margin-top: 14px; } /* w2b: смена — окно закрытия смены и её итог (№18, 29.10.2026): наличные одной строкой «ожидается / пересчитано / разница», безнал — таблицей по счетам; всё на одном экране без прокрутки. Полоса-напоминание о смене с прошлого дня (№27). */ .modal.sh-zakr { width: min(680px, 100%); } .sh-zakr h3 { margin-bottom: 6px; } .sh-zakr #sh-exp { margin: 0 0 8px; } .sh-yashik { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } .sh-yashik .sh-y-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .sh-yashik .sh-y-eq { margin: 2px 0 8px; } .sh-yashik .sh-y-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } .sh-yashik .sh-y-r .lbl { display: block; color: var(--muted); font-size: var(--fs-hint); margin-bottom: 3px; } .sh-yashik .sh-y-r b { font-size: calc(17px * var(--fz)); font-variant-numeric: tabular-nums; } .sh-yashik .sh-y-r input { width: 100%; } /* Таблица безнала не шире окна (проверка c2 №4): ширина колонок фиксирована, числа – узкими колонками, способы переносятся, длинное название способа – «…» в своей ячейке; на телефоне «Пришло / Вернули / Комиссия» (`.nx`) – строкой под счётом (`.sh-sch-m`). */ .sh-sch { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: calc(13px * var(--fz)); } .sh-sch th { text-align: left; font-weight: var(--w-medium); color: var(--muted); font-size: var(--fs-hint); padding: 3px 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } .sh-sch th.ac { width: 26%; } .sh-sch th.n { width: 92px; white-space: normal; overflow-wrap: normal; } .sh-sch td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; } .sh-sch .n { text-align: right; font-variant-numeric: tabular-nums; } .sh-sch td.n { white-space: nowrap; } .sh-sch td.sp { color: var(--muted); font-size: var(--fs-hint); } .sh-sch td.sp .nw, .sh-yashik .nw { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .sh-sch .sh-sch-m { display: none; font-weight: normal; } .sh-sch tfoot td { border-bottom: 0; font-weight: var(--w-medium); } .sh-sch-p { margin: 4px 0 6px; } .sh-vs { margin: 4px 0 8px; color: var(--muted); } .sh-vs b { color: var(--ink, inherit); } .smena-polosa { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } @media (max-width: 560px) { .sh-yashik .sh-y-r { grid-template-columns: 1fr 1fr; } .sh-sch td, .sh-sch th { padding: 4px 3px; } .sh-sch th.ac { width: 38%; } .sh-sch th.n { width: 76px; } .sh-sch .nx { display: none; } .sh-sch .sh-sch-m { display: block; } /* Таблица смены – таблицей (общее «.modal table» на телефоне делает её блоком с прокруткой), окно смены – над липкой полосой меню (`.nav`, z-index 30): заголовок не уходит под неё (c2 №13). */ .modal table.sh-sch { display: table; overflow: visible; } #overlay:has(.sh-zakr) { z-index: 31; } } /* w2d: запись */ .sz-gr + .sz-gr { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); } /* Врач слева – карточка-«окошко» (замечание №14, 29.10.2026): кружок 32 px с инициалами и точкой отделения, «Фамилия И.О.» жирно, под ней часы сегодня, справа – свободных окошек сегодня. Выбранная – бирюзовая рамка. */ .sz-doc { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 0 4px 3px; padding: 4px 8px 4px 5px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); text-align: left; cursor: pointer; color: var(--ink); } .sz-doc:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--navy-20); } .sz-doc.on { background: var(--teal-10); box-shadow: inset 0 0 0 2px var(--teal); } .sz-av { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: var(--ink); font-style: normal; font-size: calc(12px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .02em; } .sz-doc.on .sz-av { background: var(--teal); color: var(--on-teal); } .sz-doc.off .sz-av { color: var(--muted); } /* Точка отделения у аватара врача. Под `.sz-av`, потому что `.sz-dot` – ещё и квадратик статуса в списке записей (выше): общее правило делало его absolute и выталкивало список на 1 px за край экрана (telefon_t, 29.10.2026). */ .sz-av .sz-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); text-decoration: none; } .sz-doc.on .sz-av .sz-dot { box-shadow: 0 0 0 2px var(--teal-10); } .sz-dn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sz-doc b { font-size: calc(13.5px * var(--fz)); font-weight: var(--w-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sz-doc .sz-dn span { font-size: var(--fs-hint); font-weight: var(--w-text); line-height: 1.2; color: var(--muted); white-space: nowrap; } .sz-doc.off b { color: var(--muted); font-weight: var(--w-medium); } .sz-d2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .sz-dc { flex: none; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); text-align: center; font-style: normal; font-size: calc(11.5px * var(--fz)); font-weight: var(--w-medium); line-height: 1.45; } .sz-dc.no { background: var(--amber-soft); color: var(--amber); } /* Ширина списка врачей (замечание №15): ручка в промежутке между списком и календарём, «Сбросить» внизу списка. */ .sz-rs { flex: none; width: 12px; margin: 0 -12px; position: relative; z-index: 2; cursor: col-resize; touch-action: none; outline: none; } .sz-rs::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--navy-20); transition: background .12s; } .sz-rs:hover::after, .sz-rs:focus-visible::after, .sz.sz-rs-on .sz-rs::after { background: var(--teal); } .sz.sz-rs-on { user-select: none; cursor: col-resize; } .sz-rst { flex: none; border: 0; border-top: 1px solid var(--line-2); background: transparent; color: var(--teal-ink); padding: 7px 12px; text-align: left; cursor: pointer; font-size: var(--fs-hint); font-weight: var(--w-medium); } .sz-rst:hover { background: var(--teal-10); } .sz-rst[hidden] { display: none; } /* w2c: финансы админа и аналитика */ /* Вкладки одной строкой (`tabsRow`, js/vkladki.js; «Аналитика»): чипы над содержимым, оно – на всю ширину. Чип – обычный `.chip` (как в журнале «Пациенты»); число рядом – сколько тревог у вкладки. */ .vkr { min-width: 0; } /* Чипы сверху – всегда одной строкой (проверка c3, №7): на компьютере чипы плотные и подписи короткие («Пациенты», «Семья», «Врачи») – десять вкладок помещаются в 1366 и 1920; у́же – строка листается пальцем без ползунка. */ .vkr-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 4px; margin: 2px 0 10px; min-width: 0; } .vkr-chips::-webkit-scrollbar { display: none; } .vkr-c { flex: none; gap: 5px; cursor: pointer; white-space: nowrap; min-height: 34px; padding: 0 10px; margin: 0; font-size: calc(13px * var(--fz)); } .vkr-n { font-style: normal; font-size: calc(11px * var(--fz)); font-weight: var(--w-medium); line-height: 1; min-width: 16px; text-align: center; padding: 2px 5px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-variant-numeric: tabular-nums; } .vkr-n.bad { background: var(--rose-soft); color: var(--rose-ink); } .vkr-c.on .vkr-n { background: rgba(255, 255, 255, .22); color: var(--on-teal); } @media (max-width: 699px) { /* Телефон: чипы покрупнее под палец. */ .vkr-c { min-height: 40px; padding: 0 14px; font-size: calc(14px * var(--fz)); } } /* «Моя работа» администратора (js/admin-rabota.js, замечание 17): плитки, столбики и колонки – как «Аналитика» врача (.vs-t, .va-*). */ .ar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; min-width: 0; } .ar-t { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; } .ar-t h2 { margin: 0; } .ar-mot { padding: 12px 16px; background: var(--teal-soft); box-shadow: none; } .ar-mot b { font-weight: var(--w-medium); color: var(--ink); line-height: 1.4; } .ar-priv { padding: 0 4px; } .ar-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ar-who .chip { margin: 0; } .ar-lg { margin-left: 6px; opacity: .7; font-size: calc(12px * var(--fz)); } .ar-empty { padding: 18px 20px; } .ar-empty h3 { margin: 0 0 6px; } .ar-empty p { margin: 0 0 12px; max-width: 640px; line-height: 1.45; } .ar-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .ar-n b { display: block; font: var(--w-medium) calc(22px * var(--fz))/1.15 var(--head); letter-spacing: -.01em; } .ar-n span { color: var(--muted); font-size: var(--fs-hint); line-height: 1.3; } .ar-row { display: grid; grid-template-columns: minmax(88px, 124px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; font-size: calc(14px * var(--fz)); } .ar-row.best .ar-nm { font-weight: var(--w-medium); } .ar-v { text-align: right; white-space: nowrap; } .ar-pick .sp-row { min-height: 52px; } .va-lg i.pv { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--ink); opacity: .45; background: none; } /* «Касса» над «Моей работой» (проверка c3, №9): одна строка, под ней блок. */ .ar-kassa { margin-bottom: 12px; } .ar-more { align-self: flex-start; padding: 2px 4px; } /* Подпись меры в шапке «Мои последние месяцы» не наезжает на число над лучшим столбиком (проверка c3, №12). */ .ar .va-ch .dg-cols { margin-top: 16px; } @media (max-width: 1250px) { .ar-cols #ar-today { order: -1; } } @media (max-width: 699px) { /* Подписи 31 дня не помещаются: на телефоне – каждая пятая, сегодняшняя и лучшая – всегда. */ #ar-chart .dg-x span:not(.on):not(:nth-child(5n+1)) { visibility: hidden; } .ar-t h2 { font-size: calc(20px * var(--fz)); } .ar-row { grid-template-columns: minmax(78px, 104px) minmax(0, 1fr) auto; } } /* f2: картотека */ /* «долг 150 с.» в окне «Принять оплату» (js/kassa.js, список «Кто платит») – в одну строку (проверка c1, №22) */ .kk-debt { white-space: nowrap; } .kk-p > .small { flex: none; white-space: nowrap; } /* метки пациента (аллергия, VIP, тест) в «Найти…» (js/najti.js, №16) */ .nj-t .pac-mk { display: inline-block; vertical-align: middle; margin-left: 2px; } /* «Период» врача в шапке картотеки (30.10.2026, №38): после строки поиска, до «Фильтра». */ .pz-per { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; } .pz-per input[type="date"] { width: 138px; min-height: 0; height: var(--chip-h); margin: 0; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 0 8px; font: inherit; } .pz-per input[type="date"]:focus { outline: none; border-color: var(--teal); } /* На телефоне два поля даты делят строку поровну: без min-width:0 «дата» не сжимается меньше своего размера, и страница уезжает вбок (435 из 390). */ @media (max-width: 699px) { .pz-per { flex: 1 1 100%; margin: 0; min-width: 0; } .pz-per input[type="date"] { flex: 1 1 0; width: auto; min-width: 0; } } /* ======== Меню в полосе значков на экранах записи (30.10.2026, замечание №42; js/stoyka.js `stNavApply`) ======== Режимов «Стойка / Админ» нет: в полосе (класс `nav-min`) – то же единое меню, а не отдельные кнопки «Стойки». Подписи и названия групп скрыты (слова – подсказками), числа и точки – на значках, как в полосе на пол-экрана. */ @media (min-width: 981px) { .app.nav-min .nav .nav-t, .app.nav-min .nav .nav-grp { display: none; } .app.nav-min .nav .nav-grp + button, .app.nav-min .nav button + .nav-grp + button { margin-top: 8px; } .app.nav-min .nav button { position: relative; } .app.nav-min .nav .nav-n, .app.nav-min .nav .badge { position: absolute; top: 1px; right: 0; margin: 0; } .app.nav-min .nav .nav-n::after { min-width: 16px; height: 15px; padding: 0 4px; font-size: calc(11px * var(--fz)); border-radius: 8px; } .app.nav-min .nav .nav-warn { position: absolute; top: 5px; right: 8px; } } /* ======== Единый вид кнопок и полей (30.10.2026, замечание 44) ======== Причина: кнопка без класса `btn` и без правила от контейнера оставалась серой кнопкой браузера (так выглядели «Расходы 0 с.» и «Приход не от пациентов 0 с.»: их контейнер `.home-vw` остался без стилей, когда 22.10 убрали переключатель Главной). Правила ниже – запас: нулевая специфичность (`:where`), поэтому любое правило экрана (`.контейнер button`, `.btn`, `#id`) сильнее. Запас не заменяет класс: новой кнопке ставим `btn` (`ghost` / `soft` / `sm`), чип – `chip`, поле – общий стиль тега. Вид – как `.btn.ghost`. Из запаса исключены контейнеры, где кнопки без класса стилизует каскад (перечень – в docs/zhurnal/itogi/ 2026-10-30-golye-knopki.md; убрать контейнер из списка, когда кнопкам поставят класс). `class=""` под запас не попадает: так пишутся выключенные кнопки переключателей. Цвета – только переменные темы. */ :where(button:not([class]):not(:is(.flt-c, .warn-l, .tt-bar, .pz-stp, .pz-freq, .zp, .rg-quiet, .sz-qty, .sv-tabs, .zh-impl, #gate .pad) *)) { border: 0; border-radius: 12px; padding: 0 16px; height: var(--tap); background: var(--paper); color: var(--ink); font-weight: var(--w-strong); font-size: var(--tap-fs); box-shadow: inset 0 0 0 1px var(--navy-20); transition: background-color .15s, box-shadow .15s; } :where(button:not([class]):not(:is(.flt-c, .warn-l, .tt-bar, .pz-stp, .pz-freq, .zp, .rg-quiet, .sz-qty, .sv-tabs, .zh-impl, #gate .pad) *):hover) { background: var(--bg); } :where(button:not([class]):not(:is(.flt-c, .warn-l, .tt-bar, .pz-stp, .pz-freq, .zp, .rg-quiet, .sz-qty, .sv-tabs, .zh-impl, #gate .pad) *):focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; } :where(button:not([class]):not(:is(.flt-c, .warn-l, .tt-bar, .pz-stp, .pz-freq, .zp, .rg-quiet, .sz-qty, .sv-tabs, .zh-impl, #gate .pad) *):disabled) { opacity: .38; cursor: not-allowed; } /* Поля типов, которых нет в общем правиле полей (почта, адрес, поиск, дата и время): тот же вид, что у текстового поля. */ :where(input[type=email]:not([class]), input[type=url]:not([class]), input[type=search]:not([class]), input[type=datetime-local]:not([class]), input[type=week]:not([class])) { width: 100%; border: 0; border-radius: 12px; padding: var(--in-pad); font-size: var(--in-fs); background: var(--fill); } /* Переключатель «Расходы / Приход не от пациентов» (js/scheta.js, expViewBar): серая подложка, выбранное – белым, как `.zp`. */ .exp-view { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 3px; border-radius: 12px; background: var(--fill); } .exp-view button:not(.btn) { border: 0; border-radius: 10px; background: transparent; color: var(--muted); height: calc(var(--tap) - 8px); padding: 0 14px; white-space: nowrap; font-weight: var(--w-medium); font-size: var(--chip-fs); cursor: pointer; } .exp-view button:not(.btn):hover { color: var(--ink); } .exp-view button:not(.btn).on { background: var(--paper); color: var(--ink); font-weight: var(--w-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); } .exp-view button:not(.btn):focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } /* Экран пациента (№39, 30.10.2026): «Карточка / История» – в шапке справа от имени, на телефоне – под строкой данных; обёртка экрана `div.pac-s` – блок (строка пациента `span.pac-s` – своя). «Врачи» в «Коротко»: ФИО – многоточием, число – столбцом. */ .top-t:has(> .pac-seg) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; } .top-t:has(> .pac-seg) > h1 { flex: 0 1 auto; min-width: 0; } .top-t:has(> .pac-seg) > p { flex: 1 1 100%; min-width: 0; } .pac-s .fact.pi-vr span { flex: none; } .pac-s .fact.pi-vr b { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: end; gap: 2px 10px; text-align: left; overflow-wrap: normal; } .pac-s .fact.pi-vr i { font-style: normal; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pac-s .fact.pi-vr em { font-style: normal; font-weight: var(--w-text); color: var(--muted); text-align: right; } @media (max-width: 699px) { .top:has(.top-t > .pac-seg) .top-l { flex: 1 1 100%; } .top-t:has(> .pac-seg) > h1 { flex: 1 1 100%; } .top-t > .pac-seg { order: 1; margin-top: 8px; max-width: 100%; } } /* ======== Шапка экрана – одна бирюзовая карточка, не больше двух строк (30.10.2026; js/shapka.js) ======== Заказчик: «шапки не стандартизированы… кнопки стоят как будто рандомно… много места занимают, по 4–5 строк, кнопки большие – почти половина экрана». Макет «Шапки экранов МИС», вариант 1 «Две строки», фон – «бирюзовая карточка ярче» (`--teal-soft`). Строка 1 (`.top`) – где я и что найти: «Назад», раздел, заголовок, вкладки, пояснение; поиск, «Фильтр», действия. Строка 2 (`.hd-r2`) – отбор над таблицей: период, чипы, метки фильтра; справа итог, «развернуть все», значки таблицы, кнопки, которым тесно в первой. Кнопки первой строки – 36 px, второй – 32 px (размеры – через `--tap`, `--chip-h`: правила кнопок и чипов те же, что везде). Внутри карточки поля, чипы и кнопки – белые (`--fill` = `--paper`). Цвета – переменными: семь фонов и тёмная тема – сами. */ :root { --hd-bg: var(--teal-soft); --hd-line: color-mix(in srgb, var(--teal) 30%, var(--teal-soft)); --hd-dv: color-mix(in srgb, var(--teal) 42%, var(--teal-soft)); } #view .hd.shapka { --hd-h: calc(36px * var(--fb)); --hd-h2: calc(32px * var(--fb)); --fill: var(--paper); position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--hd-bg); box-shadow: inset 0 0 0 1px var(--hd-line); } #view .hd.shapka > .top { --tap: var(--hd-h); --chip-h: var(--hd-h); --tap-fs: calc(14.5px * var(--fz)); --chip-fs: calc(14.5px * var(--fz)); --chip-pad: 0 calc(14px * var(--fb)); --in-fs: max(16px, calc(14.5px * var(--fz))); display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; min-height: var(--hd-h); padding: 0; } #view .hd.shapka > .hd-r2 { --tap: var(--hd-h2); --chip-h: var(--hd-h2); --tap-fs: calc(14px * var(--fz)); --chip-fs: calc(13.5px * var(--fz)); --chip-pad: 0 calc(11px * var(--fb)); --in-fs: max(16px, calc(14px * var(--fz))); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: var(--hd-h2); min-width: 0; } #view .hd.shapka > .hd-r2[hidden] { display: none; } #view .hd.shapka .top-l { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; } #view .hd.shapka .tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; flex-wrap: nowrap; min-width: min-content; margin: 0; padding: 0; } #view .hd.shapka .hd-a { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; flex: 0 1 auto; } #view .hd.shapka .hd-b { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; min-width: 0; margin-left: auto; } /* Два уровня (`hd-two`, №59): вкладки пункта стоят у верхнего края строки 2, а не посередине её высоты – поле поиска рядом (выше вкладок) не сдвигает их. */ #view .hd.shapka.hd-two .hd-a { align-items: flex-start; } #view .hd.shapka .hd-t2, #view .hd.shapka .hd-f, #view .hd.shapka .hd-m, #view .hd.shapka .hd-e, #view .hd.shapka .hd-mr, #view .hd.shapka .hd-tt, #view .hd.shapka .hd-act { display: contents; } #view .hd.shapka.hd-wrap > .top { flex-wrap: wrap; row-gap: 8px; } #view .hd.shapka.hd-wrap > .top > .tools { flex-wrap: wrap; margin-left: auto; } /* Заголовок: 22 px одной строкой; назван кнопкой раздела или вкладкой – только для чтеца и печати (`.sr`). */ #view .hd.shapka .top-t { min-width: min-content; flex: 0 1 auto; display: flex; align-items: center; gap: 12px; } #view .hd.shapka .top h1 { margin: 0; font: var(--w-strong) 21px/1.15 var(--head); letter-spacing: -.01em; white-space: nowrap; } #view .hd.shapka.hd-tw .top h1 { white-space: normal; text-wrap: balance; } #view .hd.shapka .top h1.sr { position: absolute; } #view .hd.shapka .hd-dv { width: 1px; height: 22px; background: var(--hd-dv); flex: none; } /* «Назад» – 36 px, со стрелкой (не меньше: 08.10.2026 «кнопка назад маленькая»). */ #view .hd.shapka .nav-back { height: var(--hd-h); min-height: 0; padding: 0 13px 0 8px; gap: 3px; border-radius: 10px; font-size: calc(14.5px * var(--fz)); box-shadow: none; border-color: var(--navy-20); } #view .hd.shapka .vk-to-list { display: none; } /* Пояснение – строкой рядом; тесно – значком ⓘ (подсказка; нажатие – плашкой под шапкой). */ #view .hd.shapka .hd-sub { color: var(--muted); font-size: var(--fs-hint); line-height: 1.3; white-space: nowrap; flex: 0 0 auto; width: auto; min-width: 0; overflow: visible; text-overflow: clip; } #view .hd.shapka .hd-i { display: none; width: 28px; height: 28px; padding: 0; margin-left: -6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); align-items: center; justify-content: center; cursor: pointer; flex: none; } #view .hd.shapka .hd-i svg { width: 18px; height: 18px; } #view .hd.shapka .hd-i:hover { color: var(--ink); background: color-mix(in srgb, var(--paper) 55%, transparent); } #view .hd.shapka.hd-sub-i .hd-i { display: inline-flex; } #view .hd.shapka.hd-sub-i .hd-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #view .hd.shapka.hd-sub-i.hd-sub-open .hd-sub { position: absolute; left: 12px; top: calc(100% + 4px); z-index: 40; width: auto; height: auto; max-width: min(560px, calc(100% - 24px)); clip: auto; overflow: visible; white-space: normal; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lift); } /* Поиск – белое поле с лупой, высотой с кнопку; сжимается до 140 px, когда тесно. */ #view .hd.shapka .tools input.search, #view .hd.shapka .tools input.flt-find, #view .hd.shapka .tools input[type=search], #view .hd.shapka .tools input[type=text]:not(.d8) { height: var(--tap); margin: 0; padding: 0 12px 0 36px; border-radius: 10px; flex: 0 1 220px; width: auto; min-width: 140px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7a88' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 11px center / 17px 17px; box-shadow: inset 0 0 0 1px var(--line); } #view .hd.shapka .tools input.search:focus, #view .hd.shapka .tools input.flt-find:focus { box-shadow: inset 0 0 0 1.5px var(--teal); } /* Свои поля поиска экранов (журнал «Пациенты», справочники, отчёты) – той же ширины: сжимаются до 140 px. */ #view .hd.shapka .tools > input { flex: 0 1 240px !important; width: 0 !important; min-width: 176px !important; max-width: 340px; } #view .hd.shapka input[type=date], #view .hd.shapka input[type=month], #view .hd.shapka select { height: var(--tap); padding: 0 10px; margin: 0; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; } #view .hd.shapka input[type=date].d8 { min-width: 140px; } /* Кнопки шапки: высота строки, белые с рамкой (главная – бирюзовая, одна). */ #view .hd.shapka .btn { border-radius: 10px; padding: 0 14px; white-space: nowrap; } #view .hd.shapka .hd-r2 .btn { padding: 0 12px; border-radius: 9px; } #view .hd.shapka .btn.sm { height: var(--tap); } #view .hd.shapka .linkish { min-height: var(--tap); white-space: nowrap; } /* Переключатель раздела – белый, кнопки 30 px; числа сводки – на кнопках. */ #view .hd.shapka .rz-bar { display: flex; margin: 0; flex: none; gap: 0; } #view .hd.shapka .rz-tabs { gap: 2px; padding: 3px; border-radius: 11px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); } #view .hd.shapka .rz-tabs button { height: calc(var(--hd-h) - 6px); padding: 0 13px; border-radius: 8px; gap: 6px; font-size: calc(14px * var(--fz)); } #view .hd.shapka .rz-tabs .rz-c, #view .hd.shapka .rz-tabs .rz-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; font: var(--w-medium) calc(11.5px * var(--fz))/18px var(--font); font-style: normal; text-align: center; } #view .hd.shapka .rz-tabs .rz-n { background: var(--navy-10); color: var(--ink); } #view .hd.shapka .rz-tabs .rz-n.warn, #view .hd.shapka .rz-tabs .rz-c { background: var(--orange); color: var(--ink); } #view .hd.shapka .rz-tabs .rz-n.bad { background: var(--rose); color: #fff; } #view .hd.shapka .rz-tabs button.on .rz-n:not(.warn):not(.bad) { background: color-mix(in srgb, #fff 22%, transparent); color: #fff; } #view .hd.shapka .rz-tabs .rz-d { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; } #view .hd.shapka .rz-tabs .rz-d.ok { background: var(--ok); } #view .hd.shapka .rz-tabs .rz-d.warn { background: var(--orange); } #view .hd.shapka .rz-tabs .rz-d.bad { background: var(--rose); } /* Вкладки пункта – линией с подчёркиванием, в строку (без серой черты снизу). */ #view .hd.shapka .sk-tabs { margin: 0; flex-wrap: nowrap; gap: 0 20px; box-shadow: none; min-width: 0; flex: none; } #view .hd.shapka .sk-tabs .chip { height: var(--tap); min-height: 0; margin: 0; padding: 0 1px; font-size: calc(14.5px * var(--fz)); white-space: nowrap; flex: none; } #view .hd.shapka .sk-tabs .chip.on { box-shadow: inset 0 -2px 0 var(--teal-ink); } #view .hd.shapka .hd-r2 .sk-tabs .chip { font-size: calc(14px * var(--fz)); } #view .hd.shapka .vkr-chips { margin: 0; flex-wrap: wrap; overflow: visible; } /* Чипы и строки отбора во второй строке: без своих отступов, белые; выбранный – бирюзой, нулевой – бледно. */ #view .hd.shapka .chip { margin: 0; white-space: nowrap; } #view .hd.shapka .chip:not(.on) { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); } #view .hd.shapka .chip.zero:not(.on), #view .hd.shapka .chip.z:not(.on) { background: transparent; color: var(--muted); } #view .hd.shapka .chip.on { box-shadow: none; } #view .hd.shapka .sk-tabs .chip:not(.on), #view .hd.shapka .sk-tabs .chip.on { background: transparent; } #view .hd.shapka .sk-tabs .chip:not(.on) { box-shadow: none; } #view .hd.shapka .hd-r2 .row, #view .hd.shapka .hd-r2 .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 !important; min-width: 0; } #view .hd.shapka .kk-per, #view .hd.shapka .per-q { margin: 0 !important; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; } #view .hd.shapka .per-b { min-height: var(--tap); border-radius: 10px; border-color: var(--hd-line); } #view .hd.shapka .per-b .per-s { font-size: calc(16px * var(--fz)); padding: 0 10px; } #view .hd.shapka .tag { margin: 0; } #view .hd.shapka .hd-r2 .muted.small, #view .hd.shapka .hd-r2 .note { white-space: nowrap; } /* Значки таблицы в шапке: «Колонки · Excel · Печать» – значками 32 px с подсказкой (js/kolonki.js). */ #view .hd.shapka .tt-bar.tt-hd { margin: 0; padding: 0; border: 0; background: transparent; display: inline-flex; gap: 4px; align-items: center; } #view .hd.shapka .tt-bar.tt-hd button { height: var(--tap); min-width: var(--tap); padding: 0 8px; border-radius: 9px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink); font-size: calc(13px * var(--fz)); cursor: pointer; } #view .hd.shapka .tt-bar.tt-hd button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #view .hd.shapka .tt-bar.tt-hd button .tx { display: none; } #view .hd.shapka .tt-bar.tt-hd button .cnt { font-size: var(--fs-hint); color: var(--muted); } #view .hd.shapka .tt-bar.tt-hd .tt-q { height: var(--tap); width: 200px; margin: 0; padding: 0 10px; border-radius: 9px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); font-size: var(--in-fs); } #view .hd.shapka .tt-bar.tt-hd button:hover { background: var(--bg); } /* Список вкладок слева (5 и больше): шапка – над ним и содержимым. */ #view .hd.shapka + .vk, #view .hd.shapka ~ .vk { margin-top: 0; } /* Тёмная тема: карточка – ночной бирюзой, белые элементы – цветом бумаги темы. */ :root[data-theme="dark"] { --hd-bg: #12403d; --hd-line: #1d5a55; --hd-dv: #2a6b66; } /* Телефон: переносом; переключатель раздела – во всю ширину; поиск – растягивается. */ @media (max-width: 699px) { #view .hd.shapka { padding: 8px 10px; gap: 8px; border-radius: 12px; } #view .hd.shapka > .top { flex-wrap: wrap; row-gap: 8px; } #view .hd.shapka .top-l { flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; } #view .hd.shapka .tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; } #view .hd.shapka .tools input.search, #view .hd.shapka .tools input.flt-find, #view .hd.shapka .tools input[type=search], #view .hd.shapka .tools input[type=text]:not(.d8) { flex: 1 1 160px; width: auto; } #view .hd.shapka .rz-bar { flex: 1 1 100%; } #view .hd.shapka .rz-tabs { width: 100%; } #view .hd.shapka .rz-tabs button { height: 40px; } #view .hd.shapka .sk-tabs { flex: 0 1 100%; flex-wrap: wrap; max-width: 100%; row-gap: 2px; } #view .hd.shapka .sk-tabs .chip { flex: 0 1 auto; } #view .hd.shapka .hd-dv { display: none; } #view .hd.shapka .top h1 { font-size: 20px; white-space: normal; } #view .hd.shapka .hd-sub { white-space: normal; flex: 1 1 100%; } #view .hd.shapka .hd-b { margin-left: 0; justify-content: flex-start; } #view:has(.vk:not(.vk-spisok)) .hd .vk-to-list { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* «Обновить» значком и число на чипе: пробел между названием и числом (30.10.2026) */ #view .hd.shapka .btn.hd-ic { width: var(--tap); min-width: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; } #view .hd.shapka .btn.hd-ic svg { width: 18px; height: 18px; } #view .hd.shapka .chip .notr { margin-left: 5px; font-variant-numeric: tabular-nums; } /* Вторая строка: теснее, чтобы значки таблицы, чипы и кнопки действий помещались в одну строку (30.10.2026) */ #view .hd.shapka .tt-bar.tt-hd { gap: 3px; } #view .hd.shapka .tt-bar.tt-hd button { min-width: 30px; padding: 0 6px; } #view .hd.shapka .hd-b { gap: 6px 8px; } #view .hd.shapka .hd-r2 .btn { padding: 0 10px; } #view .hd.shapka .btn.hd-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #view .hd.shapka input[type=date].d8 { min-width: 0; width: 148px; padding: 0 8px; font-size: calc(13.5px * var(--fz)); } #view .hd.shapka .zp-tbar { margin: 0; gap: 8px; flex-wrap: wrap; } #view .hd.shapka .zp-find { flex: 0 1 220px; min-width: 140px; margin-left: 0; } #view .hd.shapka .top-t:has(> h1.sr) { min-width: 0; } .chip .notr { margin-left: 5px; font-variant-numeric: tabular-nums; } /* Карточка человека: имя и переключатель «Карточка · История» – одной строкой шапки */ #view .hd.shapka .top-t:has(> .pac-seg) { flex-wrap: nowrap; column-gap: 12px; } #view .hd.shapka .top-t .pac-seg { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); padding: 3px; border-radius: 11px; } #view .hd.shapka .top-t .pac-seg button { height: calc(var(--hd-h) - 6px); padding: 0 13px; border-radius: 8px; } #view .hd.shapka .top-t .pac-seg button.on { background: var(--navy); color: #fff; box-shadow: none; } /* «Назад» в шапке – значок, всегда на месте; нет пути – бледный (31.10.2026, js/shapka.js `hdBack`). */ #view .hd.shapka .nav-back.hd-back { width: var(--hd-h); padding: 0; gap: 0; justify-content: center; flex: none; } #view .hd.shapka .nav-back.hd-back svg { width: 20px; height: 20px; } #view .hd.shapka .nav-back.hd-back.off { opacity: .38; cursor: default; background: transparent; border-color: var(--navy-20); pointer-events: none; } #view .hd .top-t:has(> .pac-seg) { flex-wrap: nowrap; column-gap: 12px; } #view .hd .top-t .pac-seg { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hd-line); padding: 3px; border-radius: 11px; } #view .hd .top-t .pac-seg button { height: calc(var(--hd-h) - 6px); padding: 0 13px; border-radius: 8px; } #view .hd .top-t .pac-seg button.on { background: var(--navy); color: #fff; box-shadow: none; } /* ======== Вход по паролю, второй шаг, смена пароля (31.10.2026) ======== Заказчик: «убрать «Войдите под собой…», сделать вход красивым и привлекательным; почему всё, даже лого, влево, а не в центре» (16.10 форма стояла «по центру окна», но логотип и текст в ней – слева). Карточка по центру экрана, над формой – логотип с анимацией, в фоне – тот же знак «Ормин», огромный и бледный (`.vhod-fon`, раскрывается вместе с логотипом; заказчик выбрал его из трёх вариантов фона). Поля – со значками внутри, у пароля «глаз», язык – под карточкой. Разметка – `vhodEkran` (js/auth.js). Блок стоит в конце файла: поля переопределяют общий вид `input[type=password]` той же силы. Сетка `#gate` в две колонки – для «Кто за этим столом». */ #gate:has(> .vh-stack) { grid-template-columns: 1fr; place-items: center; overflow: auto; padding: 32px 16px; box-sizing: border-box; } #gate .vhod-fon { position: fixed; left: 50%; top: 50%; width: min(124vmin, 1040px); transform: translate(-50%, -53%); opacity: .17; z-index: -1; pointer-events: none; } :root[data-theme="dark"] #gate .vhod-fon { opacity: .10; } .vh-stack { width: 100%; max-width: 404px; display: flex; flex-direction: column; align-items: center; } #gate .gate-wrap { --vh-pole: color-mix(in srgb, var(--fill) 62%, var(--paper)); width: 100%; box-sizing: border-box; padding: 40px 40px 30px; border-radius: 24px; text-align: center; background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: var(--shadow), var(--shadow-lift); } .gate-wrap .vhod-forma { display: block; width: 116px; margin: 0 auto 28px; cursor: pointer; } .gate-wrap .vhod-svoy { display: block; max-width: 120px; max-height: 72px; margin: 0 auto 14px; } .gate-wrap h2 { margin: 0 0 22px; font-weight: var(--w-medium); font-size: calc(22px * var(--fz)); line-height: 1.2; letter-spacing: -.01em; } .gate-wrap .vh-t { margin: -6px 0 20px; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.45; } .vh-in { position: relative; margin-bottom: 12px; } .vh-in input { height: 50px; border-radius: 14px; padding: 0 46px; font-size: var(--in-fs); background: var(--vh-pole); transition: background-color .15s; } .vh-in input:focus { background: var(--paper); } .vh-in .vh-ic { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--muted-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .15s; } .vh-in input:focus + .vh-ic, .vh-in input:not(:placeholder-shown) + .vh-ic { stroke: var(--teal-ink); } .vh-in input.bad + .vh-ic { stroke: var(--rose); } .vh-in .vh-glaz { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; cursor: pointer; } .vh-in .vh-glaz svg { width: 19px; height: 19px; fill: none; stroke: var(--muted-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vh-in .vh-glaz:hover { background: var(--fill); } .vh-in .vh-glaz[aria-pressed="true"] svg { stroke: var(--teal-ink); } /* Сохранённый логин и пароль Chrome заливает голубым – поле остаётся своего цвета. */ .vh-in input:-webkit-autofill, .vh-in input:-webkit-autofill:hover { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: inset 0 0 0 60px var(--vh-pole); transition: background-color 600000s 0s; } .vh-in input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 60px var(--paper); } .vh-in input.bad:-webkit-autofill { box-shadow: inset 0 0 0 2px var(--rose), inset 0 0 0 60px var(--vh-pole) !important; } .gate-wrap > .btn.teal { width: 100%; height: 50px; margin-top: 6px; border-radius: 14px; } .vh-zabyl { margin-top: 16px; } .vh-zabyl p { margin: 4px 0 0; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.4; } .gate-wrap .vh-kod { height: 60px; border-radius: 14px; text-align: center; font-size: calc(26px * var(--fz)); font-weight: var(--w-medium); letter-spacing: .42em; padding: 0 0 0 .42em; background: var(--vh-pole); } .gate-wrap .vh-kod:focus { background: var(--paper); } .vh-dover { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 8px; color: var(--muted); font-size: calc(13px * var(--fz)); cursor: pointer; } .vh-dover input { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); } .vh-niz { margin: 14px 0 0; color: var(--muted-3); font-size: calc(13px * var(--fz)); } .vh-niz .linkish:disabled { color: var(--muted-3); cursor: default; } .til-pick.vh-til { margin-top: 22px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 55%, transparent); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media (max-width: 480px) { #gate:has(> .vh-stack) { padding: 20px 14px; } #gate .gate-wrap { padding: 32px 22px 24px; border-radius: 22px; } .gate-wrap .vhod-forma { width: 104px; margin-bottom: 24px; } #gate .vhod-fon { width: 205vw; transform: translate(-50%, -50%); } } /* Телефон: выбор шаблона и прочие поля в строке кнопок шапки не шире экрана (31.10.2026). */ @media (max-width: 699px) { #view .hd.shapka .tools { min-width: 0; max-width: 100%; flex-wrap: wrap; } #view .hd.shapka .tools > select, #view .hd.shapka .tools > input { min-width: 0 !important; max-width: 100%; } } /* «Результаты анализов» (31.10.2026, №51; js/lab-rezultaty.js): журнал «Пациенты» (.pz) с другими колонками – Пациент · Анализы · Взято · Статус · Готово / ожидается · действие. Вид, зебра, чипы и «Колонки · Excel · Печать» – общие со словарём `.pz-*`; здесь – только то, чего у него нет: ширины своих колонок, слова статуса и свой телефонный вид. */ /* Поиск – общий вид шапки (`#view .hd.shapka .tools input.search`); здесь только ширина: подсказка «ФИО, телефон, № карты, № пробирки» целиком. */ #view .hd.shapka .tools > input#lr-q { flex: 0 1 340px !important; min-width: 282px !important; max-width: 340px; } .lr .pz-t .lr-c-pat { width: 21%; } .lr .pz-t .lr-c-tests { width: 19%; } .lr .pz-t .lr-c-taken { width: 14%; } .lr .pz-t .lr-c-st { width: 18%; } .lr .pz-t .lr-c-ready { width: 16%; } .lr .pz-t .lr-c-act { width: 12%; } .lr .pz-t td.lr-c-act, .lr .pz-t th.lr-c-act { padding-left: 6px; } .lr .pz-t td.lr-c-act { vertical-align: middle; text-align: right; padding-right: 14px; } .lr .pz-t td.lr-c-tests .l1 { font-size: calc(14px * var(--fz)); } .lr .pz-t td.lr-c-pat .l2 { font-size: calc(13px * var(--fz)); } .lr-st { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; font-weight: var(--w-medium); } .lr-st.go { color: var(--teal-ink); } .lr-st.ok { color: var(--ok-ink); } .lr-st.wait { color: var(--amber-ink); } .lr-st.off { color: var(--muted-3); font-weight: var(--w-text); } .lr .pz-t .lr-late { color: var(--amber-ink); } .lr-btn { height: 34px; min-height: 34px; padding: 0 14px; white-space: nowrap; } /* планшет (журнал уже 900 px): «Взято» уходит стилем – данные целы (Колонки, Excel, Печать) */ @container pz (max-width: 899px) { .lr .lr-c-taken { display: none; } } /* телефон (журнал уже 700 px): строка – карточка; имя и «Печать», анализы, статус и срок, взято */ @container pz (max-width: 699px) { .lr .pz-t tr.pz-r.lr-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pat act" "tests tests" "st ready" "taken taken"; row-gap: 4px; } .lr .pz-t tr.lr-r > td { width: auto; padding: 0; } .lr .pz-t td.lr-c-pat { grid-area: pat; } .lr .pz-t td.lr-c-act { grid-area: act; text-align: right; } .lr .pz-t td.lr-c-tests { grid-area: tests; margin-top: 4px; } .lr .pz-t td.lr-c-tests .l2 { display: none; } .lr .pz-t td.lr-c-st { grid-area: st; margin-top: 4px; } .lr .pz-t td.lr-c-ready { grid-area: ready; margin-top: 4px; text-align: right; } .lr .pz-t td.lr-c-taken { grid-area: taken; display: block; color: var(--muted); font-size: var(--fs-hint); } .lr .pz-t td.lr-c-taken .l1 { font-size: var(--fs-hint); } } @media (max-width: 699px) { #view .hd.shapka .tools > input#lr-q { flex: 1 1 160px !important; min-width: 0 !important; max-width: 100%; } /* период – в одну строку по ширине экрана; отборы – в две строки, а не обрезанные */ .pz-per.lr-per { flex-wrap: nowrap; min-width: 0; } .pz-per.lr-per input[type="date"] { flex: 1 1 0; width: 0; min-width: 0; padding: 0 6px; } } @container pz (max-width: 699px) { .lr .pz-chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }