/* AcervoMed — identidade "Caderno clínico".
   Todas as cores saem daqui: o JS escreve var(--x) inline, nunca hex.
   É o que faz o botão de tema trocar a interface inteira sem redesenhar nada. */

:root {
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --ink: #1B1815;
  --muted: #8A8077;
  --muted-2: #4A423B;
  --faint: #A89C90;
  --line: #E7DFD4;
  --line-2: #E0D7CA;
  --line-3: #F0EAE1;
  --wash: #EDE6DA;

  /* Cores de seção: tinta impressa, mesma saturação, matiz diferente. */
  --k1: #14514A; --k1-t: #E6EEEC; --k1-blk: #14514A;  /* Acervo / Resumo   */
  --k2: #4A5A2C; --k2-t: #EDF0E4; --k2-blk: #4A5A2C;  /* Flashcards        */
  --k3: #5A3C56; --k3-t: #EEE9ED; --k3-blk: #5A3C56;  /* Questões / Prova  */
  --k4: #8A5A2E; --k4-t: #F4EDE4; --k4-blk: #8A5A2E;  /* Simulados         */
  --k5: #A03A2B; --k5-t: #F7EAE7; --k5-blk: #A03A2B;  /* OSCE              */
  --k6: #3B4A63; --k6-t: #E9ECF1; --k6-blk: #3B4A63;  /* Assistente IA     */

  --tile-ink: #FBF8F3;
  --flame: #A03A2B;
  --flame-bg: #F7EFE6;
  --flame-line: #E0CFC0;

  --ok: #4A5A2C;   --ok-bg: #F1F4EA;
  --warn: #8A5A2E; --warn-bg: #F7F0E6;
  --err: #A03A2B;  --err-bg: #FBF0EC;

  --radius: 8px;
  --radius-sm: 6px;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* Tema escuro: mesma marca, mesmas famílias de cor levantadas em luminosidade.
   Preto quente — papel escurece para marrom, não para ardósia. Só entra no
   clique do botão; nada de prefers-color-scheme. */
:root[data-tema="escuro"] {
  --bg: #16140F;
  --surface: #1E1B15;
  --ink: #F2EDE3;
  --muted: #91887A;
  --muted-2: #CFC6B7;
  --faint: #857C6F;
  --line: #302B22;
  --line-2: #3A342A;
  --line-3: #262218;
  --wash: #272319;

  --k1: #4FA396; --k1-t: #1B2A27; --k1-blk: #1B4A43;
  --k2: #8CA35C; --k2-t: #22271A; --k2-blk: #3D4F2A;
  --k3: #A886A2; --k3-t: #262025; --k3-blk: #4B3848;
  --k4: #C89158; --k4-t: #29231A; --k4-blk: #6B4624;
  --k5: #D96F52; --k5-t: #2A1D18; --k5-blk: #6E2E22;
  --k6: #7E93B5; --k6-t: #1D222B; --k6-blk: #33435C;

  --tile-ink: #F2EDE3;
  --flame: #D96F52;
  --flame-bg: #2A1D16;
  --flame-line: #4A2E23;

  --ok: #8CA35C;   --ok-bg: #212418;
  --warn: #C89158; --warn-bg: #272018;
  --err: #D96F52;  --err-bg: #2A1D16;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}

svg { display: block; }
a { color: var(--k1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.serif { font-family: var(--font-display); }

/* ------------------------------------------------------------- estrutura */

.app { display: flex; min-height: 100vh; background: var(--bg); }

.sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width .18s ease, flex-basis .18s ease;
}
.app.collapsed .sidebar { width: 90px; flex-basis: 90px; }
.app.collapsed .sidebar .label { display: none; }
.app.collapsed .sidebar .brand,
.app.collapsed .sidebar .nav-item,
.app.collapsed .sidebar .side-user { justify-content: center; }

.brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 18px; }
.brand-mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.brand-name b { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--k1); }
.brand-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; border: 0; cursor: pointer; background: transparent;
  border-radius: 7px; padding: 9px 13px;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted-2);
  text-align: left; white-space: nowrap;
}
.nav-item:hover { background: var(--line-3); }
.nav-item.active { background: var(--wash); font-weight: 600; color: var(--ink); }
.nav-item svg { flex: 0 0 19px; }
.nav-collapse { margin: 14px 12px 0; color: var(--muted); font-size: 13px; }

