/* Aula IA — sistema de interfaz. Base de componentes: Tabler. */
@font-face {
  font-family: "Manrope";
  src: url("/static/vendor/fonts/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/vendor/fonts/source-sans-3.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --ui-ink: #1b304b;
  --ui-muted: #6b7b90;
  --ui-navy: #233f65;
  --ui-teal: #168b86;
  --ui-violet: #7867b8;
  --ui-amber: #e1b56a;
  --ui-coral: #c77c66;
  --ui-page: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-border: #e2e8f0;
  --ui-radius: 14px;
  --ui-sidebar: 248px;
  --ui-shadow: 0 4px 20px rgb(27 48 75 / 4%);
  --ui-shadow-raised: 0 14px 38px rgb(27 48 75 / 9%);
  --ui-heading: "Manrope", "Segoe UI", sans-serif;
  --ui-body: "Source Sans 3", "Segoe UI", sans-serif;
  --tblr-font-sans-serif: var(--ui-body);
  --tblr-body-font-family: var(--ui-body);
  --tblr-primary: #233f65;
  --tblr-primary-rgb: 35, 63, 101;
  --tblr-body-color: #1b304b;
  --tblr-body-bg: #f4f7fb;
  --tblr-border-color: #e2e8f0;
  --tblr-border-radius: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--ui-page); color: var(--ui-ink); font: 16px/1.6 var(--ui-body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: var(--ui-navy); text-underline-offset: 4px; }
img { max-width: 100%; height: auto; }
svg { vertical-align: middle; }
h1, h2, h3, h4 { font-family: var(--ui-heading); color: var(--ui-ink); font-weight: 650; letter-spacing: -.035em; line-height: 1.3; margin: 0; }
h1 { font-size: 32px; }
h2 { font-size: 23px; }
h3 { font-size: 17px; letter-spacing: -.02em; }
h1 em, h2 em { font-style: normal; color: inherit; }
p, figure, blockquote { margin: 0; }
p + p { margin-top: 12px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 3000; background: var(--ui-navy); color: white; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:is(button, a, input, textarea, select, summary):focus-visible { outline: 3px solid #146e74; outline-offset: 3px; }
.lucide { display: inline-block; width: 20px; height: 20px; stroke-width: 1.7; flex-shrink: 0; }
.icon { width: 27px; height: 27px; object-fit: contain; flex-shrink: 0; }
.page-width { width: 100%; max-width: 1376px; margin-inline: auto; padding-inline: 40px; }
.eyebrow, .label { color: #607188; font: 650 11px/1.5 var(--ui-body); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.small { font-size: 13px; color: #607188; }
.lead { font-size: 17px; line-height: 1.75; color: #52647b; }
.error { color: #b44549; font-size: 14px; min-height: 0; }
.error:empty { display: none; }
.error:not(:empty) { padding: 12px 15px; border: 1px solid #f1d5d9; background: #fff4f5; border-radius: 9px; margin-block: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 9px; background: linear-gradient(135deg, #294b77, #233f65); color: #fff; font: 650 13px/1.45 var(--ui-heading); text-decoration: none; box-shadow: 0 2px 3px rgb(17 34 57 / 10%), inset 0 1px 0 rgb(255 255 255 / 9%); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { color: #fff; background: linear-gradient(135deg, #315988, #29476d); box-shadow: 0 5px 14px rgb(35 63 101 / 17%); transform: translateY(-1px); text-decoration: none; }
.button:active { transform: translateY(0); }
.button .lucide, .button > span[aria-hidden="true"] { width: 17px; height: 17px; font-size: 17px; }
.small-button { min-height: 36px; padding: 8px 13px; font-size: 11px; border-radius: 8px; }
.button.secondary, .button-outline, .secondary-button { background: white; border-color: #d7e0eb; color: var(--ui-navy); box-shadow: 0 1px 2px rgb(27 48 75 / 3%); }
.button.secondary:hover, .button-outline:hover, .secondary-button:hover { color: var(--ui-navy); background: #f4f7fb; border-color: #b6c8db; }
.button.teal { background: linear-gradient(135deg, #14766f, #12665f); }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--ui-navy); font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background .15s ease, color .15s ease; }
.text-button:hover { background: #eaf0f7; color: #1d385b; text-decoration: none; }
.text-button .lucide { width: 17px; height: 17px; }
.full { width: 100%; }
.loading { min-height: 70vh; display: flex; align-items: center; justify-content: center; gap: 14px; }
.loader { width: 21px; height: 21px; border: 2px solid #d9e4ef; border-top-color: #117b77; border-radius: 50%; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Estructura del aula */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1050; width: var(--ui-sidebar); background: #fff; border-right: 1px solid var(--ui-border); padding: 27px 18px 18px; display: flex; flex-direction: column; overflow-y: auto; transition: transform .25s ease; }
.app-brand, .public-brand { display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; text-decoration: none; color: var(--ui-ink); }
.app-brand { padding: 0 8px; margin-bottom: 31px; min-height: 42px; }
.app-brand > span:last-child, .public-brand > span:last-child { font: 700 14px/1.4 var(--ui-heading); letter-spacing: -.025em; }
.app-brand small, .public-brand small { display: block; font: 500 10px/1.4 var(--ui-body); color: #607188; margin-top: 3px; letter-spacing: .02em; }
.brand-monogram, .app-brand-mark, .public-brand-mark { width: 40px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px 12px 12px 4px; color: #fff; background: linear-gradient(145deg, #294c77, #183557); font: 750 13px var(--ui-heading); box-shadow: 0 5px 10px #233f6515; position: relative; }
.brand-monogram:after, .app-brand-mark:after, .public-brand-mark:after { content: ''; width: 8px; height: 8px; position: absolute; right: -2px; bottom: -2px; background: var(--ui-amber); border: 2px solid #fff; border-radius: 3px; }
.brand-corner { display: none; }
.nav-section-label { display: block; color: #616b77; font: 650 10px/1.5 var(--ui-body); letter-spacing: .12em; text-transform: uppercase; padding: 0 14px; margin: 22px 0 9px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.side-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 45px; padding: 11px 13px; border-radius: 9px; font-size: 14px; text-align: left; color: #5b6a7f; position: relative; transition: color .15s, background .15s; }
.side-link .lucide { width: 20px; height: 20px; color: #5f6a77; }
.side-link:hover { color: var(--ui-navy); background: #f3f6fa; }
.side-link.active { color: var(--ui-navy); background: #eaf0f8; font-weight: 650; }
.side-link.active .lucide { color: #335d8c; }
.side-link.active:before { content: ''; position: absolute; left: -18px; height: 22px; width: 3px; background: var(--ui-teal); border-radius: 0 4px 4px 0; }
.side-link > .nav-count, .side-link > small { margin-left: auto; font-size: 11px; background: #dbe6f3; padding: 2px 7px; border-radius: 6px; color: var(--ui-navy); }
.sidebar-course { margin: 23px 5px; padding: 17px 14px; border: 1px solid #e3eaf3; background: linear-gradient(145deg, #f4f7fc, #fafbfe); border-radius: 12px; }
.sidebar-course > .lucide { color: #117b77; margin-bottom: 11px; }
.sidebar-course p, .sidebar-course b { font: 600 12px/1.6 var(--ui-heading); color: #3a506d; }
.sidebar-course small { display: block; margin-top: 7px; color: #5d6a78; font-size: 11px; }
.sidebar-bottom { margin-top: auto; padding-top: 24px; }
.sidebar-person { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; border-top: 1px solid var(--ui-border); padding: 17px 7px 5px; }
.sidebar-person > div { flex: 1; min-width: 0; }
.sidebar-person b, .sidebar-person strong { display: block; font-size: 13px; color: #324965; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-person small { display: block; color: #616a76; font-size: 11px; margin-top: 2px; }
.sidebar-person > .lucide { width: 15px; color: #5f6976; }
.app-topbar { min-height: 72px; padding: 0 36px; margin-left: var(--ui-sidebar); background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--ui-border); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(12px); }
.breadcrumb-trail { display: flex; align-items: center; gap: 10px; color: #616b78; font-size: 12px; min-width: 0; }
.breadcrumb-trail .lucide { width: 15px; height: 15px; color: #626972; }
.breadcrumb-trail b, .breadcrumb-trail strong { font-weight: 600; color: #4b607b; }
.topbar-actions { display: flex; gap: 15px; align-items: center; flex-shrink: 0; }
.topbar-actions > .text-button { font-size: 12px; }
.mobile-menu { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #dce5ef; border-radius: 8px; background: white; }
.topbar-course { font-size: 12px; color: #607188; }
.profile-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 0; }
.profile-nav b { font-weight: 600; }
.person-photo { width: 42px; height: 44px; object-fit: cover; object-position: center 28%; border-radius: 10px; border: 2px solid #fff; flex-shrink: 0; background: #e9eef5; box-shadow: 0 0 0 1px #e0e7ef; }
.avatar-letter { display: inline-grid; place-items: center; background: #e9eff8; color: #31577f; font: 700 18px var(--ui-heading); }
.profile-nav .person-photo { width: 32px; height: 34px; border-radius: 9px; }
body.is-auth main#main { margin: 0 0 0 var(--ui-sidebar); padding: 32px 36px 48px; width: calc(100% - var(--ui-sidebar)); max-width: none; min-height: calc(100vh - 140px); }
.site-footer { padding: 25px 40px; color: #616a76; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #e2e8f0; background: #fff; }
.site-footer small { font-size: 11px; }
.site-footer button { color: #5c6a7b; font-size: 11px; padding: 0; }
body.is-auth .site-footer { margin-left: var(--ui-sidebar); padding-inline: 36px; }

/* Portada del curso */
.public-header { min-height: 88px; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1440px; margin: auto; }
.public-nav { display: flex; align-items: center; gap: 20px; }
.public-nav .text-button { font-size: 13px; }
.public-home { background: #fafbfD; overflow: hidden; }
.course-front { max-width: 1376px; margin: auto; padding: 52px 40px 60px; display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
.course-front-copy { position: relative; }
.course-category { display: inline-flex; align-items: center; gap: 8px; color: #3d7270; background: #edf6f4; border: 1px solid #dcecea; padding: 6px 11px; border-radius: 6px; font: 600 11px var(--ui-body); margin-bottom: 23px; }
.course-category .lucide { width: 14px; height: 14px; }
.course-front h1 { font-size: clamp(32px, 3.4vw, 49px); line-height: 1.19; font-weight: 700; letter-spacing: -.045em; max-width: 620px; text-wrap: balance; }
.course-front-copy > p { margin-top: 21px; color: #5f6b7c; font-size: 17px; line-height: 1.75; max-width: 505px; }
.course-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.course-meta > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5a6a7e; border-right: 1px solid #dbe3ed; padding-right: 11px; }
.course-meta > span:last-child { border-right: 0; }
.course-meta .lucide { width: 15px; height: 15px; color: #5e6b78; }
.course-front-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.course-front-actions .button { min-height: 47px; padding-inline: 22px; }
.front-instructor { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ui-border); max-width: 430px; }
.front-instructor .person-photo { width: 39px; height: 43px; }
.front-instructor b { display: block; font-size: 13px; color: #445a74; font-weight: 650; }
.front-instructor small { display: block; font-size: 11px; color: #616b77; }
.course-front-art { position: relative; padding: 12px 5px 28px; }
.course-front-art:before { content: ''; position: absolute; width: 440px; height: 440px; max-width: 100%; inset: 7px -45px auto auto; background: radial-gradient(ellipse, #dfe9f5 0%, #edf2f9 45%, transparent 70%); z-index: 0; }
.course-preview-window { position: relative; z-index: 1; border: 1px solid #d6e1ee; background: #fff; border-radius: 16px; box-shadow: 0 25px 65px rgb(31 56 90 / 12%), 0 2px 8px #1b304b08; overflow: hidden; transform: rotate(1.2deg); }
.window-topbar { min-height: 42px; border-bottom: 1px solid #e6edf4; padding: 0 16px; display: flex; align-items: center; gap: 7px; color: #5d6b7c; font-size: 10px; }
.window-topbar > i, .window-dot { width: 6px; height: 6px; border-radius: 50%; background: #c5d1df; display: inline-block; }
.window-topbar > i:first-child { background: #ddb39e; }
.window-topbar > i:nth-child(2) { background: #e7cc98; }
.window-topbar > i:nth-child(3) { background: #a0c9bc; }
.window-topbar > span:last-child { margin-left: auto; }
.course-preview-window > img { display: block; width: 100%; height: 370px; object-fit: cover; object-position: center; }
.window-overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 15px 18px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 10px; color: #fff; background: rgb(25 47 76 / 87%); backdrop-filter: blur(10px); }
.window-overlay b, .window-overlay strong { display: block; font: 650 13px var(--ui-heading); }
.window-overlay small { display: block; color: #dce9f4; font-size: 11px; margin-top: 5px; }
.floating-note { position: absolute; z-index: 2; right: -17px; bottom: 4px; background: #fff; border: 1px solid #e1e8f1; border-radius: 11px; padding: 14px 18px; box-shadow: 0 10px 25px #233f6512; display: flex; align-items: center; gap: 12px; color: #445e7e; font-size: 12px; }
.floating-note .lucide { color: #117b77; width: 27px; height: 27px; background: #eaf6f3; padding: 5px; box-sizing: content-box; border-radius: 9px; }
.floating-note b { display: block; font-size: 13px; }
.floating-note small { display: block; color: #616b77; font-size: 10px; margin-top: 2px; }
.public-details { padding: 0 40px 60px; max-width: 1376px; margin: auto; }
.program-section { padding-top: 32px; border-top: 1px solid var(--ui-border); }
.program-section > h2 { font-size: 26px; }
.program-section > p { color: #607188; margin-top: 9px; max-width: 700px; font-size: 15px; }
.program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 23px; }
.program-unit { background: #fff; border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow); overflow: hidden; }
.program-unit summary { position: relative; padding: 22px; cursor: pointer; list-style: none; min-height: 135px; }
.program-unit summary::-webkit-details-marker { display: none; }
.program-unit summary:after { content: '+'; position: absolute; right: 22px; top: 21px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #5d6b7c; border: 1px solid #e3eaf2; font-size: 17px; }
.program-unit[open] summary:after { content: '−'; color: #117b77; background: #edf7f4; }
.program-unit summary > span, .program-unit .unit-label { display: block; font-size: 10px; color: #117b77; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; margin-bottom: 12px; }
.program-unit h3 { font-size: 16px; line-height: 1.55; padding-right: 15px; }
.program-unit > p, .program-unit > ul { font-size: 14px; color: #607188; padding: 0 22px 22px; margin: 0; }
.program-unit > ul { padding-left: 39px; line-height: 1.8; }
.tools-row, .ai-ecosystem { margin-top: 32px; display: flex; align-items: center; gap: 25px; padding: 22px 0; border-block: 1px solid var(--ui-border); }
.tools-row > p, .ai-ecosystem > div:first-child { font-size: 13px; color: #607188; max-width: 250px; flex-shrink: 0; }
.ai-brand-strip { display: flex; gap: 11px; align-items: center; flex: 1; flex-wrap: wrap; }
.ai-brand-strip a { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e1e8f1; border-radius: 8px; padding: 10px 13px; color: #596b83; font-size: 12px; text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.ai-brand-strip a:hover { transform: translateY(-2px); border-color: #aec4d9; box-shadow: 0 5px 14px #233f6508; }
.ai-brand-strip a img { width: 20px; height: 20px; }
.ai-brand-strip a small { font-size: 11px; color: #636a74; }
.educator-note { display: flex; gap: 17px; padding: 28px 0 0; align-items: baseline; max-width: 1000px; }
.educator-note blockquote { font: 500 16px/1.7 var(--ui-heading); color: #576a84; }
.educator-note figcaption { font-size: 12px; color: #616b78; flex-shrink: 0; }
.educator-note a { color: #5f6b7b; }
.public-home + .site-footer { background: #fafbfd; }

/* Acceso y perfiles */
.access-page { padding: 42px 40px 66px; max-width: 1250px; margin: auto; min-height: calc(100vh - 170px); display: flex; align-items: center; }
.access-layout { width: 100%; display: grid; grid-template-columns: 1fr 440px; gap: 72px; align-items: center; }
.access-aside { padding-right: 15px; }
.access-aside h1 { font-size: 36px; line-height: 1.35; max-width: 500px; }
.access-aside > p { color: #607188; font-size: 16px; line-height: 1.8; margin-top: 19px; max-width: 450px; }
.access-aside .course-category { margin-bottom: 22px; }
.access-aside > img, .access-aside figure > img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 14px; margin-top: 28px; border: 1px solid #dce5ee; }
.access-card, .account-card { background: #fff; border: 1px solid #e0e7f0; border-radius: 16px; box-shadow: var(--ui-shadow-raised); padding: 34px; }
.access-card h2, .account-card h2 { font-size: 25px; margin: 10px 0 12px; }
.access-card > p, .account-card > p { color: #607188; font-size: 14px; line-height: 1.7; }
.access-card form, .account-card form { margin-top: 23px; }
.access-card label, .account-card label { display: block; font-size: 13px; font-weight: 600; color: #526982; margin: 18px 0 8px; }
.access-card form > .button { margin-top: 22px; }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; right: 7px; top: 7px; border-radius: 6px; background: #eef3f9; font-size: 11px; color: #596b80; padding: 7px 9px; }
.enrolled-login, .login-info { border-top: 1px solid var(--ui-border); padding-top: 20px; margin-top: 22px; color: #616a77; font-size: 12px; }
.login-info { display: flex; align-items: flex-start; gap: 12px; }
.login-info .icon { width: 20px; height: 20px; }
.login-info p { font-size: 12px; color: #5f6a78; }
.access-card > .text-button { margin-top: 12px; }
input:not([type=checkbox]):not([type=radio]), textarea, select { width: 100%; min-width: 0; border: 1px solid #d8e1ed; border-radius: 8px; padding: 11px 13px; background: #fff; color: var(--ui-ink); font-size: 15px; line-height: 1.6; box-shadow: inset 0 1px 2px #233f6503; transition: border-color .18s, box-shadow .18s; }
input:not([type=checkbox]):not([type=radio]):hover, textarea:hover, select:hover { border-color: #b8c9dc; }
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus { border-color: #66aaa9; box-shadow: 0 0 0 3px #168b860d; }
input::placeholder, textarea::placeholder { color: #626a73; }
input[readonly], textarea[readonly] { background: #f6f8fb; color: #5a6b80; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: #117b77; flex-shrink: 0; }
.profile-layout { max-width: 1080px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; margin: 24px auto; align-items: start; }
.profile-summary { border: 1px solid var(--ui-border); background: #fff; border-radius: 14px; padding: 29px; box-shadow: var(--ui-shadow); }
.profile-portrait { width: 102px; height: 112px; border-radius: 14px; margin-bottom: 23px; }
.profile-summary h1 { font-size: 25px; line-height: 1.4; margin-top: 10px; }
.profile-summary p { font-size: 13px; color: #5f6b7b; margin-top: 11px; }
.profile-course { padding-top: 21px; margin-top: 24px !important; border-top: 1px solid var(--ui-border); }
.profile-facts { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 9px 12px; font-size: 13px; margin: 23px 0 0; }
.profile-facts dt { color: #616b77; font-weight: 400; }
.profile-facts dd { color: #536b85; margin: 0; }
.enrollment-tag { display: inline-flex; font-size: 9px; color: #32746d; background: #ebf6f2; padding: 3px 7px; border-radius: 5px; font-weight: 650; letter-spacing: .06em; }
.account-card { box-shadow: var(--ui-shadow); }
.account-card .button { margin-top: 15px; }
#profile-message { font-size: 13px; color: #117b77; }
.account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1040px; margin: 30px auto; }
.account-layout h1 { font-size: 34px; }
.account-illustration { max-width: 280px; margin-top: 25px; }

/* Aula del participante */
.learner-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 27px; }
.learner-heading h1 { font-size: 28px; }
.learner-greeting { flex: 1; min-width: 0; }
.learner-greeting > p { color: #5f6a78; font-size: 13px; margin-top: 7px; }
.learner-heading .eyebrow { margin-bottom: 6px; font-size: 10px; }
.catalog-portrait { width: 58px; height: 64px; border-radius: 14px; }
.learner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 25px; align-items: start; }
.continue-card { padding: 27px; border: 1px solid #dce7f2; border-radius: 14px; background: linear-gradient(125deg, #fff, #f0f5fc); box-shadow: var(--ui-shadow); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; position: relative; overflow: hidden; }
.continue-card:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2f597f, #3c9f97, #9fb4db); }
.continue-icon { display: grid; place-items: center; background: #e6eff8; color: #436c98; border: 1px solid #d9e4ef; width: 46px; height: 46px; border-radius: 12px; }
.continue-copy .eyebrow { color: #44706e; font-size: 10px; margin-bottom: 8px; }
.continue-copy h2 { font-size: 23px; line-height: 1.45; max-width: 650px; }
.continue-copy > p { font-size: 14px; line-height: 1.8; color: #5f6b7c; margin-top: 9px; max-width: 610px; }
.continue-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 12px; color: #5d6b7d; }
.continue-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.continue-meta .lucide { width: 14px; height: 14px; }
.continue-card .assigned-teacher { margin-top: 18px; }
.unit-block { margin-top: 27px; background: #fff; border: 1px solid var(--ui-border); border-radius: 13px; overflow: hidden; box-shadow: var(--ui-shadow); }
.unit-heading { display: flex; align-items: center; gap: 12px; padding: 19px 22px; border-bottom: 1px solid #e8eef5; background: #fcfdff; }
.unit-heading > span:first-child { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #e9f1f8; color: #4b6c8a; font: 700 11px var(--ui-heading); }
.unit-heading h2 { font-size: 16px; letter-spacing: -.02em; }
.unit-heading > small { margin-left: auto; color: #606974; font-size: 11px; white-space: nowrap; }
.activity-list { display: flex; flex-direction: column; }
.activity-row { display: flex; align-items: center; gap: 15px; padding: 20px 22px; border-bottom: 1px solid #edf1f6; background: #fff; transition: background .16s; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover:not(.is-locked) { background: #f9fbfe; }
.activity-order { display: grid; place-items: center; width: 30px; height: 32px; border: 1px solid #e3eaf3; background: #f6f9fc; color: #5c6b7e; border-radius: 8px; font-size: 10px; flex-shrink: 0; }
.activity-name { flex: 1; min-width: 0; }
.activity-name h3 { font-size: 14px; font-family: var(--ui-body); line-height: 1.5; font-weight: 600; margin-top: 4px; letter-spacing: 0; }
.activity-kind { color: #616a74; font-size: 9px; letter-spacing: .07em; font-weight: 600; }
.activity-row-end { display: flex; align-items: center; gap: 17px; }
.activity-duration, .recorded-state { font-size: 11px; color: #5f6b79; max-width: 118px; line-height: 1.5; text-align: right; }
.recorded-state { color: #2f736a; }
.activity-open { width: 31px; height: 32px; border: 1px solid #dbe6f2; border-radius: 8px; display: grid; place-items: center; color: #526b87; background: #f5f8fc; font-size: 18px; flex-shrink: 0; }
.activity-open:hover { color: #fff; background: #315b83; border-color: #315b83; }
.activity-open svg { width: 14px; height: 14px; }
.activity-open:disabled { color: #626a72; background: #f7f9fc; opacity: 1; border-color: #e8edf4; }
.activity-row.is-locked .activity-name { color: #606a77; }
.activity-row.is-locked .activity-order { color: #626970; }
.activity-row.is-current { background: #f7fbff; }
.course-sidecard { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 95px; }
.course-progress-card, .resource-shortcuts, .instructor-card { background: #fff; border: 1px solid var(--ui-border); border-radius: 13px; padding: 23px; box-shadow: var(--ui-shadow); }
.course-sidecard h2 { font-size: 15px; letter-spacing: -.02em; }
.course-progress-card canvas { max-width: 145px; max-height: 145px; display: block; margin: 20px auto; }
.course-progress-card > p { color: #5f6a79; font-size: 12px; text-align: center; }
.progress-circle { width: 120px; height: 120px; margin: 22px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ui-teal) calc(var(--progress, 0) * 1%), #edf2f8 0); position: relative; }
.progress-circle:before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.progress-circle b { position: relative; font: 700 26px var(--ui-heading); }
.progress-circle small { position: relative; font-size: 11px; color: #616b77; }
.resource-shortcuts h2, .instructor-card h2 { margin-bottom: 14px; }
.resource-shortcuts > button, .resource-shortcuts > a { display: flex; align-items: center; gap: 10px; padding: 10px 0; width: 100%; font-size: 12px; color: #596a80; text-decoration: none; text-align: left; }
.resource-shortcuts .lucide { width: 16px; height: 16px; color: #586b7f; }
.instructor-card > div { display: flex; align-items: center; gap: 11px; }
.instructor-card b { display: block; font-size: 13px; font-weight: 600; }
.instructor-card small { display: block; font-size: 11px; color: #606977; margin-top: 3px; }
.catalog-bottom-note { font-size: 12px; color: #626a75; margin-top: 23px; }
.completed-course { padding: 25px; background: #edf7f3; border: 1px solid #d4e9e1; border-radius: 13px; }
.completed-course h2 { color: #377469; }
.completed-course p { font-size: 14px; margin-top: 10px; color: #576d66; }
.catalog-heading, .route-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.catalog-heading h1 { font-size: 28px; }
.catalog-heading h1 span { display: block; margin-top: 6px; font-size: 24px; }
.route-heading { margin: 28px 0 16px; }
.route-heading h2 { font-size: 20px; }
.route-heading p { font-size: 12px; color: #5e6b79; }

/* Actividad: navegación, lectura y respuesta */
body.is-auth main.workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 29px; align-items: start; }
.workspace > .sidebar { position: sticky; top: 96px; align-self: start; padding: 21px 0; }
.sidebar > .eyebrow { font-size: 9px; margin-bottom: 13px; }
.sidebar h2 { font-size: 20px; line-height: 1.4; margin: 0 0 22px; padding-right: 12px; }
.step-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.step-nav li { position: relative; }
.step-nav li:not(:last-child):before { content: ''; position: absolute; width: 1px; background: #dbe4ef; left: 16px; top: 33px; bottom: -12px; }
.step-nav button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 7px 9px 0; font-size: 12px; text-align: left; color: #616b79; position: relative; }
.step-nav button[aria-current=step] { color: #355b81; font-weight: 650; }
.step-number { width: 33px; height: 33px; background: #fff; border: 1px solid #e0e7f0; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 10px; color: #5f6977; box-shadow: 0 2px 3px #233f6503; }
.step-nav button[aria-current=step] .step-number { color: #fff; background: #315b81; border-color: #315b81; box-shadow: 0 4px 11px #315b8120; }
.step-nav small { display: block; font-size: 10px; font-weight: 400; color: #626a77; margin-top: 3px; }
.step-tick { margin-left: auto; color: #117b77; font-size: 12px; }
.sidebar-note { margin-top: 27px; padding: 16px; background: #eaf2f9; border: 1px solid #dce7f3; border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; }
.sidebar-note .icon { width: 22px; height: 22px; }
.sidebar-note p { color: #5b6a7c; font-size: 11px; line-height: 1.75; }
.sidebar-links { border-top: 1px solid #dfe7f0; margin-top: 23px; padding-top: 15px; }
.sidebar-links a, .sidebar-links button { display: flex; padding: 8px 0; font-size: 11px; color: #5c6b7c; text-decoration: none; }
.work-area { min-width: 0; padding: 28px 34px; border: 1px solid var(--ui-border); border-radius: 15px; background: #fff; box-shadow: var(--ui-shadow); }
.workspace-top, .task-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #626b77; font-size: 11px; margin-bottom: 19px; }
.workspace-top .demo-context { display: inline-flex; align-items: center; gap: 8px; }
.workspace-top .icon { width: 16px; height: 16px; }
.workspace-course { font-size: 11px; color: #626b77; margin: 6px 0; }
.back-to-catalog { padding-left: 0; margin-bottom: 12px; }
.activity-number-label { color: #4d706d; font-size: 10px; margin-top: 7px; }
.source-activity-title { color: #5c6b80; font-size: 13px; margin: 7px 0 18px; }
.activity-content { margin-top: 25px; outline: none; scroll-margin-top: 100px; }
.activity-content > .eyebrow { color: #4a706b; font-size: 10px; margin-bottom: 11px; }
.activity-content h1 { font-size: 29px; line-height: 1.35; letter-spacing: -.035em; margin-bottom: 18px; }
.activity-content .case-context { font-size: 11px; color: #606974; margin: 0 0 16px; }
.assigned-teacher { display: flex; align-items: center; gap: 11px; margin-block: 17px; }
.assigned-teacher .person-photo { width: 32px; height: 36px; border-radius: 8px; }
.assigned-teacher > div { display: flex; flex-direction: column; line-height: 1.35; }
.assigned-teacher small { color: #606976; font-size: 10px; }
.assigned-teacher b { color: #556b87; font: 650 11px var(--ui-heading); margin-top: 2px; }
.assigned-teacher span { font-size: 10px; color: #626b76; margin-top: 2px; }
.assigned-teacher > .lucide { width: 15px; height: 15px; margin-left: 7px; color: #3e736c; }
.case-paper { background: #f2f6fc; border: 1px solid #dce7f3; padding: 22px 24px; border-radius: 11px; margin: 21px 0; position: relative; }
.case-paper:before { content: ''; position: absolute; inset: 18px auto 18px 0; width: 3px; border-radius: 0 3px 3px 0; background: #8aa8c7; }
.case-paper .label { color: #536b81; font-size: 9px; }
.case-paper h2 { font-size: 19px; margin: 10px 0 12px; }
.case-paper p { font-size: 16px; line-height: 1.8; color: #526c8a; }
.reading-fragment { border: 1px solid #e1e8ef; background: #fff; border-radius: 11px; padding: 23px 25px; margin: 23px 0; }
.reading-fragment .label { font-size: 9px; color: #5a6d68; }
.reading-fragment h2 { font-size: 19px; margin: 11px 0 12px; }
.reading-fragment p { font-size: 16px; line-height: 1.9; color: #5a6a80; }
.reading-fragment small { display: block; color: #636a72; font-size: 11px; margin-top: 13px; }
.prompt-example { background: #fbf8f1; border: 1px solid #ede3cc; border-radius: 11px; padding: 21px 24px; margin: 24px 0; }
.prompt-example .label { color: #7a6747; font-size: 9px; }
.prompt-example blockquote { font-size: 16px; line-height: 1.85; color: #79674c; margin: 12px 0 0; white-space: pre-wrap; }
.clear-task { font-size: 15px; line-height: 1.85; color: #5b6b81; padding: 5px 0; }
.clear-task b { color: #4c6685; font-weight: 650; }
.field-block { margin-top: 25px; }
.field-block label { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; color: #425e7e; font: 650 14px/1.6 var(--ui-heading); }
.field-block label > span { font: 600 10px var(--ui-body); white-space: nowrap; color: #5e6b7b; background: #edf3f9; border: 1px solid #e1eaf4; border-radius: 5px; padding: 4px 7px; }
.field-hint { color: #616a76; font-size: 13px; line-height: 1.75; margin: 9px 0 12px; }
.field-block textarea { resize: vertical; min-height: 130px; font-size: 16px; line-height: 1.8; border-radius: 9px; padding: 15px 17px; }
.field-block input { font-size: 15px; }
.details-box, .support-practices { background: #f8fafD; border: 1px solid #e2eaf3; border-radius: 9px; margin: 21px 0; overflow: hidden; }
.details-box summary, .support-practices summary { padding: 14px 17px; cursor: pointer; color: #576b82; font-size: 12px; font-weight: 600; }
.details-box[open] summary, .support-practices[open] summary { border-bottom: 1px solid #e3ebf4; margin-bottom: 13px; }
.details-box > p, .details-box > ul { margin: 13px 18px 17px; color: #5c6a7a; font-size: 14px; line-height: 1.8; }
.support-practices > p { font-size: 12px; color: #5e6977; margin: 12px 18px; }
.support-practices button { display: block; padding: 10px 18px; color: #576b82; text-align: left; font-size: 12px; }
.feedback { background: #eff7f3; border-color: #d9eae1; }
.feedback summary { color: #477165; }
.feedback > p { color: #536f65; }
.rubric { background: #f3f1fa; border: 1px solid #e4dff2; border-radius: 11px; padding: 22px 24px; margin: 24px 0; }
.rubric h2 { color: #6e638a; font-size: 16px; line-height: 1.5; margin-bottom: 15px; }
.rubric > div { display: flex; align-items: baseline; gap: 13px; border-top: 1px solid #e6e1f0; padding: 12px 0; }
.rubric > div:last-child { padding-bottom: 0; }
.rubric span { font-size: 10px; color: #6d667b; }
.rubric p { font-size: 13px; color: #6f657e; flex: 1; }
.rubric b { font: 700 13px var(--ui-heading); color: #71628b; }
.answer-preview { border: 1px solid #e1e8f0; border-radius: 11px; padding: 25px; background: #fff; margin: 24px 0; }
.answer-preview h3 { color: #546c88; font-size: 14px; margin-top: 21px; }
.answer-preview p { font-size: 15px; color: #5f6b7b; line-height: 1.85; margin-top: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.missing { color: #846148; font-size: 13px; }
.step-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e3eaf3; padding-top: 22px; margin-top: 30px; }
.step-controls > span { color: #626870; font-size: 11px; }
.workspace-footnote { color: #636a73; font-size: 11px; margin-top: 22px; text-align: center; }
.delivery-actions, .export-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 23px; }
.delivery-note { font-size: 13px; color: #616a76; margin: 22px 0; }
.submission-success { display: flex; align-items: center; gap: 16px; background: #edf7f2; border: 1px solid #d4e9df; border-radius: 11px; padding: 22px; margin: 24px 0; }
.submission-success h2 { font-size: 21px; color: #447165; }
.submission-success p { color: #5b6c66; font-size: 13px; margin-top: 8px; }
.learning-tabs { display: flex; gap: 8px; margin: 21px 0; flex-wrap: wrap; }
.learning-tabs button, .learning-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 10px 13px; min-height: 40px; border: 1px solid #dde6f1; border-radius: 8px; color: #596b80; background: #f9fbfe; font-size: 11px; }
.learning-tabs [aria-pressed=true] { color: #446b93; border-color: #b9d0e4; background: #edf4fb; }
.learning-panel { padding: 21px; border: 1px solid #dce6f2; border-radius: 10px; background: #f8fbff; margin: 22px 0; }
.learning-panel h2 { font-size: 18px; }
.learning-panel p { font-size: 13px; color: #5e6a7a; margin-top: 11px; line-height: 1.8; }
.learning-panel video, .media-panel video { width: 100%; aspect-ratio: 16/9; background: #142b46; display: block; border-radius: 8px; margin-top: 16px; }
.learning-panel .guide-link { display: inline-flex; padding: 10px 13px; background: #eaf2fa; border-radius: 7px; margin-top: 17px; font-size: 12px; text-decoration: none; color: #506c87; }
.path-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 15px; border: 1px solid #e1e9f2; border-radius: 8px; font-size: 12px; color: #5f6a79; background: #f8fafd; margin: 17px 0 23px; }
.path-toolbar b { font-weight: 600; color: #536c88; }
.path-toolbar .text-button { font-size: 11px; padding: 4px; }

/* Elección del formato y recursos */
.mode-entry-heading { max-width: 800px; margin-top: 20px; }
.mode-entry-heading h1 { font-size: 31px; line-height: 1.4; margin-top: 11px; }
.mode-entry-heading p { margin-top: 14px; font-size: 15px; color: #5f6a79; max-width: 650px; }
.mode-entry > .assigned-teacher { margin: 24px 0 28px; }
.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.mode-tile { display: flex; flex-direction: column; position: relative; text-align: left; min-width: 0; min-height: 267px; padding: 23px; border: 1px solid #dfe7f1; border-radius: 13px; background: #fff; box-shadow: var(--ui-shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.mode-tile:hover { transform: translateY(-4px); border-color: #a9c0d9; box-shadow: var(--ui-shadow-raised); }
.mode-tile:after { content: ''; position: absolute; height: 3px; left: 23px; bottom: 0; width: 35px; border-radius: 3px 3px 0 0; background: #7fa6c8; }
.mode-index { position: absolute; right: 19px; top: 20px; color: #656a71; font-size: 10px; letter-spacing: .07em; }
.mode-tile > .lucide { width: 39px; height: 39px; padding: 9px; box-sizing: content-box; border: 1px solid #dce8f4; border-radius: 12px; background: #eef5fc; color: #4f6b86; margin-bottom: 23px; }
.mode-art, .mode-tile > img { height: 74px; width: 90px; object-fit: contain; margin: 7px 0 23px; }
.mode-tile h2 { font-size: 20px; line-height: 1.4; }
.mode-tile p { font-size: 13px; color: #616b79; line-height: 1.8; margin-top: 12px; }
.mode-tile strong { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; color: #536c85; margin-top: 24px; }
.tile-video > .lucide { background: #f8f3e8; color: #7d6542; border-color: #eee3cd; }
.tile-video:after { background: #cfb07c; }
.tile-oral > .lucide { background: #f2eff9; color: #6f6484; border-color: #e6def3; }
.tile-oral:after { background: #b1a0cc; }
.tile-print > .lucide { background: #ecf7f1; color: #516f63; border-color: #daecdf; }
.tile-print:after { background: #8fbcaa; }
.mode-equivalence { font-size: 12px; color: #606a75; text-align: center; margin-top: 26px; }
.focused-resource { max-width: 1120px; }
.focused-resource > h1 { font-size: 30px; margin: 12px 0 15px; }
.focused-resource > p:not(.eyebrow) { font-size: 15px; color: #5c6978; line-height: 1.8; }
.paper-intro { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 55px; background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; padding: 35px; }
.paper-intro h1 { font-size: 30px; margin: 12px 0 16px; }
.paper-intro p { font-size: 15px; color: #5d6977; line-height: 1.85; }
.paper-intro > img { width: 100%; max-height: 260px; object-fit: contain; }
.paper-downloads { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin: 24px 0; }
.paper-downloads > a:not(.button) { font-size: 13px; color: #566b7f; }
.paper-intro .small { font-size: 12px; color: #626a73; }
.interactive-player { overflow: hidden; border: 1px solid #d3e0ee; border-radius: 12px; margin: 25px 0; background: #152d49; box-shadow: 0 8px 23px #233f6510; }
.interactive-player video { display: block; width: 100%; aspect-ratio: 16/9; }
.interactive-player > span { display: flex; padding: 13px 17px; font-size: 12px; color: #dce9f4; }
.video-question { padding: 28px; background: #fff; border: 1px solid #d3e4ec; border-top: 3px solid #75aea5; border-radius: 11px; margin: 25px 0; box-shadow: var(--ui-shadow); scroll-margin-top: 100px; }
.video-question h2 { font-size: 23px; margin-bottom: 12px; }
.video-question > p { font-size: 14px; color: #606a77; line-height: 1.8; }
.video-options { border: 1px solid #e1eaf3; border-radius: 9px; background: #f8fbfe; padding: 17px 20px; margin: 20px 0; }
.video-options legend { float: none; width: auto; font-size: 13px; font-weight: 600; color: #546c82; padding: 0; margin: 0 0 12px; }
.video-options label { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #5d6b7b; }
.video-field { display: block; font-size: 13px; color: #566b82; margin: 20px 0; font-weight: 600; }
.video-field textarea { display: block; margin-top: 9px; font-weight: 400; font-size: 16px; }
.video-final { padding: 24px; margin-top: 24px; background: #edf6f2; border: 1px solid #d9ebe2; border-radius: 11px; }
.video-final h2 { font-size: 22px; }
.video-final p { color: #5b6e65; margin: 12px 0 20px; font-size: 14px; }

/* Actividades generales */
.course-task { min-width: 0; }
.task-title { margin-bottom: 23px; }
.task-title .eyebrow { font-size: 10px; color: #5b6b78; }
.task-title h1 { font-size: 30px; margin: 11px 0 15px; line-height: 1.4; max-width: 900px; }
.task-badges { display: flex; align-items: center; gap: 10px; }
.task-badges > span { padding: 4px 9px; border-radius: 6px; color: #6b6681; background: #f1eef8; font-size: 11px; }
.task-intro { font-size: 15px; color: #5e6977; margin: 22px 0; line-height: 1.85; }
.task-intro h2 { font-size: 23px; margin-bottom: 12px; }
.task-instructions { font-size: 15px; line-height: 1.8; color: #5c6b7e; padding-left: 22px; margin: 20px 0 27px; max-width: 940px; }
.task-instructions li { padding-left: 4px; margin-block: 9px; }
.task-instructions li::marker { color: #606a75; font-weight: 600; }
.task-content { padding: 27px; border-radius: 13px; border: 1px solid var(--ui-border); background: #fff; margin-top: 24px; min-width: 0; }
.response-heading { font-size: 22px; margin-bottom: 13px; }
.comparison-columns, .phase-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.document-panel, .phase-columns > section { background: #fbfcfe; border: 1px solid #e4ebf4; border-radius: 10px; padding: 22px; min-width: 0; }
.document-panel { margin-top: 22px; }
.document-panel .eyebrow { color: #5d6b78; font-size: 9px; }
.document-panel .field-block label { font-size: 12px; }
.document-panel .field-hint { font-size: 12px; }
.document-panel textarea { font-size: 14px; }
.phase-columns p { font-size: 14px; color: #606b79; margin-top: 12px; line-height: 1.8; }
.contrast-table-wrap { overflow: auto; margin-top: 26px; border: 1px solid #dce6f0; border-radius: 11px; }
.contrast-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.contrast-table caption { caption-side: top; text-align: left; background: #fff; color: #596b7f; padding: 17px 20px; font-size: 15px; font-weight: 650; }
.contrast-table th { background: #eef4fa; border: 1px solid #dfe8f2; text-align: left; padding: 14px 17px; font-size: 12px; color: #556b82; width: 33.33%; font-weight: 600; }
.contrast-table td { border: 1px solid #e2eaf4; padding: 17px; vertical-align: top; }
.contrast-table .field-block { margin-top: 0; }
.contrast-table label { font-size: 11px; }
.contrast-table .field-hint { font-size: 11px; }
.contrast-table textarea { font-size: 13px; min-height: 170px; }
.task-criteria ul { padding-left: 20px; }
.task-criteria li { margin: 8px 0; }
.task-criteria li span { color: #5e6976; font-size: 12px; }
.task-tabs { display: flex; gap: 7px; border-bottom: 1px solid #dde7f2; margin: 20px 0 25px; }
.task-tabs button { padding: 12px 17px; color: #5f6b7a; border-bottom: 2px solid transparent; font-size: 13px; }
.task-tabs button[aria-pressed=true] { color: #4b6c8a; border-bottom-color: #71a39d; }
.task-resources { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: #eff5fa; border: 1px solid #dfeaf4; border-radius: 9px; padding: 17px 20px; font-size: 12px; color: #5b6b7b; margin: 24px 0; }

/* Panel docente */
.teacher-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.teacher-welcome { display: flex; align-items: center; gap: 17px; }
.teacher-portrait { width: 57px; height: 64px; border-radius: 13px; }
.teacher-heading .eyebrow { font-size: 9px; color: #5c6977; }
.teacher-heading h1 { font-size: 28px; margin: 6px 0 9px; }
.teacher-heading p:not(.eyebrow) { font-size: 13px; color: #5e6978; max-width: 700px; }
.teacher-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; margin: 24px 0; }
.teacher-stats > div { background: #fff; padding: 22px 24px; border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow); display: flex; align-items: center; gap: 17px; }
.teacher-stats > div > .lucide { color: #586a7d; background: #eff5fc; width: 22px; height: 22px; padding: 11px; border-radius: 12px; box-sizing: content-box; }
.teacher-stats > div:nth-child(2) > .lucide { color: #506f68; background: #eef7f3; }
.teacher-stats > div:nth-child(3) > .lucide { color: #6f6480; background: #f4f0fa; }
.teacher-stats b { font: 700 29px/1.2 var(--ui-heading); color: #4e6888; }
.teacher-stats span { color: #616b79; font-size: 12px; }
.dashboard-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 27px; }
.chart-card { background: #fff; border: 1px solid var(--ui-border); border-radius: 13px; box-shadow: var(--ui-shadow); padding: 24px; min-width: 0; }
.chart-card h2 { font-size: 16px; margin-bottom: 8px; }
.chart-card > p { color: #606975; font-size: 12px; margin-top: 8px; }
.activity-chart-container { height: 200px; position: relative; margin-top: 20px; }
.activity-chart-container canvas { max-width: 100%; max-height: 100%; }
.chart-legend { display: flex; gap: 12px 19px; flex-wrap: wrap; margin-top: 15px; font-size: 11px; color: #5d6979; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; }
.teacher-tabs { display: flex; gap: 5px; padding: 6px; background: #eaf0f7; border: 1px solid #e1e8f1; border-radius: 11px; width: fit-content; max-width: 100%; overflow-x: auto; margin-top: 24px; }
.teacher-tabs button { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; font-size: 12px; color: #5d6979; white-space: nowrap; border-radius: 7px; }
.teacher-tabs button[aria-current=page], .teacher-tabs button[aria-selected=true] { color: #4a6c90; background: #fff; box-shadow: 0 2px 5px #233f6508; }
.teacher-tabs .lucide { width: 16px; height: 16px; }
.teacher-tabs button > span { background: #eff4fa; border-radius: 4px; padding: 1px 5px; font-size: 10px; }
.teacher-section { background: #fff; border: 1px solid var(--ui-border); border-radius: 13px; padding: 26px; margin-top: 23px; min-width: 0; box-shadow: var(--ui-shadow); }
.teacher-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.teacher-section-head > span { color: #626a74; font-size: 12px; }
.teacher-section h2 { font-size: 22px; margin-top: 7px; }
.teacher-section > p { font-size: 13px; color: #616b78; margin-top: 11px; }
.teacher-filters { display: flex; align-items: center; gap: 12px; margin: 23px 0 20px; }
.teacher-filters input, .teacher-filters select { font-size: 12px; padding: 10px 12px; height: 42px; }
.teacher-filters select { max-width: 31%; }
.search-field { display: flex; align-items: center; border: 1px solid #dce5f0; border-radius: 8px; padding-left: 12px; gap: 8px; flex: 1; min-width: 160px; background: #fbfcfe; margin: 0; }
.search-field > .lucide { width: 16px; height: 16px; color: #5f6b79; }
.search-field input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; }
.search-field:focus-within { border-color: #85b9b6; box-shadow: 0 0 0 3px #168b8608; }
.delivery-list { margin-top: 17px; }
.delivery-card { display: grid; grid-template-columns: 41px minmax(135px, .9fr) minmax(180px, 1.5fr) auto auto; gap: 15px; align-items: center; border-top: 1px solid #e9eef6; padding: 21px 0; }
.delivery-card .person-photo { width: 39px; height: 43px; border-radius: 9px; }
.delivery-student h3 { font-size: 13px; letter-spacing: -.01em; }
.delivery-student small { display: block; color: #616a76; font-size: 11px; margin-top: 5px; }
.delivery-activity { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.delivery-activity > small { color: #606973; font-size: 8px; letter-spacing: .08em; }
.delivery-activity b { font-size: 12px; font-weight: 600; color: #556b81; line-height: 1.65; }
.delivery-activity span { color: #636a73; font-size: 10px; }
.modality-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; color: #566c83; background: #edf4fb; border: 1px solid #e3edf7; border-radius: 20px; padding: 5px 10px; white-space: nowrap; }
.modality-badge .lucide { width: 12px; height: 12px; }
.mode-video { color: #79674a; background: #faf6ed; border-color: #f0e8d8; }
.mode-oral { color: #6e657e; background: #f5f1fb; border-color: #eee7f6; }
.mode-print { color: #546e64; background: #edf7f2; border-color: #dfefe6; }
.panel-empty { background: #fafcfe; border: 1px dashed #dbe7f2; border-radius: 11px; padding: 44px 25px; margin-top: 22px; text-align: center; }
.panel-empty > .lucide { width: 31px; height: 31px; margin-bottom: 18px; color: #606b77; }
.panel-empty h3 { font-size: 18px; color: #596b7e; }
.panel-empty p { font-size: 13px; color: #5f6975; line-height: 1.85; margin: 10px auto 0; max-width: 520px; }
.roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.roster-card { display: grid; grid-template-columns: 57px minmax(0, 1fr); gap: 15px; padding: 22px; border: 1px solid #e0e8f2; border-radius: 12px; background: linear-gradient(145deg, #fff, #fbfcfe); transition: border-color .2s, box-shadow .2s; }
.roster-card:hover { border-color: #c2d4e6; box-shadow: 0 7px 20px #233f6508; }
.roster-photo { width: 57px; height: 65px; border-radius: 11px; }
.roster-person { min-width: 0; }
.roster-person h3 { font-size: 13px; line-height: 1.5; margin-top: 6px; }
.roster-person p { font-size: 11px; color: #5f6b7a; margin-top: 5px; }
.roster-card dl { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px 11px; grid-column: 1/-1; margin: 9px 0 0; font-size: 11px; }
.roster-card dt { color: #5f6975; font-weight: 400; }
.roster-card dd { color: #586b80; margin: 0; overflow-wrap: anywhere; }
.student-progress { grid-column: 1/-1; border-top: 1px solid #e6edf5; margin-top: 8px; padding-top: 13px; }
.student-progress > span { color: #5f6a78; font-size: 10px; }
.student-progress > div { display: flex; gap: 4px; margin-top: 9px; }
.student-progress > div > span { height: 4px; flex: 1; border-radius: 2px; background: #e6edf5; }
.student-progress > div > .done { background: #80b4a6; }
.portal-table-wrap { overflow-x: auto; margin-top: 20px; border: 1px solid #e0e8f2; border-radius: 10px; }
.portal-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12px; }
.portal-table th { text-align: left; background: #f2f6fb; padding: 13px 17px; color: #5b6c7d; font-size: 10px; font-weight: 650; }
.portal-table td { padding: 16px 17px; border-top: 1px solid #e6edf5; color: #5d6b7b; }
.portal-table td small { display: block; font-size: 10px; color: #606872; margin-top: 5px; }
.physical-form { display: grid; gap: 18px; max-width: 770px; margin-top: 26px; }
.physical-form label { display: flex; flex-direction: column; gap: 8px; color: #5a6a7d; font-size: 12px; }
.physical-form .button { justify-self: start; }
.physical-form p { margin: 0; }
.submission-report { max-width: 960px; margin: 20px auto; border: 1px solid #e1e8f2; border-radius: 14px; background: #fff; padding: 33px; box-shadow: var(--ui-shadow); }
.submission-report > .eyebrow { font-size: 9px; margin-bottom: 14px; }
.submission-report h1 { font-size: 29px; margin: 8px 0 15px; }
.submission-report > p { font-size: 13px; color: #5e6a78; }
.submission-report h2 { font-size: 19px; margin-top: 30px; }
.submission-report .report-answer { font-size: 16px; color: #596a7d; line-height: 1.9; margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-portrait { float: right; width: 67px; height: 74px; border-radius: 13px; margin-left: 20px; }
.submission-report > .text-button { margin-top: 27px; }
.voice-record { margin: 18px 0; background: #fbfcfe; border: 1px solid #e0e8f3; border-radius: 11px; overflow: hidden; }
.voice-record summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; list-style: none; cursor: pointer; font-size: 13px; color: #5a6b7f; }
.voice-record summary::-webkit-details-marker { display: none; }
.voice-record[open] summary { border-bottom: 1px solid #e3ecf5; }
.voice-person { display: flex; align-items: center; gap: 12px; }
.voice-person > span { display: flex; flex-direction: column; gap: 4px; }
.voice-person b { font-size: 12px; color: #566c83; font-weight: 650; }
.voice-person small { font-size: 10px; color: #616976; }
.voice-person .person-photo { width: 33px; height: 37px; border-radius: 8px; }
.status-label { font-size: 9px; padding: 4px 8px; border-radius: 20px; color: #556f67; background: #edf7f2; border: 1px solid #e0eee5; }
.voice-record > audio { display: block; width: calc(100% - 40px); margin: 22px 20px; max-width: 650px; height: 44px; }
.voice-record > h3, .voice-record > p { margin: 18px 20px; }
.voice-record > h3 { font-size: 15px; color: #596a7d; }
.voice-record > p { font-size: 12px; color: #606b78; }
.transcript-original { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.voice-record > p.transcript-original { font-size: 15px; color: #5d6b7d; }
.voice-summary, .oral-summary { padding: 20px; margin: 20px; border: 1px solid #dcece9; border-radius: 10px; background: #f1f8f5; }
.voice-summary h3, .oral-summary h3 { font-size: 15px; color: #4d7065; }
.voice-summary h3 .lucide { width: 16px; height: 16px; margin-right: 7px; }
.voice-summary p, .oral-summary p { color: #576d66; font-size: 15px; line-height: 1.8; margin-top: 12px; }
.voice-summary small { display: block; color: #5f6d68; font-size: 11px; line-height: 1.7; margin-top: 12px; }

/* Grabación oral e integración IA */
.oral-explanation { border: 1px solid #e2def0; background: #f6f3fb; border-radius: 11px; padding: 22px; margin: 26px 0; }
.oral-explanation h2 { font-size: 19px; color: #6f6485; }
.oral-explanation p { color: #6d647a; font-size: 13px; line-height: 1.8; margin-top: 11px; }
.oral-panel { border: 1px solid #e0e8f2; background: #f9fbfd; border-radius: 10px; padding: 17px 18px; margin-top: 14px; }
.oral-controls { display: flex; align-items: center; gap: 7px 13px; flex-wrap: wrap; }
.oral-controls .text-button { font-size: 11px; padding: 8px; }
.oral-controls [data-record] { border: 1px solid #e4dfee; background: #f3f0f9; border-radius: 7px; color: #6f6381; }
.oral-controls [data-transcribe] { color: #5b6c7d; }
.oral-controls > a { font-size: 10px; color: #616a76; }
.oral-panel > audio { display: block; width: 100%; margin: 17px 0; height: 42px; }
.oral-panel > .small { font-size: 11px; color: #606a76; margin-top: 10px; line-height: 1.7; }
.oral-panel [data-transcript-review] { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e0e9f3; }
.oral-panel [data-transcript-review] label { display: block; font-size: 12px; }
.oral-panel [data-transcript-review] textarea { margin: 10px 0 16px; }
.oral-panel .oral-summary { margin: 20px 0 0; }
.ai-control { border: 1px solid #dbe9e7; background: #f1f7f6; border-radius: 10px; padding: 17px 19px; margin: 16px 0 24px; }
.ai-control .button { font-size: 11px; padding: 9px 13px; min-height: 38px; }
.ai-control p { font-size: 11px; color: #5e6d69; line-height: 1.8; margin-top: 12px; }
.ai-control .ai-state { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 11px; color: #5c6d67; margin-bottom: 13px; }
.ai-response-panel { border: 1px solid #dfe8f2; border-radius: 11px; padding: 24px; background: #fff; margin: 25px 0; }
.ai-response-panel h2 { font-size: 21px; margin: 9px 0 18px; }
.ai-response-content { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow-y: auto; padding-right: 12px; color: #5c6b7c; font-size: 15px; line-height: 1.9; }
.ai-audit { border-top: 1px solid #e7eef6; margin-top: 20px; padding-top: 15px; font-size: 11px; }
.ai-audit summary { cursor: pointer; color: #5f6a76; }
.ai-audit pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.85 var(--ui-body); color: #5f6a75; margin-top: 12px; }
.ai-unavailable { background: #f6f8fb; border: 1px solid #e3ebf4; color: #616b77; border-radius: 9px; padding: 15px 18px; font-size: 12px; line-height: 1.8; margin: 18px 0 25px; }
.ai-locked-note { font-size: 12px; color: #5c6e68; margin-top: 15px; line-height: 1.8; }
.field-block textarea.ai-frozen { background: #f2f7f5; border-color: #deebe6; color: #5c6c66; }
.api-note { font-size: 11px; color: #606873; line-height: 1.8; }
.ai-settings { max-width: 950px; margin: auto; padding: 40px; }
.ai-settings h1 { font-size: 32px; margin: 14px 0 17px; }
.settings-intro { font-size: 15px; color: #5d6b7c; line-height: 1.8; max-width: 750px; }
.settings-brand { text-decoration: none; color: inherit; }
#ai-config-form { background: #fff; border: 1px solid #e1e8f2; border-radius: 14px; padding: 28px; margin-top: 28px; box-shadow: var(--ui-shadow); }
#ai-config-form > label, .common-question label { display: block; font-size: 13px; font-weight: 600; color: #5d6b7d; margin: 22px 0 9px; }
.provider-choice { display: flex; gap: 12px; flex-wrap: wrap; }
.provider-choice label { display: flex; align-items: center; gap: 9px; border: 1px solid #e0e8f2; padding: 11px 17px; border-radius: 9px; font-size: 13px; color: #5f6b79; cursor: pointer; }
.provider-choice label:has(input:checked) { color: #516d66; background: #eff7f4; border-color: #c4ded3; }
.provider-state { color: #5f6b64; font-size: 11px; margin-top: 14px; }
.config-buttons { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-top: 23px; }
.settings-message { font-size: 12px; line-height: 1.8; color: #5b6c65; margin-top: 18px; }
.common-question { border-top: 1px solid #e2ebf4; padding-top: 17px; margin-top: 23px; font-size: 12px; }
.common-question summary { color: #5d6a77; cursor: pointer; }
.common-question p { font-size: 12px; line-height: 1.8; color: #616a75; margin-top: 14px; }
.api-activity-summary { padding: 22px; background: #f1f6fb; border: 1px solid #e2ebf5; border-radius: 11px; margin-top: 25px; }
.api-activity-summary h2 { font-size: 19px; margin-bottom: 15px; }
.api-activity-summary p { font-size: 12px; color: #5e6976; line-height: 1.8; }
.settings-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: #5e6a76; margin-top: 23px; }

/* Diálogos y ayudas */
dialog { border: 1px solid #d9e4f0; border-radius: 16px; background: #fff; padding: 34px; max-width: 680px; width: calc(100% - 36px); max-height: calc(100vh - 50px); overflow-y: auto; box-shadow: 0 25px 90px #182c4870; color: var(--ui-ink); }
dialog::backdrop { background: #142b465e; backdrop-filter: blur(5px); }
dialog h2 { font-size: 25px; margin: 14px 0 22px; padding-right: 15px; }
dialog h3 { font-size: 16px; margin: 22px 0 10px; }
dialog p, dialog li { font-size: 14px; line-height: 1.85; color: #5b6a7d; }
dialog ol { padding-left: 20px; }
.dialog-close { position: absolute; top: 15px; right: 16px; width: 29px; height: 29px; border-radius: 7px; color: #606b7a; background: #f2f6fb; font-size: 20px; }
.studio-shell { min-height: 100vh; }
.prompter { white-space: pre-wrap; line-height: 1.85; font-size: 22px; }

/* Adaptación a portátiles y teléfonos */
@media (min-width: 1500px) {
  body.is-auth main#main { padding-inline: 48px; }
  .app-topbar { padding-inline: 48px; }
  .learner-grid { grid-template-columns: minmax(0, 1fr) 315px; gap: 29px; }
}
@media (max-width: 1200px) {
  :root { --ui-sidebar: 225px; }
  .app-sidebar { padding-inline: 15px; }
  .app-brand { gap: 9px; padding-inline: 3px; }
  .app-brand > span:last-child { font-size: 12px; }
  .side-link.active:before { left: -15px; }
  body.is-auth main#main { padding: 28px; }
  .app-topbar { padding-inline: 28px; }
  .learner-grid { grid-template-columns: minmax(0, 1fr) 255px; gap: 20px; }
  .course-progress-card, .resource-shortcuts, .instructor-card { padding: 19px; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-tile { min-height: 245px; }
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-stats > div { gap: 12px; padding: 18px; }
  .teacher-stats span { font-size: 11px; }
  .delivery-card { grid-template-columns: 38px minmax(105px, .8fr) minmax(150px, 1.2fr) auto; gap: 12px; }
  .delivery-card > :is(.button, .btn) { grid-column: 4; justify-self: end; }
  .delivery-card > .modality-badge { grid-column: 4; grid-row: 1; align-self: start; }
  .delivery-card > :is(.button, .btn) { margin-top: 26px; grid-row: 1; }
  .course-front { gap: 40px; }
  .course-preview-window > img { height: 330px; }
}
@media (max-width: 1100px) {
  body.is-auth main.workspace { grid-template-columns: 175px minmax(0, 1fr); gap: 22px; }
  .sidebar h2 { font-size: 18px; }
  .step-nav button { font-size: 11px; gap: 8px; }
  .step-number { width: 29px; height: 29px; border-radius: 8px; }
  .step-nav li:not(:last-child):before { left: 14px; }
  .work-area { padding: 25px; }
  .teacher-stats > div { flex-wrap: wrap; gap: 9px; }
  .teacher-stats span { flex-basis: 100%; margin-left: 0; }
  .teacher-stats b { font-size: 26px; }
  .teacher-stats > div > .lucide { padding: 8px; width: 18px; height: 18px; }
  .learner-grid { grid-template-columns: minmax(0, 1fr); }
  .course-sidecard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; }
  .course-sidecard .progress-circle { width: 95px; height: 95px; }
  .tools-row, .ai-ecosystem { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tools-row > p, .ai-ecosystem > div:first-child { max-width: none; }
}
@media (max-width: 900px) {
  .app-sidebar { transform: translateX(-100%); width: 248px; box-shadow: 12px 0 40px #142b4615; }
  body.nav-open .app-sidebar { transform: translateX(0); }
  body.nav-open:after { content: ''; position: fixed; inset: 0; z-index: 1040; background: #1b304b40; backdrop-filter: blur(2px); }
  .app-topbar { margin-left: 0; min-height: 66px; padding-inline: 24px; }
  .mobile-menu { display: inline-flex; }
  .breadcrumb-trail { margin-right: auto; font-size: 11px; }
  .topbar-actions { gap: 10px; }
  body.is-auth main#main { margin-left: 0; width: 100%; padding: 26px 24px 38px; }
  body.is-auth .site-footer { margin-left: 0; padding-inline: 24px; }
  body.is-auth main.workspace { grid-template-columns: 175px minmax(0, 1fr); }
  .public-header { padding-inline: 26px; }
  .course-front { padding: 35px 26px 45px; gap: 29px; }
  .course-front h1 { font-size: 34px; }
  .course-front-copy > p { font-size: 15px; }
  .course-preview-window > img { height: 310px; }
  .floating-note { right: -5px; padding: 11px 13px; }
  .public-details { padding-inline: 26px; }
  .program-grid { gap: 13px; }
  .program-unit summary { padding: 18px; }
  .program-unit h3 { font-size: 14px; }
  .access-layout { grid-template-columns: 1fr 380px; gap: 35px; }
  .access-page { padding-inline: 26px; }
  .access-aside h1 { font-size: 30px; }
  .access-card { padding: 28px; }
  .page-width { padding-inline: 26px; }
}
@media (max-width: 700px) {
  .course-front { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-top: 24px; }
  .course-front h1 { font-size: 36px; max-width: 630px; }
  .course-front-copy > p { max-width: 590px; }
  .course-front-art { max-width: 620px; width: 100%; margin: auto; }
  .course-preview-window { transform: rotate(.5deg); }
  .course-preview-window > img { height: 320px; }
  .front-instructor { margin-top: 23px; padding-top: 20px; }
  .program-grid { grid-template-columns: minmax(0, 1fr); }
  .program-unit summary { min-height: 0; padding: 18px 21px; }
  .program-unit h3 { font-size: 16px; padding-right: 35px; }
  .program-unit summary > span { margin-bottom: 6px; }
  .educator-note { flex-direction: column; gap: 12px; }
  .educator-note blockquote { font-size: 14px; }
  .access-layout { grid-template-columns: minmax(0, 1fr); max-width: 470px; margin: auto; }
  .access-aside { display: none; }
  .access-page { padding-top: 22px; min-height: calc(100vh - 160px); align-items: flex-start; }
  .dashboard-overview { grid-template-columns: minmax(0, 1fr); }
  .teacher-heading h1 { font-size: 26px; }
  .teacher-heading { align-items: flex-start; }
  .teacher-heading > .text-button { font-size: 11px; padding: 7px; }
  .teacher-welcome { gap: 12px; }
  .teacher-portrait { width: 48px; height: 55px; }
  .teacher-heading p:not(.eyebrow) { font-size: 12px; }
  .course-sidecard { grid-template-columns: 1fr 1fr; }
  .course-sidecard .instructor-card { grid-column: 1/-1; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-summary { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 0 20px; padding: 23px; }
  .profile-summary .profile-portrait { grid-column: 1; grid-row: 1/5; width: 85px; height: 96px; margin: 0; }
  .profile-summary > .enrollment-tag, .profile-summary > h1, .profile-summary > p { grid-column: 2; }
  .profile-summary h1 { font-size: 23px; }
  .profile-summary .profile-facts, .profile-summary .profile-course { grid-column: 1/-1; }
  .profile-summary > .enrollment-tag { width: fit-content; }
  .teacher-filters { flex-wrap: wrap; }
  .teacher-filters .search-field { flex-basis: 100%; }
  .teacher-filters select { max-width: none; flex: 1; width: calc(50% - 6px); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .app-topbar { min-height: 62px; padding: 0 18px; gap: 13px; }
  .breadcrumb-trail { font-size: 10px; gap: 6px; }
  .breadcrumb-trail > :not(:last-child) { display: none; }
  .topbar-course, .profile-nav b, .topbar-actions .text-button span { display: none; }
  .topbar-actions > .text-button { font-size: 11px; padding: 6px; }
  .profile-nav .person-photo { width: 29px; height: 31px; }
  body.is-auth main#main { padding: 23px 18px 34px; }
  body.is-auth main.workspace { display: block; }
  .workspace > .sidebar { position: static; padding: 0 0 22px; }
  .sidebar > .eyebrow, .sidebar h2, .sidebar-note, .sidebar-links { display: none; }
  .step-nav { flex-direction: row; overflow: auto; gap: 7px; padding-bottom: 4px; }
  .step-nav li { flex: 1; min-width: 40px; }
  .step-nav li:not(:last-child):before { display: none; }
  .step-nav button { display: flex; flex-direction: column; gap: 8px; padding: 0; font-size: 9px; line-height: 1.4; text-align: center; }
  .step-nav button > span:not(.step-number):not(.step-tick) { max-width: 64px; }
  .step-nav small, .step-tick { display: none; }
  .step-number { width: 29px; height: 29px; font-size: 9px; border-radius: 9px; }
  .work-area { border-radius: 12px; padding: 21px 18px; }
  .workspace-top { font-size: 10px; gap: 10px; }
  .workspace-top .demo-context { display: none; }
  .workspace-course { display: none; }
  .activity-number-label { font-size: 9px; }
  .source-activity-title { font-size: 12px; }
  .activity-content { margin-top: 22px; }
  .activity-content h1 { font-size: 25px; }
  .case-paper, .reading-fragment, .prompt-example { padding: 18px; border-radius: 9px; }
  .case-paper h2, .reading-fragment h2 { font-size: 17px; }
  .case-paper p, .reading-fragment p, .prompt-example blockquote { font-size: 15px; line-height: 1.85; }
  .case-paper .label, .reading-fragment .label, .prompt-example .label { font-size: 8px; }
  .clear-task { font-size: 14px; }
  .field-block { margin-top: 23px; }
  .field-block label { font-size: 13px; line-height: 1.7; }
  .field-block label > span { font-size: 9px; padding: 3px 5px; }
  .field-hint { font-size: 12px; line-height: 1.8; }
  .field-block textarea { font-size: 16px; padding: 13px; min-height: 145px; }
  .step-controls { gap: 9px; padding-top: 18px; margin-top: 25px; }
  .step-controls .button { font-size: 11px; padding: 10px 13px; }
  .step-controls .text-button { font-size: 11px; padding: 6px; }
  .step-controls > span { font-size: 10px; }
  .button { font-size: 12px; min-height: 42px; }
  .rubric { padding: 19px; }
  .rubric h2 { font-size: 15px; }
  .rubric p { font-size: 12px; }
  .answer-preview { padding: 19px; }
  .learning-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
  .learning-tabs button, .learning-tabs a { font-size: 10px; padding: 9px; min-height: 46px; }
  .path-toolbar { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 11px; padding: 12px; }
  .path-toolbar .text-button { padding: 3px 0; }
  .mode-entry-heading { margin-top: 15px; }
  .mode-entry-heading h1 { font-size: 26px; }
  .mode-entry-heading p { font-size: 13px; line-height: 1.85; }
  .mode-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mode-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 17px; min-height: 0; padding: 22px; }
  .mode-tile > .lucide { width: 29px; height: 29px; padding: 8px; border-radius: 11px; margin: 5px 0 0; }
  .mode-tile h2 { font-size: 19px; padding-right: 13px; }
  .mode-tile p { font-size: 13px; line-height: 1.85; margin-top: 9px; }
  .mode-tile strong { font-size: 10px; margin-top: 14px; }
  .mode-index { top: 15px; right: 15px; font-size: 9px; }
  .mode-art, .mode-tile > img { width: 55px; height: 62px; margin: 10px 0 0; }
  .mode-equivalence { font-size: 11px; text-align: left; line-height: 1.85; }
  .learner-heading { gap: 13px; margin-bottom: 22px; }
  .learner-heading h1 { font-size: 24px; }
  .learner-heading .eyebrow { font-size: 9px; }
  .learner-greeting > p { font-size: 12px; }
  .catalog-portrait { width: 49px; height: 55px; border-radius: 12px; }
  .continue-card { padding: 22px; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .continue-icon { width: 34px; height: 37px; border-radius: 10px; }
  .continue-icon .lucide { width: 18px; height: 18px; }
  .continue-copy .eyebrow { font-size: 8px; line-height: 1.7; }
  .continue-copy h2 { font-size: 20px; line-height: 1.5; }
  .continue-copy > p { font-size: 13px; line-height: 1.85; }
  .continue-meta { gap: 12px; font-size: 11px; margin-top: 17px; }
  .continue-meta .button { width: 100%; }
  .unit-block { margin-top: 20px; }
  .unit-heading { padding: 16px 17px; gap: 10px; }
  .unit-heading h2 { font-size: 13px; line-height: 1.6; }
  .unit-heading > span:first-child { width: 26px; height: 28px; font-size: 9px; border-radius: 7px; }
  .unit-heading > small { font-size: 10px; }
  .activity-row { padding: 17px; gap: 10px; }
  .activity-order { width: 24px; height: 27px; font-size: 9px; border-radius: 7px; }
  .activity-kind { font-size: 8px; }
  .activity-name h3 { font-size: 12px; line-height: 1.65; }
  .activity-duration, .recorded-state { display: none; }
  .activity-open { width: 28px; height: 29px; }
  .activity-open svg { width: 12px; height: 12px; }
  .course-sidecard { grid-template-columns: 1fr; gap: 15px; }
  .course-progress-card { display: grid; grid-template-columns: 1fr 100px; align-items: center; padding: 21px; }
  .course-progress-card h2 { grid-column: 1; }
  .course-progress-card > p { grid-column: 1; grid-row: 2; text-align: left; margin-top: 8px; }
  .course-progress-card .progress-circle { grid-column: 2; grid-row: 1/3; margin: 0; width: 86px; height: 86px; }
  .course-progress-card canvas { grid-column: 2; grid-row: 1/3; width: 90px !important; height: 90px !important; margin: 0; }
  .resource-shortcuts, .instructor-card { padding: 21px; }
  .teacher-heading { gap: 12px; }
  .teacher-heading h1 { font-size: 24px; }
  .teacher-heading .eyebrow { font-size: 8px; }
  .teacher-heading p:not(.eyebrow) { font-size: 11px; }
  .teacher-portrait { width: 42px; height: 49px; border-radius: 10px; }
  .teacher-heading > .text-button { font-size: 0; }
  .teacher-heading > .text-button .lucide { width: 18px; height: 18px; }
  .teacher-stats { gap: 9px; margin-block: 22px; }
  .teacher-stats > div { display: block; padding: 14px 12px; border-radius: 10px; }
  .teacher-stats > div > .lucide { padding: 6px; width: 15px; height: 15px; border-radius: 8px; display: block; margin-bottom: 10px; }
  .teacher-stats b { display: block; font-size: 24px; margin-bottom: 7px; }
  .teacher-stats span { display: block; font-size: 10px; line-height: 1.6; }
  .teacher-tabs { gap: 3px; padding: 4px; border-radius: 9px; }
  .teacher-tabs button { padding: 9px 11px; font-size: 10px; gap: 7px; }
  .teacher-tabs .lucide { width: 14px; height: 14px; }
  .teacher-tabs button > span { font-size: 9px; }
  .teacher-section { padding: 20px 17px; border-radius: 11px; margin-top: 18px; }
  .teacher-section h2 { font-size: 20px; }
  .teacher-section-head { gap: 13px; }
  .teacher-section-head > span { font-size: 10px; }
  .teacher-section .eyebrow { font-size: 8px; }
  .teacher-filters { margin-top: 18px; gap: 9px; }
  .teacher-filters input, .teacher-filters select { font-size: 11px; height: 40px; padding: 9px 10px; }
  .search-field { padding-left: 9px; }
  .delivery-card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; padding: 19px 0; }
  .delivery-card > .person-photo { width: 35px; height: 40px; grid-row: 1; }
  .delivery-student { grid-column: 2; grid-row: 1; }
  .delivery-student h3 { font-size: 12px; }
  .delivery-student small { font-size: 10px; }
  .delivery-activity { grid-column: 2/4; grid-row: 2; }
  .delivery-activity b { font-size: 11px; line-height: 1.8; }
  .delivery-card > .modality-badge { grid-column: 3; grid-row: 1; align-self: center; padding: 4px 8px; font-size: 9px; }
  .delivery-card > :is(.button, .btn) { grid-column: 2; grid-row: 3; margin: 4px 0 0; justify-self: start; min-height: 33px; font-size: 10px; padding: 7px 11px; }
  .roster-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .roster-card { padding: 19px; grid-template-columns: 55px minmax(0, 1fr); gap: 12px; }
  .roster-person h3 { font-size: 14px; }
  .roster-card dl { font-size: 12px; grid-template-columns: 60px minmax(0, 1fr); }
  .roster-card .student-progress > span { font-size: 11px; }
  .chart-card { padding: 20px; }
  .chart-card h2 { font-size: 16px; }
  .activity-chart-container { height: 175px; }
  .panel-empty { padding: 34px 19px; }
  .panel-empty h3 { font-size: 17px; }
  .panel-empty p { font-size: 12px; }
  .submission-report { padding: 23px 19px; margin-top: 15px; border-radius: 11px; }
  .submission-report h1 { font-size: 25px; padding-right: 5px; }
  .submission-report > p { font-size: 12px; line-height: 1.8; }
  .submission-report h2 { font-size: 18px; }
  .report-portrait { width: 48px; height: 55px; border-radius: 10px; margin-left: 12px; }
  .submission-report .report-answer { font-size: 15px; }
  .voice-record summary { padding: 15px; flex-wrap: wrap; gap: 12px; }
  .voice-record > audio { width: calc(100% - 30px); margin: 18px 15px; }
  .voice-record > p, .voice-record > h3 { margin-inline: 15px; }
  .voice-summary, .oral-summary { margin: 15px; padding: 17px; }
  .voice-summary p { font-size: 14px; }
  .voice-summary small { font-size: 10px; }
  .voice-person small { line-height: 1.7; }
  .physical-form { gap: 16px; }
  .physical-form .button { width: 100%; }
  .paper-intro { display: flex; flex-direction: column-reverse; gap: 22px; padding: 23px; }
  .paper-intro > img { width: 140px; height: 130px; align-self: center; }
  .paper-intro h1 { font-size: 27px; }
  .paper-intro p { font-size: 14px; }
  .paper-downloads { flex-direction: column; align-items: stretch; gap: 17px; }
  .paper-downloads > a:not(.button) { font-size: 12px; text-align: center; }
  .focused-resource > h1 { font-size: 26px; }
  .focused-resource > p:not(.eyebrow) { font-size: 14px; }
  .video-question { padding: 22px 18px; }
  .video-question h2 { font-size: 21px; }
  .video-question > p { font-size: 13px; }
  .video-options { padding: 15px; }
  .video-options label { align-items: flex-start; font-size: 12px; }
  .video-options input { margin-top: 2px; }
  .video-options legend { font-size: 12px; }
  .video-field { font-size: 12px; }
  .video-question > .button { width: 100%; }
  .task-title h1 { font-size: 26px; }
  .task-top { font-size: 10px; gap: 12px; }
  .task-top .text-button { font-size: 11px; padding-left: 0; }
  .task-instructions { font-size: 14px; line-height: 1.9; margin: 20px 0; }
  .task-content { padding: 21px 18px; }
  .comparison-columns, .phase-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .document-panel { padding: 18px; }
  .document-panel .field-block label { font-size: 12px; }
  .document-panel textarea { font-size: 15px; }
  .contrast-table { min-width: 660px; }
  .contrast-table td { padding: 13px; }
  .contrast-table textarea { font-size: 14px; }
  .learning-panel { padding: 18px; }
  .oral-explanation { padding: 18px; }
  .oral-explanation h2 { font-size: 18px; }
  .oral-panel { padding: 15px 13px; }
  .oral-controls { gap: 7px; }
  .oral-controls .text-button { font-size: 10px; padding: 8px 7px; }
  .ai-response-panel { padding: 19px; }
  .ai-response-content { font-size: 14px; }
  .ai-response-panel h2 { font-size: 19px; }
  .ai-settings { padding: 26px 20px; }
  .ai-settings h1 { font-size: 27px; }
  .settings-intro { font-size: 14px; }
  #ai-config-form { padding: 22px 18px; }
  .provider-choice { gap: 9px; }
  .provider-choice label { padding: 10px 13px; font-size: 12px; }
  .config-buttons { flex-direction: column; align-items: stretch; }
  .config-buttons .button { width: 100%; }
  .config-buttons .text-button { font-size: 11px; }
  .public-header { min-height: 75px; padding: 17px 20px; gap: 15px; }
  .public-brand { gap: 9px; }
  .public-brand > span:last-child { font-size: 12px; }
  .public-brand small { font-size: 9px; }
  .public-brand .brand-monogram { width: 34px; height: 36px; border-radius: 10px 10px 10px 3px; font-size: 11px; }
  .public-nav { gap: 8px; }
  .public-nav > .text-button { display: none; }
  .public-nav .button { min-height: 35px; padding: 8px 11px; font-size: 10px; gap: 7px; }
  .course-front { padding: 24px 20px 36px; gap: 25px; }
  .course-category { font-size: 10px; padding: 6px 9px; margin-bottom: 19px; }
  .course-front h1 { font-size: 31px; line-height: 1.27; letter-spacing: -.04em; }
  .course-front-copy > p { font-size: 15px; line-height: 1.8; margin-top: 18px; }
  .course-meta { gap: 9px; margin-top: 20px; }
  .course-meta > span { font-size: 11px; padding-right: 9px; }
  .course-front-actions { margin-top: 25px; gap: 12px; }
  .course-front-actions .button { min-height: 43px; padding-inline: 16px; font-size: 11px; }
  .course-front-actions .text-button { font-size: 11px; }
  .front-instructor { gap: 10px; margin-top: 23px; padding-top: 20px; }
  .front-instructor b { font-size: 12px; }
  .front-instructor small { font-size: 10px; }
  .course-front-art { padding: 4px 7px 20px 0; }
  .course-preview-window { border-radius: 12px; }
  .course-preview-window > img { height: 270px; }
  .window-topbar { min-height: 35px; font-size: 9px; padding-inline: 12px; }
  .window-overlay { padding: 12px 14px; left: 12px; right: 12px; bottom: 12px; border-radius: 8px; }
  .window-overlay b { font-size: 12px; }
  .window-overlay small { font-size: 10px; line-height: 1.7; }
  .floating-note { padding: 11px 14px; right: 0; bottom: -1px; border-radius: 9px; }
  .floating-note .lucide { width: 20px; height: 20px; padding: 5px; }
  .floating-note b { font-size: 11px; }
  .floating-note small { font-size: 9px; }
  .public-details { padding: 0 20px 35px; }
  .program-section { padding-top: 27px; }
  .program-section > h2 { font-size: 23px; }
  .program-section > p { font-size: 14px; line-height: 1.8; }
  .ai-brand-strip { gap: 8px; }
  .ai-brand-strip a { font-size: 10px; gap: 7px; padding: 9px 10px; }
  .ai-brand-strip a img { width: 17px; height: 17px; }
  .tools-row { gap: 13px; margin-top: 27px; }
  .tools-row > p { font-size: 12px; }
  .educator-note { padding-top: 22px; }
  .educator-note figcaption { font-size: 11px; }
  .access-page { padding: 16px 20px 36px; }
  .access-card { padding: 26px 22px; border-radius: 13px; }
  .access-card h2 { font-size: 24px; }
  .access-card > p { font-size: 13px; }
  .access-card label { font-size: 12px; }
  .access-card input { font-size: 16px; }
  .access-card .button { font-size: 12px; }
  .profile-summary { grid-template-columns: 72px minmax(0, 1fr); gap: 0 16px; padding: 21px; }
  .profile-summary .profile-portrait { width: 72px; height: 85px; }
  .profile-summary h1 { font-size: 21px; }
  .profile-summary p { font-size: 12px; }
  .profile-facts { margin-top: 23px; font-size: 12px; }
  .account-card { padding: 24px 21px; border-radius: 12px; }
  .account-card h2 { font-size: 23px; }
  .account-card input { font-size: 16px; }
  .site-footer, body.is-auth .site-footer { padding: 21px 20px; flex-wrap: wrap; gap: 9px 17px; font-size: 10px; }
  .site-footer small { flex-basis: 100%; order: 3; font-size: 10px; line-height: 1.8; }
  .site-footer button { margin-left: auto; font-size: 10px; }
  dialog { padding: 27px 23px; }
  dialog h2 { font-size: 23px; }
  dialog h3 { font-size: 15px; }
  dialog p, dialog li { font-size: 13px; }
  .account-layout { display: block; }
  .account-layout > div:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .app-sidebar, .app-topbar, .public-header, .site-footer, .teacher-tabs, .teacher-filters, .skip-link, .sidebar, .export-actions, .step-controls { display: none !important; }
  body, body.is-auth main#main { background: white; margin: 0; padding: 0; width: 100%; color: #1b304b; }
  .work-area, .submission-report, .task-content { border: 0; box-shadow: none; padding: 0; }
  details { break-inside: avoid; }
  .person-photo { print-color-adjust: exact; }
}

/* Format selector: align actions while allowing descriptions to vary in length. */
.mode-tile-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.mode-tile-top .mode-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #456a87; background: #eef5fb; border: 1px solid #e0eaf3; border-radius: 9px; }
.mode-tile-top .mode-icon .lucide { width: 18px; height: 18px; }
.tile-video .mode-icon { background: #fbf5ea; border-color: #f0e5cd; color: #806536; }
.tile-print .mode-icon { background: #eff7f3; border-color: #dcece3; color: #476e60; }
.tile-oral .mode-icon { background: #f4f1fa; border-color: #e9e1f2; color: #6b5e80; }
.mode-tile > div:last-child { display: flex; flex-direction: column; flex: 1; }
.mode-tile > div:last-child > p { flex: 1; }
.mode-tile strong { margin-top: auto; padding-top: 22px; }
.mode-info { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 15px 17px; border-radius: 9px; background: #edf3f9; }
.mode-info > .lucide { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: #526c85; }
.mode-info > p { margin: 0; font-size: 13px; line-height: 1.75; color: #586b7e; }
.work-area > .path-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; margin: 14px 0 26px; }
.path-toolbar .assigned-teacher { margin: 0; }
.path-toolbar .assigned-teacher .person-photo { width: 31px; height: 35px; }
.format-switch { display: flex; align-items: center; gap: 12px; }
.format-switch > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
.format-switch .text-button { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 7px 0; }
.format-switch .lucide { width: 15px; height: 15px; }
.workspace-section-name { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.workspace-section-name h2 { font-size: 17px; line-height: 1.5; margin-top: 3px; }
.workspace-section-name small { font-size: 9px; letter-spacing: .06em; color: #586b7e; }
.workspace-section-name .unit-icon { flex-shrink: 0; }
.art-caption { display: none; }
main#main[tabindex="-1"]:focus { outline: none; }
@media (max-width: 640px) {
  .mode-tile { grid-template-columns: 88px minmax(0, 1fr); gap: 10px 17px; align-items: start; }
  .mode-tile-top { grid-column: 1; grid-row: 1; margin: 0; }
  .mode-tile .mode-art { grid-column: 1; grid-row: 2; width: 88px; height: 90px; margin: 3px 0 0; }
  .mode-tile > div:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .mode-tile strong { padding-top: 12px; }
  .mode-info { padding: 13px; }
  .work-area > .path-toolbar { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .format-switch { width: 100%; padding-top: 9px; border-top: 1px solid #e4eaf2; justify-content: space-between; }
}

/* Componentes del nuevo marcado: portada de práctica y panel de curso. */
.brand-emblem { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 40px; height: 42px; border-radius: 12px 12px 12px 4px; background: linear-gradient(140deg, #2d567e, #233f65); color: #fff; box-shadow: 0 4px 9px #233f6515; flex-shrink: 0; }
.brand-emblem > .lucide { width: 23px; height: 23px; stroke-width: 1.7; }
.brand-emblem > span { position: absolute; bottom: -2px; right: -2px; width: 9px; height: 9px; border-radius: 3px; background: #e1b56a; border: 2px solid white; }
.brand-title { display: block; }
.app-brand { margin-bottom: 11px; }
.sidebar-course { margin-top: 20px; margin-bottom: 7px; }
.sidebar-person > span { flex: 1; min-width: 0; }
.course-label { color: #41716c; font-size: 9px; letter-spacing: .1em; font-weight: 700; }
.sidebar-course p { font-size: 11px; font-weight: 600; line-height: 1.8; margin-top: 10px; }
.course-period { display: block; color: #5a6b7f; font-size: 10px; margin-top: 13px; }
.course-period > span { margin-inline: 7px; }
.nav-active-dot { width: 5px; height: 5px; border-radius: 50%; background: #168b86; margin-left: auto; }
.nav-scrim { display: none; }
.icon-button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 9px; color: #576b82; transition: background .16s, border-color .16s; }
.icon-button:hover { border-color: #e0e8f1; background: #f1f5fa; }
.icon-button > .lucide { width: 19px; height: 19px; }
.mobile-menu { display: none; }
.topbar-person { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #546b87; }
.topbar-person .person-photo { width: 31px; height: 34px; border-radius: 9px; }
.topbar-course-icon { width: 27px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #546b82; background: #eef3fa; border-radius: 7px; }
.topbar-course-icon > .lucide { width: 16px; height: 16px; }
.public-nav > .nav-link { font-size: 12px; color: #596b81; padding: 8px 10px; }
.btn { font-family: var(--ui-heading); font-size: 12px; border-radius: 9px; font-weight: 600; min-height: 42px; padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn > .lucide { width: 16px; height: 16px; }
.button.btn-outline-primary { color: #385c84; background: #fff; border: 1px solid #d3e0ed; box-shadow: 0 1px 2px #233f6504; }
.button.btn-outline-primary:hover { background: #f1f6fb; border-color: #9ebbd5; }
.front-instructor { max-width: none; gap: 11px; }
.front-instructor > p { font-size: 11px; line-height: 1.8; color: #5a6b7f; margin: 0; }
.instructor-divider { width: 1px; height: 31px; background: #dce5ef; margin-inline: 5px; }
.course-front-art:before { display: none; }
.art-grid { position: absolute; inset: -8px -20px 15px 40px; opacity: .65; background-image: radial-gradient(#c4d2e2 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent); }
.course-preview-window { transform: rotate(1deg); }
.window-topbar { justify-content: space-between; padding-inline: 15px; color: #586a81; }
.window-topbar > span { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; }
.window-topbar > .lucide { width: 14px; height: 14px; color: #5d6b7c; }
.window-topbar > span > .lucide { width: 12px; height: 12px; }
.window-dots { display: flex; align-items: center; gap: 5px; }
.window-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #d6e0eb; }
.window-dots i:first-child { background: #d8ae9d; }
.window-dots i:nth-child(2) { background: #dfc18b; }
.window-dots i:nth-child(3) { background: #9bbfac; }
.preview-grid { display: grid; grid-template-columns: 49px minmax(0, 1fr); min-height: 370px; }
.preview-sidebar { background: #f2f6fb; border-right: 1px solid #e4ebf4; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 24px; color: #5b6979; }
.preview-sidebar .lucide { width: 17px; height: 17px; }
.preview-sidebar .lucide:first-child { color: #436e91; background: #e0ebf7; padding: 7px; width: 31px; height: 31px; border-radius: 8px; margin-bottom: -4px; }
.preview-document { padding: 24px 26px 22px; }
.preview-document-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 21px; }
.preview-tag { font-size: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: #edf4f9; color: #496d8c; }
.preview-tag .lucide { width: 11px; height: 11px; }
.preview-document-toolbar > span:last-child { color: #5d6a7b; }
.preview-document-toolbar > span:last-child .lucide { width: 14px; height: 14px; }
.preview-document h2 { font-size: 20px; line-height: 1.5; letter-spacing: -.025em; }
.preview-document > p { font-size: 12px; line-height: 1.9; color: #596b81; margin-top: 13px; }
.preview-reading { display: flex; flex-direction: column; gap: 6px; margin: 20px 0; }
.preview-reading span { display: block; height: 4px; background: #e9eef5; border-radius: 3px; }
.preview-reading span:nth-child(2) { width: 89%; }
.preview-reading span:nth-child(3) { width: 67%; }
.preview-answer { background: #edf6f3; border: 1px solid #d8e9e3; border-radius: 9px; padding: 15px 17px; margin-top: 17px; }
.preview-answer > span { color: #487169; font-size: 9px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.preview-answer > span .lucide { width: 12px; height: 12px; }
.preview-answer > p { color: #497166; font-size: 13px; line-height: 1.8; margin-top: 8px; }
.preview-document-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 20px; color: #5b6b7a; font-size: 9px; }
.preview-document-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.preview-document-footer .lucide { width: 12px; height: 12px; color: #507069; }
.art-caption { display: block; text-align: center; font-size: 10px; color: #5c6b7e; margin-top: 18px; }
.floating-note { bottom: -8px; right: -5px; transform: rotate(-1.5deg); }
.section-intro { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.section-intro h2 { font-size: 25px; margin-top: 8px; }
.section-intro > p { max-width: 460px; color: #586a80; font-size: 14px; line-height: 1.8; }
.section-intro.compact { margin: 27px 0 18px; gap: 20px; }
.section-intro.compact h2 { font-size: 20px; margin: 0; }
.section-intro.compact p { font-size: 12px; color: #5b6b7e; margin-top: 7px; }
.section-intro.compact > span { white-space: nowrap; font-size: 11px; }
.program-unit { display: block; }
.program-unit summary { display: flex; align-items: flex-start; gap: 13px; min-height: 111px; padding: 22px; }
.program-unit summary:after { display: none; }
.program-unit summary > span { margin: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }
.unit-icon { width: 39px; height: 41px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: #4e6b87; background: #edf4fc; border: 1px solid #e0eaf6; }
.unit-icon > .lucide { width: 20px; height: 20px; }
.unit-color-1 { color: #427267; background: #eef7f3; border-color: #e0ede5; }
.unit-color-2 { color: #73628b; background: #f4f0fa; border-color: #e8e1f2; }
.program-unit summary > .unit-icon { display: inline-flex; margin: 0; }
.program-unit summary > span:nth-child(2) { flex: 1; min-width: 0; }
.program-unit summary small { display: block; color: #546b7e; font-size: 9px; letter-spacing: .08em; font-weight: 650; margin-bottom: 7px; }
.program-unit summary b { display: block; color: #3a5475; font: 650 14px/1.65 var(--ui-heading); }
.program-unit summary > .lucide { margin-left: auto; width: 14px; height: 14px; color: #5a6b7d; margin-top: 3px; transition: transform .2s; }
.program-unit[open] summary > .lucide { transform: rotate(180deg); }
.program-body { padding: 0 22px 22px; }
.program-body > p { border-top: 1px solid #e7edf5; padding-top: 17px; color: #596a7f; font-size: 13px; line-height: 1.85; }
.program-body ul { padding: 0; list-style: none; margin: 15px 0 0; }
.program-body li { display: flex; align-items: flex-start; gap: 8px; color: #596b80; font-size: 12px; line-height: 1.8; margin: 9px 0 0; }
.program-body li .lucide { width: 13px; height: 13px; color: #477167; margin-top: 4px; }
.tools-row { max-width: 1296px; margin: 15px auto 0; }
.tools-row > span { color: #5a6b7e; font-size: 12px; }
.educator-note { max-width: 1296px; margin: 0 auto 40px; padding-top: 28px; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
.educator-note > span { color: #7f643d; padding-top: 3px; }
.educator-note > span .lucide { width: 20px; height: 20px; }
.educator-note blockquote { font: 500 14px/1.9 var(--ui-body); color: #596b7f; flex: 1; }
.educator-note figcaption { flex-basis: 100%; margin-left: 35px; font-size: 11px; margin-top: -5px; }
.access-layout { gap: 55px; grid-template-columns: minmax(0, 1fr) 415px; }
/* Login: course information has its own opaque surface above the photograph. */
.access-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 0; border-radius: 17px; padding: 0; border: 1px solid #dce5ef; box-shadow: 0 8px 24px #233f6508; background: #fff; }
.access-photo { position: relative; inset: auto; order: 1; height: 300px; flex: 1 0 280px; overflow: hidden; border-top: 1px solid #e2eaf0; }
.access-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; display: block; }
.access-photo:after { display: none; }
.access-aside-content { position: relative; order: 0; padding: 34px; background: #fff; }
.access-aside-content h1 { font-size: 31px; line-height: 1.32; max-width: 600px; color: #203e60; }
.access-aside-content .course-category { background: #edf6f3; color: #29695e; border-color: #dcece5; margin-bottom: 22px; }
.access-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #e3eaf0; }
.access-benefits > span { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: #455b70; }
.access-benefits .lucide { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: #277b6d; }
.access-symbol { width: 46px; height: 48px; background: #edf4fb; border: 1px solid #e0eaf6; color: #4e6b89; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 12px; }
.access-symbol .lucide { width: 23px; height: 23px; }
.access-card .input-icon > .form-control { padding-left: 41px; }
.access-card .input-icon-addon { color: #5c6b7c; }
.access-card .password-field .icon-button { top: 5px; right: 6px; width: 33px; height: 34px; padding: 0; }
.access-card .password-field .icon-button .lucide { width: 16px; height: 16px; }
.access-help { display: flex; gap: 10px; margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--ui-border); }
.access-help > .lucide { width: 16px; height: 16px; color: #5a6a7e; margin-top: 2px; }
.access-help p { font-size: 12px; line-height: 1.8; color: #5b6a7c; }
.enrollment-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d7e9e1; border-radius: 20px; color: #467265; background: #edf6f2; font-size: 10px; font-weight: 600; }
.enrollment-pill .lucide { width: 14px; height: 14px; }
.learner-main { min-width: 0; }
.learner-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.learner-side > .course-sidecard { position: static; display: block; }
.continue-card { display: flex; flex-direction: column; align-items: stretch; gap: 19px; padding: 26px; }
.continue-top { display: flex; align-items: center; gap: 13px; }
.continue-top .continue-meta { margin: 0; gap: 9px; color: #536b82; font-size: 10px; letter-spacing: .04em; font-weight: 650; }
.continue-top .continue-icon { width: 38px; height: 41px; border-radius: 11px; }
.continue-top .continue-icon .lucide { width: 21px; height: 21px; }
.continue-copy h2 { font-size: 25px; line-height: 1.4; }
.continue-copy p { font-size: 14px; line-height: 1.85; color: #596a7f; margin-top: 11px; }
.continue-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #e1e9f2; padding-top: 18px; }
.continue-bottom .assigned-teacher { margin: 0; }
.continue-bottom .button { flex-shrink: 0; font-size: 11px; }
.unit-heading > .unit-icon { width: 35px; height: 38px; }
.unit-heading > div { flex: 1; }
.unit-heading small { font-size: 8px; letter-spacing: .07em; font-weight: 650; color: #586b7e; display: block; margin-bottom: 4px; }
.unit-heading h2 { font-size: 14px; line-height: 1.5; }
.unit-heading > span:last-child:not(.unit-icon) { width: auto; height: auto; margin-left: auto; border: 0; border-radius: 5px; background: #edf2f8; color: #526b85; font-size: 10px; padding: 3px 6px; white-space: nowrap; }
.activity-order > .lucide { width: 13px; height: 13px; }
.activity-row.is-done .activity-order { background: #eff7f3; color: #4b7164; border-color: #dcebe3; }
.activity-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; font-weight: 600; color: #586a7f; background: #f1f5f9; border: 1px solid #e7edf5; border-radius: 20px; padding: 4px 8px; }
.activity-status > .lucide { width: 10px; height: 10px; }
.status-done { color: #497062; background: #eef7f2; border-color: #dfede4; }
.status-ready { color: #4c6b8a; background: #edf4fb; border-color: #ddebf7; }
.status-locked { color: #5d6a79; background: #f5f7fa; border-color: #e9edf3; }
.sidecard-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.sidecard-title h2 { font-size: 14px; margin: 0; }
.sidecard-title > .lucide { width: 17px; height: 17px; color: #556b80; }
.progress-circle { background: conic-gradient(#168b86 var(--completion, 0%), #eaf0f7 0); }
.progress-circle > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.progress-circle b { color: #375a7b; font-size: 28px; }
.progress-circle b small { font-size: 13px; margin-left: 2px; color: #586c7e; }
.progress-circle > div > span { font-size: 9px; color: #5b6b7c; margin-top: 5px; }
.course-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 13px; border-top: 1px solid #e6edf4; padding-top: 17px; margin-top: 20px; font-size: 10px; color: #586c7f; }
.course-facts > span { display: inline-flex; align-items: center; gap: 4px; }
.course-facts .lucide { width: 12px; height: 12px; }
.resource-shortcuts .sidecard-title { margin-bottom: 14px; }
.resource-shortcuts > a { gap: 10px; border-bottom: 1px solid #edf1f6; padding-block: 13px; }
.resource-shortcuts > a > span:nth-child(2) { flex: 1; }
.resource-shortcuts > a small { display: block; font-size: 9px; color: #5c6a7a; margin-top: 3px; }
.resource-shortcuts > a > .lucide:last-child { width: 13px; height: 13px; }
.mini-file { width: 30px; height: 34px; background: #f0f5fb; border: 1px solid #e2ebf5; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-file > .lucide { width: 15px; height: 15px; }
.resource-shortcuts > .text-button { margin-top: 11px; font-size: 11px; color: #4c6c85; padding-inline: 0; }
.instructor-card > .eyebrow { font-size: 9px; margin-bottom: 18px; }
.instructor-card > p:not(.eyebrow) { color: #586b7e; font-size: 12px; line-height: 1.85; margin-top: 17px; }
.instructor-card .assigned-teacher { margin: 0; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-heading h1 { font-size: 30px; margin: 9px 0 13px; }
.page-heading p:not(.eyebrow) { font-size: 14px; color: #596b80; line-height: 1.8; max-width: 750px; }
.resource-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }
.resource-unit { padding: 26px; border: 1px solid #e0e8f2; border-radius: 13px; box-shadow: var(--ui-shadow); }
.resource-unit > .unit-icon { margin-bottom: 23px; }
.resource-unit .eyebrow { font-size: 9px; margin-bottom: 11px; }
.resource-unit h2 { font-size: 19px; line-height: 1.5; margin-bottom: 14px; }
.resource-unit > p:not(.eyebrow) { color: #596b80; font-size: 13px; line-height: 1.85; margin-bottom: 22px; flex: 1; }
.resource-unit .button { align-self: flex-start; margin-top: auto; font-size: 11px; }
.paper-library { margin-top: 25px; padding: 25px; display: flex; flex-direction: row; align-items: center; gap: 20px; border: 1px solid #e0e8f2; border-radius: 13px; box-shadow: var(--ui-shadow); }
.paper-library > div:nth-child(2) { flex: 1; }
.paper-library h2 { font-size: 18px; margin-bottom: 10px; }
.paper-library p { font-size: 13px; color: #586a80; line-height: 1.8; }
.paper-library > .btn { font-size: 10px; flex-shrink: 0; }
.api-setup-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 26px; }
.api-setup-layout > #ai-config-form { margin-top: 0; }
.api-instructions { border: 1px solid #e0e8f2; border-radius: 12px; padding: 22px; margin-bottom: 18px; box-shadow: var(--ui-shadow); }
.api-instructions h2 { font-size: 17px; margin-bottom: 12px; }
.api-instructions p, .api-instructions li { font-size: 12px; color: #586b80; line-height: 1.9; }
.api-instructions ol, .api-instructions ul { padding-left: 19px; margin: 0; }
.api-instructions li + li { margin-top: 8px; }
.api-instructions code { font-size: 11px; overflow-wrap: anywhere; }
.api-instructions .lucide { color: #516c81; margin-bottom: 15px; }

/* Estudio de grabación con el mismo sistema de componentes. */
.studio-body { background: var(--ui-page); }
.studio-body .site-header { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding: 20px 36px; background: #fff; border-bottom: 1px solid var(--ui-border); }
.studio-body .site-header .brand { display: flex; align-items: center; gap: 12px; font: 650 15px var(--ui-heading); text-decoration: none; }
.studio-body .site-header .brand small { display: block; color: #596a7c; font: 500 9px var(--ui-body); letter-spacing: .09em; margin-top: 5px; }
.studio-body .site-header nav { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.studio-shell { display: grid; grid-template-columns: 240px minmax(0, 880px); gap: 28px; max-width: 1260px; padding: 0 32px; margin: 30px auto 50px; min-height: 65vh; }
.studio-sidebar { position: sticky; top: 25px; align-self: start; }
.studio-sidebar > .eyebrow { font-size: 9px; }
.studio-sidebar h1 { font-size: 27px; margin: 14px 0 17px; line-height: 1.5; }
.studio-sidebar > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: #596b80; }
.studio-progress { font-size: 11px; color: #45726a; border-bottom: 1px solid #dfe7f0; padding: 17px 0 13px; margin-top: 14px; }
#fragment-list { list-style: none; padding: 0; margin: 12px 0 18px; max-height: 52vh; overflow: auto; }
#fragment-list li { margin: 4px 0; }
#fragment-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: left; color: #596c81; font-size: 12px; border-radius: 8px; }
#fragment-list button:hover { background: #edf3f9; }
#fragment-list button[aria-current=step] { background: #e8f0f9; color: #375f87; font-weight: 600; }
.fragment-no { width: 25px; height: 27px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #dce6f2; border-radius: 7px; font-size: 9px; background: #fff; color: #576c82; }
.fragment-label { flex: 1; line-height: 1.6; }
.saved-check { color: #3b7364; font-size: 12px; }
#manifest-link { font-size: 11px; color: #556b82; }
.studio-main { min-width: 0; border: 1px solid var(--ui-border); border-radius: 15px; box-shadow: var(--ui-shadow); background: #fff; padding: 30px; scroll-margin-top: 20px; }
.studio-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.studio-topline #take-status { font-size: 11px; color: #596a7f; }
.studio-main h2 { font-size: 26px; line-height: 1.4; }
.studio-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 21px 0 13px; font-size: 11px; color: #596b7f; }
.studio-tools > label { display: flex; align-items: center; gap: 10px; margin: 0; }
.studio-tools input[type=range] { width: 95px; padding: 0; border: 0; background: transparent; accent-color: #117b77; border-radius: 0; box-shadow: none; }
.studio-tools input[type=checkbox] { width: 15px; height: 15px; }
.prompter { padding: 25px; max-height: clamp(230px, 39vh, 340px); overflow-y: auto; background: #f4f7fb; border: 1px solid #e3eaf3; border-radius: 11px; scrollbar-color: #a4bbd0 transparent; scrollbar-width: thin; }
.prompter p { font: 500 var(--prompt-font, 31px)/1.68 var(--ui-body); color: #2a4a6f; letter-spacing: -.02em; }
.recording-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.record-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; border-radius: 9px; background: linear-gradient(135deg, #2a527d, #233f65); color: #fff; font: 600 12px var(--ui-heading); min-height: 45px; min-width: 220px; box-shadow: 0 3px 6px #233f6514; }
.record-button:hover { background: #315b86; }
.record-dot { width: 9px; height: 9px; border-radius: 50%; background: #e1b56a; flex-shrink: 0; }
.record-button.is-recording { background: #b34d56; }
.record-button.is-recording .record-dot { border-radius: 2px; background: #fff; }
.record-button.is-counting { background: #677f9a; }
.meter-wrap { display: flex; align-items: center; gap: 14px; }
.meter-wrap canvas { width: 110px; height: 24px; }
.meter-wrap > span { font: 600 13px var(--ui-body); font-variant-numeric: tabular-nums; color: #576c83; }
.record-message { font-size: 12px; line-height: 1.8; color: #596b80; margin-top: 13px; min-height: 24px; }
.record-message.error { color: #b44549; }
.playback-panel { padding: 20px; border: 1px solid #dcece4; border-radius: 10px; background: #f2f8f5; margin-top: 21px; }
.playback-panel > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.playback-panel > div > span { font-size: 10px; color: #546e62; }
.playback-panel audio { display: block; width: 100%; height: 43px; margin: 14px 0; }
.playback-panel > a { font-size: 11px; color: #4c7165; }
.fragment-navigation, .studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 17px; border-top: 1px solid #e2eaf3; padding-top: 22px; margin-top: 25px; }
.fragment-navigation .button, .fragment-navigation .text-button { font-size: 11px; }
.visual-cue, .recording-tips { border: 1px solid #e1e9f3; border-radius: 9px; background: #fafcfe; margin-top: 22px; overflow: hidden; }
.visual-cue summary, .recording-tips summary { padding: 13px 17px; cursor: pointer; font-size: 12px; color: #516b82; }
.visual-cue p, .recording-tips p { margin: 13px 17px; color: #596b7e; font-size: 12px; line-height: 1.9; }
.visual-cue img { display: block; width: calc(100% - 34px); margin: 17px; border: 1px solid #e0e8f2; border-radius: 7px; }
.studio-downloads { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 20px; font-size: 12px; }
.studio-note { font-size: 11px; color: #596c7f; line-height: 1.9; margin-top: 19px; }
#studio-gate .button { margin-top: 20px; }
#studio-gate p { font-size: 14px; color: #596b7f; margin-top: 18px; }
.recording-state-label { color: #b44549 !important; }
.is-recording ~ .meter-wrap #record-time { color: #b44549; }
.mode-tile .mode-art { width: 100%; max-width: 150px; height: 128px; object-fit: contain; margin: 4px auto 20px; }
.mode-tile:has(.mode-art) > .lucide { width: 17px; height: 17px; padding: 0; border: 0; background: transparent; position: absolute; top: 20px; left: 20px; border-radius: 0; }
.mode-tile:has(.mode-art) { min-height: 310px; }
.text-secondary { color: #64748a !important; }
@media (max-width: 1200px) {
  .resource-library { gap: 16px; }
  .resource-unit { padding: 23px; }
  .resource-unit h2 { font-size: 17px; }
  .paper-library { flex-wrap: wrap; }
  .paper-library > div:nth-child(2) { flex-basis: calc(100% - 75px); }
  .course-front h1 { font-size: 40px; }
  .preview-document { padding: 21px; }
  .preview-document h2 { font-size: 18px; }
  .continue-bottom { gap: 15px; }
}
@media (max-width: 1100px) {
  .learner-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  .learner-side > .instructor-card { grid-column: 1/-1; }
  .learner-side > .course-sidecard { display: block; }
  .course-progress-card { grid-row: auto; }
}
@media (max-width: 900px) {
  .mobile-menu { display: inline-flex; }
  body.nav-open:after { display: none; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 1040; background: #142b464a; backdrop-filter: blur(2px); border: 0; border-radius: 0; }
  .course-front h1 { font-size: 34px; }
  .course-front { gap: 27px; }
  .preview-grid { grid-template-columns: 39px minmax(0, 1fr); }
  .preview-sidebar { gap: 18px; }
  .preview-sidebar .lucide { width: 15px; height: 15px; }
  .preview-document { padding: 18px; }
  .preview-document h2 { font-size: 17px; }
  .preview-document > p { font-size: 11px; }
  .preview-answer { padding: 13px; }
  .preview-answer > p { font-size: 12px; }
  .preview-document-footer { font-size: 8px; gap: 8px; }
  .program-unit summary { gap: 10px; padding: 18px; }
  .program-unit summary b { font-size: 12px; }
  .program-unit .unit-icon { width: 30px; height: 34px; border-radius: 9px; }
  .program-unit .unit-icon .lucide { width: 17px; height: 17px; }
  .program-body { padding-inline: 18px; }
  .program-body > p { font-size: 12px; }
  .tools-row, .educator-note { margin-inline: 26px; }
  .access-layout { gap: 28px; grid-template-columns: minmax(0, 1fr) 360px; }
  .access-aside-content { padding: 28px; }
  .access-aside-content h1 { font-size: 27px; }
  .access-benefits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .access-aside { min-height: 0; }
  .section-intro { gap: 25px; }
  .resource-library { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .resource-unit { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 0 18px; }
  .resource-unit > .unit-icon { grid-row: 1/4; margin-bottom: 0; }
  .resource-unit > .eyebrow { margin-bottom: 7px; }
  .resource-unit h2 { grid-column: 2; font-size: 19px; margin-bottom: 10px; }
  .resource-unit > p:not(.eyebrow) { grid-column: 2; margin-bottom: 16px; }
  .resource-unit > .button { grid-column: 2; justify-self: start; }
  .studio-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding-inline: 24px; }
  .studio-main { padding: 25px; }
  .recording-controls { flex-wrap: wrap; gap: 16px; }
  .record-button { min-width: 180px; }
  .meter-wrap { margin-left: auto; }
}
@media (max-width: 700px) {
  .access-layout { display: block; max-width: 470px; }
  .access-aside { display: none; }
  .course-front h1 { font-size: 37px; max-width: 630px; }
  .preview-document h2 { font-size: 21px; }
  .preview-grid { grid-template-columns: 46px minmax(0, 1fr); }
  .preview-document { padding: 23px; }
  .preview-document > p { font-size: 13px; }
  .preview-answer > p { font-size: 14px; }
  .preview-document-footer { font-size: 10px; }
  .program-unit summary b { font-size: 15px; }
  .program-unit .unit-icon { width: 39px; height: 41px; }
  .program-unit .unit-icon .lucide { width: 20px; height: 20px; }
  .program-body > p { font-size: 13px; }
  .section-intro { align-items: flex-start; flex-direction: column; gap: 15px; }
  .section-intro > p { font-size: 13px; }
  .section-intro.compact { flex-direction: row; gap: 18px; }
  .api-setup-layout { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .api-instructions { padding: 22px; }
  .studio-shell { display: block; padding-inline: 18px; margin-top: 22px; }
  .studio-sidebar { position: static; padding-bottom: 21px; }
  .studio-sidebar h1, .studio-sidebar > p:not(.eyebrow), .studio-progress, #manifest-link { display: none; }
  .studio-sidebar #fragment-list { display: flex; gap: 6px; overflow: auto; padding-bottom: 4px; max-height: none; margin: 13px 0 0; }
  #fragment-list li { flex-shrink: 0; }
  #fragment-list button { width: 49px; height: 43px; padding: 6px; justify-content: center; gap: 4px; }
  #fragment-list .fragment-label { display: none; }
  #fragment-list .fragment-no { width: 24px; height: 27px; font-size: 9px; }
  #fragment-list .saved-check { font-size: 9px; }
  .studio-main { padding: 23px 19px; border-radius: 12px; }
  .studio-main h2 { font-size: 25px; }
  .studio-tools { gap: 13px; flex-wrap: wrap; }
  .prompter { padding: 20px; max-height: 340px; }
  .prompter p { font-size: var(--prompt-font, 28px); }
  .record-button { width: 100%; min-width: 0; font-size: 12px; }
  .meter-wrap { width: 100%; justify-content: space-between; margin: 0; }
  .meter-wrap canvas { width: 150px; }
  .playback-panel > div { align-items: flex-start; flex-direction: column; gap: 8px; }
  .record-message { font-size: 12px; }
  .fragment-navigation { gap: 12px; }
  .fragment-navigation .text-button { font-size: 10px; padding-inline: 0; }
  .fragment-navigation .button { padding: 10px 12px; font-size: 10px; }
}
@media (max-width: 640px) {
  .brand-emblem { width: 34px; height: 37px; border-radius: 10px 10px 10px 3px; }
  .brand-emblem > .lucide { width: 20px; height: 20px; }
  .public-nav > .nav-link { display: none; }
  .topbar-person > span { display: none; }
  .topbar-person .person-photo { width: 29px; height: 32px; }
  .course-front h1 { font-size: 31px; }
  .front-instructor { flex-wrap: wrap; gap: 10px; }
  .front-instructor > p { font-size: 10px; }
  .instructor-divider { height: 29px; margin-inline: 2px; }
  .course-front-actions .btn { font-size: 11px; padding: 10px 13px; }
  .course-preview-window { transform: rotate(.5deg); }
  .preview-grid { grid-template-columns: 33px minmax(0, 1fr); min-height: 0; }
  .preview-sidebar { padding-top: 20px; gap: 20px; }
  .preview-sidebar .lucide { width: 13px; height: 13px; }
  .preview-sidebar .lucide:first-child { width: 26px; height: 27px; padding: 6px; border-radius: 6px; }
  .preview-document { padding: 19px 17px; }
  .preview-document h2 { font-size: 18px; }
  .preview-document > p { font-size: 11px; line-height: 1.85; }
  .preview-document-toolbar { margin-bottom: 16px; }
  .preview-tag { font-size: 8px; gap: 4px; padding: 4px 6px; }
  .preview-answer { padding: 13px; }
  .preview-answer > span { font-size: 8px; }
  .preview-answer > p { font-size: 12px; }
  .preview-document-footer { font-size: 8px; gap: 7px; margin-top: 15px; }
  .preview-document-footer > span { gap: 4px; }
  .preview-document-footer .lucide { width: 10px; height: 10px; }
  .window-topbar > span { font-size: 8px; }
  .window-topbar > .lucide { width: 12px; height: 12px; }
  .window-topbar { padding-inline: 10px; gap: 7px; }
  .window-dots { gap: 4px; }
  .window-dots i { width: 5px; height: 5px; }
  .floating-note { bottom: -6px; }
  .art-caption { margin-top: 25px; font-size: 9px; }
  .tools-row, .educator-note { margin-inline: 20px; }
  .tools-row { padding-block: 20px; }
  .educator-note { margin-bottom: 30px; gap: 10px; }
  .educator-note blockquote { font-size: 13px; }
  .educator-note > span .lucide { width: 16px; height: 16px; }
  .educator-note figcaption { margin-left: 26px; font-size: 10px; }
  .section-intro h2 { font-size: 23px; }
  .section-intro.compact h2 { font-size: 18px; line-height: 1.5; }
  .section-intro.compact p { font-size: 11px; }
  .section-intro.compact > span { font-size: 10px; }
  .program-unit summary { padding: 19px; min-height: 0; }
  .program-unit summary b { font-size: 14px; }
  .program-unit summary small { font-size: 8px; }
  .program-body { padding: 0 19px 19px; }
  .access-card .password-field .icon-button { width: 33px; height: 34px; }
  .access-symbol { width: 42px; height: 45px; }
  .access-help p { font-size: 11px; }
  .learner-side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .learner-side > .course-sidecard { display: block; }
  .course-progress-card { display: block; }
  .course-progress-card .progress-circle { margin: 22px auto; width: 113px; height: 113px; }
  .course-progress-card > p { text-align: center; margin-top: 13px; }
  .course-facts { font-size: 10px; }
  .continue-card { padding: 22px; gap: 16px; }
  .continue-copy h2 { font-size: 21px; line-height: 1.5; }
  .continue-copy p { font-size: 13px; }
  .continue-bottom { flex-wrap: wrap; gap: 18px; padding-top: 17px; }
  .continue-bottom .button { width: 100%; font-size: 11px; }
  .continue-top .continue-icon { width: 34px; height: 37px; }
  .continue-top .continue-meta { font-size: 9px; gap: 7px; }
  .enrollment-pill { font-size: 9px; padding: 5px 8px; }
  .learner-heading { align-items: flex-start; }
  .learner-heading h1 { font-size: 24px; }
  .learner-heading .enrollment-pill { margin-top: 3px; }
  .unit-heading > .unit-icon { width: 31px; height: 34px; }
  .unit-heading > .unit-icon .lucide { width: 16px; height: 16px; }
  .unit-heading h2 { font-size: 13px; }
  .unit-heading > span:last-child:not(.unit-icon) { font-size: 9px; }
  .activity-status { font-size: 8px; padding: 3px 6px; }
  .activity-status.status-locked { display: none; }
  .activity-row-end { gap: 7px; }
  .activity-open { width: 36px; height: 40px; }
  .activity-order { width: 23px; }
  .mode-tile:has(.mode-art) { min-height: 0; grid-template-columns: 85px minmax(0, 1fr); padding: 22px 19px; gap: 15px; }
  .mode-tile .mode-art { width: 89px; height: 110px; max-width: none; margin: 8px 0 0; }
  .mode-tile:has(.mode-art) > .lucide { display: none; }
  .mode-tile h2 { font-size: 19px; }
  .mode-tile strong { font-size: 10px; }
  .resource-unit { padding: 21px; grid-template-columns: 35px minmax(0, 1fr); gap: 0 13px; }
  .resource-unit > .unit-icon { width: 35px; height: 38px; }
  .resource-unit h2 { font-size: 18px; }
  .resource-unit > p:not(.eyebrow) { font-size: 13px; }
  .resource-unit > .button { font-size: 10px; padding: 9px 12px; }
  .paper-library { padding: 22px; gap: 15px; }
  .paper-library > .unit-icon { width: 33px; height: 36px; }
  .paper-library > div:nth-child(2) { flex-basis: calc(100% - 50px); }
  .paper-library h2 { font-size: 17px; }
  .paper-library p { font-size: 12px; }
  .paper-library > .btn { font-size: 10px; padding: 9px 12px; flex: 1; }
  .api-instructions { padding: 21px 18px; }
  .studio-body .site-header { padding: 15px 20px; min-height: 70px; }
  .studio-body .site-header .brand { font-size: 13px; }
  .studio-body .site-header .brand small { font-size: 8px; }
  .studio-body .site-header nav { font-size: 10px; gap: 12px; }
  .studio-body .site-header .demo-tag { display: none; }
}
.dashboard-overview { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); margin-top: 24px; }
.chart-card .teacher-section-head { align-items: flex-start; }
.chart-card .teacher-section-head h2 { font-size: 18px; margin-top: 9px; }
.chart-card .teacher-section-head .eyebrow { font-size: 9px; }
.chart-legend { margin-top: 0; display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 10px; line-height: 1.7; }
.chart-legend i { width: 7px; height: 7px; background: #218e88; margin-left: 8px; border-radius: 2px; }
.chart-legend i:nth-of-type(2) { background: #d7e1ed; }
.chart-footnote { font-size: 11px; line-height: 1.8; color: #5b6b7f; margin-top: 16px; }
.dashboard-actions { padding: 27px; border: 1px solid #e1e8f2; border-radius: 13px; background: linear-gradient(145deg, #fff, #f6f9fd); box-shadow: var(--ui-shadow); align-items: flex-start; }
.dashboard-actions .unit-icon { margin-bottom: 21px; width: 41px; height: 44px; }
.dashboard-actions h2 { font-size: 21px; line-height: 1.5; margin-bottom: 11px; }
.dashboard-actions p { color: #596b80; font-size: 13px; line-height: 1.9; max-width: 350px; }
.avatar-stack { display: flex; align-items: center; padding-left: 9px; margin: 21px 0 23px; }
.avatar-stack .person-photo { width: 39px; height: 43px; margin-left: -9px; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e7edf4; }
.avatar-stack > span { width: 34px; height: 36px; margin-left: -5px; border-radius: 9px; border: 2px solid #fff; background: #edf3fa; color: #566c85; font-size: 10px; display: grid; place-items: center; position: relative; }
.dashboard-actions > .btn { font-size: 11px; padding: 9px 13px; margin-top: auto; }
.teacher-heading-actions { display: flex; align-items: center; gap: 10px; }
.teacher-heading-actions .btn { font-size: 11px; }
.teacher-heading-actions > .text-button { font-size: 11px; }
.task-title { display: flex; align-items: center; justify-content: space-between; gap: 23px; margin-bottom: 15px; }
.task-title h1 { margin-bottom: 0; }
.task-points { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #73638b; background: #f1edf9; border: 1px solid #e7dff3; border-radius: 8px; padding: 8px 11px; white-space: nowrap; }
.task-points .lucide { width: 15px; height: 15px; }
.task-meta-bar { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 21px; }
.task-meta-bar .assigned-teacher { margin: 10px 0; }
.task-meta-bar .learning-tabs { margin: 10px 0; }
.task-stage-tabs { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #dce6f1; margin: 20px 0 27px; overflow-x: auto; }
.task-stage-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #596a7d; font-size: 12px; padding: 12px 15px 16px; min-height: 45px; white-space: nowrap; border-bottom: 2px solid transparent; }
.task-stage-tabs button > span { display: grid; place-items: center; width: 20px; height: 21px; background: #e8eef6; border: 1px solid #e0e8f2; border-radius: 6px; color: #5b6b7e; font-size: 9px; }
.task-stage-tabs button > .lucide { width: 15px; height: 15px; }
.task-stage-tabs button[aria-current=step] { border-bottom-color: #168b86; color: #3d6d82; font-weight: 650; }
.task-stage-tabs button[aria-current=step] > span { color: #fff; background: #2c7c7f; border-color: #2c7c7f; }
.task-instructions-panel { border: 1px solid #e1e8f2; border-radius: 12px; background: #fff; padding: 28px; box-shadow: var(--ui-shadow); }
.task-instructions-panel h2 { font-size: 21px; margin-bottom: 17px; }
.task-instructions-panel .task-intro { margin-top: 0; }
.task-instructions-panel .task-criteria { margin-bottom: 0; }
.task-start { display: flex; justify-content: flex-end; padding-top: 23px; margin-top: 25px; border-top: 1px solid #e3ebf4; }
.task-start .button { font-size: 12px; }
.task-form-intro { font-size: 14px; color: #586b7f; line-height: 1.9; margin: 10px 0 24px; max-width: 880px; }
.save-status { font-size: 11px; color: #507065; }
@media (max-width: 1100px) {
  .dashboard-overview { grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); gap: 18px; }
  .chart-card .teacher-section-head { flex-direction: column; gap: 12px; }
  .dashboard-actions { padding: 23px; }
  .dashboard-actions h2 { font-size: 19px; }
  .task-meta-bar { flex-wrap: wrap; gap: 5px 20px; }
  .task-meta-bar .learning-tabs { flex: 1; justify-content: flex-end; }
  .teacher-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 700px) {
  .dashboard-overview { grid-template-columns: minmax(0, 1fr); }
  .dashboard-actions { padding: 24px; }
  .dashboard-actions > .btn { margin-top: 0; }
  .task-title { align-items: flex-start; }
  .task-title h1 { font-size: 27px; }
  .task-meta-bar { display: block; }
  .task-meta-bar .learning-tabs { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .chart-card .teacher-section-head h2 { font-size: 18px; }
  .chart-card .teacher-section-head { gap: 13px; }
  .chart-card .chart-footnote { font-size: 10px; }
  .dashboard-actions h2 { font-size: 20px; }
  .dashboard-actions p { font-size: 13px; }
  .teacher-heading-actions > .btn { font-size: 10px; min-height: 37px; padding: 8px 10px; }
  .teacher-heading-actions > .text-button { font-size: 0; }
  .teacher-heading-actions > .text-button .lucide { width: 17px; height: 17px; }
  .teacher-heading-actions { gap: 5px; }
  .teacher-tabs button { min-height: 40px; }
  .activity-open { width: 40px; height: 44px; }
  .task-title { flex-direction: column; gap: 15px; }
  .task-title h1 { font-size: 25px; line-height: 1.45; }
  .task-points { padding: 5px 9px; font-size: 10px; }
  .task-stage-tabs { gap: 3px; margin-bottom: 23px; }
  .task-stage-tabs button { padding: 10px 8px 14px; gap: 6px; font-size: 10px; min-height: 45px; }
  .task-stage-tabs button > .lucide { display: none; }
  .task-stage-tabs button > span { width: 18px; height: 20px; font-size: 8px; border-radius: 5px; }
  .task-instructions-panel { padding: 23px 18px; }
  .task-instructions-panel h2 { font-size: 20px; }
  .task-start .button { width: 100%; font-size: 11px; }
  .task-form-intro { font-size: 13px; line-height: 1.9; }
  .breadcrumb-trail > .mobile-menu { display: inline-flex; flex-shrink: 0; }
}

/* Áreas de pulsación de la barra de navegación. */
.topbar-person { min-height: 44px; min-width: 40px; }
.topbar-actions > .icon-button { width: 40px; height: 42px; }
@media (max-width: 640px) {
  .breadcrumb-trail > .mobile-menu { width: 44px; height: 44px; }
  .topbar-actions > .icon-button { width: 44px; height: 44px; }
  .activity-open { width: 44px; height: 44px; }
  .delivery-card > :is(.button, .btn) { min-height: 40px; }
}
/* Access states, academic identity and support materials · revision 9 */
.brand-logo{display:block;width:42px;height:42px;flex:0 0 42px;filter:drop-shadow(0 3px 5px #203e6015)}
.activity-row{padding-block:22px;align-items:center;gap:14px}
.activity-row.is-current{background:#fcfefe;box-shadow:inset 3px 0 #258677}
.activity-personal-state{display:block;font-size:12px;line-height:1.45;color:#596c7d;margin-top:7px}
.activity-row-end{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:153px;flex-shrink:0}
.activity-row .activity-status{display:inline-flex;align-self:flex-end;gap:6px;font-size:11px;line-height:1.2;padding:6px 10px;font-weight:650;border-radius:7px}
.activity-row .activity-status>.lucide{width:14px;height:14px;flex-shrink:0}
.activity-row .status-ready{color:#175d43;background:#e7f5ed;border-color:#a7d4ba}
.activity-row .status-done{color:#274c70;background:#eaf1f9;border-color:#c3d4e6}
.activity-row .activity-status.status-locked{display:inline-flex;color:#7b4b13;background:#fff2db;border-color:#e8c38c}
.activity-row .status-locked>.lucide{width:17px;height:17px;stroke-width:2.2}
.activity-access-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 16px;border-radius:9px;font-size:13px;font-weight:650;line-height:1.2;border:1px solid transparent;transition:background .18s,box-shadow .18s,transform .18s;white-space:nowrap}
.activity-access-button .lucide{width:18px;height:18px;flex-shrink:0}
.activity-access-button.ready-access{color:white;background:#254c74;border-color:#254c74;box-shadow:0 4px 9px #254c7424}
.activity-access-button.ready-access:hover{color:white;background:#163954;border-color:#163954;box-shadow:0 6px 14px #254c7433;transform:translateY(-1px)}
.activity-access-button.review-access{color:#254c74;background:#f3f7fb;border-color:#b9cadc}
.activity-access-button.review-access:hover{background:#e6eef7}
.activity-access-button:focus-visible{outline:3px solid #146e74;outline-offset:3px}
.activity-access-button.locked-access:disabled{opacity:1;color:#7b4b13;background:#fff7e9;border:1px dashed #d2b58a;box-shadow:none;cursor:not-allowed}
.activity-access-button.locked-access>.lucide{width:21px;height:21px;stroke-width:2.1}
.activity-row.is-locked .activity-name h3{color:#3b4e62}
.activity-row.is-locked .activity-personal-state{color:#715c3e}
.resource-shortcuts{position:relative;overflow:hidden}
.resource-decoration{height:95px;position:relative;margin-bottom:4px;background:linear-gradient(115deg,#eff6fa,#edf7f3);border-radius:9px;overflow:hidden}
.resource-decoration img{position:absolute;width:133px;height:106px;right:8px;bottom:-7px}
.resource-decoration span{position:absolute;left:19px;top:24px;width:35px;height:35px;border:1px solid #bbd5d8;transform:rotate(18deg);border-radius:7px}
.resource-decoration span:after{content:"";position:absolute;width:16px;height:16px;left:22px;top:22px;border-radius:50%;background:#e2ba6f80}
.resource-shortcuts .mini-file{width:39px;height:43px;border:0;border-radius:8px;background:#eaf2f8}
.resource-shortcuts .mini-file>.lucide{width:20px;height:20px;color:#315d80}
.resource-shortcuts .unit-file-1{background:#e7f5ef}.resource-shortcuts .unit-file-1>.lucide{color:#277064}
.resource-shortcuts .unit-file-2{background:#f3edfa}.resource-shortcuts .unit-file-2>.lucide{color:#71538c}
.resource-shortcuts>a small{font-size:11px;line-height:1.45;margin-top:4px}
.resource-library .resource-unit{display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:25px}
.resource-library .resource-unit>.resource-unit-art{display:block;width:145px;height:116px;object-fit:contain;align-self:flex-end;margin:0 -1px 12px 0}
.resource-library .resource-unit>.unit-icon{position:absolute;top:28px;left:26px}
.resource-library .resource-unit>p:not(.eyebrow){flex:1}
.resource-library .resource-unit>.button{align-self:flex-start}
@media(max-width:650px){
 .brand-logo{width:36px;height:36px;flex-basis:36px}
 .activity-row{display:grid;grid-template-columns:27px minmax(0,1fr);gap:12px;padding:20px 18px}
 .activity-row .activity-order{width:27px;height:31px;align-self:start;margin-top:3px}
 .activity-row .activity-name h3{font-size:14px;line-height:1.5}
 .activity-row .activity-kind{font-size:10px}
 .activity-personal-state{font-size:12px;margin-top:6px}
 .activity-row-end{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-width:0;width:100%;margin-top:3px}
 .activity-row .activity-status{font-size:10px;align-self:auto;padding:6px 8px;flex-shrink:0}
 .activity-access-button{min-height:46px;padding:11px 13px;font-size:12px}
 .resource-library .resource-unit>.resource-unit-art{width:139px;height:112px}
}
@media(prefers-reduced-motion:reduce){.activity-access-button{transition:none}.activity-access-button.ready-access:hover{transform:none}}

/* Revisión visual 10: lectura, teclado y contenido variable. */
:is(.activity-name,.delivery-student,.delivery-activity,.teacher-welcome>div,.sidebar-person>span,.voice-person>span){min-width:0}
:is(.activity-name h3,.delivery-student h3,.delivery-activity b,.roster-person h3,.profile-summary h1,.voice-person b,.task-title h1){overflow-wrap:anywhere}
.sidebar-person>span{flex:1}
:is(.teacher-heading,.task-title,.teacher-section-head){scroll-margin-top:90px}
:is(.teacher-tabs,.task-stage-tabs){scrollbar-width:thin;scrollbar-color:#b4c8d7 transparent;scroll-padding-inline:8px}
:is(.teacher-tabs,.task-stage-tabs) button:focus-visible{outline-offset:-3px}
:is(.program-unit,.voice-record,.support-practices,.details-box) summary:focus-visible{outline-offset:-3px}
::selection{background:#c3e8de;color:#183d58}
@media(max-width:640px){
 .task-stage-tabs button{font-size:12px;padding-inline:10px;min-height:46px}
 .task-stage-tabs button>span{font-size:10px}
 .teacher-tabs button{min-height:44px;font-size:12px}
 .dialog-close{width:44px;height:44px;top:9px;right:10px;font-size:23px}
 .access-card .password-field .icon-button{width:44px;height:44px}
 .oral-controls :is(.text-button,button){min-height:44px;padding:10px 12px}
 .ai-control .button{min-height:44px;font-size:12px}
 .activity-personal-state{line-height:1.6}
}
@media(forced-colors:active){
 .activity-status,.activity-access-button,.button,.btn,.side-link.active{border:1px solid ButtonText}
 .activity-access-button.locked-access:disabled{color:GrayText;border-color:GrayText}
 .status-ready,.status-done,.status-locked{color:CanvasText;background:Canvas}
 .side-link.active{outline:1px solid Highlight}
}
/* Consulta de prueba del docente: misma escala visual y sin chat permanente. */
.api-test-entry{margin-top:27px;padding:25px 27px;border:1px solid #dce8ef;border-radius:13px;background:linear-gradient(120deg,#fff,#f0f7f5);display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--ui-shadow)}
.api-test-entry>div{min-width:0;max-width:580px}
.api-test-entry h2{font-size:21px;line-height:1.45;margin:9px 0}
.api-test-entry p{font-size:14px;line-height:1.8;color:#566a7c}
.api-test-entry>.btn{flex-shrink:0;min-height:45px;font-size:13px;gap:8px}
.api-test-entry>.btn .lucide{width:18px;height:18px}
.ai-test-dialog{width:calc(100% - 36px);max-width:720px;max-height:min(88vh,850px);max-height:min(88dvh,850px);padding:30px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7cbd8 transparent}
.ai-test-dialog::backdrop{background:#142b4670;backdrop-filter:blur(5px)}
.ai-test-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
.ai-test-heading>div{min-width:0}
.ai-test-heading h2{font-size:25px;line-height:1.35;margin:9px 0 0;padding:0}
.ai-test-heading>.icon-button{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border:1px solid #dbe5ee;border-radius:9px;background:#f5f8fc;color:#4b657d}
.ai-test-heading>.icon-button:hover{background:#e8f0f7;color:#203e60}
.ai-test-heading>.icon-button .lucide{width:20px;height:20px}
.ai-test-dialog #ai-test-model{font-size:13px;margin-bottom:23px;overflow-wrap:anywhere}
.ai-test-dialog form>label{display:block;font-size:14px;font-weight:650;margin-bottom:9px;color:#3e5772}
.ai-test-dialog textarea{font-size:16px;line-height:1.7;min-height:143px;padding:13px 15px;resize:vertical}
.ai-test-dialog form>.field-hint{font-size:12px;line-height:1.7;margin:11px 0 20px}
.ai-test-dialog form>.btn{min-height:45px;font-size:13px;gap:8px}
.ai-test-dialog form>.btn .lucide{width:17px;height:17px}
.ai-test-dialog #ai-test-message:not(:empty){padding:13px 16px;background:#eef5fa;border:1px solid #d9e6f0;border-radius:8px;color:#3d5974;font-size:13px;line-height:1.7;margin-top:20px;overflow-wrap:anywhere}
.ai-test-dialog #ai-test-message.error{color:#9c333d;background:#fff2f4;border-color:#e9c5cd}
.ai-test-result{margin-top:23px;padding-top:22px;border-top:1px solid #e0e8ef}
.ai-test-result h3{font-size:18px;line-height:1.5;margin:0 0 8px}
.ai-test-result>.field-hint{font-size:12px;margin:0 0 15px;overflow-wrap:anywhere}
.ai-test-response{background:#f7fafc;border:1px solid #e0e9f0;border-radius:10px;padding:19px 21px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;font-size:16px;line-height:1.85;color:#2c4965}
@media(max-width:640px){
 .api-test-entry{padding:21px 19px;flex-direction:column;align-items:stretch;gap:18px}
 .api-test-entry>.btn{align-self:stretch}
 .api-test-entry h2{font-size:20px}
 .ai-test-dialog{width:calc(100% - 26px);max-height:90vh;max-height:90dvh;padding:23px 19px;border-radius:13px}
 .ai-test-heading{gap:14px}.ai-test-heading h2{font-size:23px}
 .ai-test-dialog form>.btn{width:100%}
 .ai-test-response{padding:16px;font-size:15px}
}
/* Learning-resource links must remain readable when two guides share a row. */
.learning-tabs a,.learning-tabs button{font-size:13px;line-height:1.45;min-height:44px}
@media(max-width:650px){.learning-tabs a,.learning-tabs button{font-size:12px;min-height:46px}}
/* Consulta en preparación: una referencia del caso, sin enviar a un proveedor. */
.query-preview { margin:22px 0; border:1px solid #d7e1ed; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 7px 24px #203e6008; }
.query-preview figcaption { display:flex; align-items:center; gap:11px; padding:13px 18px; border-bottom:1px solid #e3eaf1; background:#f7f9fc; font-size:14px; font-weight:600; color:#243f60; }
.query-ai-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:#233f65; color:#fff; font:700 12px var(--ui-heading); }
.query-unsent { margin-left:auto; padding:4px 9px; background:#fff4df; color:#79551a; border:1px solid #efdfbc; border-radius:20px; font-size:11px; white-space:nowrap; }
.query-chat-body { padding:19px 21px 13px; background:linear-gradient(135deg,#fff,#f6f9fc); }
.query-person { display:flex; gap:9px; align-items:center; margin-bottom:12px; color:#243c58; font-size:14px; font-weight:600; }
.query-person-avatar { display:grid; place-items:center; width:31px; height:31px; border:1px solid #d7e1ec; border-radius:50%; background:#eaf0f8; font-size:11px; }
.query-person small { margin-left:auto; font-size:11px; font-weight:400; color:#718094; }
.query-composer { position:relative; border:1px solid #cdd9e6; border-radius:13px; background:#fff; padding:18px 48px 18px 18px; }
.query-draft { margin:0; color:#263b54; font:16px/1.65 var(--ui-body); overflow-wrap:anywhere; white-space:pre-wrap; min-height:5.2em; }
.query-send-icon { position:absolute; right:12px; bottom:13px; display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:#e4ecf5; color:#526b88; font-size:19px; }
.query-draft-note { color:#6a7b8c; font-size:12px; margin:9px 0 0; }
.query-caret { display:none; }.is-typing .query-caret { display:inline-block; width:2px; height:1em; background:#168b86; vertical-align:middle; margin-left:2px; animation:query-caret .8s steps(1) infinite; }
@keyframes query-caret {50%{opacity:0}}
.video-start-notice { display:flex; align-items:flex-start; gap:18px; border:1px solid #cbdbee; border-radius:15px; padding:25px; background:#fff; margin:24px 0 18px; box-shadow:var(--ui-shadow); }
.video-start-notice h2 { font-size:21px; margin:0 0 12px; }.video-start-notice p { font-size:15px; line-height:1.65; color:#52657a; }
.video-notice-icon { display:grid; place-items:center; flex:0 0 43px; height:43px; color:#fff; background:#233f65; border-radius:12px; }
.video-preferences { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:18px 0; }.video-preferences label { display:flex; align-items:center; gap:10px; margin:0; font-size:14px; }.video-preferences input { width:130px; accent-color:#233f65; }
.lesson-playback-progress { display:flex; flex-wrap:wrap; align-items:center; gap:13px; color:#e4edf7; padding:14px 17px; font-size:12px; }.lesson-playback-progress progress { flex:1 1 180px; height:5px; accent-color:#85c3b9; }.lesson-playback-progress #video-step-status { margin-left:auto; }
.interactive-player video { pointer-events:none; }.interactive-player[hidden],.video-start-notice[hidden] { display:none!important; }
@media(max-width:600px){.query-chat-body{padding:14px}.query-preview figcaption{padding:11px;font-size:12px}.query-person small{font-size:10px}.query-draft{font-size:15px}.query-composer{padding:14px 38px 14px 14px}.video-start-notice{padding:19px;gap:12px}.video-notice-icon{flex-basis:32px;height:32px}.video-start-notice .button{width:100%}.video-preferences{gap:12px}.query-unsent{padding:3px 7px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.query-caret{animation:none!important}}

/* Caso de Diego: mensajes legibles y disponibles como texto. */
.group-conversation{max-width:760px;margin:24px auto;border:1px solid #d1ded8;background:#eeeae2;overflow:hidden;border-radius:16px}
.group-conversation-title{display:flex;gap:12px;align-items:center;background:#155c4e;color:white;padding:16px 20px}.group-conversation-title>span{display:grid;place-items:center;width:38px;height:38px;background:#d7ebe2;color:#155c4e;border-radius:50%;font-weight:700}.group-conversation-title small{display:block;opacity:.85;margin-top:3px}
.group-conversation ol{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:20px}.group-message{background:white;max-width:92%;padding:12px 16px;border-radius:4px 14px 14px;box-shadow:0 1px 2px #213e2f0d;font-size:16px;line-height:1.55;color:#243e44}.group-message p{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 5px!important;font-size:12px;color:#216a58}.group-message time{margin-left:auto;color:#69786f}.group-message.outgoing{align-self:flex-end;background:#dbefcf;border-radius:14px 4px 14px 14px}.group-caption{font-size:12px;line-height:1.5;padding:0 20px;color:#53645d}.group-conversation>a{display:block;padding:0 20px 16px;color:#155c4e;font-size:13px}@media(max-width:600px){.group-conversation ol{padding:12px}.group-message{max-width:98%;font-size:15px;padding:10px 12px}}