/* ═══════════════════════════════════════════════════════════════
   LMS L2 — courses (/lms/courses) and the course builder
   (/lms/courses/{id}). Builds on lms-library.css (lib-pill, lib-icon,
   lib-tabs, lib-table…). Theme tokens only, so both themes follow.
   ═══════════════════════════════════════════════════════════════ */

/* ── List ── */
.crs-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.crs-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.crs-toolbar .wo-select { min-width: 190px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.crs-toolbar .crs-search { min-width: 260px; flex: 1; max-width: 420px; }
.crs-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(170px, auto) 150px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--gray-100); color: inherit; text-decoration: none; }
.crs-row:last-child { border-bottom: none; }
.crs-row:hover { background: var(--blue-50); }
.crs-row:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.crs-cover { width: 56px; height: 42px; border-radius: 9px; background: var(--purple-100); color: var(--purple-500); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; flex-shrink: 0; }
.crs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crs-row__title { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.crs-row__sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-row__meta { font-size: 11.5px; color: var(--gray-400); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crs-pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.crs-chip { font-size: 10.5px; font-weight: 600; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.crs-stats { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--gray-600); }
.crs-stats b { color: var(--gray-800); }
.crs-bar { height: 6px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.crs-bar > div { height: 100%; background: var(--green-500); border-radius: 999px; }

/* ── Builder header ── */
.crs-head { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 16px 18px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.crs-head__main { flex: 1; min-width: 260px; }
.crs-head__title { font-size: 19px; font-weight: 700; color: var(--gray-900); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crs-head__sub { font-size: 13px; color: var(--gray-500); margin-top: 3px; }
.crs-head__meta { font-size: 12px; color: var(--gray-500); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.crs-head__meta i { font-size: 14px; vertical-align: -2px; color: var(--gray-400); }
.crs-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crs-readonly { font-size: 12px; font-weight: 600; color: var(--gold-600); background: var(--gold-100); border: 1px solid var(--gold-300); border-radius: 999px; padding: 2px 10px; display: inline-flex; gap: 5px; align-items: center; }

/* Banners: chapter changed, pending changes, publish errors */
.crs-banner { border-radius: 12px; padding: 11px 14px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid; }
.crs-banner > i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.crs-banner ul { margin: 4px 0 0; padding-left: 18px; }
.crs-banner li { margin: 2px 0; }
.crs-banner--chapter { background: var(--gold-100); border-color: var(--gold-300); color: var(--gray-800); }
.crs-banner--chapter > i { color: var(--gold-600); }
.crs-banner--changes { background: var(--blue-50); border-color: var(--blue-100); color: var(--gray-800); }
.crs-banner--changes > i { color: var(--blue-600); }
.crs-banner--errors { background: var(--red-100); border-color: var(--red-border); color: var(--gray-800); }
.crs-banner--errors > i { color: var(--red-500); }
.crs-banner--ok { background: var(--green-100); border-color: var(--green-border); color: var(--gray-800); }
.crs-banner--ok > i { color: var(--green-500); }
.crs-banner b { color: var(--gray-900); }

/* ── Content tab ── */
.crs-builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.crs-builder--readonly { grid-template-columns: minmax(0, 1fr); }
.crs-modules { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.crs-module { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; overflow: hidden; }
.crs-module__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 11px 14px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.crs-module__n { width: 26px; height: 26px; border-radius: 8px; background: var(--navy-800); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crs-module__title { font-size: 14px; font-weight: 700; color: var(--gray-800); flex: 1; min-width: 140px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crs-module__title input { flex: 1; min-width: 160px; }
.crs-module__tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crs-module__empty { padding: 14px; font-size: 12.5px; color: var(--gray-500); }
.crs-item { border-bottom: 1px solid var(--gray-100); }
.crs-item:last-child { border-bottom: none; }
.crs-item__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; }
.crs-item .lib-icon { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
.crs-item__title { font-size: 13px; font-weight: 600; color: var(--gray-800); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crs-item__meta { font-size: 11.5px; color: var(--gray-400); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 3px 10px; }
.crs-item__tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.crs-item__tools .wo-select { padding: 4px 8px; font-size: 12px; min-width: 0; width: 150px; }
.crs-lessons { padding: 0 14px 9px 58px; display: flex; flex-direction: column; gap: 2px; }
.crs-lesson { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--gray-700); padding: 4px 8px; border-left: 2px solid var(--gray-100); }
.crs-lesson i.kind { color: var(--gray-400); font-size: 15px; }
.crs-lesson__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-lesson__meta { font-size: 11.5px; color: var(--gray-400); white-space: nowrap; }
.crs-warn { color: var(--red-500); font-size: 11px; font-weight: 700; display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.crs-add-module { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--white); border: 1px dashed var(--gray-200); border-radius: 14px; padding: 12px 14px; }
.crs-add-module input { flex: 1; min-width: 200px; }

/* Library picker (right) */
.crs-picker { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; max-height: calc(100vh - 40px); }
.crs-picker__title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); display: flex; gap: 6px; align-items: center; }
.crs-picker .wo-select { width: 100%; box-sizing: border-box; }
.crs-picker .lib-tabs { width: 100%; box-sizing: border-box; }
.crs-picker .lib-tab { flex: 1; justify-content: center; }
.crs-picker__list { border: 1px solid var(--gray-100); border-radius: 10px; overflow-y: auto; min-height: 120px; flex: 1; }
.crs-pick { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--gray-100); align-items: start; }
.crs-pick:last-child { border-bottom: none; }
.crs-pick .lib-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 7px; }
.crs-pick__title { font-size: 12.5px; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-pick__meta { font-size: 11px; color: var(--gray-400); display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 2px 0 5px; }
.crs-pick .comms-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; }
.crs-in-course { font-size: 11px; color: var(--green-500); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }

/* ── Data / audiences tabs ── */
.crs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.crs-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crs-card h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--gray-800); display: flex; gap: 8px; align-items: center; }
.crs-card h3 i { color: var(--gold-500); }
.crs-card .hint { font-size: 12px; color: var(--gray-500); margin: -6px 0 0; }
.crs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crs-cover-pick { display: flex; gap: 12px; align-items: center; }
.crs-cover-pick .crs-cover { width: 96px; height: 64px; font-size: 26px; }
.crs-cover-pick select { flex: 1; min-width: 0; }
.crs-radio { display: flex; flex-direction: column; gap: 8px; }
.crs-radio label { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 13px; color: var(--gray-700); cursor: pointer; }
.crs-radio label span small { display: block; font-size: 11.5px; color: var(--gray-500); }
.crs-radio input, .crs-card input[type=checkbox] { accent-color: var(--blue-600); margin-top: 2px; }
.crs-save-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crs-note { font-size: 12px; color: var(--gray-500); display: flex; gap: 6px; align-items: flex-start; }
.crs-note i { color: var(--gold-500); font-size: 15px; }
.crs-price { display: flex; align-items: center; gap: 6px; }
.crs-price input { width: 130px; }
.overdue { color: var(--red-500); font-weight: 700; }

/* Assign modal */
.crs-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.crs-kind { border: 1px solid var(--gray-200); background: var(--white); border-radius: 10px; padding: 9px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crs-kind i { font-size: 18px; color: var(--gray-400); }
.crs-kind.active { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-800); }
.crs-kind.active i { color: var(--gold-500); }
.crs-targets { border: 1px solid var(--gray-100); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.crs-target { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; color: var(--gray-700); cursor: pointer; }
.crs-target:last-child { border-bottom: none; }
.crs-target small { color: var(--gray-400); margin-left: auto; }
.crs-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crs-result div { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px; padding: 10px; text-align: center; font-size: 11.5px; color: var(--gray-500); }
.crs-result b { display: block; font-size: 20px; color: var(--gray-900); }

@media (max-width: 1100px) {
    .crs-builder { grid-template-columns: 1fr; }
    .crs-picker { position: static; max-height: none; }
    .crs-picker__list { max-height: 360px; }
}
@media (max-width: 760px) {
    .crs-row { grid-template-columns: 44px minmax(0, 1fr); }
    .crs-row > .crs-pills, .crs-row > .crs-stats { grid-column: 2; justify-content: flex-start; }
    .crs-cover { width: 44px; height: 34px; }
    .crs-item__row { grid-template-columns: 30px minmax(0, 1fr); }
    .crs-item__tools { grid-column: 1 / -1; justify-content: flex-start; }
    .crs-lessons { padding-left: 24px; }
    .crs-grid2, .crs-kinds { grid-template-columns: 1fr 1fr; }
    .crs-cards { grid-template-columns: 1fr; }
}

/* ── L2.1: module opening (chip, editor, notice, calendar), "Duplicar curso", opening emails switch ── */
.crs-open-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-300); white-space: nowrap; }
.crs-open-chip i { font-size: 13px; color: var(--gold-600); }
.crs-open-chip--live { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); font-weight: 500; }
.crs-open-chip--live i { color: var(--gray-500); }
.crs-sched { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--gray-100); background: var(--white); display: flex; flex-direction: column; gap: 10px; }
.crs-sched__title { font-size: 13px; font-weight: 700; color: var(--gray-800); display: flex; gap: 6px; align-items: center; }
.crs-sched__title i { color: var(--gold-500); }
.crs-radio--row { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.crs-sched__fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.crs-sched__fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gray-600); }
.crs-sched__fields input[type=date] { min-width: 160px; }
.crs-sched__fields input[type=time] { min-width: 120px; }
.crs-sched__fields input[type=number] { width: 120px; }
.crs-sched input[type=radio] { accent-color: var(--blue-600); }
.crs-sched__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crs-sched-msg { display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px; font-size: 12.5px; color: var(--gray-800); background: var(--blue-50); border-bottom: 1px solid var(--blue-100); }
.crs-sched-msg > i { color: var(--blue-600); font-size: 16px; margin-top: 1px; }
.crs-sched-msg > span { flex: 1; }
.crs-sched-msg--live { background: var(--green-100); border-bottom-color: var(--green-border); }
.crs-sched-msg--live > i { color: var(--green-500); }
.crs-cal-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crs-cal { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.crs-cal__title { font-size: 13px; font-weight: 700; color: var(--gray-800); display: flex; gap: 6px; align-items: center; }
.crs-cal__title i { color: var(--gold-500); }
.crs-cal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crs-cal__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--gray-100); font-size: 13px; }
.crs-cal__row:last-child { border-bottom: none; }
.crs-cal__name { color: var(--gray-800); font-weight: 600; overflow-wrap: anywhere; }
.crs-cal__when { color: var(--gray-600); font-size: 12.5px; text-align: right; }
.crs-cal__row--Date .crs-cal__when { color: var(--gold-700); font-weight: 600; }
.crs-dup .ba-modal__body { display: flex; flex-direction: column; gap: 14px; }
.crs-dup__section { display: flex; flex-direction: column; gap: 8px; }
.crs-dup__label { font-size: 12.5px; font-weight: 700; color: var(--gray-800); display: flex; gap: 6px; align-items: center; }
.crs-dup__label i { color: var(--gold-500); font-size: 15px; }
.crs-dup__hint { margin: 0; font-size: 12.5px; color: var(--gray-600); }
.crs-dup__hint b { color: var(--gray-900); }
.crs-dup__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crs-dup__list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--gray-700); display: flex; flex-direction: column; gap: 3px; }
.crs-notify { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--gray-100); border-radius: 10px; background: var(--gray-50); }
.crs-notify .hint { margin: 0; }
.crs-notify__msg { font-size: 12px; color: var(--green-600); display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 760px) {
    .crs-dup__cols { grid-template-columns: 1fr; }
    .crs-cal__row { grid-template-columns: 26px minmax(0, 1fr); }
    .crs-cal__when { grid-column: 2; text-align: left; }
}