.side-foot { margin-top: auto; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.side-user {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: 1px solid var(--line); cursor: pointer; background: var(--surface); color: var(--ink);
  border-radius: 7px; padding: 8px 12px 8px 8px; font-family: inherit; text-align: left;
}
.side-user:hover { border-color: var(--line-2); }
.avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm);
  background: var(--wash); color: var(--k1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.side-user-name {
  font-weight: 600; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.badge {
  font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}

.main { flex: 1; min-width: 0; background: var(--bg); }

.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1120px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 20px; }
.search {
  display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 8px 14px;
}
.search input {
  border: 0; background: transparent; outline: none; width: 100%;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.search input::placeholder { color: var(--faint); }
.topbar-note { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar-note b { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }

.container { max-width: 1120px; margin: 0 auto; padding: 28px 40px 80px; display: flex; flex-direction: column; gap: 36px; }
.container.tight { gap: 22px; }

.page-title { margin: 0; font-size: 29px; font-weight: 600; letter-spacing: -.015em; }
.page-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section h2 { margin: 0; font-size: 21px; }
.section h2 + p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.divider { height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- peças */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.fit { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px;
}
.card.click { cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; color: var(--ink); width: 100%; }
.card.click:hover { border-color: var(--line-2); }
.card.col { display: flex; flex-direction: column; gap: 13px; min-height: 178px; }

.btn {
  border: 1px solid var(--k1); cursor: pointer; border-radius: var(--radius-sm); padding: 9px 18px;
  font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap;
  background: var(--k1); color: var(--bg);
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }
.btn.wide { width: 100%; }
.btn.sm { padding: 7px 14px; font-size: 12.5px; }
.btn.danger { background: var(--surface); color: var(--err); border-color: var(--err); }
.btn.icon-only { flex: 0 0 auto; padding: 7px; display: flex; }

.pill {
  font-size: 11px; font-weight: 700; border-radius: 5px;
  padding: 4px 9px; white-space: nowrap; letter-spacing: .01em;
}
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; white-space: nowrap;
}

.bar { height: 3px; background: var(--wash); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 3px; background: var(--k1); }

.icon-box {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
}

.num { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }

.tile {
  position: relative; border-radius: var(--radius); padding: 18px; cursor: pointer;
  color: var(--tile-ink); min-height: 150px; display: flex; flex-direction: column;
  border: 0; font-family: inherit; text-align: left; width: 100%;
}
.tile:hover { filter: brightness(1.1); }
.tile .glyph { opacity: .75; }
.tile .num { font-size: 32px; line-height: 1; }
.tile .name { font-weight: 600; font-size: 14px; margin-top: 4px; }
.tile .note { font-size: 11.5px; opacity: .68; margin-top: 1px; }

.strip {
  display: flex; align-items: center; gap: 14px; border-radius: var(--radius);
  padding: 15px 17px; cursor: pointer; border: 1px solid var(--line); width: 100%;
  background: var(--surface); font-family: inherit; font-size: inherit; color: var(--ink); text-align: left;
}
.strip:hover { border-color: var(--line-2); }
.strip .glyph { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.strip b { font-weight: 600; font-size: 14px; }
.strip small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-3); cursor: pointer; background: var(--surface);
  border-left: 0; border-right: 0; border-top: 0; width: 100%; font-family: inherit; text-align: left; color: var(--ink);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--line-3); }
.row-title { font-weight: 600; font-size: 15px; }
.row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row-date { flex: 0 0 92px; font-size: 12px; color: var(--muted); white-space: nowrap; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.seg { display: flex; gap: 2px; background: var(--wash); border-radius: var(--radius-sm); padding: 3px; }
.seg button { border: 0; cursor: pointer; background: transparent; border-radius: 4px; padding: 6px 10px; display: flex; }
.seg button.on { background: var(--surface); }

.empty {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 52px 32px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.empty .ring {
  width: 68px; height: 68px; border-radius: var(--radius); background: var(--k1-t);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.empty h3 { margin: 0; font-size: 19px; }
.empty p { font-size: 13.5px; color: var(--muted); margin: 7px 0 0; max-width: 46ch; }

.banner {
  border-radius: var(--radius); padding: 24px; color: var(--tile-ink);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--k6-blk);
}
.banner .glyph {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--flame-line); background: var(--flame-bg); color: var(--flame);
  border-radius: var(--radius-sm); padding: 5px 11px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.chip:hover { border-color: var(--flame); }

/* ---------------------------------------------------------------- login */

.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.auth-card h1 { margin: 16px 0 0; font-size: 25px; }
.auth-card p.lead { margin: 5px 0 22px; font-size: 13.5px; color: var(--muted); }
.auth-tabs { display: flex; gap: 2px; background: var(--wash); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 20px; }
.auth-tabs button {
  flex: 1; border: 0; cursor: pointer; background: transparent; border-radius: 4px;
  padding: 8px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
}
.auth-tabs button.on { background: var(--surface); color: var(--ink); }

/* --------------------------------------------------------------- formulários */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 13px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); outline: none; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--k1); }
.field input::placeholder { color: var(--faint); }
.hint { font-size: 11.5px; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.msg { border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.msg.err { background: var(--err-bg); color: var(--err); }
.msg.ok { background: var(--ok-bg); color: var(--ok); }

.drop {
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 20px; text-align: center;
  cursor: pointer; background: var(--bg); font-size: 13px; color: var(--muted-2);
}
.drop:hover, .drop.over { border-color: var(--k1); }
.drop b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }

.admin-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }

