/* ═══════════════════════════════════════════════════════════════
   LMS L1 — content library (/lms/library): topics, chapters, detail
   drawer, uploads. Theme tokens only, so both themes follow.
   ═══════════════════════════════════════════════════════════════ */
.lib-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.lib-filters { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.lib-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.lib-filters .wo-select { width: 100%; box-sizing: border-box; text-transform: none; letter-spacing: 0; font-weight: 400; }
.lib-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lib-tabs { display: flex; gap: 4px; background: var(--gray-100); padding: 4px; border-radius: 10px; width: fit-content; max-width: 100%; }
.lib-tab { padding: 7px 14px; font: inherit; font-size: 12px; font-weight: 500; color: var(--gray-500); border: none; background: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lib-tab.active { background: var(--white); color: var(--blue-800); font-weight: 600; box-shadow: var(--shadow-sm); }
.lib-tab.active i { color: var(--gold-400); }
.lib-tab__count { font-size: 11px; color: var(--gray-400); }

.lib-list { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; overflow: hidden; }
.lib-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: none; border-bottom: 1px solid var(--gray-100); cursor: pointer; background: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.lib-row:last-child { border-bottom: none; }
.lib-row:hover, .lib-row.is-selected { background: var(--blue-50); }
.lib-row:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.lib-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-100); color: var(--blue-700); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.lib-icon--Video { background: var(--gold-100); color: var(--gold-600); }
.lib-icon--Pdf { background: var(--red-100); color: var(--red-500); }
.lib-icon--Presentation { background: var(--orange-100); color: var(--orange-500); }
.lib-icon--Document { background: var(--blue-100); color: var(--blue-600); }
.lib-icon--Text { background: var(--gray-100); color: var(--gray-600); }
.lib-icon--Image { background: var(--green-100); color: var(--green-500); }
.lib-icon--chapter { background: var(--purple-100); color: var(--purple-500); }
.lib-row__title { font-size: 13px; font-weight: 600; color: var(--gray-800); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lib-row__meta { font-size: 11.5px; color: var(--gray-400); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.lib-row__meta i { font-size: 13px; vertical-align: -2px; }
.lib-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lib-tag { font-size: 10.5px; color: var(--gray-500); background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 999px; padding: 0 7px; }
.lib-empty { padding: 36px 18px; text-align: center; color: var(--gray-500); font-size: 13px; }
.lib-empty i { font-size: 34px; color: var(--gray-300); display: block; margin-bottom: 8px; }

/* Owner / status pills */
.lib-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.lib-pill--company { background: var(--blue-100); color: var(--blue-700); }
.lib-pill--mine { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-300); }
.lib-pill--owner { background: var(--gray-50); color: var(--gray-500); border-color: var(--gray-100); font-weight: 600; }
.lib-pill--published { background: var(--green-100); color: var(--green-500); border-color: var(--green-border); }
.lib-pill--ready { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.lib-pill--processing { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-300); }
.lib-pill--failed { background: var(--red-100); color: var(--red-500); border-color: var(--red-border); }
.lib-pill--muted { background: var(--gray-50); color: var(--gray-500); border-color: var(--gray-200); }

/* Detail drawer */
.lib-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 41, .45); z-index: 1000; display: flex; justify-content: flex-end; }
.lib-drawer { background: var(--white); width: min(760px, 100vw); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.lib-drawer__head { background: var(--navy-800); padding: 14px 18px; display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.lib-drawer__head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.lib-drawer__head .sub { font-size: 11.5px; color: rgba(255, 255, 255, .72); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lib-drawer__head .ba-modal__close { background: rgba(255, 255, 255, .12); margin-left: auto; flex-shrink: 0; }
.lib-drawer__head .ba-modal__close i { color: #fff; }
.lib-drawer__body { padding: 16px 18px 24px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
/* The player can be tall (a PDF): the sections keep their height and the body scrolls. */
.lib-drawer__body > * { flex-shrink: 0; }
.lib-drawer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-section-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
/* The player stays dark in both themes (video letterbox); --navy-900 is dark in both. */
.lib-player { background: var(--navy-900); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; position: relative; }
.lib-player video { width: 100%; height: 100%; background: #000; display: block; }
.lib-player--doc { aspect-ratio: auto; height: min(70vh, 640px); background: var(--gray-100); }
.lib-player--doc iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.lib-player--img { aspect-ratio: auto; background: var(--gray-50); border: 1px solid var(--gray-100); padding: 8px; }
.lib-player--img img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.lib-player__state { text-align: center; padding: 24px; font-size: 13px; color: var(--gray-200); }
:root[data-theme="dark"] .lib-player__state { color: var(--gray-700); }
.lib-player__state i { font-size: 30px; display: block; margin-bottom: 8px; color: var(--gold-400); }
.lib-player__line { display: block; line-height: 1.5; }
.lib-player__line + .lib-player__line { margin-top: 2px; }
.lib-player--doc .lib-player__state b.lib-player__line { color: var(--gray-800); font-size: 14px; }
.lib-player--doc .lib-player__state, .lib-player--img .lib-player__state { color: var(--gray-500); }
.lib-player--doc .lib-player__state i, .lib-player--img .lib-player__state i { color: var(--gold-500); }
.lib-preview-note { font-size: 11.5px; color: var(--gold-600); display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.lib-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lib-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); padding: 8px 10px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.lib-table td { padding: 9px 10px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
.lib-table tr:last-child td { border-bottom: none; }
.lib-table .right { text-align: right; white-space: nowrap; }
.lib-table .right .comms-btn { margin-left: 4px; }
.lib-card { border: 1px solid var(--gray-100); border-radius: 12px; overflow-x: auto; background: var(--white); }
.lib-muted { font-size: 12px; color: var(--gray-500); }
.lib-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--gray-600); cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: normal; }
.lib-switch input { accent-color: var(--blue-600); }

/* Upload */
.lib-upload { display: flex; flex-direction: column; gap: 8px; }
.lib-upload__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-progress { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.lib-progress > div { height: 100%; background: var(--blue-600); border-radius: 999px; transition: width .25s; }
.lib-progress--processing > div { background: var(--gold-400); }
.lib-upload__label { font-size: 12px; color: var(--gray-600); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lib-upload__label b { color: var(--gray-800); }

/* Editors */
.lib-form { display: flex; flex-direction: column; gap: 12px; }
.lib-form label { display: flex; flex-direction: column; gap: 4px; text-transform: none; letter-spacing: normal; }
.lib-form .lbl { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.lib-form .wo-select, .lib-form .wo-textarea { width: 100%; box-sizing: border-box; }
.lib-form .lib-check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--gray-700); }
.lib-picker { border: 1px solid var(--gray-100); border-radius: 10px; max-height: 220px; overflow-y: auto; }
.lib-pick { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; color: var(--gray-700); }
.lib-pick:last-child { border-bottom: none; }
.lib-pick .lib-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 7px; }
.lib-pick__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-order-n { width: 22px; text-align: center; font-weight: 700; color: var(--gray-400); font-size: 12px; }
.lib-icon-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib-icon-btn:hover:not(:disabled) { color: var(--blue-700); border-color: var(--blue-300); }
.lib-icon-btn:disabled { opacity: .4; cursor: default; }

@media (max-width: 900px) {
    .lib-layout { grid-template-columns: 1fr; }
    .lib-filters { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 560px) {
    .lib-row { grid-template-columns: 34px minmax(0, 1fr); }
    .lib-row__side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .lib-icon { width: 34px; height: 34px; font-size: 16px; }
    .lib-drawer__body { padding: 12px; }
}

/* ═════════════════ L4: quizzes (library icon, quiz editor, quiz report) ═════════════════ */
.lib-icon--Quiz { background: var(--teal-100); color: var(--teal-500); }

.qze { display: flex; flex-direction: column; gap: 14px; }
.qze-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.qze-head .lib-icon { width: 42px; height: 42px; font-size: 22px; }
.qze-head__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qze-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qze-head__title h1 { font: 400 24px/1.2 var(--font-display); color: var(--blue-900); margin: 0; overflow-wrap: anywhere; }
.qze-head__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--gray-600); }
.qze-head__meta span { display: inline-flex; gap: 5px; align-items: center; }
.qze-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qze-dirty { color: var(--gold-700); font-weight: 600; }
.qze-saved i { color: var(--green-500); }

.qze-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.qze-bank { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qze-bank__head { display: flex; align-items: center; gap: 8px; }
.qze-bank__head h2, .qze-rules h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 0; color: var(--gray-900); }
.qze-rules { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.qze-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.qze-field .lbl, .qze-opts legend.lbl { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.qze-field .lib-muted { font-size: 12px; }
.qze-inline { display: flex; align-items: center; gap: 12px; }
.qze-inline input[type=number] { max-width: 110px; }
.qze-note { display: flex; gap: 6px; font-size: 12px; line-height: 1.4; }
.qze-count { align-self: flex-end; font-size: 11px; color: var(--gray-400); font-variant-numeric: tabular-nums; }

.qze-q { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.qze-q--open { border-color: var(--gold-200); }
.qze-q__head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; }
.qze-q__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 8px; text-align: left; cursor: pointer;
  font: 13.5px var(--font-body); color: var(--gray-900); border-radius: var(--r-sm); }
.qze-q__toggle:hover { background: var(--gray-50); }
.qze-q__toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.qze-q__num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--navy-900); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.qze-q__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qze-q__warn { display: inline-flex; gap: 3px; align-items: center; color: var(--orange-500); font-size: 12px; font-weight: 700; }
.qze-q__ok { color: var(--green-500); }
.qze-q__tools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.qze-q__confirm { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--red-600); }
.qze-q__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; border-top: 1px solid var(--gray-100); }
.qze-row { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 10px; }
.qze-field--type { min-width: 220px; }
.qze-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qze-opts legend { padding: 0; margin-bottom: 4px; }
.qze-opt { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-md); border: 1px solid transparent; }
.qze-opt--correct { background: var(--green-100); border-color: var(--green-border); }
.qze-opt__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; flex: none; cursor: pointer; }
.qze-opt__mark input { width: 17px; height: 17px; accent-color: var(--green-500); cursor: pointer; }
.qze-opt .wo-select { flex: 1; min-width: 0; }
.qze-opt .wo-select[readonly] { background: var(--gray-50); }
.qze-opts__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qze-issues { list-style: none; margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--orange-100); color: var(--gray-800); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.qze-issues i { color: var(--orange-500); margin-right: 5px; }
.qze-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--gray-300); border-radius: var(--r-md); background: var(--gray-50); }
.qze-preview { max-width: 720px; width: 96vw; }
.qze-preview:focus { outline: none; }

