/* МЕДСИ — дизайн-токены по брендбуку 25.08.2025. Шрифт Manrope (self-hosted), лазурный — акцент,
   васильковый — второй акцент, фон «скорлупа». Заголовки — тёмно-зелёный, текст — уголь. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/brand/fonts/manrope-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/brand/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/brand/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/brand/fonts/manrope-latin.woff2) format("woff2");
  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 {
  --lazur: #0FC7CE;          /* лазурный — основной цвет бренда, акцент, логотип */
  --lazur-mid: #37A3B6;      /* средне-зелёный — элементы */
  --lazur-dark: #1B5A61;     /* тёмно-зелёный — заголовки, текст на светлом */
  --lazur-light: #DBF5FF;    /* светло-голубой — фон */
  --lazur-tint: #C7F0F5;     /* градиентный оттенок */
  --vasilek: #92A8F1;        /* васильковый — второй основной */
  --vasilek-mid: #6483EB;    /* средне-васильковый — элементы, текст */
  --vasilek-dark: #001045;   /* тёмно-васильковый — текст */
  --vasilek-light: #E2E8FD;  /* светло-васильковый — фон */
  --vasilek-tint: #DAE1FB;
  --shell: #F7F8FC;          /* скорлупа — основной фон (digital) */
  --coal: #393939;           /* уголь — основной текст */
  --white: #FFFFFF;
  /* Служебные цвета. --muted — второстепенный текст 12–16px: ≥ 4,5:1 (AA) на белом (4,9) и на «скорлупе» (4,7).
     --bad-dark — красный фон под белым текстом (кнопка «удалить», полоса «нет связи», тост): 4,9:1; --bad оставлен
     для индикаторов без текста. Белый на лазурном/васильковом не читается (2,1:1 / 2,3:1) — текст на них тёмный. */
  --ok: #0FC7CE; --warn: #F5B640; --bad: #F0616D; --bad-dark: #C8404C; --muted: #667089; --line: #E6E9F2;
  --font: "Manrope", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --radius: 20px; --radius-sm: 12px;
  --shadow: 0 8px 30px rgba(27, 90, 97, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--shell); color: var(--coal); font-family: var(--font);
  font-size: 16px; line-height: 1.35; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--lazur-dark); font-weight: 700; margin: 0 0 .5em; letter-spacing: -.01em; }
a { color: var(--vasilek-mid); }
.logo { color: var(--lazur); display: inline-block; line-height: 0; }
.logo svg, .logo img { height: 100%; width: auto; display: block; }
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--vasilek-dark); background: var(--lazur); border-radius: 999px;
  padding: 14px 26px; font-size: 18px; transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--vasilek); } .btn.ghost { background: var(--lazur-light); color: var(--lazur-dark); }