/* --------------------------------------------- linha com painel pessoal */

.row-wrap { border-bottom: 1px solid var(--line-3); }
.row-wrap:last-child { border-bottom: 0; }
.row-wrap .row { border-bottom: 0; }
.row-main {
  display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: inherit; font-size: inherit; color: var(--ink); text-align: left;
}
.row-toggle { border: 0; background: transparent; cursor: pointer; padding: 6px; display: flex; border-radius: 4px; }
.row-toggle:hover { background: var(--wash); }
.row-toggle.on svg { transform: rotate(180deg); }

.row-panel { padding: 0 18px 15px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.row-panel-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nota {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px;
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
  outline: none; width: 100%; resize: vertical; min-height: 54px;
}
.nota:focus { border-color: var(--k1); }
.nota::placeholder { color: var(--faint); }

.toggle {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--muted-2); border-radius: var(--radius-sm);
  padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.toggle.on { border-color: var(--k1); color: var(--k1); background: var(--k1-t); }

/* ------------------------------------------------------- plano de estudo */

.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.plan-form-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-bottom: 16px; }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cal-head b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cal-head b::first-letter { text-transform: uppercase; } /* só o mês, senão vira "Setembro De 2026" */

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--line-3); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.cal-day.empty-day { background: transparent; border-color: transparent; }
.cal-day .n { font-size: 12.5px; font-weight: 600; }
.cal-day .marks { display: flex; align-items: center; gap: 3px; height: 13px; }
.cal-day.today { border-color: var(--k1); }
.cal-day.today .n { color: var(--k1); font-weight: 700; }
.cal-day.focus { background: var(--flame-bg); border-color: var(--flame-line); }

.dot { width: 5px; height: 5px; border-radius: 999px; display: block; }
.dot.aula { background: var(--k1); }
.dot.prova { background: var(--k5); }

.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 11.5px; color: var(--muted-2); }
.cal-legend span { display: flex; align-items: center; gap: 6px; }

.plan-list { display: flex; flex-direction: column; }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-3); }
.plan-item:first-child { border-top: 0; }
.plan-item .row-title { font-size: 14px; }
.grade-dia + .grade-dia { margin-top: 12px; }
.grade-nome { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.grade-hora {
  flex: 0 0 46px; font-size: 12px; font-weight: 700; color: var(--muted-2);
  background: var(--wash); border-radius: 4px; padding: 3px 0; text-align: center;
}

/* ------------------------------------------------------- modal, visor, quiz */

/* <dialog> nativo: backdrop, Esc e foco preso vêm de graça. Isto aqui é só a
   pintura — é o que substitui o alert/confirm com a cara do navegador. */
.modal {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 14px;
  padding: 0; width: min(560px, calc(100vw - 32px)); max-width: none;
  max-height: min(86vh, 860px); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.modal::backdrop { background: rgba(20, 16, 12, .48); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }

.modal-form { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.modal-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line-3);
}
.modal-head h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.modal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.modal-x {
  margin-left: auto; flex: 0 0 auto; border: 0; background: transparent;
  cursor: pointer; padding: 6px; border-radius: var(--radius-sm); display: flex;
}
.modal-x:hover { background: var(--wash); }
.modal-body { flex: 1 1 auto; padding: 18px 20px; overflow: auto; min-height: 0; }
.modal-texto { margin: 0; font-size: 14px; color: var(--muted-2); line-height: 1.55; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line-3); background: var(--bg);
}