/* builder / Inscritos / report */
.crs-quiz-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; text-decoration: none; }
.crs-quiz-cell { display: flex; flex-direction: column; gap: 3px; min-width: 128px; }
.crs-quiz-cell__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.crs-quiz-cell .lib-muted { font-size: 11.5px; }
.crs-table-scroll { overflow-x: auto; }
.qzr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.qzr-kpi { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.qzr-kpi b { display: block; font-size: 22px; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.qzr-kpi span { font-size: 12px; color: var(--gray-500); }
.qzr-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--gray-100); overflow: hidden; min-width: 90px; }
.qzr-bar > div { position: absolute; inset: 0 auto 0 0; background: var(--green-500); border-radius: var(--r-pill); }
.qzr-bar--low > div { background: var(--red-500); }
.qzr-bar--mid > div { background: var(--gold-500); }
.qzr-q { max-width: 520px; overflow-wrap: anywhere; }
.qzr-pct { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .qze-layout { grid-template-columns: minmax(0, 1fr); }
  .qze-rules { position: static; order: -1; }
}
@media (max-width: 560px) {
  .qze-head__actions { width: 100%; }
  .qze-head__actions > * { flex: 1 1 auto; justify-content: center; }
  .qze-q__preview { white-space: normal; }
  .qze-q__head { flex-wrap: wrap; }
}
.qze .lib-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--gray-700); cursor: pointer; }
.qze-field .lib-muted, .qze .lib-check, .qze-opts .lib-muted, .qze-field .qze-count { text-transform: none; letter-spacing: normal; font-weight: 400; }
.qze-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qze-fieldset:disabled .qze-q__body, .qze-fieldset:disabled .qze-rules, .qze-fieldset:disabled .qze-add { opacity: .75; }