.btn.danger { background: var(--bad-dark); color: var(--white); } .btn.big { font-size: 24px; padding: 22px 34px; }
.btn[disabled] { opacity: .45; cursor: default; }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--lazur-light); color: var(--lazur-dark); }
.pill.calling { background: var(--lazur); color: var(--vasilek-dark); } .pill.busy { background: var(--vasilek); color: var(--vasilek-dark); }
.pill.free { background: var(--lazur-light); color: var(--lazur-dark); } .pill.break { background: #FFF1D6; color: #8A5A00; }
.pill.closed { background: #FDE3E5; color: #8E1C26; }
.muted { color: var(--muted); }
.ticket { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .02em; color: var(--lazur-dark); }
input, select, textarea { font: inherit; color: var(--coal); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lazur); border-color: transparent; }
.q-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; background: var(--lazur-dark);
  color: #fff; padding: 14px 22px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); transition: all .3s; z-index: 1000; max-width: 90vw; }
.q-toast.show { opacity: 1; transform: translate(-50%, 0); } .q-toast.bad { background: var(--bad-dark); }

/* ---- Общие компоненты экранов (хаб, табло, ТВ) ------------------------------------------------------
   Логотип — через CSS-маску, чтобы SVG с fill=currentColor красился цветом бренда (в <img> currentColor
   стал бы чёрным). Высота задаётся переменной --logo-h, ширина считается из viewBox (824×138, 582×331). */
.q-logo, .q-sign { display: inline-block; vertical-align: middle; background-color: currentColor; color: var(--lazur);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.q-logo { height: var(--logo-h, 32px); width: calc(var(--logo-h, 32px) * 5.971); -webkit-mask-image: url(/brand/logo.svg); mask-image: url(/brand/logo.svg); }
.q-sign { height: var(--logo-h, 32px); width: calc(var(--logo-h, 32px) * 1.758); -webkit-mask-image: url(/brand/sign.svg); mask-image: url(/brand/sign.svg); }
.q-header { display: flex; align-items: center; gap: 20px; padding: 14px 24px; min-height: 64px; }
.q-header .q-title { flex: 1; min-width: 0; }
.q-header .q-title h1 { margin: 0; font-size: 22px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-header .q-title .sub { color: var(--muted); font-size: 14px; }
.q-header a.logo, .q-header .logo { line-height: 0; text-decoration: none; }
.q-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lazur-dark); font-size: 28px; white-space: nowrap; }
/* Киоск: экран без прокрутки, колонка на всю высоту, без выделения текста пальцем. */
body.kiosk { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* Технический статус при потере связи (NFR) — красная полоса первой в потоке: сдвигает шапку, а не накрывает её. */
.q-offline { flex: none; position: relative; z-index: 60; background: var(--bad-dark); color: #fff; text-align: center; font-weight: 700;
  padding: 10px 16px; font-size: clamp(14px, 1.8vw, 22px); box-shadow: 0 4px 16px rgba(240, 97, 109, .35); }
.q-offline[hidden] { display: none; }
a.btn { text-decoration: none; }
/* Угловой индикатор LED/звука (как в старом демо). */
.q-corner { position: fixed; right: 12px; bottom: 8px; font-size: 12px; color: var(--muted); opacity: .85; z-index: 40; pointer-events: none; }
.q-corner.off { color: #B97A00; }
/* Точка «пациент у кабинета». */
.q-dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--lazur); vertical-align: middle; flex: none; }
/* Адаптивная сетка карточек. */
.q-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* Крупные состояния кабинета (табло, ТВ): та же семантика цветов, что у .pill, но размер под экран.
   Текст на лазурной/васильковой плашке — тёмный (≈ 8:1), белый на них не читается. */
.q-state { display: inline-block; padding: .28em 1em; border-radius: 999px; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  background: var(--lazur-light); color: var(--lazur-dark); white-space: nowrap; }
.q-state.calling { background: var(--lazur); color: var(--vasilek-dark); animation: q-blink 1.2s ease-in-out infinite; }
.q-state.busy { background: var(--vasilek); color: var(--vasilek-dark); }
.q-state.break { background: #FFF1D6; color: #8A5A00; }
.q-state.closed { background: #FDE3E5; color: #8E1C26; }
@keyframes q-blink { 50% { opacity: .3; } }
@keyframes q-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes q-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q-pulse { animation: q-pulse .6s ease-in-out 5; }
.q-fade-in { animation: q-fade-in .4s ease-out; }
/* Простая клавиатурная и сенсорная доступность ссылок-карточек. */
.card.link { display: block; color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.card.link:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(27, 90, 97, .16); }
/* Узкий экран: заголовок шапки переносится, а не обрезается; логотип и часы — в первой строке. */
@media (max-width: 600px) {
  .q-header { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .q-header .q-title { order: 3; flex-basis: 100%; }
  .q-header .q-title h1 { white-space: normal; }
  .q-header .q-clock { margin-left: auto; }
  .q-corner { position: static; display: block; text-align: right; padding: 8px 12px; }
}