/* Visor: o material aparece aqui dentro em vez de virar aba nova. O PDF quem
   desenha é o próprio navegador — nada de biblioteca. */
.modal-visor, .modal-quiz { width: min(1000px, calc(100vw - 32px)); height: min(86vh, 900px); max-height: none; }
.modal-visor .modal-form, .modal-quiz .modal-form { height: 100%; }
.modal-visor .modal-body { padding: 0; display: flex; }
.visor { flex: 1; width: 100%; border: 0; background: var(--wash); }
.visor-md {
  flex: 1; overflow: auto; padding: 26px 34px 40px;
  font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere;
}
.visor-md > :first-child { margin-top: 0; }
.visor-md h3 { font-size: 23px; margin: 26px 0 10px; }
.visor-md h4 { font-size: 18px; margin: 24px 0 8px; }
.visor-md h5, .visor-md h6 { font-size: 15px; margin: 20px 0 6px; }
.visor-md p { margin: 0 0 11px; max-width: 74ch; }
.visor-md ul, .visor-md ol { margin: 0 0 14px; padding-left: 22px; max-width: 74ch; }
.visor-md li { margin-bottom: 5px; }
.visor-md code { background: var(--wash); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.visor-vazio { flex: 1; display: grid; place-items: center; color: var(--muted); }

/* Margem negativa para a barra cobrir o respiro do modal: sem isso a questão
   aparece por baixo dela na hora de rolar. */
.quiz-placar { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 18px 0 12px; margin-top: -18px; }
.quiz-placar-linha { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.quiz-placar b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }

.quiz-origem { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.quiz-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.quiz-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); }
.quiz-enunciado { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.quiz-enunciado b { color: var(--k3); margin-right: 4px; }
.quiz-alts { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.quiz-alt {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  font-family: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 10px 13px; cursor: pointer;
}
.quiz-alt:hover:enabled { border-color: var(--k3); background: var(--k3-t); }
.quiz-alt b {
  flex: 0 0 22px; height: 22px; border-radius: 999px; background: var(--wash); color: var(--muted-2);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px;
}
.quiz-alt:disabled { cursor: default; }
.quiz-alt.certa { border-color: var(--ok); background: var(--ok-bg); }
.quiz-alt.certa b { background: var(--ok); color: var(--bg); }
.quiz-alt.errada { border-color: var(--err); background: var(--err-bg); }
.quiz-alt.errada b { background: var(--err); color: var(--bg); }
.quiz-alt.apagada { opacity: .5; }
.quiz-fb { margin-top: 12px; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; line-height: 1.55; }
.quiz-fb b { display: block; margin-bottom: 3px; }
.quiz-fb.ok { background: var(--ok-bg); color: var(--ok); }
.quiz-fb.err { background: var(--err-bg); color: var(--err); }
.quiz-fb.esperada { background: var(--k3-t); color: var(--ink); }
.quiz-fb.esperada b { color: var(--k3); }
.quiz-texto { display: block; white-space: pre-line; }
.quiz-resposta { margin-top: 12px; border-left: 3px solid var(--line); padding: 4px 0 4px 12px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); }
.quiz-avaliar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Simulado: marcada é só "foi essa que eu respondi" — sem dizer se acertou. */
.quiz-alt.marcada { border-color: var(--k3); background: var(--k3-t); }
.quiz-alt.marcada b { background: var(--k3); color: var(--bg); }
.quiz-relogio { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted-2); }
.quiz-relogio.acabando { color: var(--err); }
.quiz-nota { margin-top: 16px; background: var(--k3-t); color: var(--k3); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; }
.quiz-nota b { font-family: var(--font-display); font-size: 17px; }

