/* Unidad Educativa Miravalle — student platform with the automation made visible.
 *
 * Every AI-produced element on this page carries the same treatment: a marked
 * band, the signals it used, and its confidence. That is deliberate. In an
 * education product the interesting question is never "can it grade" — it is
 * "what happens when it is unsure, and can the student see why". So the low
 * confidence path is styled as prominently as the confident one.
 */

:root {
  --ink: #161d2a;
  --muted: #5d6879;
  --line: #e4e8ef;
  --bg: #f6f8fa;
  --card: #ffffff;
  --rail: #101a2e;
  --accent: #4b34d6;
  --accent-soft: #efedfd;
  --good: #147a52;
  --good-soft: #e6f5ee;
  --warn: #a35b06;
  --warn-soft: #fdf2e0;
  --risk: #b5301c;
  --risk-soft: #fdecea;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --ink: #edf3fc;
  --muted: #aeb9ca;
  --line: #344158;
  --bg: #101725;
  --card: #182236;
  --rail: #080f1d;
  --accent: #a99bff;
  --accent-soft: #302d58;
  --good: #62d9a8;
  --good-soft: #163b32;
  --warn: #f1bb67;
  --warn-soft: #3d2e19;
  --risk: #ff9483;
  --risk-soft: #432420;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.2; }

.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }

/* ----------------------------------------------------------------- rail -- */
.rail {
  background: var(--rail);
  color: #e8ecf4;
  display: flex; flex-direction: column;
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 22px; }
.mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(140deg, #6b5bf5, #3b2bb8);
  font-weight: 700; font-size: 16px; color: #fff;
}
.brand strong { display: block; font-size: 14.5px; font-weight: 640; }
/* Scoped to the text block: as a bare `.brand span` this also matched
   .mark and repainted the logo tile in the tagline's grey. */
.brand > div span { font-size: 11.5px; color: #8d99ae; }

.rail nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.rail nav button {
  appearance: none; border: 0; background: none;
  color: #aeb8c9;
  font: 550 13.4px/1 var(--font-body);
  text-align: left;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rail nav button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail nav button[aria-current="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rail nav .bead {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font: 700 10.5px/1 var(--font-body);
}
/* #d4761a carried white at 3.28:1. #a35b06 measures 5.2:1 and still reads as
 * the warning amber next to the accent bead. */
.rail nav .bead.warn { background: #a35b06; }

.who {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  /* Bottom padding clears the fixed Obranext mark in the corner, which
   * otherwise sits directly on the student's name. */
  padding: 12px 6px 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2c3b58; color: #fff;
  font: 600 11px/1 var(--font-body);
}
.who strong { display: block; font-size: 13px; font-weight: 600; }
/* `:where(span)` alone was not enough: it drops to (0,1,0), which ties with
 * `.avatar` — and this rule comes later, so it still won and the initials stayed
 * at 3.9:1. Excluding the avatar states the intent directly, and `:not()` inside
 * `:where()` keeps the whole thing at zero specificity. */
.who :where(span:not(.avatar)) { font-size: 11px; color: #8d99ae; }

/* ----------------------------------------------------------------- main -- */
.main { padding: 26px 30px 90px; min-width: 0; }
.head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 22px;
  padding-right: 92px;   /* clears the fixed language switch */
}
.head h1 { margin: 0; font-size: 22px; font-weight: 660; }
.head p { margin: 3px 0 0; font-size: 13.6px; color: var(--muted); }
.head p.tag {
  font-size: 11.5px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 999px;
  padding: 5px 11px; margin: 0;
}
.head-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 8px;
}
.role-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card);
}
.role-switch button,
.guide-launch {
  appearance: none; min-height: 36px;
  border: 0; border-radius: 7px;
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
}
.role-switch button {
  padding: 0 11px; color: var(--muted); background: transparent;
}
.role-switch button[aria-pressed="true"] {
  color: #fff; background: var(--rail);
}
.guide-launch {
  padding: 0 12px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid #d7d1fb;
}
.guide-launch:hover { background: #e4e0fb; }
.role-switch button:focus-visible,
.guide-launch:focus-visible,
.guide-close:focus-visible,
.guide-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.view { display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px 18px 18px;
}
.card > h2 { margin: 0 0 3px; font-size: 14.5px; font-weight: 640; }
.card > .sub { margin: 0 0 14px; font-size: 12.6px; color: var(--muted); }

/* --------------------------------------------------------- the AI badge -- */
.ai {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 7px; border-radius: 5px;
  vertical-align: middle;
}
.ai svg { width: 11px; height: 11px; }
.card.aiCard { border-left: 3px solid var(--accent); }
.card.aiCard.held { border-left-color: var(--warn); }
.card.aiCard.held .ai { color: var(--warn); background: var(--warn-soft); }

.headline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }

/* signals: the inputs behind an automated judgement */
.signals { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; }
.signals li {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline;
  font-size: 12.7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--line);
}
.signals li:last-child { border-bottom: 0; padding-bottom: 0; }
.signals .lab { color: var(--muted); }
.signals .val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.signals .val.up { color: var(--good); }
.signals .val.down { color: var(--risk); }

.meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter.good i { background: var(--good); }
.meter.warn i { background: #d4761a; }
.meter.risk i { background: var(--risk); }

.pill {
  display: inline-block;
  font: 600 11px/1 var(--font-body);
  padding: 5px 9px; border-radius: 999px;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.risk { background: var(--risk-soft); color: var(--risk); }
.pill.flat { background: var(--bg); color: var(--muted); }

.big { font-size: 30px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; }
.big small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* rubric rows on the graded assignment */
.rubric { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.rubric li { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.rubric .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rubric h3 { margin: 0; font-size: 13px; font-weight: 600; }
.rubric .score { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.rubric blockquote {
  margin: 8px 0 0; padding: 7px 10px;
  border-left: 2px solid var(--line);
  background: var(--bg);
  border-radius: 0 7px 7px 0;
  font-size: 12.4px; color: var(--muted);
  font-style: italic;
}
.rubric .why { margin: 7px 0 0; font-size: 12.4px; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 600 12.5px/1 var(--font-body);
  padding: 9px 13px; border-radius: 8px;
}
.btn:hover { border-color: #c6cddb; }
.btn.primary { background: var(--rail); border-color: var(--rail); color: #fff; }
.btn.primary:hover { background: #1c2a44; }

/* timeline for the generated plan */
.plan { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.plan li {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.plan li:first-child { border-top: 0; }
.plan .when { font: 600 11.5px/1.35 var(--mono); color: var(--muted); }
.plan h3 { margin: 0 0 2px; font-size: 13.2px; font-weight: 600; }
.plan p { margin: 0; font-size: 12.4px; color: var(--muted); }

.note {
  margin: 13px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--bg);
  font-size: 12.4px; color: var(--muted);
}
.note.warn { background: var(--warn-soft); color: #7c4605; }

/* -------------------------------------------------------------- courses -- */
.code {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.09em;
  color: var(--muted);
}
.course h2 { margin-top: 2px; }

/* ------------------------------------------------------------- lectures -- */
.chapters { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.chapters button {
  appearance: none; width: 100%; cursor: pointer;
  display: flex; align-items: baseline; gap: 11px;
  border: 0; border-radius: 8px;
  background: transparent; color: inherit;
  font: 550 13px/1.4 var(--font-body);
  text-align: left;
  padding: 9px 11px;
}
.chapters button:hover { background: var(--bg); }
.chapters button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ts {
  font: 600 11px/1.4 var(--mono);
  color: var(--accent);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.searchbox { margin: 12px 0 6px; }
.searchbox input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 13px;
  font: 400 13.5px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--card);
}
.searchbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.transcript { display: grid; gap: 2px; margin-top: 6px; }
.tline {
  display: grid; grid-template-columns: 46px 1fr; gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.tline:first-child { border-top: 0; }
.tline p { margin: 0; font-size: 12.8px; line-height: 1.5; color: var(--muted); }
.tline mark { background: #fdf0b8; color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* ------------------------------------------------------------- practice -- */
.qtext {
  margin: 13px 0 0;
  font-size: 15.5px;
  font-weight: 550;
  line-height: 1.45;
}
.opts { display: grid; gap: 8px; margin-top: 14px; }
.opt {
  appearance: none; cursor: pointer;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: 400 13.4px/1.45 var(--font-body);
  padding: 12px 14px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt:disabled { cursor: default; }
/* The right answer is always revealed, whether or not it was chosen — being
   told only "wrong" teaches nothing. */
.opt.right { border-color: var(--good); background: var(--good-soft); font-weight: 600; }
.opt.wrong { border-color: var(--risk); background: var(--risk-soft); }

/* ---------------------------------------------------------------- marks -- */
.grades { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.grades li { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.grades .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.grades h3 { margin: 0; font-size: 13px; font-weight: 600; }
.grades .score { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.grades .why { margin: 4px 0 8px; font-size: 12.2px; color: var(--muted); }

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 14px 0 4px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 26, 46, 0.3);
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 26, 46, 0.3);
}
.slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------- staff -- */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.metric-grid {
  display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 12px;
}
.metric-card {
  min-width: 0; padding: 15px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  border-top: 3px solid #aeb8c9;
}
.metric-card.risk { border-top-color: var(--risk); }
.metric-card.warn { border-top-color: var(--warn); }
.metric-card.accent { border-top-color: var(--accent); }
.metric-card > strong {
  display: block; font-size: 25px; line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.metric-card > span { display: block; margin-top: 8px; font-weight: 620; font-size: 12.8px; }
.metric-card > small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.staff-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 16px; }
.staff-avatar { background: #e7ebf3; color: var(--rail); }
.priority-list { display: grid; }
.priority-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.priority-row:first-child { border-top: 0; padding-top: 2px; }
.priority-copy { min-width: 0; }
.priority-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.priority-top strong { font-size: 13.2px; }
.priority-copy p { margin: 3px 0 0; color: var(--muted); font-size: 12.2px; }
.priority-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; }
.task-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.task-list li:first-child { border-top: 0; padding-top: 2px; }
.task-list time { font: 600 10.8px/1 var(--mono); color: var(--accent); }
.task-list strong { display: block; font-size: 12.5px; line-height: 1.4; }
.task-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.8px; }
.task-list li.is-done strong { color: var(--muted); text-decoration: line-through; }

.crm-toolbar {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, auto) auto;
  align-items: center; gap: 10px;
  padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.crm-toolbar input,
.crm-toolbar select {
  width: 100%; min-height: 41px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font: 400 13px/1.2 var(--font-body); padding: 9px 11px;
}
.crm-toolbar input:focus-visible,
.crm-toolbar select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.crm-table-shell {
  overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.crm-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.crm-table th {
  padding: 11px 12px; text-align: left;
  color: var(--muted); background: #f0f3f7;
  font: 650 10.5px/1.2 var(--mono); letter-spacing: .055em; text-transform: uppercase;
}
.crm-table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 12.2px; }
.crm-table tbody tr:hover { background: #fafbfc; }
.crm-table td > strong, .crm-table td > small { display: block; }
.crm-table td > strong { font-size: 12.2px; }
.crm-table td > small { margin-top: 2px; color: var(--muted); font-size: 10.8px; }
.student-cell { display: flex; align-items: center; gap: 9px; }
.student-cell strong, .student-cell small { display: block; }
.student-cell small { margin-top: 2px; color: var(--muted); font: 600 10px/1.2 var(--mono); }
.crm-signal { max-width: 250px; color: var(--muted); }
.crm-empty { margin: 0; padding: 30px; text-align: center; color: var(--muted); }

.back-button { justify-self: start; }
.student-profile-head {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.profile-identity { display: flex; align-items: center; gap: 13px; }
.profile-avatar {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 13px; color: #fff; background: var(--rail); font-weight: 680;
}
.profile-identity h2 { margin: 0; font-size: 19px; }
.profile-identity p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.profile-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.profile-status small { color: var(--muted); }
.profile-metrics { margin-top: 0; }
.case-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.case-timeline li {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.case-timeline li:first-child { border-top: 0; }
.case-timeline time { font: 600 10.8px/1.4 var(--mono); color: var(--accent); }
.case-timeline p { margin: 0; font-size: 12.8px; }
.case-timeline small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.review-intro {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 14px 16px; border: 1px solid #ead6b8; border-radius: 11px; background: var(--warn-soft);
}
.review-intro p { margin: 0; max-width: 760px; font-size: 13px; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.review-case { display: flex; flex-direction: column; }
.review-case > h2 { margin-top: 13px; }
.review-case > p:not(.sub) { font-size: 12.8px; }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review-evidence { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.review-evidence > strong { font-size: 12.3px; }
.review-evidence > p:not(.note) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.review-case .actions { margin-top: auto; padding-top: 14px; }
.support-rule { max-width: 860px; }
.support-rule > p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.support-pipeline { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.pipeline-column {
  min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #eef1f5;
}
.pipeline-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 3px 10px; }
.pipeline-heading h2 { margin: 0; font-size: 12px; }
.pipeline-count {
  min-width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 999px; background: #dde3eb; color: var(--muted); font: 650 10px/1 var(--mono);
}
.support-card {
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  box-shadow: 0 1px 2px rgba(16, 26, 46, .04);
}
.support-card + .support-card { margin-top: 9px; }
.support-card > strong { font-size: 12.7px; }
.support-card > p:not(.note) { margin: 5px 0; color: var(--muted); font-size: 11.8px; }
.support-card > small { display: block; margin-bottom: 10px; color: var(--muted); font-size: 10.6px; }
.support-card .btn { width: 100%; }
.draft-note { margin-bottom: 9px; }

/* --------------------------------------------------------------- guide -- */
body.guide-open { overflow: hidden; }
.guide-backdrop {
  position: fixed; inset: 0; z-index: 2147482500;
  display: flex; justify-content: flex-end;
  padding: 14px;
  background: rgba(10, 17, 31, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.guide-backdrop[hidden] { display: none; }
.guide-panel {
  width: min(540px, 100%); height: 100%; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 24px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(10, 17, 31, .34);
}
.guide-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.guide-kicker {
  display: block; margin-bottom: 7px;
  color: var(--accent); font: 650 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.guide-panel h2 { margin: 0; max-width: 390px; font-size: 25px; letter-spacing: -.025em; }
.guide-close {
  appearance: none; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); cursor: pointer; font: 400 24px/1 var(--font-body);
}
.guide-intro { margin: 16px 0 18px; color: var(--muted); font-size: 13.6px; }
.guide-items { display: grid; gap: 8px; }
.guide-item {
  appearance: none; width: 100%; min-height: 72px;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
}
.guide-item:hover { border-color: #b8adef; background: #faf9ff; }
.guide-number { color: var(--accent); font: 650 10px/1 var(--mono); }
.guide-copy strong { display: block; font-size: 13.2px; }
.guide-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.7px; line-height: 1.4; }
.guide-arrow { color: var(--accent); font-size: 17px; }
.guide-panel > footer {
  margin-top: auto; padding-top: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.guide-panel > footer p { margin: 0; max-width: 260px; color: var(--muted); font-size: 11.8px; }
.guide-contact {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.8px; line-height: 1.5;
}
.guide-contact a { color: var(--accent); font-weight: 600; text-decoration: none; }
.guide-contact a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- role gate -- */
/* The cover a first direct visit lands on: choose a seat before the demo
   commits to one. Same visual family as the guide, centered. */
body.gate-open { overflow: hidden; }
.gate-backdrop {
  position: fixed; inset: 0; z-index: 2147482600;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(10, 17, 31, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.gate-backdrop[hidden] { display: none; }
.gate-panel {
  width: min(470px, 100%); max-height: 100%; overflow-y: auto;
  padding: 26px 24px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(10, 17, 31, .34);
}
.gate-kicker {
  display: block; margin-bottom: 8px;
  color: var(--accent); font: 650 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.gate-panel h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.gate-intro { margin: 12px 0 20px; color: var(--muted); font-size: 13.6px; line-height: 1.55; }
.gate-actions { display: grid; gap: 9px; }
.gate-actions .btn { width: 100%; padding: 12px 14px; font-size: 14px; }
.gate-foot { margin: 14px 0 0; color: var(--muted); font-size: 11.8px; }

/* --------------------------------------------------------------- tutor -- */
.tutor-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px;
  padding: 12px 18px 12px 14px;
  background: var(--accent); color: #fff;
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(75, 52, 214, 0.35);
}
.tutor-launch:hover { background: #3f2ac0; }
.tutor-launch svg { width: 18px; height: 18px; }
.tutor-launch[aria-expanded="true"],
.tutor-launch[hidden] { display: none; }

.tutor {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(390px, calc(100vw - 40px));
  height: min(580px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(16, 26, 46, 0.3);
}
.tutor[hidden] { display: none; }
.tutor > header {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 14px 13px 16px;
  background: var(--accent); color: #fff;
}
.tutor > header strong { display: block; font-size: 14.5px; font-weight: 620; }
.tutor > header span { font-size: 11.6px; opacity: 0.82; }
.tutor > header button {
  appearance: none; border: 0; background: rgba(255, 255, 255, 0.16);
  color: #fff; width: 26px; height: 26px; flex: none;
  border-radius: 7px; cursor: pointer; font-size: 17px; line-height: 1;
}

.tutor-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.tb {
  max-width: 88%;
  font-size: 13.6px; line-height: 1.5;
  padding: 10px 12px; border-radius: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tb.bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.tb.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.tb .src {
  display: block; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font: 600 10.8px/1.4 var(--font-body); color: var(--accent);
}
.tdots { align-self: flex-start; display: inline-flex; gap: 3px; padding: 12px 13px;
         background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.tdots i { width: 6px; height: 6px; border-radius: 50%; background: #9aa6b4; animation: blink 1.15s infinite; }
.tdots i:nth-child(2) { animation-delay: .18s; } .tdots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .35 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .tdots i { animation: none; opacity: .6 } }

.tutor-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 2px; }
.tutor-chips:empty { padding: 0; }
.tutor-chips button {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 550 12.2px/1 var(--font-body);
  padding: 8px 10px; border-radius: 999px;
}
.tutor-chips button:hover { border-color: var(--accent); color: var(--accent); }

.tutor-compose { flex: none; display: flex; gap: 7px; padding: 10px 12px 8px; }
.tutor-compose input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 14px; font: 400 13.6px/1.2 var(--font-body); color: var(--ink);
}
.tutor-compose input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.tutor-compose button {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
}
.tutor-compose button svg { width: 18px; height: 18px; }
.tutor-foot { flex: none; margin: 0; padding: 0 14px 12px; font-size: 10.8px; color: var(--muted); }

/* --------------------------------------------------------------- narrow -- */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .review-grid { grid-template-columns: 1fr; }
  .support-pipeline { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 14px; overflow-x: auto;
  }
  .brand { padding: 0 6px 0 0; flex: none; }
  .rail nav { flex-direction: row; gap: 4px; }
  .rail nav button { white-space: nowrap; padding: 8px 11px; }
  .who { display: none; }
  .main { padding: 20px 16px 96px; }
  .head { padding-right: 88px; }
  .head-actions { justify-content: flex-start; }
  .staff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .head { display: block; padding-right: 78px; }
  .head-actions { margin-top: 14px; }
  .head-actions .tag { order: 3; }
  .role-switch { flex: 1; }
  .role-switch button { flex: 1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-row { grid-template-columns: 34px minmax(0, 1fr); }
  .priority-row > .btn { grid-column: 2; justify-self: start; }
  .task-list li { grid-template-columns: 42px minmax(0, 1fr); }
  .task-list li > .btn { grid-column: 2; justify-self: start; }
  .crm-toolbar { grid-template-columns: 1fr; }
  .crm-count { padding-left: 2px; }
  .student-profile-head { align-items: flex-start; }
  .profile-status { align-items: flex-start; }
  .case-timeline li { grid-template-columns: 1fr; gap: 5px; }
  .support-pipeline { grid-template-columns: 1fr; }
  .guide-backdrop { padding: 0; }
  .guide-panel { padding: 20px 16px; border: 0; border-radius: 0; }
  .guide-panel > footer {
    align-items: flex-start; flex-direction: column;
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
  .guide-panel > footer p { max-width: none; }
  .guide-panel > footer .btn { width: 100%; }
}
@media (max-width: 560px) {
  .tutor { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .tutor-launch { right: 14px; bottom: 14px; }
}
@media (max-width: 390px) {
  .metric-grid { grid-template-columns: 1fr; }
  .guide-launch { width: 100%; }
}

/* ===================================================== libro de calificaciones
 *
 * A register is a spreadsheet, and spreadsheets are where web layouts go to
 * die. Two things carry it: the student column is sticky so a mark is never
 * orphaned from a name, and the whole thing scrolls inside its own shell so
 * the page itself never scrolls sideways.
 *
 * The band tints are the same three already audited elsewhere in this demo
 * rather than a new palette, so the contrast work does not have to be redone.
 */

.gb-bar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin-bottom: 12px;
}
.gb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gb-field label {
  color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.gb-field select, .gb-field input {
  min-height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13px;
}
.gb-field select:focus-visible, .gb-field input:focus-visible,
.gb-drawer input:focus-visible, .gb-drawer select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
}
.gb-search { flex: 1 1 190px; }
.gb-search input { width: 100%; }
.gb-count {
  margin-left: auto; padding-bottom: 9px;
  color: var(--muted); font: 600 11.5px/1 var(--mono);
}

.gb-state {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; border: 1px solid transparent;
}
.gb-state.closed { background: var(--good-soft); border-color: #bfe3d3; color: #0f5c3e; }
.gb-state.open   { background: var(--warn-soft); border-color: #f0d9ae; color: #7a4405; }
.gb-state.future { background: #eef1f5; border-color: var(--line); color: var(--muted); }

.gb-shell {
  overflow: auto; max-height: 68vh; margin-bottom: 58px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.gb { border-collapse: separate; border-spacing: 0; min-width: 760px; }

.gb thead th {
  position: sticky; z-index: 3; background: #f0f3f7;
  border-bottom: 1px solid var(--line);
}
.gb thead tr:first-child th { top: 0; }
.gb thead tr:nth-child(2) th { top: 34px; }

.gb-band {
  padding: 7px 10px; text-align: center;
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
  border-left: 1px solid var(--line);
}
.gb-band-calc { background: #e9edf3; }

.gb-h {
  padding: 7px 9px; text-align: center; vertical-align: bottom;
  border-left: 1px solid var(--line); min-width: 92px;
}
.gb-h strong { display: block; font-size: 11.5px; font-weight: 660; }
.gb-h small { display: block; color: var(--muted); font-size: 9.5px; }
.gb-h-exam { background: #e9edf3; }
.gb-h-calc { background: #e9edf3; min-width: 84px; }
.gb-marked { font: 600 9.5px/1.3 var(--mono); color: var(--good); }
.gb-marked.partial { color: var(--warn); }

/* The frozen identity column. z-index has to beat the body cells but lose to
   the header corner, or the corner disappears under it on scroll. */
.gb-stick {
  position: sticky; left: 0; z-index: 2;
  background: var(--card); text-align: left;
  border-right: 1px solid var(--line);
}
.gb-corner { z-index: 4; background: #f0f3f7; padding: 8px 10px; min-width: 190px; }
.gb-corner span {
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
}

.gb-who {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; min-width: 190px; max-width: 190px;
  border-bottom: 1px solid var(--line); font-weight: 400;
}
.gb-av {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--rail); color: #fff;
  font: 660 10px/1 var(--font-body);
}
.gb-id { min-width: 0; }
.gb-id strong { display: block; font-size: 12px; font-weight: 640; }
.gb-id small { display: block; color: var(--muted); font: 500 9.5px/1.3 var(--mono); }

.gb tbody td {
  padding: 0; text-align: center; vertical-align: middle;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 42px; cursor: pointer;
}
.gb tbody td.gb-calc { background: #f7f9fb; cursor: default; }
.gb tbody tr:hover td { background: #fbfcfd; }
.gb tbody tr:hover .gb-stick { background: #fbfcfd; }
.gb-retiro { opacity: .55; }
.gb-retiro td { cursor: not-allowed; }

.gb-val { font: 600 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.gb-strong { font-weight: 700; }
.gb-blank { color: var(--muted); }
.gb-c.t-good { background: var(--good-soft); }
.gb-c.t-warn { background: var(--warn-soft); }
.gb-c.t-risk { background: var(--risk-soft); }
.gb-c.t-good .gb-val { color: #0f5c3e; }
.gb-c.t-warn .gb-val { color: #7a4405; }
.gb-c.t-risk .gb-val { color: #8f2416; }
.gb-c.gb-exempt {
  background: repeating-linear-gradient(135deg, #eef1f5 0 5px, #e5e9ef 5px 10px);
  color: var(--muted);
}
.gb-c.is-focus { outline: 3px solid var(--accent); outline-offset: -3px; }
.gb-c.gb-over { box-shadow: inset 3px 0 0 var(--accent); }

.gb-chip {
  display: inline-block; margin-left: 4px; padding: 1px 4px; border-radius: 4px;
  font: 700 8.5px/1.5 var(--mono); vertical-align: middle;
}
.gb-chip-late  { background: var(--warn-soft); color: #7a4405; border: 1px solid #e6c68e; }
.gb-chip-miss  { background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab; }
.gb-chip-over  { background: var(--accent-soft); color: #3a25ad; border: 1px solid #c3b9f4; }
.gb-chip-retiro{ background: #eef1f5; color: var(--muted); border: 1px solid var(--line); }

.gb-scale {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font: 700 9.5px/1.5 var(--mono); letter-spacing: .04em;
}
.gb-scale.t-good { background: var(--good-soft); color: #0f5c3e; }
.gb-scale.t-warn { background: var(--warn-soft); color: #7a4405; }
.gb-scale.t-risk { background: var(--risk-soft); color: #8f2416; }

.gb tfoot td, .gb tfoot th {
  position: sticky; bottom: 0; z-index: 2;
  background: #eef1f5; border-top: 1px solid var(--line);
  padding: 6px 8px; text-align: center;
}
.gb tfoot th { z-index: 3; text-align: left; }
.gb-foot-lab {
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.gb-foot-mean { font: 700 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.gb-foot-below {
  display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 4px;
  font: 700 9.5px/1.6 var(--mono); background: #e3e8ee; color: var(--muted);
}
.gb-foot-below.has { background: var(--risk-soft); color: #8f2416; }

/* ------------------------------------------------------------ the drawer */

.gb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%);
  z-index: 60; display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(16, 26, 46, .16);
  transform: translateX(102%); transition: transform .22s ease;
}
.gb-drawer.open { transform: none; }
.gb-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
}
.gb-drawer-head strong { display: block; font-size: 14px; }
.gb-drawer-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.gb-drawer-x {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
}
.gb-drawer-x:hover { background: #f2f5f8; color: var(--ink); }
.gb-drawer-body { padding: 16px; overflow-y: auto; }

.gb-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.gb-f label {
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
}
.gb-f input, .gb-f select {
  min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font-family: inherit; font-size: 14px;
}
.gb-hint, .gb-warn, .gb-err { margin: -6px 0 13px; font-size: 11.5px; line-height: 1.45; }
.gb-hint { color: var(--muted); }
.gb-warn {
  padding: 8px 10px; border-radius: 8px;
  background: var(--warn-soft); color: #7a4405; border: 1px solid #f0d9ae;
}
.gb-err {
  padding: 8px 10px; border-radius: 8px;
  background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab;
}

.gb-actions { display: flex; gap: 8px; margin-bottom: 20px; }
.gb-save, .gb-cancel {
  min-height: 42px; padding: 0 16px; border-radius: 10px;
  font: 650 13px/1 var(--font-body); cursor: pointer;
}
.gb-save { flex: 1; border: none; background: var(--accent); color: #fff; }
.gb-save:hover { background: #3d29b4; }
.gb-cancel { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.gb-cancel:hover { background: #f2f5f8; }
.gb-save:focus-visible, .gb-cancel:focus-visible, .gb-drawer-x:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.gb-hist h3 {
  margin: 0 0 8px; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.gb-hist ul { margin: 0; padding: 0; list-style: none; }
.gb-hist li {
  padding: 8px 0; border-top: 1px solid var(--line);
}
.gb-hist-v { font: 700 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.gb-hist li small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.gb-hist-none { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- mobile
 *
 * A director opens the link on a phone before they ever open it on a laptop,
 * so the register has to survive 390px rather than degrade to a message. It
 * keeps the sticky name column — narrower — and the drawer becomes a sheet. */
@media (max-width: 720px) {
  .gb-count { margin-left: 0; padding-bottom: 0; }
  .gb-shell { max-height: 62vh; }
  .gb-corner, .gb-who { min-width: 132px; max-width: 132px; }
  .gb-who { gap: 6px; }
  .gb-av { width: 22px; height: 22px; font-size: 9px; }
  .gb-id strong { font-size: 11px; }
  .gb-id small { font-size: 8.5px; }
  .gb-h { min-width: 78px; }
  .gb tbody td { height: 46px; }

  .gb-drawer {
    top: auto; width: 100%; max-height: 86vh;
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    transform: translateY(102%);
  }

  /* The Obranext dock is fixed to the bottom-left and floats above the sheet,
     so the last thing in the drawer has to be able to scroll clear of it. */
  .gb-drawer-body { padding-bottom: 76px; }
  .gb-drawer.open { transform: none; }
}

/* ------------------------------------------------- publication controls */

.gb-pub {
  display: block; margin: 4px auto 0; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #e6e9ef; color: var(--muted);
  font: 650 8.5px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
}
.gb-pub:hover { border-color: var(--muted); color: var(--ink); }
.gb-pub.on { background: var(--good-soft); border-color: #bfe3d3; color: #0f5c3e; }
.gb-pub:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.gb-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gb-state.published { background: var(--good-soft); border-color: #bfe3d3; color: #0f5c3e; }
.gb-close {
  margin-left: auto; min-height: 34px; padding: 0 14px;
  border: none; border-radius: 8px;
  background: var(--accent); color: #fff;
  font: 650 12px/1 var(--font-body); cursor: pointer; white-space: nowrap;
}
.gb-close:hover:not(:disabled) { background: #3d29b4; }
.gb-close:disabled { background: #cfd6e0; color: #6a7484; cursor: default; }
.gb-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ====================================================================== libreta
 *
 * The document that leaves the building. It is laid out to be read on screen
 * and printed on A4, and the print rules strip the application around it so
 * what comes out of the printer is the report and nothing else.
 */

.libreta-bar { align-items: flex-end; }
.libreta-print { margin-left: auto; }

.libreta {
  position: relative;
  max-width: 900px;
  padding: clamp(22px, 3.5vw, 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

/* In-flow text, deliberately. Chrome does not print background graphics by
   default, so a CSS-background watermark prints blank — on the one artefact
   whose safety depends on carrying it. */
.libreta-wm {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  align-items: center; pointer-events: none;
  transform: rotate(-24deg);
}
.libreta-wm span {
  font: 800 clamp(34px, 7vw, 74px)/1 var(--font-body);
  letter-spacing: .12em;
  color: rgba(75, 52, 214, 0.07);
  white-space: nowrap;
}
.libreta > *:not(.libreta-wm) { position: relative; z-index: 1; }

.libreta-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.libreta-head strong { display: block; font-size: 17px; letter-spacing: -0.015em; }
.libreta-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.libreta-kind {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font: 650 9.5px/1.4 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}

.libreta-who {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px; margin: 16px 0 20px;
}
.libreta-who small {
  display: block; color: var(--muted);
  font: 650 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.libreta-who strong { display: block; margin-top: 2px; font-size: 13px; }

.libreta-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.libreta-table th, .libreta-table td {
  padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left;
  font-size: 12.5px; vertical-align: middle;
}
.libreta-table thead th {
  color: var(--muted); background: #f3f5f8;
  font: 650 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.libreta-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.libreta-table thead .num { text-align: right; }
.libreta-table .strong { font-weight: 700; }
.libreta-table .below { color: var(--risk); }
.libreta-table tfoot th, .libreta-table tfoot td {
  border-top: 2px solid var(--ink); border-bottom: none;
  padding-top: 10px; font-weight: 700;
}

.libreta-side {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.libreta-box { padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; }
.libreta-box h3 {
  margin: 0 0 9px; color: var(--muted);
  font: 650 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.libreta-box ul { margin: 0; padding: 0; list-style: none; }
.libreta-box li { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.libreta-q { min-width: 96px; color: var(--muted); font-size: 11px; }
.libreta-box li strong { font: 700 15px/1 var(--mono); }
.libreta-box li small { color: var(--muted); font-size: 11px; }
.libreta-foot { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.libreta-foot.alert { color: var(--risk); font-weight: 600; }

.libreta-obs { padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 22px; }
.libreta-obs h3 {
  margin: 0 0 8px; color: var(--muted);
  font: 650 9px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.libreta-obs-text { margin: 0; font-size: 13px; line-height: 1.55; }
.libreta-draft { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin: 9px 0 10px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.libreta-edit {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; line-height: 1.5; resize: vertical;
  margin-bottom: 10px;
}
.libreta-edit:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.libreta-sign {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px; margin-top: 30px;
}
.libreta-sign .rule { display: block; height: 1px; background: var(--ink); margin-bottom: 6px; }
.libreta-sign small { display: block; color: var(--muted); font-size: 10.5px; }
.libreta-sign small.nm { color: var(--ink); font-weight: 600; }

@media print {
  /* Print the report, not the application. */
  .rail, .head-actions, .gb-bar, .obx-wm, #tutorPanel, #tutorFab,
  .guide-backdrop, .gate-backdrop, .guide, .gb-drawer, #obx-lang, .obx-lang,
  #viewSub { display: none !important; }
  body, .app, .main { display: block !important; background: #fff !important; }
  .main { padding: 0 !important; }
  .head { margin-bottom: 12px !important; }
  .libreta { border: none; border-radius: 0; padding: 0; max-width: none; }
  .libreta-wm span { color: rgba(0, 0, 0, 0.09); }
  .libreta-edit, .gb-actions, .libreta-draft { display: none !important; }
  .libreta-table thead th { background: transparent !important; }
  @page { margin: 14mm; }
}

/* -------------------------------------------------- libro de asistencia */

.att-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.att-key {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 11px;
}
.att-key b {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px;
  border-radius: 4px; font: 700 9.5px/1 var(--mono);
}
.att-key.t-ok b   { background: #eef1f5; color: var(--muted); }
.att-key.t-warn b { background: var(--warn-soft); color: #7a4405; }
.att-key.t-risk b { background: var(--risk-soft); color: #8f2416; }

.att .att-day {
  position: sticky; top: 0; z-index: 3;
  min-width: 30px; padding: 6px 3px; text-align: center;
  background: #f0f3f7; border-left: 1px solid var(--line);
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
}
.att tbody td.att-c {
  min-width: 30px; padding: 0; text-align: center; cursor: pointer;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 700 9.5px/42px var(--mono);
}
.att-c.c-p  { color: #b4bcc7; }
.att-c.c-a  { background: var(--warn-soft); color: #7a4405; }
.att-c.c-fj { background: #e8eefb; color: #23408f; }
.att-c.c-fi { background: var(--risk-soft); color: #8f2416; }
.att-c:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

.att-over .gb-stick { background: #fff7f6; }
.att-breach { color: var(--risk); font-weight: 700; }
.att-flag {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab;
  font: 700 8.5px/1.5 var(--mono); text-transform: uppercase;
}
.att-count-alert { color: var(--risk); font-weight: 700; }

.att-pop {
  position: absolute; z-index: 70; width: 230px; padding: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(16, 26, 46, .18);
}
.att-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink);
  font: 500 12px/1.2 var(--font-body); text-align: left; cursor: pointer;
}
.att-opt b {
  display: inline-grid; place-items: center; min-width: 22px; height: 19px;
  border-radius: 4px; font: 700 9.5px/1 var(--mono);
}
.att-opt.t-ok b   { background: #eef1f5; color: var(--muted); }
.att-opt.t-warn b { background: var(--warn-soft); color: #7a4405; }
.att-opt.t-risk b { background: var(--risk-soft); color: #8f2416; }
.att-opt:hover { background: #f3f5f8; }
.att-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.att-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.att-pop-hint { margin: 6px 4px 2px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }

/* ------------------------------------------------- modelo de evaluación */

.gb-model {
  min-height: 38px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink);
  font: 600 12px/1 var(--font-body); cursor: pointer; white-space: nowrap;
}
.gb-model:hover { border-color: var(--accent); color: var(--accent); }
.gb-model:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.model-drawer { width: min(420px, 100%); }
.model-weights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.model-preview {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 9px;
  background: var(--accent-soft); color: #34219e;
  font-size: 12px; line-height: 1.45;
}
.model-preview.hot { background: var(--warn-soft); color: #7a4405; }

.model-bands { margin-bottom: 18px; }
.model-bands h3 {
  margin: 0 0 9px; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.model-band {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.model-band-label { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.35; }
.model-band-min {
  width: 66px; min-height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--mono); font-size: 12px; text-align: right;
}
.model-band-min:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.model-ask {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; line-height: 1.5;
}

/* --------------------------------------------------------- junta de curso */

.junta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.junta-case { padding: 16px 17px; }
.junta-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.junta-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.junta-who .gb-av { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.junta-who strong { display: block; font-size: 14px; }
.junta-who small { display: block; margin-top: 1px; color: var(--muted); font: 500 10.5px/1.2 var(--mono); }
.junta-gen {
  flex: none; display: flex; flex-direction: column; align-items: center;
  padding: 5px 11px; border-radius: 9px; text-align: center;
}
.junta-gen b { font: 700 17px/1 var(--mono); }
.junta-gen small { margin-top: 2px; font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.junta-gen.t-good { background: var(--good-soft); color: #0f5c3e; }
.junta-gen.t-warn { background: var(--warn-soft); color: #7a4405; }
.junta-gen.t-risk { background: var(--risk-soft); color: #8f2416; }

.junta-reasons { margin: 0 0 14px; padding: 0; list-style: none; }
.junta-reasons li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.junta-tag {
  flex: none; padding: 2px 7px; border-radius: 5px;
  font: 700 9px/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase;
}
.junta-tag.risk { background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab; }

.junta-picker-label {
  display: block; margin-bottom: 7px; color: var(--muted);
  font: 650 9px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.junta-opt {
  display: block; width: 100%; text-align: left; margin-bottom: 5px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); cursor: pointer;
}
.junta-opt b { display: block; font-size: 12.5px; font-weight: 640; color: var(--ink); }
.junta-opt small { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.junta-opt:hover { border-color: var(--accent); background: #fafbff; }
.junta-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.junta-opt.t-good b { color: #0f5c3e; }
.junta-opt.t-risk b { color: #8f2416; }

.junta-done { padding: 11px 13px; border-radius: 9px; border: 1px solid transparent; }
.junta-done.t-good { background: var(--good-soft); border-color: #bfe3d3; }
.junta-done.t-warn { background: var(--warn-soft); border-color: #f0d9ae; }
.junta-done.t-risk { background: var(--risk-soft); border-color: #eab4ab; }
.junta-done-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.junta-outcome { font-size: 13px; font-weight: 700; }
.junta-done.t-good .junta-outcome { color: #0f5c3e; }
.junta-done.t-warn .junta-outcome { color: #7a4405; }
.junta-done.t-risk .junta-outcome { color: #8f2416; }
.junta-reopen {
  flex: none; padding: 3px 9px; border: 1px solid rgba(0,0,0,.18); border-radius: 6px;
  background: rgba(255,255,255,.6); color: var(--ink);
  font: 600 10.5px/1.3 var(--font-body); cursor: pointer;
}
.junta-reopen:hover { background: #fff; }
.junta-reopen:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.junta-done-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink); opacity: .82; }
.junta-sign { margin: 8px 0 0; color: var(--muted); font-size: 10.5px; }

/* --------------------------------------------------- consolidado anual */

.cons .cons-h {
  position: sticky; top: 0; z-index: 3;
  min-width: 74px; padding: 7px 6px; text-align: center; vertical-align: bottom;
  background: #f0f3f7; border-left: 1px solid var(--line);
  color: var(--muted); font: 640 10px/1.15 var(--font-body);
}
.cons tbody td.cons-c {
  min-width: 74px; height: 40px; text-align: center; padding: 0;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cons-c.t-good { background: var(--good-soft); }
.cons-c.t-warn { background: var(--warn-soft); }
.cons-c.t-risk { background: var(--risk-soft); }
.cons-c.t-good .gb-val { color: #0f5c3e; }
.cons-c.t-warn .gb-val { color: #7a4405; }
.cons-c.t-risk .gb-val { color: #8f2416; }
.cons-c.cons-sup[data-clickable] { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(143,36,22,.35); }
.cons-c.cons-sup[data-clickable]:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.cons-chip {
  margin-left: 3px; padding: 0 4px; border-radius: 4px; vertical-align: middle;
  background: var(--accent-soft); color: #3a25ad; border: 1px solid #c3b9f4;
  font: 700 8px/1.5 var(--mono); text-transform: uppercase;
}
.cons-status { min-width: 120px; }
.cons-status-h { min-width: 120px; }
.cons-badge {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font: 700 10px/1.4 var(--mono); letter-spacing: .02em;
}
.cons-badge.t-good { background: var(--good-soft); color: #0f5c3e; }
.cons-badge.t-warn { background: var(--warn-soft); color: #7a4405; }
.cons-badge.t-risk { background: var(--risk-soft); color: #8f2416; }

.cons-pop { width: 244px; }
.cons-pop-head {
  margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font: 640 12px/1.3 var(--font-body);
}
.cons-pop .gb-f { margin-bottom: 8px; }

/* -------------------------------------------------- portal del representante */

.fam-switch {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.fam-child {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; text-align: left;
}
.fam-child .gb-av { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.fam-child-id strong { display: block; font-size: 13.5px; }
.fam-child-id small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }
.fam-child:hover { border-color: var(--accent); }
.fam-child.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.fam-child:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.fam-standing { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; }
.fam-standing-num { display: flex; align-items: baseline; gap: 8px; }
.fam-standing-num strong { font: 800 40px/1 var(--font-body); letter-spacing: -0.02em; }
.fam-standing-num small { color: var(--muted); font-size: 12px; }
.fam-standing .gb-scale { font-size: 12px; padding: 4px 10px; }

.fam-subjects { margin: 4px 0 0; padding: 0; list-style: none; }
.fam-subjects li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.fam-sub-name { font-size: 13px; }
.fam-sub-val { font: 700 14px/1 var(--mono); padding: 3px 9px; border-radius: 6px; }
.fam-sub-val.t-good { background: var(--good-soft); color: #0f5c3e; }
.fam-sub-val.t-warn { background: var(--warn-soft); color: #7a4405; }
.fam-sub-val.t-risk { background: var(--risk-soft); color: #8f2416; }
.fam-sub-pending {
  color: var(--muted); font: 600 10.5px/1.4 var(--mono);
  letter-spacing: .04em; text-transform: uppercase;
}

.fam-att { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.fam-att-cell {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-align: center;
}
.fam-att-cell strong { display: block; font: 700 22px/1 var(--mono); }
.fam-att-cell small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.fam-att-cell.risk { background: var(--risk-soft); border-color: #eab4ab; }
.fam-att-cell.risk strong { color: #8f2416; }

.fam-feed { margin: 4px 0 0; padding: 0; list-style: none; }
.fam-feed li { padding: 13px 0; border-top: 1px solid var(--line); }
.fam-msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fam-msg-top strong { font-size: 13px; }
.fam-msg-when { color: var(--muted); font-size: 10.5px; }
.fam-msg-role { display: block; margin: 1px 0 6px; color: var(--muted); font: 600 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.fam-feed li p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Three roles now; on a narrow head the switch may need to wrap. */
@media (max-width: 560px) {
  .role-switch { flex-wrap: wrap; }
}

/* ------------------------------------------------------ comportamiento */

.comp { min-width: 480px; }
.comp .comp-h {
  position: sticky; top: 0; z-index: 3;
  min-width: 190px; padding: 8px 12px; text-align: left;
  background: #f0f3f7; border-left: 1px solid var(--line);
  color: var(--muted); font: 650 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.comp tbody td.comp-c {
  padding: 8px 12px; cursor: pointer;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.comp-c { display: table-cell; }
.comp-code {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 9px;
  border-radius: 8px; font: 700 13px/1 var(--mono); vertical-align: middle;
}
.comp-label { font-size: 12px; color: var(--muted); }
.comp-c.t-good .comp-code { background: var(--good-soft); color: #0f5c3e; }
.comp-c.t-warn .comp-code { background: var(--warn-soft); color: #7a4405; }
.comp-c.t-risk .comp-code { background: var(--risk-soft); color: #8f2416; }
.comp-c:hover { background: #fafbfc; }
.comp-c:hover .gb-stick { background: #fafbfc; }

.comp-pop { width: 244px; }
.comp-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer;
}
.comp-opt b {
  display: inline-grid; place-items: center; width: 24px; height: 22px;
  border-radius: 6px; font: 700 11px/1 var(--mono);
}
.comp-opt small { color: var(--ink); font-size: 11.5px; line-height: 1.3; }
.comp-opt.t-good b { background: var(--good-soft); color: #0f5c3e; }
.comp-opt.t-warn b { background: var(--warn-soft); color: #7a4405; }
.comp-opt.t-risk b { background: var(--risk-soft); color: #8f2416; }
.comp-opt:hover { background: #f3f5f8; }
.comp-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.comp-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------ column actions + family notice */

.gb-colmenu-btn {
  display: block; margin: 4px auto 0; width: 22px; height: 18px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #e6e9ef; color: var(--muted);
  font: 700 11px/1 var(--font-body); cursor: pointer;
}
.gb-colmenu-btn:hover { border-color: var(--muted); color: var(--ink); }
.gb-colmenu-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.gb-colmenu { width: 246px; padding: 6px; }
.gb-colmenu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink);
  font: 500 12.5px/1.3 var(--font-body); cursor: pointer;
}
.gb-colmenu-item:hover { background: #f3f5f8; }
.gb-colmenu-item:last-child { color: var(--accent); font-weight: 640; }
.gb-colmenu-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.gb-flash {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 80; max-width: min(460px, 92vw);
  padding: 11px 16px; border-radius: 10px;
  background: var(--rail); color: #fff; font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(16, 26, 46, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.gb-flash.on { opacity: 1; transform: translate(-50%, 0); }

.msg-drawer { width: min(440px, 100%); }
.msg-lead {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5;
}
.msg-block { padding: 12px 0; border-top: 1px solid var(--line); }
.msg-block-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.msg-block-top .gb-av { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.msg-block-top strong { display: block; font-size: 13px; }
.msg-block-top small { display: block; margin-top: 1px; color: var(--muted); font: 500 10.5px/1.2 var(--mono); }
.msg-edit {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; line-height: 1.5; resize: vertical;
}
.msg-edit:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------- cargar nómina */

.nomina { max-width: 820px; }
.nomina-drop { text-align: center; padding: 20px 10px; }
.nomina-drop-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 14px; background: var(--accent-soft); color: var(--accent);
  font-size: 24px; font-weight: 700;
}
.nomina-pick { margin: 6px 0 14px; }

.nomina-summary { display: flex; gap: 12px; margin-bottom: 14px; }
.nomina-stat {
  flex: 1; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--line);
}
.nomina-stat strong { display: block; font: 800 30px/1 var(--font-body); }
.nomina-stat small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.nomina-stat.good { background: var(--good-soft); border-color: #bfe3d3; }
.nomina-stat.good strong { color: #0f5c3e; }
.nomina-stat.risk { background: var(--risk-soft); border-color: #eab4ab; }
.nomina-stat.risk strong { color: #8f2416; }

.nomina-issues { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.nomina-issue {
  padding: 5px 11px; border-radius: 7px;
  background: var(--warn-soft); color: #7a4405; border: 1px solid #f0d9ae;
  font: 600 11.5px/1.3 var(--font-body);
}

.nomina-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.nomina-table th {
  padding: 8px 10px; text-align: left; background: #f0f3f7; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.nomina-table td { padding: 9px 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.nomina-rownum { color: var(--muted); font-family: var(--mono); }
.nomina-ced { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nomina-bad { background: #fdf6f5; }

/* --------------------------------------------------------- distributivo */

.hor { min-width: 720px; }
.hor .hor-day {
  position: sticky; top: 0; z-index: 3;
  min-width: 128px; padding: 9px 10px; text-align: left;
  background: #f0f3f7; border-left: 1px solid var(--line);
  color: var(--ink); font: 660 12px/1.2 var(--font-body);
}
.hor-corner { min-width: 74px; }
.hor .hor-time {
  min-width: 74px; padding: 8px 10px; text-align: left; vertical-align: top;
}
.hor-time strong { display: block; font: 700 12.5px/1 var(--mono); }
.hor-time small { display: block; margin-top: 2px; color: var(--muted); font: 600 9.5px/1 var(--mono); }
.hor tbody td.hor-c {
  padding: 8px 10px; vertical-align: top;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hor-c strong { display: block; font-size: 12px; font-weight: 600; }
.hor-c small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.hor-c.t-good { background: var(--good-soft); }
.hor-c.t-warn { background: var(--warn-soft); }
.hor-c.t-risk { background: #eef1f5; }
.hor-c.t-good strong { color: #0f5c3e; }
.hor-c.t-warn strong { color: #7a4405; }
.hor-free { color: var(--muted); }
.hor tr.hor-after-break td, .hor tr.hor-after-break th {
  border-top: 3px solid var(--line);
}

/* ================================================================== examen
 *
 * The one screen in this demo whose behaviour is not scripted: the integrity
 * monitor runs against the visitor's own browser. Styling follows that — the
 * live log is given the prominence of a result, not a footnote.
 */

/* Selection blocking is CSS rather than an event handler so dragging does not
   fight the browser on every mousemove. Inputs stay selectable. */
/* A fullscreen element does not inherit the document's scrolling. .main is
   normally scrolled by the page, so once it becomes THE fullscreen element it
   is exactly viewport-height with overflow:visible — and every question below
   the fold becomes physically unreachable. Measured: scrollHeight 2774 inside a
   1000px box, questions 4 and 5 unclickable. */
.main:fullscreen { overflow-y: auto; }
.main:-webkit-full-screen { overflow-y: auto; }

body.exam-locked { user-select: none; -webkit-user-select: none; }
body.exam-locked input, body.exam-locked textarea { user-select: text; -webkit-user-select: text; }

.exam-intro { max-width: 760px; }
.exam-rules { margin: 14px 0; padding: 0; list-style: none; }
.exam-rules li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0; font-size: 13px; line-height: 1.45;
}
.exam-tick {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 6px; background: var(--good-soft); color: #0f5c3e;
  font: 700 10px/1 var(--mono);
}
.exam-honest {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 11px 13px; border-radius: 9px;
  background: var(--warn-soft); border: 1px solid #f0d9ae; color: #7a4405;
  font-size: 12.5px; line-height: 1.5;
}
.exam-start { min-width: 200px; }

.exam-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 14px;
  background: var(--rail); color: #fff; border-radius: 11px;
}
.exam-clock { font: 700 19px/1 var(--mono); font-variant-numeric: tabular-nums; }
.exam-clock.hot { color: #ff9d8a; }
.exam-count { color: #b9c2d0; font-size: 12px; }
.exam-flags {
  margin-left: auto; padding: 4px 10px; border-radius: 7px;
  background: rgba(255,255,255,.12); color: #dbe2ec;
  font: 650 11px/1.4 var(--mono);
}
.exam-flags.hot { background: var(--risk-soft); color: #8f2416; }

.exam-paused {
  margin-bottom: 14px; padding: 15px 17px; border-radius: 11px;
  background: var(--risk-soft); border: 1px solid #eab4ab;
}
.exam-paused strong { display: block; color: #8f2416; font-size: 14px; }
.exam-paused p { margin: 5px 0 11px; color: #8f2416; font-size: 12.5px; }
.exam-questions.is-paused { opacity: .55; pointer-events: none; }

.exam-q { margin-bottom: 12px; }
.exam-qnum {
  display: block; margin-bottom: 5px; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.exam-q h3 { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; font-weight: 620; }
.exam-opts { display: flex; flex-direction: column; gap: 7px; }
.exam-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font: 400 13px/1.45 var(--font-body); cursor: pointer;
}
.exam-opt:hover { border-color: var(--accent); background: #fafbff; }
.exam-opt:disabled { cursor: not-allowed; }
.exam-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.exam-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.exam-letter {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 7px; background: #eef1f5; color: var(--muted);
  font: 700 11px/1 var(--mono);
}
.exam-opt.on .exam-letter { background: var(--accent); color: #fff; }
.exam-submit { min-width: 200px; margin: 6px 0 20px; }

.exam-log { border-color: var(--accent); }
.exam-live {
  padding: 3px 9px; border-radius: 6px;
  background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab;
  font: 700 9.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.exam-log-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.exam-log-item {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px;
}
.exam-log-time { font: 600 11px/1.3 var(--mono); color: var(--muted); }
.exam-log-what { flex: 1; min-width: 0; }
.exam-log-dur { font: 700 11px/1.3 var(--mono); color: #8f2416; }
.exam-log-item.s-open .exam-log-what { color: #8f2416; font-weight: 620; }
.exam-log-item.s-blocked .exam-log-what { color: #7a4405; }
.exam-log-none { padding: 10px 0; color: var(--muted); font-size: 12.5px; }

.exam-caps { margin-top: 14px; }
.cap-list { margin: 10px 0 12px; padding: 0; list-style: none; }
.cap-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.cap-mark {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; font: 700 11px/1 var(--mono);
}
.cap-row.yes .cap-mark { background: var(--good-soft); color: #0f5c3e; }
.cap-row.no .cap-mark { background: var(--risk-soft); color: #8f2416; }
.cap-body { min-width: 0; }
.cap-body strong { display: block; font-size: 12.5px; font-weight: 600; }
.cap-body small { display: block; margin-top: 1px; color: var(--muted); font: 500 10.5px/1.3 var(--mono); }
.cap-row.no .cap-body strong { color: #8f2416; }

@media (max-width: 620px) {
  .exam-bar { position: static; }
  .exam-flags { margin-left: 0; }
}

/* ------------------------------------------------- proctoring surface
 *
 * Drawn, not captured. The demo never calls getUserMedia or getDisplayMedia,
 * so nothing here can be a real feed -- and the SIMULADO tag says so out loud,
 * because a fake camera pane sitting next to genuinely real tab-switch
 * detection would otherwise borrow credibility it has not got.
 */

.exam-proctor { margin-bottom: 14px; }
.exam-proctor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.exam-proctor-head h3 { margin: 0; font-size: 14px; }
.exam-sim {
  padding: 3px 9px; border-radius: 999px;
  border: 1px dashed #9aa6b2; background: #f2f5f8;
  color: #4a5763; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}

.exam-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.exam-tile {
  position: relative; flex: 1 1 190px; max-width: 260px;
  border-radius: 10px; overflow: hidden; background: #161e24;
}
.exam-tile svg { display: block; width: 100%; height: auto; }

.exam-tile-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px;
  background: linear-gradient(rgba(8,12,15,.82), rgba(8,12,15,0));
  color: #fff; font-size: 11px; font-weight: 600;
}
.exam-tile-name { flex: 1; }
.exam-tile-time { font-variant-numeric: tabular-nums; opacity: .85; }
.exam-tile-note {
  position: absolute; left: 9px; bottom: 8px;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(8,12,15,.72); color: #cfe6d9; font-size: 10.5px;
}

.exam-rec {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4d; animation: examRec 1.4s ease-in-out infinite;
}
@keyframes examRec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* The tracking box drifts a little, the way a real detector's box never sits
   perfectly still. Stillness is what makes a fake feed read as a photograph. */
.exam-cam-box { animation: examTrack 5.5s ease-in-out infinite; }
@keyframes examTrack {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(2.5px, -2px); }
  65%      { transform: translate(-2px, 1.5px); }
}
.exam-scr-sweep { animation: examSweep 4.2s linear infinite; }
@keyframes examSweep {
  from { transform: translateY(-16px); }
  to   { transform: translateY(120px); }
}

.exam-proctor-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .exam-rec, .exam-cam-box, .exam-scr-sweep { animation: none; }
}


/* ------------------------------------------------- the rail scrolls, silently
 *
 * At 390px the section rail holds 1167px of tabs in a 390px box: it scrolls,
 * but three of the ten are visible and nothing says the other seven exist. A
 * control that works and cannot be discovered is the same as a broken one to
 * the person holding the phone.
 *
 * The fade is masked onto the rail's own box, so it stays pinned to the right
 * edge while the tabs slide underneath, and it is removed once there is
 * nothing further to reach.
 */
@media (max-width: 720px) {
  .rail {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    scroll-snap-type: x proximity;
  }
  .rail.rail-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rail [data-view] { scroll-snap-align: start; }
}

/* Two ways out of the exam result, side by side. */
.exam-after { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.exam-after button { flex: 1 1 auto; min-height: 42px; }

/* ------------------------------------------------- evaluation model panel
 *
 * The weighting box was two fixed fields. Renato's institute runs four
 * components on a 0-100 scale and sets them per materia, so it is a list that
 * grows and shrinks.
 */
.model-regime select { min-height: 38px; }
.model-weights { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.model-cat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--line); border-radius: 9px;
}
.model-cat-name { flex: 1 1 auto; min-width: 0; min-height: 34px; }
.model-cat-weight, .model-cat-items { flex: none; width: 62px; min-height: 34px; }
.model-cat-pct { flex: none; font-size: 12px; color: var(--muted); }
.model-cat-x {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.model-cat-x:hover:not(:disabled) { border-color: var(--risk); color: var(--risk); }
.model-cat-x:disabled { opacity: .32; cursor: default; }
.model-add { margin-bottom: 4px; }
.model-pass-note { color: var(--warn); }

@media (max-width: 620px) {
  .model-cat { flex-wrap: wrap; }
  .model-cat-name { flex: 1 1 100%; }
}

/* ========================================== professional training scenario */
[hidden] { display: none !important; }

.staff-persona {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 4px 7px 4px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.staff-persona span {
  color: var(--muted); font: 650 9.5px/1.2 var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.staff-persona select {
  min-height: 32px; border: 0; border-radius: 7px;
  background: var(--bg); color: var(--ink); padding: 5px 8px;
  font: 600 11.5px/1.2 var(--font-body);
}
.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 18px;
}
.theme-toggle:focus-visible, .staff-persona select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.demo-boundary {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 4px 8px; border: 1px dashed var(--line); border-radius: 999px;
  color: var(--muted); background: var(--bg);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.training-announcement { border-left: 4px solid var(--good); }
.training-announcement > h2 { margin-top: 10px; font-size: 18px; }
.training-announcement > p { margin: 7px 0; color: var(--muted); }
.training-announcement > small { color: var(--muted); }
.access-blocked { border-left: 4px solid var(--risk); background: var(--risk-soft); }
.access-blocked > p { margin: 8px 0 0; }

.programme-catalogue {
  display: grid; grid-template-columns: repeat(5, minmax(155px, 1fr)); gap: 10px;
}
.programme-tile {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
}
.programme-tile:hover { border-color: var(--accent); }
.programme-tile.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.programme-tile strong { font-size: 13px; line-height: 1.35; }
.programme-tile small { color: var(--accent); font-weight: 650; }
.programme-meta { margin-top: auto; color: var(--muted); font-size: 10.5px; }
.programme-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cohort-head, .professional-profile-head, .subject-run-head, .module-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.cohort-head h2 { margin: 3px 0; font-size: 18px; }
.cohort-head p { margin: 0; color: var(--muted); font-size: 12px; }
.compact-metrics { margin-top: 16px; }
.compact-metrics .metric-card > strong { font-size: 20px; }
.state-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.state-legend h2 { width: 100%; }

.subject-runs { display: grid; gap: 12px; }
.subject-run { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.subject-run-head strong, .subject-run-head small { display: block; }
.subject-run-head small { margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 9.5px; }
.run-fields, .exam-policy-grid, .communication-grid, .attendance-policy-fields {
  display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 9px; margin-top: 12px;
}
.run-fields label, .exam-policy-grid label, .communication-grid label,
.attendance-policy-fields label {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.run-fields label > span, .exam-policy-grid label > span, .communication-grid label > span,
.attendance-policy-fields label > span {
  color: var(--muted); font: 650 9px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.run-fields input, .run-fields select, .exam-policy-grid input, .exam-policy-grid select,
.communication-grid input, .communication-grid select, .communication-grid textarea,
.attendance-policy-fields input, .attendance-policy-fields select {
  width: 100%; min-width: 0; min-height: 38px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: 500 11.5px/1.3 var(--font-body);
}
.wide-field { grid-column: 1 / -1; }

.module-route, .content-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.module-card, .module-admin { min-width: 0; }
.module-card.is-completed, .module-admin.is-completed { border-top: 3px solid var(--good); }
.module-card.is-available, .module-admin.is-available { border-top: 3px solid var(--accent); }
.module-card.is-locked, .module-admin.is-locked { border-top: 3px solid var(--muted); }
.module-head { align-items: center; }
.module-head > div { flex: 1; min-width: 0; }
.module-head h2 { margin: 0; font-size: 14px; }
.module-head small { color: var(--muted); font-size: 10.5px; }
.module-index {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-weight: 750;
}
.module-progress { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; }
.content-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.content-items li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
}
.content-kind {
  display: grid; place-items: center; min-height: 26px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font: 700 8.5px/1 var(--mono);
}
.content-items strong, .content-items small { display: block; }
.content-items strong { font-size: 11.5px; }
.content-items small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.content-items .demo-boundary { font-size: 7.5px; }

.offline-centre { border-left: 3px solid var(--accent); }
.weight-grid { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 9px; }
.weight-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.weight-grid > label {
  display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.weight-grid > label span { color: var(--muted); font-size: 11px; }
.weight-grid > label input, .pass-mark-field input {
  width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); font: 700 16px/1 var(--mono);
}
.weight-grid strong, .weight-grid span { display: block; }
.weight-grid strong { font-size: 20px; }
.weight-grid span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.weight-total { margin: 10px 0 0; text-align: right; color: var(--good); font-weight: 700; }
.grade-config-form { display: grid; gap: 12px; }
.pass-mark-field { display: grid; grid-template-columns: minmax(120px, 1fr) 110px; align-items: center; gap: 10px; max-width: 340px; }
.programme-config { margin-top: 14px; }
.quiz-editor { flex-wrap: wrap; }
.quiz-editor input[type="number"] { flex: 0 0 110px; }
.module-quiz { display: grid; gap: 10px; margin-top: 14px; }
.module-quiz h3 { margin: 0; }
.quiz-question { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.quiz-question legend { padding: 0 5px; color: var(--ink); font-size: 11px; font-weight: 700; }
.quiz-choice { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 11px; }
.quiz-choice input { accent-color: var(--accent); }
.assessment-mode-row { gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.assessment-mode-row select { min-height: 36px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }

.training-table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.training-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.training-table th, .training-table td { padding: 10px 11px; border-top: 1px solid var(--line); text-align: left; font-size: 11.5px; }
.training-table thead th {
  border-top: 0; color: var(--muted); background: var(--bg);
  font: 650 9px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}

.exam-policy-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.policy-toggles, .channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; }
.switch-line { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.switch-line input { accent-color: var(--accent); }

.training-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.training-feed li, .internal-note {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
}
.training-feed strong, .internal-note strong { font-size: 11.5px; }
.training-feed p, .internal-note p { margin: 4px 0; font-size: 12.5px; }
.training-feed small, .internal-note small { color: var(--muted); font-size: 10px; }
.training-compose { display: flex; gap: 8px; margin-top: 13px; }
.training-compose input {
  flex: 1; min-width: 0; min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.ai-draft { margin: 14px 0 0; padding: 13px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 12.5px; }

.persona-context {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--card);
}
.persona-context strong { font-size: 12px; }
.persona-context > span:not(.demo-boundary) { flex: 1; color: var(--muted); font-size: 11.5px; }
.fictional-photo {
  flex: none; width: 74px; height: 88px; display: grid; place-items: end center;
  padding-bottom: 11px; overflow: hidden; border-radius: 18px 18px 12px 12px;
  color: #fff; font-weight: 750; letter-spacing: .05em;
  background:
    radial-gradient(circle at 50% 32%, #d49a73 0 17%, transparent 18%),
    radial-gradient(ellipse at 50% 107%, #445a78 0 49%, transparent 50%),
    linear-gradient(145deg, #7766dc, #283653);
}
.fictional-photo.photo-v2 {
  background:
    radial-gradient(circle at 48% 31%, #c88e68 0 17%, transparent 18%),
    radial-gradient(ellipse at 50% 107%, #6f4f70 0 49%, transparent 50%),
    linear-gradient(145deg, #27867a, #223452);
}
.fictional-photo.has-photo {
  padding: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.professional-profile-head { align-items: center; }
.professional-identity { flex: 1; min-width: 0; }
.professional-identity h2 { margin: 4px 0 2px; font-size: 20px; }
.professional-identity p { margin: 0; color: var(--muted); font-size: 12px; }
.lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lifecycle-actions button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.template-schema { overflow-wrap: anywhere; color: var(--muted); font: 600 10.5px/1.6 var(--mono); }
.attendance-records { display: grid; gap: 8px; margin-top: 14px; }
.attendance-record {
  display: grid; grid-template-columns: 100px minmax(140px, .8fr) minmax(180px, 1.4fr) auto;
  align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
}
.attendance-record > span { font: 650 10px/1.2 var(--mono); color: var(--muted); }
.attendance-record input, .attendance-record select {
  min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink);
}

:root[data-theme="dark"] .crm-table th,
:root[data-theme="dark"] .nomina-table th,
:root[data-theme="dark"] .hor .hor-day,
:root[data-theme="dark"] .comp .comp-h { background: var(--bg); }
:root[data-theme="dark"] .crm-table tbody tr:hover,
:root[data-theme="dark"] .comp-c:hover,
:root[data-theme="dark"] .comp-c:hover .gb-stick,
:root[data-theme="dark"] .exam-opt:hover,
:root[data-theme="dark"] .gb-colmenu-item:hover { background: var(--accent-soft); }
:root[data-theme="dark"] .staff-avatar { background: #2b3850; color: var(--ink); }
:root[data-theme="dark"] .tline mark { background: #695d21; color: #fff5be; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { color-scheme: dark; }

@media (max-width: 1180px) {
  .programme-catalogue { grid-template-columns: repeat(3, minmax(155px, 1fr)); }
  .module-route, .content-admin-grid { grid-template-columns: 1fr; }
  .run-fields { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (max-width: 900px) {
  .rail nav { overflow-y: visible; }
  .programme-catalogue { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .run-fields, .exam-policy-grid, .communication-grid, .attendance-policy-fields { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 640px) {
  .staff-persona { width: 100%; justify-content: space-between; }
  .staff-persona select { flex: 1; }
  .programme-catalogue { grid-template-columns: 1fr; }
  .cohort-head, .professional-profile-head, .subject-run-head { flex-wrap: wrap; }
  .run-fields, .exam-policy-grid, .communication-grid, .attendance-policy-fields { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .weight-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .content-items li { grid-template-columns: 38px minmax(0, 1fr); }
  .content-items .demo-boundary { grid-column: 2; }
  .training-compose { flex-direction: column; }
  .attendance-record { grid-template-columns: 1fr; }
}