/* Интерфейс портала. Витрина намеренно обходится этим одним файлом без
   веб-шрифтов и без JS-фреймворка: ТЗ п. 15.2 требует загрузку не более 2 с. */

:root {
  --синий: #1b4f8a;
  --синий-тёмный: #143c69;
  --акцент: #c8102e;
  --текст: #1a1d21;
  --серый: #5b636d;
  --линия: #d7dce2;
  --фон: #f4f6f8;
  --бел: #fff;
  --радиус: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--текст);
  background: var(--фон);
}

a { color: var(--синий); }

.шапка {
  background: var(--синий);
  color: #fff;
  padding: 14px 0;
}
.шапка a { color: #fff; text-decoration: none; }
.полоса { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.шапка .полоса { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.лого { font-weight: 700; font-size: 1.05rem; }
.меню { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.меню a { padding: 6px 10px; border-radius: var(--радиус); }
.меню a:hover, .меню a.текущий { background: rgba(255, 255, 255, .16); }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.6rem; margin: 0 0 6px; }
h2 { font-size: 1.2rem; margin: 26px 0 10px; }
.подзаголовок { color: var(--серый); margin: 0 0 22px; }

.карточка {
  background: var(--бел);
  border: 1px solid var(--линия);
  border-radius: var(--радиус);
  padding: 16px;
  margin-bottom: 16px;
}

label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: .93rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--линия);
  border-radius: var(--радиус); font: inherit; background: #fff; min-height: 40px;
}
textarea { min-height: 90px; resize: vertical; }
small.пояснение { display: block; color: var(--серый); font-weight: 400; font-size: .82rem; margin-top: 3px; }

.кнопка, button.кнопка, a.кнопка {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--радиус);
  background: var(--синий); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.кнопка:hover { background: var(--синий-тёмный); }
.кнопка.второстепенная { background: #fff; color: var(--синий); border: 1px solid var(--синий); }
.кнопка.опасная { background: var(--акцент); }
.кнопка[disabled], .кнопка.выключена { background: #b9c0c8; cursor: not-allowed; }
.ряд-кнопок { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

table.данные { width: 100%; border-collapse: collapse; background: #fff; font-size: .92rem; }
table.данные th, table.данные td { border: 1px solid var(--линия); padding: 8px 10px; text-align: left; vertical-align: top; }
table.данные th { background: #eef2f6; font-weight: 600; white-space: nowrap; }
table.данные th a { color: var(--текст); text-decoration: none; }
.прокрутка { overflow-x: auto; }

.метка { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.метка.серая { background: #e6eaef; color: #4a525c; }
.метка.синяя { background: #dbe9f8; color: #14406f; }
.метка.зелёная { background: #dcf3e3; color: #1b6b38; }
.метка.красная { background: #fbe0e4; color: #96122a; }
.метка.жёлтая { background: #fdf1d6; color: #8a6100; }

.сообщение { padding: 12px 14px; border-radius: var(--радиус); margin-bottom: 16px; border: 1px solid; }
.сообщение.ошибка { background: #fdecef; border-color: #f2b8c1; color: #8d1226; }
.сообщение.удача { background: #e8f6ec; border-color: #a9dcb9; color: #17603a; }
.сообщение.внимание { background: #fff7e3; border-color: #f0d79a; color: #7a5600; }

/* ── Витрина ─────────────────────────────────────────────────────────────── */
.поиск { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.поиск label { margin-top: 0; }
.поиск .кнопки { grid-column: 1 / -1; display: flex; gap: 10px; }

.программы { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.программа {
  background: #fff; border: 1px solid var(--линия); border-radius: var(--радиус);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.программа h3 { margin: 0; font-size: 1.03rem; line-height: 1.35; }
.программа h3 a { text-decoration: none; }
.программа h3 a:hover { text-decoration: underline; }
.программа dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: .87rem; }
.программа dt { color: var(--серый); }
.программа dd { margin: 0; }

.пагинация { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 26px 0 0; }
.пагинация a, .пагинация span {
  min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--линия);
  border-radius: var(--радиус); background: #fff; text-decoration: none;
}
.пагинация .текущая { background: var(--синий); border-color: var(--синий); color: #fff; font-weight: 700; }
.пагинация .счётчик { border: 0; background: none; color: var(--серый); }
.пагинация .кратко { display: none; }

@media (max-width: 1199px) {
  .программы { grid-template-columns: repeat(2, 1fr); }
  .поиск { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  main { padding: 14px 12px 48px; }
  h1 { font-size: 1.3rem; }
  .программы { grid-template-columns: 1fr; }
  .поиск { grid-template-columns: 1fr; }
  .поиск .кнопки .кнопка { flex: 1; }
  .пагинация .номер { display: none; }
  .пагинация .кратко { display: inline-flex; }
  .меню { width: 100%; margin-left: 0; }
}

/* ── Редактор ────────────────────────────────────────────────────────────── */
.редактор { position: relative; border: 1px solid var(--линия); border-radius: var(--радиус); background: #fff; }
.редактор-панель {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px; border-bottom: 1px solid var(--линия); background: #f7f9fb;
}
.редактор-панель-таблицы { background: #eef4fb; border-bottom: 1px solid #cfdff0; }
.редактор-кнопка {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 5px 9px; font: inherit; font-size: .88rem; cursor: pointer; min-height: 32px;
}
.редактор-кнопка:hover { background: #e2eaf3; border-color: #c3d3e4; }
.редактор-кнопка.нажата { background: var(--синий); color: #fff; border-color: var(--синий); }
.редактор-разделитель { width: 1px; align-self: stretch; background: var(--линия); margin: 0 4px; }
.редактор-меню { position: relative; }
.редактор-выпадающее {
  position: absolute; z-index: 30; top: 100%; left: 0; min-width: 130px;
  background: #fff; border: 1px solid var(--линия); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 4px;
}
.редактор-выпадающее button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 10px; font: inherit; cursor: pointer; border-radius: 4px;
}
.редактор-выпадающее button:hover { background: #eef4fb; }

/* Поле ввода — это тот же лист документа, только без полей страницы.
   Ширина 165 мм задаётся из JS, шрифт и таблицы приходят из документ.css. */
.редактор-поле {
  padding: 6mm;
  outline: none;
  overflow: auto;
  font-family: 'Документ', 'Liberation Serif', 'Times New Roman', serif;
  font-size: 14pt;
  line-height: 1.5;
  max-width: 100%;
}
.редактор-поле p { margin: 0 0 3mm; text-align: justify; text-indent: 12.5mm; }
/* max-width повторяет правило документ.css: то, что не помещается в полосу
   набора при печати, не должно помещаться и в редакторе. */
.редактор-поле table.док { border-collapse: collapse; table-layout: fixed; font-size: 12pt; line-height: 1.25; margin: 0 0 4mm; max-width: 164.5mm; }
.редактор-поле table.док th, .редактор-поле table.док td { border: .25mm solid #000; padding: 1mm 1.5mm; vertical-align: top; overflow-wrap: break-word; }
.редактор-поле table.док th { font-weight: 700; text-align: center; vertical-align: middle; }
.редактор-поле table.док p { text-indent: 0; text-align: left; margin: 0; }
.редактор-поле .ячейка-выделена { background: #cfe3fb; }

.редактор-слой { position: absolute; inset: 0; pointer-events: none; }
.ручка { position: absolute; pointer-events: auto; z-index: 10; }
.ручка-колонка { width: 7px; cursor: col-resize; }
.ручка-колонка:hover { background: rgba(27, 79, 138, .35); }
.ручка-строка { height: 7px; cursor: row-resize; }
.ручка-строка:hover { background: rgba(27, 79, 138, .35); }
.ручка-угол { width: 14px; height: 14px; background: var(--синий); border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
body.тянем-горизонтально { cursor: col-resize; user-select: none; }
body.тянем-вертикально { cursor: row-resize; user-select: none; }

/* ── Предпросмотр ────────────────────────────────────────────────────────── */
.предпросмотр { width: 100%; height: 78vh; border: 1px solid var(--линия); border-radius: var(--радиус); background: #8a8f98; }
.две-колонки { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1199px) { .две-колонки { grid-template-columns: 1fr; } }

.подсказка { color: var(--серый); font-size: .85rem; }
.числа { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.число { background: #fff; border: 1px solid var(--линия); border-radius: var(--радиус); padding: 12px; }
.число b { display: block; font-size: 1.5rem; line-height: 1.2; }
.число span { color: var(--серый); font-size: .82rem; }