/* Checklist da estação OSCE. */
.lista-check { display: flex; flex-direction: column; gap: 7px; }
.check-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 13px;
}
.check-item:hover { border-color: var(--k5); }
.check-item .caixa {
  flex: 0 0 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.check-item.on { border-color: var(--ok); background: var(--ok-bg); }
.check-item.on .caixa { background: var(--ok); border-color: var(--ok); }
.check-texto { flex: 1; min-width: 0; }

/* Conversa com o assistente. */
.conversa-campo { display: flex; gap: 10px; align-items: center; }
.conversa-campo input {
  flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 13px; font: inherit; background: var(--bg); color: var(--ink);
}
.conversa-campo input:focus { border-color: var(--k6); outline: none; }
.conversa { display: flex; flex-direction: column; gap: 14px; }
.troca { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.troca-pergunta { display: flex; gap: 9px; align-items: flex-start; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.troca-pergunta svg { flex: 0 0 15px; margin-top: 3px; }
.troca-resposta { font-size: 14px; line-height: 1.65; }
.troca-resposta > :first-child { margin-top: 0; }
.troca-resposta h3, .troca-resposta h4, .troca-resposta h5 { font-size: 16px; margin: 16px 0 6px; }
.troca-resposta p { margin: 0 0 10px; }
.troca-resposta ul, .troca-resposta ol { margin: 0 0 10px; padding-left: 20px; }
.troca-fontes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-3); }
.troca-fontes .chip { border-color: var(--line-2); }
.troca-fontes .chip:hover { border-color: var(--k6); }

/* Deck de flashcards: um cartão por vez, o que errou volta para o fim da fila. */
.modal-deck { width: min(680px, calc(100vw - 32px)); }
.modal-deck .modal-body { display: flex; flex-direction: column; }
.deck-conta { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.deck-conta + .bar { margin-bottom: 20px; }
.cartao {
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg);
  padding: 26px 24px; min-height: 190px; display: flex; flex-direction: column; gap: 10px;
}
.cartao-texto { font-family: var(--font-display); font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.cartao-verso { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cartao-verso .cartao-texto { font-family: var(--font); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.deck-acoes { display: flex; gap: 8px; margin-top: 18px; }
.deck-acoes .btn { flex: 1; }
.deck-fim { text-align: center; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; }
.deck-fim .ring {
  width: 66px; height: 66px; border-radius: 999px; background: var(--k2-t);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.deck-fim h3 { margin: 0; font-size: 19px; }
.deck-fim p { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------- celular */

@media (max-width: 980px) {
  .admin-grid, .plan-grid { grid-template-columns: 1fr; }
  .topbar-in, .container { padding-left: 20px; padding-right: 20px; }
  .container { padding-bottom: 110px; }

  /* A barra lateral vira barra de baixo. Antes ela era escondida no celular e
     levava a navegação inteira junto. */
  .app { flex-direction: column; }
  .app .sidebar {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    width: auto; flex-basis: auto; height: auto;
    background: var(--surface);
    flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app .sidebar .brand, .app .sidebar .nav-collapse { display: none; }
  .app .sidebar .nav { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; padding: 6px; gap: 2px; scrollbar-width: none; }
  .app .sidebar .nav::-webkit-scrollbar { display: none; }
  .app .sidebar .nav-item { flex-direction: column; gap: 4px; width: auto; padding: 7px 12px; font-size: 10px; }
  .app .sidebar .nav-item .label { display: block; }
  .app .sidebar .side-foot { margin: 0; padding: 6px 10px 6px 0; flex-direction: row; align-items: center; gap: 4px; }
  .app .sidebar .side-foot .nav-item .label { display: none; }
  .app .sidebar .side-user { width: auto; padding: 5px; }
  .app .sidebar .side-user .label { display: none; }
}

@media (max-width: 600px) {
  .row-date { display: none; }
  .field-row { grid-template-columns: 1fr; }
  /* No celular o modal ocupa a tela: PDF em 340px de largura não se lê. */
  .modal, .modal-visor, .modal-quiz { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .modal-foot .btn { flex: 1; }
}