/* OPTOacademy — campus editorial, superficies claras y acento verde profundo. */
:root {
  --ink: #172d2a; --text: #344440; --muted: #73807c; --bg: #f6f8f7;
  --panel: #fff; --soft: #f0f4f2; --line: #e5ebe7; --line-2: #d9e2dc;
  --navy: #143d38; --cta: #287b60; --teal: #287b60; --green: #287b60;
  --blue: #2e7065; --blue-2: #4f8d7a; --blue-soft: #eaf4ef; --green-soft: #eaf4ef;
  --brand-grad: linear-gradient(90deg, #287b60, #65a389); --radius: 16px; --radius-sm: 10px;
  --shadow: 0 2px 8px rgba(22,49,38,.025); --shadow-lg: 0 16px 45px rgba(22,49,38,.075);
}
body { font-size: 14px; line-height: 1.65; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { font-weight: 600; } h2 { font-size: 18px; } h3 { font-size: 15px; }
a { text-underline-offset: 3px; }
.ui-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn { border-radius: 9px; border-width: 1px; font-size: 12px; font-weight: 500; padding: 10px 15px; }
.btn.primary { background: var(--navy); }
.btn.primary:hover { background: #21554d; transform: none; box-shadow: none; }
.btn.accent, .btn.cta { background: var(--cta); border-color: var(--cta); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; border-radius: 9px; }
.btn.big { font-size: 13px; padding: 13px 18px; }
.btn.sm { padding: 7px 11px; font-size: 11px; }
.btn:hover { transform: none; }
input, select, textarea { border-width: 1px; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
label { font-size: 12px; color: var(--text); font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: #6c9987; box-shadow: 0 0 0 3px #edf4ef; }
:focus-visible { outline: 3px solid #85b6a2; outline-offset: 3px; }
.card { padding: 22px; box-shadow: var(--shadow); border-radius: 14px; }
.eyebrow { font-size: 10px; letter-spacing: .15em; font-weight: 600; }
.small { font-size: 12px; }
.badge { border-radius: 5px; font-size: 10px; font-weight: 500; border: 0; padding: 4px 8px; }
.b-ok { color: #2a7357; background: #eaf5ee; } .b-info { color: #327969; background: #eaf4ef; }
.b-warn { color: #946b20; background: #faf3e4; } .b-neutral { background: #f0f2f1; color: #78807c; }
.badge.b-bad { background: #fff0ed; color: #a84d40; }
.progress { height: 5px; background: #e9eeeb; }
.progress > i { background: var(--cta); }
.spinner { display: inline-block; width: 19px; height: 19px; border: 2px solid #dbe7df; border-top-color: var(--cta); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 80px 20px; color: var(--muted); font-size: 13px; }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 110; background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.avatar { width: 37px; height: 37px; border-radius: 50%; background: #e4efe8; color: #326851; font: 600 12px var(--font-display); display: grid; place-items: center; flex-shrink: 0; }
.small-avatar { width: 33px; height: 33px; font-size: 11px; }
/* Navegación */
.layout { grid-template-columns: 238px minmax(0,1fr); }
.sidebar, .campus-sidebar { width: 238px; background: #fff; border-right: 1px solid var(--line); padding: 26px 17px 16px; display: flex; flex-direction: column; height: 100dvh; overflow-y: auto; }
.sidebar { position: sticky; top: 0; }
.campus-sidebar { position: fixed; z-index: 35; left: 0; top: 0; }
.sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; padding: 0 11px 30px; }
.sidebar-brand img { width: 174px; height: auto; max-height: 45px; object-fit: contain; }
.sidebar-brand > span { font-size: 9px; color: #8a9690; letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.workspace-dot { width: 5px; height: 5px; background: #6f9b7c; border-radius: 50%; }
.nav a { border-radius: 8px; font-size: 11.5px; gap: 12px; padding: 10px 11px; color: #6c7973; margin: 2px 0; font-weight: 400; }
.nav a.active { background: #edf5ef; color: #236447; font-weight: 500; }
.nav a:hover { background: #f3f6f4; color: var(--navy); }
.nav a .ui-icon { width: 17px; height: 17px; }
.nav-title { font-size: 8px; letter-spacing: .13em; margin: 25px 11px 8px; color: #9ba69f; font-weight: 500; }
.sidebar-bottom { margin-top: auto; padding-top: 35px; }
.sidebar-account { display: flex; gap: 11px; padding: 18px 9px 8px; border-top: 1px solid var(--line); align-items: center; }
.sidebar-account b { display: block; font-size: 11px; color: #3b4d43; font-weight: 500; }
.sidebar-account span { display: block; font-size: 9px; color: #9ba59f; }
.docs-link, .logout-link { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 10px; padding: 10px 11px; color: #8b9690; }
.docs-link .ui-icon, .logout-link .ui-icon { width: 15px; height: 15px; }
.docs-link > span:last-child { margin-left: auto; }
.sidebar-note { display: flex; gap: 10px; padding: 15px 10px; color: #88a18d; }
.sidebar-note p { font-size: 10px; margin: 0; color: #88968d; line-height: 1.7; }
.sidebar-note .ui-icon { width: 17px; height: 17px; }
.sidebar-scrim { display: none; }
.workspace-header { height: 73px; padding: 0 35px; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-path { display: flex; align-items: center; gap: 12px; color: #a1aaa5; font-size: 10px; }
.header-path .ui-icon { width: 12px; height: 12px; color: #b0b9b4; }
.header-path b { font-weight: 400; color: #728078; }
.workspace-label { font-size: 9px; color: #8a9690; background: #f2f6f3; padding: 4px 9px; border-radius: 4px; }
.dashboard-home { font-size: 10px; color: #8a9690; }
.main { padding: 31px 35px 65px; max-width: 1560px; margin: auto; }
.topbar { margin-bottom: 25px; align-items: center; }
.topbar h1 { font-size: 28px; font-weight: 600; margin-bottom: 7px; }
.topbar .muted { font-size: 12px; }
.topbar .row { gap: 10px; }
/* Dashboard administrativo */
.dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.dashboard-heading h1 { font-size: 30px; line-height: 1.3; margin: 8px 0 8px; }
.dashboard-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.range-filter { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 11px 0 18px; margin-bottom: 8px; }
.range-filter label { margin: 0 0 4px; font-size: 9px; color: #8d9891; }
.range-filter input { padding: 7px 9px; font-size: 10px; width: 140px; background: #fff; }
.range-filter .btn { align-self: flex-end; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-bottom: 23px; }
.metric-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 19px; }
.metric-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #849087; }
.metric-top > .ui-icon { color: #8ca397; width: 17px; height: 17px; }
.metric-value { font: 600 29px/1.4 var(--font-display); letter-spacing: -.04em; color: #254236; margin: 10px 0 7px; font-variant-numeric: tabular-nums; }
.metric-foot { font-size: 9px; color: #93a098; }
.metric-foot span { color: #428161; }
.dashboard-split { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 21px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
.card-heading h2 { font-size: 14px; margin: 0; font-weight: 600; }
.card-heading a { font-size: 10px; color: #729382; text-decoration: none; white-space: nowrap; }
.quick-action { display: flex; gap: 13px; align-items: center; padding: 12px 0; text-decoration: none; color: inherit; }
.quick-action + .quick-action { border-top: 1px solid #f0f3f1; }
.quick-icon { width: 36px; height: 36px; background: #f0f6f2; color: #58876c; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.quick-action b { font-size: 11px; font-weight: 500; display: block; }
.quick-action p { font-size: 9px; color: #93a095; margin: 2px 0 0; }
.quick-action > .ui-icon { margin-left: auto; width: 15px; color: #a1b1a6; }
.compact-course { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f3f1; text-decoration: none; color: inherit; }
.compact-course:last-child { border-bottom: 0; }
.compact-course img { width: 58px; height: 43px; border-radius: 7px; object-fit: cover; }
.compact-course b { font-weight: 500; font-size: 10px; display: block; }
.compact-course p { color: #94a097; font-size: 9px; margin: 3px 0 0; }
.compact-course > .badge { margin-left: auto; }
.migration-note { background: #edf4ee; border: 1px solid #dfebe0; border-radius: 12px; padding: 19px; display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.migration-note > .ui-icon { width: 19px; color: #5c8767; margin-top: 2px; }
.migration-note h3 { margin: 0 0 5px; font-size: 11px; font-weight: 500; }
.migration-note p { color: #86958a; font-size: 10px; margin: 0; line-height: 1.7; }
.migration-note a { display: inline-flex; color: #487955; font-size: 10px; margin-top: 10px; text-decoration: none; }
th { font-size: 9px; background: #f7f9f7; color: #8f9b93; font-weight: 500; padding: 11px 10px; letter-spacing: .04em; }
td { font-size: 11px; padding: 14px 10px; }
.tabs { border-radius: 8px; background: #edf2ee; padding: 4px; font-size: 11px; }
.tabs a { border-radius: 5px; font-size: 11px; padding: 8px 14px; }
/* Login */
body.is-landing { background: #fff; }
body.is-landing .wrap { padding: 0; margin: 0; max-width: none; }
body.is-landing .campus-sidebar { display: none; }
.landing { background: #fff; grid-template-columns: 1fr 1fr; }
.landing-art { background: #f0f4ef; padding: 45px 70px; gap: 0; }
.landing-art .brand-logo { height: auto; width: 205px; max-width: 100%; }
.landing-copy { margin: auto 0; padding: 60px 0; max-width: 480px; }
.landing-copy .eyebrow { color: #6b927b; font-size: 10px; }
.landing-copy h1 { text-transform: none; font-size: clamp(36px,3.8vw,56px); font-weight: 600; line-height: 1.16; letter-spacing: -.06em; margin: 22px 0; }
.landing-copy h1 em { color: #53876a; background: none; -webkit-text-fill-color: initial; font-style: normal; }
.landing-copy > p { color: #86968a; font-size: 13px; line-height: 1.9; max-width: 370px; }
.landing-points { margin: 34px 0 0; gap: 18px; }
.landing-points li { font-size: 11px; font-weight: 400; color: #72857a; gap: 12px; }
.landing-points li > span { background: #e5eee3; color: #6e9379; box-shadow: none; width: 28px; height: 28px; border-radius: 8px; }
.landing-points .ui-icon { width: 15px; height: 15px; }
.landing-foot { color: #a2b0a6; font-size: 9px; }
.landing-form { border: 0; background: #fff; backdrop-filter: none; padding: 60px; align-content: center; }
.login-card { border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: 345px; margin: 0; }
.login-card h2 { font-size: 27px; font-weight: 600; letter-spacing: -.04em; margin: 13px 0 9px; }
.login-card > p { color: #93a098; font-size: 12px; margin: 0 0 30px; }
.login-card label { font-size: 11px; margin: 21px 0 8px; }
.login-card input { height: 46px; background: #fcfdfc; border-color: #e3e9e4; font-size: 12px; }
.login-card .pw { position: relative; display: block; }
.login-card .pw input { padding-right: 48px; }
.login-card .pw button { position: absolute; right: 7px; top: 7px; padding: 7px; color: #98a49c; }
.login-forgot { font-size: 10px; display: block; text-align: right; color: #80958b; text-decoration: none; margin-top: 11px; }
.login-submit { width: 100%; height: 46px; font-size: 11px !important; margin-top: 26px; display: flex; justify-content: center; gap: 10px; }
.login-submit .ui-icon { width: 16px; height: 16px; }
.login-help { display: flex; justify-content: center; gap: 6px; color: #9aa69f; font-size: 10px; margin-top: 25px; }
.login-help a { color: #72927f; text-decoration: none; }
.login-secure { display: flex; align-items: center; justify-content: center; color: #b1bbb4; gap: 6px; font-size: 9px; margin-top: 40px; }
.login-secure .ui-icon { width: 12px; height: 12px; }
.login-demo { margin-top: 30px; padding: 14px; border-radius: 9px; background: #f8faf7; border: 1px dashed #dde7dc; }
.login-demo p { font-size: 9px; color: #98a394; margin: 0 0 9px; }
.login-demo .btn { font-size: 10px; padding: 8px 11px; }
.login-error { font-size: 11px; color: #a75548; margin-top: 12px; min-height: 20px; }
/* Dashboard del alumno */
body.is-campus .site-header { margin-left: 238px; padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
body.is-campus .site-header .in { padding: 0 36px; height: 73px; border: 0; border-radius: 0; box-shadow: none; max-width: none; background: #fff; }
body.is-campus .site-header .brand { display: none; }
body.is-campus .wrap { margin-left: 238px; padding: 31px 36px 65px; max-width: none; }
.student-content { max-width: 1180px; margin: auto; }
.student-heading { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin: 1px 0 27px; }
.student-heading h1 { font-size: 30px; margin: 8px 0; }
.student-heading p { font-size: 11px; margin: 0; color: #8f9b93; }
.date-chip { font-size: 10px; color: #9aa59d; display: flex; align-items: center; gap: 7px; }
.date-chip .ui-icon { width: 15px; height: 15px; }
.learning-banner { display: flex; justify-content: space-between; align-items: center; gap: 22px; background: #eaf1e9; border: 1px solid #e1eade; border-radius: 14px; padding: 27px 30px; margin-bottom: 25px; }
.learning-banner h2 { font-size: 20px; margin: 7px 0 8px; max-width: 450px; font-weight: 500; line-height: 1.45; }
.learning-banner p { font-size: 10px; color: #859982; margin: 0; }
.learning-banner .eyebrow { font-size: 8px; color: #769772; }
.learning-banner .btn { background: #55865a; border-color: #55865a; font-size: 10px; white-space: nowrap; }
.student-metrics { display: flex; margin-bottom: 34px; border-bottom: 1px solid var(--line); padding: 0 0 23px; gap: 50px; }
.student-metric { display: flex; gap: 13px; align-items: center; }
.student-metric > .ui-icon { color: #83a388; width: 20px; height: 20px; }
.student-metric b { display: block; font: 600 23px var(--font-display); color: #426348; line-height: 1.4; }
.student-metric span { font-size: 9px; color: #94a396; }
.learning-section-head { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin: 0 0 21px; }
.learning-section-head h2 { font-size: 17px; margin: 0; font-weight: 600; }
.course-search { width: 210px; position: relative; }
.course-search input { padding: 8px 11px 8px 33px; font-size: 10px; background: #fff; }
.course-search > .ui-icon { position: absolute; left: 11px; top: 11px; width: 13px; height: 13px; color: #a3afa5; }
.learning-courses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 34px; }
.learning-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.learning-cover { height: 140px; position: relative; overflow: hidden; background: #e6eee6; }
.learning-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.learning-card:hover .learning-cover img { transform: scale(1.03); }
.learning-cover .badge { position: absolute; top: 11px; left: 11px; background: rgba(255,255,255,.95); color: #56836c; }
.learning-body { padding: 19px; flex: 1; display: flex; flex-direction: column; }
.learning-body > .eyebrow { color: #88a18e; font-size: 8px; letter-spacing: .08em; }
.learning-body h3 { font-size: 14px; margin: 10px 0 8px; font-weight: 600; line-height: 1.6; color: #364f3c; }
.learning-meta { display: flex; gap: 11px; color: #a0aca1; font-size: 9px; margin-bottom: 20px; flex-wrap: wrap; }
.learning-meta span { display: inline-flex; gap: 4px; align-items: center; }
.learning-meta .ui-icon { width: 12px; height: 12px; }
.learning-progress { margin-top: auto; }
.learning-progress .row { justify-content: space-between; font-size: 9px; color: #a1aaa3; margin-bottom: 7px; }
.learning-progress .row b { color: #6a956f; font-weight: 500; }
.learning-progress .progress { height: 4px; min-width: 0; }
.learning-card-link { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 10px; padding: 10px; margin-top: 20px; border-radius: 7px; color: #5a8964; background: #eef5ed; }
.learning-card-link .ui-icon { width: 13px; height: 13px; }
.learning-card-link:hover { background: #e0ecdf; }
.learning-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #698e73; background: #e5eee1; }
.empty-panel { border: 1px dashed #dbe5dc; border-radius: 12px; text-align: center; padding: 38px 20px; background: #fcfdfc; }
.empty-panel h3 { margin: 13px 0 5px; font-size: 14px; color: #628169; }
.empty-panel p { font-size: 11px; color: #97a296; max-width: 390px; margin: auto; }
.empty-icon { color: #96af97; }
#courseEmpty { grid-column: 1/-1; }
.student-lower { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 22px; }
.student-lower .card { margin-bottom: 0; }
.student-tip { background: #f0f4ed; border-color: #e5edde; }
.student-tip h3 { font-size: 14px; margin: 15px 0 7px; }
.student-tip p { font-size: 11px; color: #8b9b82; line-height: 1.9; }
.student-tip > .ui-icon { color: #789470; }
.student-tip a { font-size: 10px; color: #6c9062; text-decoration: none; }
.campus-foot { text-align: center; margin-top: 34px; font-size: 9px; color: #b2bdb2; }
.lesson-head { background: #f0f5ef; border-radius: 13px; }
.lesson-head h1 { font-size: 27px; font-weight: 600; }
.course-hero { border-radius: 15px; box-shadow: none; }
.ch-body h1 { text-transform: none; font-size: 27px; font-weight: 600; line-height: 1.4; }
.page-title { font-size: 28px; font-weight: 600; }
.section-head h2 { font-size: 20px; font-weight: 500; }
.mod, .module-box { border-radius: 12px; box-shadow: none; }
.mod summary { padding: 17px; }
.mod-lesson { font-size: 12px; }
.player { grid-template-columns: minmax(0,1fr) 295px; gap: 22px; }
.player aside { top: 93px; }
.video-ph { background: #17342a; }
.block { border-radius: 13px; box-shadow: none; }
.block > header { padding: 12px 17px; }
.block > header h3 { font-size: 13px; }
.ring { width: 70px; height: 70px; } .ring > span { width: 57px; height: 57px; font-size: 14px; }
.session { padding: 13px; border-radius: 10px; gap: 12px; }
.session b { font-size: 11px; font-weight: 500; } .session .date b { font-size: 22px; }
.session .date span { font-size: 9px; } .session .date { border-radius: 9px; }
.cal .day { border-radius: 8px; }
.toast { border-radius: 9px; font-size: 12px; }
.notif-panel { border-radius: 12px; }
.modal { border-radius: 15px; padding: 25px; } .modal-head h2 { font-size: 19px; }
/* Responsive: un menú real, sin desbordar el aula ni los formularios. */
@media (min-width: 1500px) { body.is-campus .wrap { padding-right: 55px; padding-left: 55px; } }
@media (max-width: 1200px) {
  .learning-courses { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-split, .student-lower { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
  .landing-art { padding: 38px 45px; }
  .landing-form { padding: 40px; }
}
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0,1fr); }
  .sidebar, .campus-sidebar { position: fixed; z-index: 45; width: 238px; left: -250px; transition: left .2s; top: 0; }
  .sidebar.open, .campus-sidebar.open { left: 0; }
  .sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(14,40,27,.22); }
  body.is-campus .site-header, body.is-campus .wrap { margin-left: 0; }
  .btn.menu-toggle { display: inline-flex; padding: 7px; }
  .main { padding: 24px; }
  .workspace-header, body.is-campus .site-header .in { padding: 0 24px; height: 65px; }
  body.is-campus .wrap { padding: 24px; }
  .dashboard-split { grid-template-columns: 1fr; gap: 0; }
  .student-lower { grid-template-columns: 1.3fr 1fr; }
  .player { grid-template-columns: 1fr; } .player aside { position: static; }
  .metric-grid { gap: 10px; }
  .metric-card { padding: 15px; }
  .metric-value { font-size: 24px; }
  .landing-art { padding: 35px; }
  .landing-form { padding: 35px; }
  .landing-copy h1 { font-size: 38px; }
}
@media (max-width: 700px) {
  .landing { grid-template-columns: 1fr; }
  .landing-art { padding: 25px 28px; }
  .landing-art .brand-logo { width: 170px; }
  .landing-copy { padding: 30px 0 0; max-width: none; }
  .landing-copy h1 { font-size: 32px; margin: 13px 0 14px; max-width: 400px; }
  .landing-copy > p { font-size: 11px; max-width: 420px; margin-bottom: 0; }
  .landing-points, .landing-foot { display: none; }
  .landing-form { padding: 33px 28px 40px; background: #fff; }
  .login-card { max-width: none; }
  .login-card h2 { font-size: 24px; }
  .login-secure { margin-top: 27px; }
  .main, body.is-campus .wrap { padding: 22px 18px 45px; }
  .workspace-header, body.is-campus .site-header .in { padding: 0 18px; gap: 10px; }
  .workspace-label, .dashboard-home, .date-chip { display: none; }
  .dashboard-heading, .student-heading { align-items: flex-start; margin-bottom: 20px; }
  .dashboard-heading h1, .student-heading h1 { font-size: 25px; }
  .dashboard-heading > .btn { padding: 9px 11px; font-size: 10px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-value { font-size: 25px; }
  .learning-banner { flex-direction: column; align-items: flex-start; padding: 23px; gap: 17px; }
  .learning-banner h2 { font-size: 19px; }
  .student-metrics { gap: 22px; justify-content: space-between; }
  .student-metric { gap: 7px; }
  .student-metric > .ui-icon { width: 17px; }
  .student-metric b { font-size: 19px; }
  .student-metric span { font-size: 8px; }
  .learning-courses { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .learning-cover { height: 120px; }
  .learning-body { padding: 14px; }
  .learning-body h3 { font-size: 12px; }
  .learning-meta { font-size: 8px; gap: 7px; }
  .course-search { width: 150px; }
  .student-lower { grid-template-columns: 1fr; gap: 18px; }
  .header-path { font-size: 9px; gap: 6px; }
  .topbar h1 { font-size: 23px; }
  .learning-section-head { flex-wrap: wrap; }
  .card { padding: 18px; }
  .compact-course b { font-size: 10px; }
  .course-hero { grid-template-columns: 1fr; } .ch-cover { min-height: 155px; }
  .ch-body h1 { font-size: 23px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 9px; }
  .form-grid, .g2, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 440px) { .learning-courses { grid-template-columns: 1fr; } .learning-cover { height: 165px; } }

/* Legibilidad de etiquetas funcionales y preferencia de movimiento. */
:root{--muted:#647568}
[hidden]{display:none!important}
.sidebar-brand>span,.nav-title,.sidebar-account span,.docs-link,.logout-link,.sidebar-note p,.header-path,.header-path b,.workspace-label,.dashboard-home,.range-filter label,.metric-top,.metric-foot,.quick-action p,.compact-course p,.migration-note p,th,.landing-copy>p,.landing-foot,.login-card>p,.login-forgot,.login-help,.login-demo p,.login-secure,.student-heading p,.date-chip,.learning-banner p,.student-metric span{color:#647568}
.nav-title,.sidebar-brand>span,.sidebar-account span,.docs-link,.logout-link,.sidebar-note p,.header-path,.workspace-label,.dashboard-home,.range-filter label,.range-filter input,.metric-top,.metric-foot,.quick-action p,.compact-course p,.migration-note p,.migration-note a,th,.eyebrow,.badge,.chip,.date-chip,.learning-banner p,.learning-banner .eyebrow,.student-metric span,.login-demo p,.login-forgot,.login-help,.login-secure,.course-search input{font-size:11px}
.login-card>p,.student-heading p,.landing-copy>p{font-size:12px}
.b-neutral{color:#617166}.b-info{color:#25674d}.b-warn{color:#805b16}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Migración ClassOnLive: flujo de revisión, no catálogo público de alumnos. */
.migration-intro{display:flex;gap:18px;align-items:center;padding:22px 26px;background:#edf4ef;border:1px solid #dbe7df;border-radius:16px;margin-bottom:24px}
.migration-intro h2{margin:0 0 7px;font-size:20px}.migration-intro p{margin:0;font-size:13px;line-height:1.7;color:#4e655c}.migration-step{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:#143d38;color:#fff;font-weight:700;font-size:20px}
.migration-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;padding-bottom:10px}.migration-tabs button{display:flex;align-items:center;gap:9px;white-space:nowrap;border:0;border-radius:10px;padding:13px 18px;background:transparent;color:#53635a;font-weight:600;font-size:13px;cursor:pointer}.migration-tabs button.active{background:#143d38;color:white}.migration-tabs button:focus-visible{outline:3px solid #b85b35;outline-offset:2px}
.migration-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.migration-source{display:flex;align-items:flex-start;flex-direction:column;gap:14px}.migration-source h2{margin:0;font-size:21px;line-height:1.45}.migration-source p{margin:0;font-size:13px;line-height:1.8;color:#5b665e}.migration-source .hint{font-size:11px;color:#697568}.migration-source .drop-zone{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;padding:24px;cursor:pointer;font-size:13px;background:#f7f9f6;border:1px dashed #a7b9ab}.migration-source .drop-zone:focus-visible{outline:3px solid #b85b35}
.migration-policy{display:flex;gap:12px;padding:16px 20px;border-radius:12px;background:#edf4ef;color:#24453b;margin:16px 0}.migration-policy p{margin:0;font-size:12px;line-height:1.8}.migration-policy.warning{background:#faf1e5;color:#765522}.migration-policy svg{flex-shrink:0;margin-top:3px}.migration-feedback{font-size:13px;line-height:1.8;padding:13px 17px;border-radius:10px;background:#edf4ef;color:#234a3b}.migration-feedback:empty{display:none}.migration-feedback.error{color:#8f3434;background:#fff0ef}
.migration-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.migration-counts>div{border-right:1px solid var(--line);padding:6px 18px}.migration-counts>div:last-child{border-right:0}.migration-counts b{display:block;font-family:var(--font-display);font-size:32px;color:#143d38;line-height:1.4}.migration-counts span{font-size:11px;color:#607061}.migration-apply{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.migration-apply p{font-size:12px;color:#5a6b60;line-height:1.8;margin:0}.migration-success{border:1px solid #bfd2c3;background:#f6faf5}.migration-audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:25px 0}.migration-audit-grid p{font-size:13px;line-height:1.8;color:#5a6b60}
@media(max-width:900px){.migration-grid,.migration-audit-grid{grid-template-columns:1fr}.migration-counts{grid-template-columns:1fr 1fr}.migration-counts>div:nth-child(2){border-right:0}.migration-apply{flex-direction:column;align-items:stretch}.migration-intro{padding:18px}.migration-tabs button{padding:11px 13px}.migration-counts b{font-size:28px}}