/* Manrope, la tipografia del rediseno, autoalojada.
   No se enlaza a Google Fonts porque la CSP declara `font-src 'self'` y
   `default-src 'self'`: el <link> del prototipo quedaria bloqueado en
   produccion. Los dos .woff2 salen del propio paquete offline del diseno, asi
   que no hay descarga externa ni dependencia de red.
   Manrope es variable, de modo que un archivo por subconjunto cubre los pesos
   400-800: latin (24 KB) y latin-ext (15 KB) bastan para el espanol. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  font-family: Manrope, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: #172033;
  background: #f3f5f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html, body {
  scrollbar-width: thin;
  scrollbar-color: #00707d #e5edf1;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #e5edf1; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  border: 3px solid #e5edf1;
  border-radius: 999px;
  background: #00707d;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #005c66; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.app {
  /* Sistema visual del rediseno "Academia AIU": turquesa, pizarra y azul noche.
     El turquesa de cabecera del diseno es #00A3B6, pero --brand se usa 33 veces
     como TEXTO y ese tono da 3.04:1 sobre blanco, por debajo de AA. El propio
     diseno ya resuelve esa tension: pinta los enlaces en #007F8E (4.74:1) y
     reserva #00A3B6 para acentos donde no hay texto encima. Se respeta esa
     division con dos variables en vez de forzar un solo turquesa. */
  --bg: #eef3f6;
  --surface: #ffffff;
  --surface-subtle: #f7fbfc;
  --surface-strong: #edf2f5;
  --border: #e1e9ee;
  --border-soft: #f2f7f9;
  --text: #22293a;
  --text-soft: #5c6779;
  /* El diseno propone #8C96A3 para el texto apagado, pero se usa a 10px sobre
     blanco y ahi da 3.00:1. Se oscurece dentro de la misma familia gris-azulada
     hasta 4.71:1. El valor anterior del proyecto (#7e899b) tampoco cumplia
     (3.54:1), asi que esto corrige un incumplimiento que ya venia de antes. */
  --muted: #6b7484;
  --brand: #00707d;
  --brand-strong: #005c66;
  --brand-accent: #00a3b6;
  --brand-soft: #e0f0f5;
  --green: #19734b;
  --green-soft: #eaf7f0;
  --orange: #c65b18;
  --orange-soft: #fff0e5;
  --red: #b83242;
  --red-soft: #fae9eb;
  /* El ambar del diseno es #A66B08, pero se usa como texto sobre --yellow-soft
     en pastillas de 11 px y ahi da 4.09:1, por debajo de AA. Se oscurece dentro
     de la misma familia hasta 5.21:1; es el mismo tono que .aiu-week-icon ya
     usaba desde Inicio, asi que no introduce un ambar nuevo. */
  --yellow: #8f5c07;
  --yellow-soft: #fff5db;
  --sidebar: #0d1635;
  --sidebar-soft: #182348;
  --sidebar-text: #c9d8e4;
  --shadow: 0 1px 2px rgba(13, 22, 53, .06);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  color: var(--text);
  background: var(--bg);
}

.app[data-theme="dark"] {
  --bg: #101419;
  --surface: #171c22;
  --surface-subtle: #1c2229;
  --surface-strong: #252c34;
  --border: #343c46;
  --border-soft: #2a3139;
  --text: #f0f3f6;
  --text-soft: #b2bdca;
  --muted: #8793a1;
  /* La familia turquesa se aclara para servir de texto sobre superficie oscura:
     #5ed3e0 da 9.68:1 sobre --surface. El acento mantiene el turquesa pleno del
     diseno, que ahi solo hace de relleno decorativo. */
  --brand: #5ed3e0;
  --brand-strong: #8fe3ec;
  --brand-accent: #00a3b6;
  --brand-soft: #14262c;
  --green: #58bc87;
  --green-soft: #1b2d24;
  --orange: #f39858;
  --orange-soft: #32251c;
  --red: #f17380;
  --red-soft: #342126;
  --yellow: #e7b650;
  --yellow-soft: #30291a;
  --sidebar: #080e20;
  --sidebar-soft: #131c3a;
  --sidebar-text: #d5e2ec;
  --shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

/* La autenticacion es una frontera: la navegacion y la identidad de ejemplo
   permanecen ocultas hasta que el servidor confirme una sesion valida. */
.app[data-session-required="true"],
.app.sidebar-compact[data-session-required="true"] { grid-template-columns: minmax(0, 1fr); }
.app[data-session-required="true"] .sidebar,
.app[data-session-required="true"] .topbar,
.app[data-session-required="true"] .mobile-tabbar { display: none !important; }
.app[data-session-required="true"] .workspace,
.app[data-session-required="true"] .access-denied-meta { display: none !important; }
.app[data-session-required="true"] .main {
  width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
}
/* La pista de Grid se dimensiona antes de resolver porcentajes del hijo. Usar
   100% aqui producia un ciclo de tamano intrinseco y encogia el login al ancho
   minimo de sus palabras. El viewport da una referencia estable en el estado
   sin sidebar y conserva 16 px de margen por lado en pantallas pequenas. */
.app[data-session-required="true"] .access-denied {
  width: min(calc(100vw - 32px), 620px); max-width: 100%;
  grid-template-columns: minmax(0, 1fr); justify-self: center;
}

html:has(dialog[open]),
body:has(dialog[open]),
body:has(.academy-editor-dialog-backdrop) { overflow: hidden; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  color: var(--sidebar-text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  z-index: 20;
}

.app.sidebar-compact { grid-template-columns: 80px minmax(0, 1fr); }
.app.sidebar-compact .brand { justify-content: center; padding-inline: 10px; }
.app.sidebar-compact .brand > span:last-child,
.app.sidebar-compact .organ-label,
.app.sidebar-compact .nav-item > span:nth-child(2),
.app.sidebar-compact .nav-count,
.app.sidebar-compact .sidebar-status strong,
.app.sidebar-compact .sidebar-status small { display: none; }
.app.sidebar-compact .nav-secondary { display: grid; }
.app.sidebar-compact .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.app.sidebar-compact .nav-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 10px; }
.app.sidebar-compact .sidebar-status > div { justify-content: center; }
.app.sidebar-compact .sidebar-logout { width: 40px; padding-inline: 0; justify-content: center; }
.app.sidebar-compact .sidebar-logout span { display: none; }

.brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; }
.brand-mark {
  width: 42px; height: 42px; display: block; flex: 0 0 42px;
  overflow: hidden; background: #383e4c; border-radius: 13px;
  box-shadow: 0 8px 20px rgba(0, 163, 182, .35);
}
.brand-mark img { display: block; width: auto; max-width: none; height: 50px; }
.brand strong { display: block; font-size: 15px; letter-spacing: 0; }
.brand small { display: block; font-size: 10px; letter-spacing: .12em; color: #8c96a3; }
.organ-label {
  margin: 2px 14px 10px; padding: 10px 12px; border: 1px solid rgba(224,240,245,.16);
  border-radius: 12px; color: #8fe3ec; font-size: 12px; font-weight: 650;
}
.nav { display: grid; gap: 3px; padding: 8px; }
.nav-item {
  width: 100%; height: 42px; display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 8px; padding: 0 10px; border: 0;
  background: transparent; color: #c9d8e4; text-align: left; font-size: 13px; font-weight: 600;
}
/* El radio va con `.sidebar` delante a proposito: existe una regla global
   `.app :where(button, ...)` que fija 20px con la misma especificidad que
   `.nav-item` y, al declararse despues, ganaba. El rail del diseno es de 15. */
.sidebar .nav-item { border-radius: 15px; }
.nav-item:hover { background: rgba(224,240,245,.08); color: white; }
/* El diseno marca el item activo con un tinte turquesa y un anillo interior, en
   vez de un bloque solido con barra lateral. Se mantiene el peso 700 para que la
   seleccion se lea tambien sin color. */
.nav-item.active {
  background: rgba(0,163,182,.2); color: white; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(0,163,182,.5);
}
.nav-demo-link {
  width: 100%; height: 42px; display: grid; grid-template-columns: 28px 1fr;
  align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(244,119,33,.42);
  border-radius: 13px; background: rgba(244,119,33,.08); color: #f7d4bc;
  font-size: 13px; text-decoration: none;
}
.nav-demo-link:hover { border-color: #f47721; background: rgba(244,119,33,.16); color: white; }
.nav-icon {
  width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(224,240,245,.16);
  border-radius: 8px; text-align: center; line-height: 1;
}
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.nav-item.active .nav-icon { border-color: rgba(143,227,236,.6); color: #8fe3ec; }
.nav-count { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #182348; text-align: center; font-size: 10px; }
.nav-count.is-loading { display: inline-grid; min-height: 18px; padding: 0; place-items: center; }
.nav-count.is-loading::before {
  width: 10px; height: 10px; content: "";
  border: 2px solid rgba(255, 255, 255, .32); border-top-color: #8fe3ec; border-radius: 50%;
  animation: learning-count-spin .72s linear infinite;
}
.nav-count.is-error { color: #ffe0ca; background: #8e4b20; }
@keyframes learning-count-spin { to { transform: rotate(360deg); } }
.nav-count.warning { background: #8e4b20; color: #ffe0ca; }
.sidebar-status { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-status > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sidebar-status small { display: block; margin-top: 6px; color: #8494a7; font-size: 10px; line-height: 1.45; }
.sidebar-logout {
  width: 100%; min-height: 40px; margin-top: 14px; display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 0 12px; border: 1px solid rgba(224,240,245,.18); border-radius: 13px;
  background: rgba(224,240,245,.06); color: #d5e2ec; font-size: 12px; font-weight: 700;
}
.sidebar-logout:hover { border-color: rgba(143,227,236,.55); background: rgba(0,163,182,.16); color: #fff; }
.sidebar-logout svg { width: 17px; height: 17px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e29b37; }
.status-dot.live { background: #4ec287; }
.status-dot.blocked { background: var(--red); }
.status-dot.degraded, .status-dot.checking { background: #e29b37; }
.status-dot.offline { background: #ef6674; }

.main { min-width: 0; }
.access-denied {
  min-height: calc(100vh - 68px); padding: 48px 24px; display: grid; place-items: center;
  align-content: center; text-align: center;
}
.access-denied[hidden] { display: none; }
.access-denied-brand {
  margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
  color: var(--text); text-align: left;
}
.access-denied-brand .brand-mark {
  width: 58px; height: 58px; flex-basis: 58px; border-radius: 16px;
}
.access-denied-brand .brand-mark img { height: 68px; }
.access-denied-brand strong { display: block; font-size: 18px; letter-spacing: .02em; }
.access-denied-brand small {
  display: block; margin-top: 2px; color: var(--muted); font-size: 10px;
  font-weight: 700; letter-spacing: .14em;
}
.access-denied h2 { max-width: 620px; margin: 7px 0 8px; font-size: 24px; }
.access-denied p { max-width: 620px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.access-denied-meta { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.access-denied-meta span {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--muted); font-size: 10px;
}
.login-form {
  width: min(380px, 100%); margin-top: 22px; padding: 18px; display: grid; gap: 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
  text-align: left;
}
.login-form[hidden] { display: none; }
.login-form label { display: grid; gap: 5px; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.login-form small { min-height: 16px; color: var(--red); font-size: 10px; line-height: 1.4; }
.login-form .primary-button { width: 100%; }
.topbar {
  min-height: 72px; display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 30px 10px;
  background: var(--bg);
  border: 0; border-radius: 0; position: sticky; top: 0; z-index: 15;
  box-shadow: none;
}
.title-block { min-width: 0; }
.title-block small, .eyebrow { color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.title-block h1 { margin: 2px 0 0; font-size: 25px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app[data-active-view="content-studio"] .title-block { flex: 1 1 360px; }
.app[data-active-view="content-studio"] .title-block h1 { font-size: 21px; }
.app[data-active-view="content-studio"] .top-search { width: min(250px, 22vw); }
.top-search {
  width: min(310px, 28vw); height: 40px; margin-left: auto; display: flex; align-items: center; gap: 9px;
  padding: 0 14px; border: 0; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow);
}
.top-search > button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; }
.top-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px; }
.top-search input::placeholder { color: var(--muted); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* El buscador permanece en el DOM cuando el rol no puede ver Conocimiento.
   Solo debe agrupar las acciones a su lado cuando realmente esta visible y
   el ancho de escritorio permite mostrarlo; de lo contrario, las acciones
   conservan el margen automatico y ocupan el extremo derecho. */
@media (min-width: 1101px) {
  .top-search:not([hidden]) + .top-actions { margin-left: 0; }
}
/* En Perfil, apariencia/sesion viven en la pantalla: no duplicar cabecera (p19). */
.app[data-active-view="profile"] #themeButton,
.app[data-active-view="profile"] #settingsButton { display: none; }
.top-progress { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 13px; border-radius: 13px; background: var(--sidebar); color: #fff; }
.top-progress[hidden] { display: none; }
.top-progress small { color: #8fe3ec; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.top-progress strong { display: grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 9px; background: var(--brand-accent); color: #08252b; font-size: 11px; white-space: nowrap; }
.environment-badge { border-radius: 4px; padding: 4px 7px; background: var(--yellow-soft); color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.environment-badge.live { background: var(--green-soft); color: var(--green); }
.environment-badge.blocked { background: var(--red-soft); color: var(--red); }
.icon-button {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text-soft); font-size: 17px;
}
.icon-button:hover { border-color: var(--muted); color: var(--text); }
.menu-button { display: none; }
.sidebar-toggle-button { display: grid; }
.mobile-home-identity, .mobile-activity-button { display: none; }
.mobile-documentation-button { display: none; text-decoration: none; }

@media (max-width: 720px) {
  .mobile-documentation-button { display: grid; flex: none; }
}
.profile-button {
  height: 42px; display: flex; align-items: center; gap: 9px; padding: 3px 9px 3px 4px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text);
}
.profile-button > span:nth-child(2) { text-align: left; min-width: 110px; }
.profile-button strong, .profile-button small { display: block; line-height: 1.25; }
.profile-button strong { font-size: 12px; }
.profile-button small { color: var(--muted); font-size: 10px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--brand); color: white; font-weight: 750; font-size: 11px; }

.workspace { padding: 22px 30px 30px; max-width: 1500px; margin: 0 auto; }

/* The Academy uses one friendly 20px surface language. Circular status,
   progress and avatar elements retain their semantic shape. */
.app :where(button, input, select, textarea, dialog),
.app :where(.home-metrics, .metrics-strip, .table-panel, .assistant-card,
  .assistant-modes, .assistant-conversation, .assistant-trace, .knowledge-panel,
  .knowledge-search, .learning-panel, .approval-detail, .approval-list,
  .role-admin-panel, .gamification-settings, .leaderboard-panel, .lesson-manager-layout,
  .login-form, .access-denied-brand) { border-radius: 20px; }
.app :where(.avatar, .status-dot, .live-indicator i, .nav-count, .progress-track,
  .microlearning-progress-track, .microlearning-stage-label > span,
  .microlearning-lesson-index, .microlearning-task-dots button) { border-radius: 999px; }
.view { display: none; }
.view.active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.section-heading h2 { margin: 4px 0 5px; font-size: 24px; letter-spacing: 0; }
.section-heading p { margin: 0; color: var(--text-soft); font-size: 13px; max-width: 720px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px;
}
.home-heading h2 { margin: 4px 0 5px; font-size: 26px; letter-spacing: 0; }
.home-heading p { max-width: 760px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.home-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}
.home-metrics > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--border-soft); }
.home-metrics > div:last-child { border-right: 0; }
.home-metrics span, .home-metrics small { display: block; color: var(--muted); font-size: 10px; }
.home-metrics strong { display: block; margin: 4px 0 2px; font-size: 22px; line-height: 1; }
.home-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
  gap: 16px; align-items: start;
}
.home-brain, .home-learning, .home-activity, .home-actions {
  min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow);
}
.home-panel-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.home-panel-heading h3 { margin: 3px 0 0; font-size: 15px; }
.home-brain > p { margin: 14px 16px 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.home-question-form { padding: 14px 16px 10px; }
.home-question-form label { display: block; margin-bottom: 7px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
.home-question-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.home-question-form input { min-height: 42px; }
.home-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 16px; }
.home-suggestions button, .text-button {
  border: 0; background: transparent; color: var(--brand); font-size: 10px; font-weight: 700;
}
.home-suggestions button {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle);
}
.home-suggestions button:hover { border-color: var(--brand); }
.text-button { padding: 5px; }
.text-button:hover { text-decoration: underline; }
.home-learning-content { min-height: 218px; }
.home-learning-main { padding: 16px; }
.home-learning-main h4 { margin: 12px 0 5px; font-size: 17px; }
.home-learning-main > p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.home-progress { height: 6px; margin: 16px 0 8px; overflow: hidden; border-radius: 999px; background: var(--surface-strong); }
.home-progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.home-learning-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 9px; }
.home-learning-meta span { overflow-wrap: anywhere; }
.home-empty { padding: 34px 18px; text-align: center; color: var(--text-soft); }
.home-empty strong { display: block; color: var(--text); font-size: 12px; }
.home-empty p { margin: 5px auto 0; max-width: 300px; font-size: 10px; line-height: 1.5; }
.home-activity-list { max-height: 285px; overflow-y: auto; }
.home-activity-list > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: transparent; color: var(--text); text-align: left;
}
.home-activity-list > button:hover { background: var(--surface-subtle); }
.home-activity-list strong, .home-activity-list small { display: block; }
.home-activity-list strong { font-size: 11px; }
.home-activity-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.home-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-soft); }
.home-action-list > button {
  min-height: 72px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px;
  padding: 12px; border: 0; background: var(--surface); color: var(--text); text-align: left;
}
.home-action-list > button:hover { background: var(--surface-subtle); }
.home-action-icon {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand); font: 800 9px ui-monospace, monospace;
}
.home-action-list strong, .home-action-list small { display: block; }
.home-action-list strong { font-size: 11px; }
.home-action-list small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.primary-button, .secondary-button, .danger-button {
  min-height: 36px; border-radius: 6px; padding: 8px 13px; font-weight: 650; font-size: 12px;
}
.primary-button { border: 1px solid var(--brand); background: var(--brand); color: white; }
.primary-button:hover { background: var(--brand-strong); }
.secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.secondary-button:hover { border-color: var(--muted); }
.danger-button { border: 1px solid var(--red); background: var(--red-soft); color: var(--red); }
button:disabled { cursor: not-allowed; opacity: .48; }

.metrics-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}
.metrics-strip > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--border-soft); }
.metrics-strip > div:last-child { border-right: 0; }
.metrics-strip span, .metrics-strip small { display: block; color: var(--muted); font-size: 10px; }
.metrics-strip strong { display: block; margin: 4px 0 2px; font-size: 22px; line-height: 1; letter-spacing: 0; }
.metrics-strip .metric-status { color: var(--green); font-size: 18px; }
.rh-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.danger-text { color: var(--red); }

.knowledge-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); gap: 18px; align-items: start; }
.assistant-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
.assistant-layout[hidden] { display: none !important; }
.assistant-modes, .assistant-workspace, .assistant-trace {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.assistant-modes { padding: 7px; display: grid; gap: 3px; }
.assistant-mode {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px;
  padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); text-align: left;
}
.assistant-mode:hover { background: var(--surface-subtle); }
.assistant-mode.active { border-color: var(--brand); border-radius: 16px; background: var(--brand-soft); color: var(--brand); }
.assistant-mode .mode-icon {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px;
  background: var(--surface-strong); color: var(--muted); font: 700 9px ui-monospace, monospace;
}
.assistant-mode.active .mode-icon { background: var(--brand); color: white; }
.assistant-mode strong, .assistant-mode small { display: block; }
.assistant-mode strong { font-size: 11px; }
.assistant-mode small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.assistant-workspace { overflow: hidden; }
.assistant-context { display: flex; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border-soft); }
.assistant-context h3 { margin: 3px 0 4px; font-size: 16px; }
.assistant-context p { max-width: 680px; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.assistant-thread { min-height: 300px; max-height: 560px; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; background: var(--surface-subtle); }
.assistant-empty { margin: auto; max-width: 360px; text-align: center; color: var(--text-soft); }
.assistant-empty strong { display: block; color: var(--text); font-size: 13px; }
.assistant-empty p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.assistant-message { max-width: 96%; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.55; }
.assistant-message.user { justify-self: end; background: var(--brand-soft); color: var(--text); border-bottom-right-radius: 2px; }
.assistant-message.ai { justify-self: start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
.assistant-message-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.assistant-message-head strong { color: var(--brand); font-size: 10px; text-transform: uppercase; }
.assistant-message-head span { color: var(--muted); font: 9px ui-monospace, monospace; }
.assistant-result-grid { display: grid; gap: 7px; margin-top: 9px; }
.assistant-result-item { padding: 8px; border-left: 3px solid var(--brand); background: var(--surface-subtle); }
.assistant-result-item strong, .assistant-result-item small { display: block; }
.assistant-result-item small { margin-top: 3px; color: var(--text-soft); line-height: 1.45; }
.assistant-result-item.warning { border-left-color: var(--orange); background: var(--orange-soft); }
.assistant-draft { padding: 11px 12px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface); }
.assistant-draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assistant-draft-heading > strong { color: var(--brand); font-size: 10px; text-transform: uppercase; }
.assistant-draft p { margin: 9px 0 0; color: var(--text); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.assistant-step-list, .assistant-check-list { margin: 7px 0 0; padding: 0; list-style: none; }
.assistant-step-list { display: grid; gap: 6px; }
.assistant-step-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 7px; }
.assistant-step-list li > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 9px; font-weight: 800; }
.assistant-step-list p { margin: 1px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.assistant-check-list { display: grid; gap: 4px; }
.assistant-check-list li { position: relative; padding-left: 17px; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.assistant-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.assistant-form { padding: 14px 16px; border-top: 1px solid var(--border-soft); }
#assistantFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.assistant-field { display: grid; gap: 5px; }
.assistant-field.wide { grid-column: 1 / -1; }
.assistant-field label { font-size: 10px; font-weight: 700; color: var(--text-soft); }
.assistant-field textarea { min-height: 76px; }
.assistant-submit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.assistant-submit-row > span { color: var(--muted); font-size: 9px; }
.assistant-trace { overflow: hidden; }
.trace-list { margin: 0; padding: 4px 14px; }
.trace-list div { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.trace-list dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.trace-list dd { margin: 3px 0 0; overflow-wrap: anywhere; font: 10px ui-monospace, monospace; line-height: 1.4; }
.human-control-note { margin: 12px; padding: 10px; border-left: 3px solid var(--orange); background: var(--orange-soft); }
.human-control-note strong { color: var(--orange); font-size: 11px; }
.human-control-note p { margin: 4px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-top: 1px solid var(--border-soft); }
.activity-heading h3 { margin: 2px 0 0; font-size: 13px; }
.icon-button.compact { width: 28px; height: 28px; font-size: 14px; }
.activity-list { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--border-soft); }
.activity-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left; }
.activity-item:hover { background: var(--surface-subtle); }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { font-size: 10px; }
.activity-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.query-column { display: grid; gap: 12px; }
.query-composer, .answer-panel, .history-panel, .source-column, .course-browser, .lesson-workspace, .approval-list, .approval-detail, .table-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.query-composer { padding: 16px; }
.query-composer > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
textarea, input, select {
  width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle);
  color: var(--text); outline: none;
}
textarea:focus, input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
textarea { resize: vertical; min-height: 112px; padding: 12px; line-height: 1.55; }
input, select { min-height: 36px; padding: 7px 10px; }
.composer-footer { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 12px; }
.access-control { display: grid; grid-template-columns: auto minmax(170px, 240px); align-items: center; gap: 8px; }
.access-control label { color: var(--muted); font-size: 11px; }
.suggestions { display: flex; gap: 7px; flex-wrap: wrap; }
.suggestions button {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft);
  padding: 6px 10px; font-size: 11px;
}
.suggestions button:hover { color: var(--brand); border-color: var(--brand); }
.answer-panel { overflow: hidden; }
.answer-panel.empty { border-style: dashed; box-shadow: none; }
.answer-header, .panel-heading, .lesson-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.answer-header h3, .panel-heading h3, .lesson-header h3 { margin: 3px 0 0; font-size: 15px; letter-spacing: 0; }
.ai-label { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.answer-state, .live-indicator, .document-badge, .status-badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700;
}
.answer-state.neutral { background: var(--surface-strong); color: var(--muted); }
.answer-state.success, .status-badge.success { background: var(--green-soft); color: var(--green); }
.answer-state.warning, .status-badge.warning { background: var(--yellow-soft); color: var(--yellow); }
.answer-state.error, .status-badge.error { background: var(--red-soft); color: var(--red); }
.answer-body { padding: 18px 16px 10px; font-size: 14px; line-height: 1.72; }
.answer-body p { margin: 0 0 12px; }
.answer-body p:last-child { margin-bottom: 0; }
.answer-body h3,
.answer-body h4,
.answer-body h5 { margin: 16px 0 8px; color: var(--ink); line-height: 1.3; }
.answer-body h3 { font-size: 18px; }
.answer-body h4 { font-size: 16px; }
.answer-body h5 { font-size: 14px; }
.answer-body ul,
.answer-body ol { margin: 8px 0 14px; padding-left: 24px; }
.answer-body li + li { margin-top: 6px; }
.answer-body blockquote { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--cyan-soft); }
.answer-body pre { max-width: 100%; overflow: auto; margin: 12px 0; padding: 14px; border-radius: 14px; background: var(--navy); color: #f8fafc; }
.answer-body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }
.answer-body :not(pre) > code { padding: 2px 6px; border-radius: 7px; background: var(--cyan-soft); color: var(--navy); }
.answer-body a { color: var(--brand-strong); font-weight: 700; }
.source-list { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 16px 14px; }
.source-list button { border: 0; border-radius: 5px; background: var(--brand-soft); color: var(--brand); padding: 6px 8px; font-size: 10px; font-family: ui-monospace, monospace; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.source-list button small { color: var(--text-muted); font-family: inherit; font-size: 9px; }
.answer-meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-subtle); color: var(--muted); font-size: 10px; }
.feedback-row { display: flex; align-items: center; gap: 7px; padding: 0 16px 14px; color: var(--text-soft); font-size: 11px; }
.feedback-row .secondary-button { min-height: 30px; padding: 4px 10px; }
.history-panel { overflow: hidden; }
.history-list { max-height: 260px; overflow: auto; }
.history-item {
  width: 100%; display: grid; gap: 4px; padding: 11px 14px; border: 0;
  border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left;
}
.history-item:hover { background: var(--surface-subtle); }
.history-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 650; }
.history-item small { color: var(--muted); font-size: 9px; }

.source-column { overflow: hidden; }
.live-indicator { color: var(--green); background: var(--green-soft); }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.filter-row { display: grid; grid-template-columns: 1fr 150px; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border-soft); }
.document-table-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 72px 70px; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-subtle);
  color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.document-list { max-height: 490px; overflow: auto; }
.document-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 72px 70px; gap: 8px;
  align-items: start; padding: 11px 12px; border-bottom: 1px solid var(--border-soft);
}
.document-row:last-child { border-bottom: 0; }
.document-row strong { display: block; font-size: 12px; }
.document-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.document-approval-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.document-approval-actions button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.document-value { min-width: 0; padding-top: 1px; color: var(--text-soft); font: 9px ui-monospace, monospace; overflow-wrap: anywhere; }
.document-badge { align-self: start; justify-self: start; background: var(--surface-strong); color: var(--text-soft); padding-inline: 6px; }
.document-badge.success { background: var(--green-soft); color: var(--green); }
.document-badge.warning { background: var(--yellow-soft); color: var(--yellow); }
.document-badge.error { background: var(--red-soft); color: var(--red); }
.ingest-gate { padding: 14px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
.ingest-gate strong { font-size: 12px; }
.ingest-gate p { margin: 4px 0 10px; color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.empty-list { padding: 28px 18px; color: var(--muted); text-align: center; font-size: 12px; }
.table-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 4px 0; font-size: 12px; }
.table-pager button { min-width: 72px; }
.source-pdf { width: 100%; min-height: 62vh; border: 0; background: #0f172a; }
.source-dialog .source-content { max-height: 58vh; overflow: auto; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.chatbot-thread { max-height: 280px; overflow: auto; display: grid; gap: 8px; margin-bottom: 12px; }
.policy-facts { display: grid; gap: 10px; margin: 12px 0 0; }
.policy-facts dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.policy-facts dd { margin: 2px 0 0; font-size: 13px; }

.learning-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.course-catalog { margin-top: 18px; }
.course-catalog > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.course-catalog > summary::-webkit-details-marker { display: none; }
.course-catalog > summary strong, .course-catalog > summary small { display: block; }
.course-catalog > summary strong { font-size: 13px; }
.course-catalog > summary small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.course-catalog[open] > summary { border-bottom: 1px solid var(--border-soft); }
.course-catalog td:first-child { min-width: 190px; white-space: normal; }
.course-catalog td strong, .course-catalog td small { display: block; }
.course-catalog td small { margin-top: 3px; color: var(--muted); font: 9px ui-monospace, monospace; }
.course-actions { display: flex; gap: 6px; }
.course-actions button { min-height: 30px; padding: 4px 9px; font-size: 10px; }
.course-browser { overflow: hidden; }
.course-browser-head { padding: 16px; border-bottom: 1px solid var(--border-soft); }
.course-browser-head h3 { margin: 4px 0; font-size: 16px; }
.course-browser-head p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.course-browser-head input { min-height: 34px; }
.module-list { max-height: 690px; overflow-y: auto; }
.module-item { position: relative; width: 100%; display: block; padding: 14px 48px 14px 14px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left; }
.module-item:last-child { border-bottom: 0; }
.module-item:hover, .module-item.active { background: var(--brand-soft); }
.module-item strong { display: block; font-size: 12px; line-height: 1.35; }
.module-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.module-item .course-coverage-label { display: block; margin-top: 7px; color: var(--text-soft); font-size: 10px; line-height: 1.4; }
.module-item .course-readiness { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; line-height: 1.4; }
.module-item .course-readiness.ready { color: var(--green); }
.module-item .course-readiness.blocked { color: var(--danger); }
.course-progress-value { position: absolute; top: 14px; right: 12px; color: var(--green); font-size: 10px; font-weight: 800; }
.module-item .mini-progress { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.module-item .mini-progress i, .progress-track i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.lesson-workspace { min-height: 480px; overflow: hidden; }
.learning-body {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  height: clamp(520px, calc(100dvh - 330px), 720px); min-height: 0;
}
.lesson-navigator {
  min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; border-right: 1px solid var(--border-soft); background: var(--surface-subtle);
}
.lesson-navigator-head { display: grid; gap: 10px; padding: 16px; border-bottom: 1px solid var(--border-soft); }
.lesson-navigator-head strong { display: block; margin-top: 4px; font-size: 12px; }
.lesson-index { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.lesson-index-item { width: 100%; min-height: 68px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left; }
.lesson-index-item:hover, .lesson-index-item.active { background: var(--brand-soft); }
.lesson-index-item.active { box-shadow: inset 3px 0 0 var(--brand); }
.lesson-index-item.completed .lesson-step-number { background: var(--green); color: white; }
.lesson-step-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: var(--text-soft); font-size: 10px; font-weight: 800; }
.lesson-index-item strong, .lesson-index-item small { display: block; }
.lesson-index-item strong { font-size: 10px; line-height: 1.4; }
.lesson-index-item small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.lesson-pedagogy-state { width: fit-content; padding: 2px 5px; border-radius: 4px; font-weight: 700; }
.lesson-pedagogy-state.ready { background: var(--green-soft); color: var(--green); }
.lesson-pedagogy-state.preparing { background: var(--yellow-soft); color: var(--yellow); }
.lesson-pedagogy-state.unavailable { background: var(--red-soft); color: var(--red); }
.progress-label { color: var(--green); font-size: 13px; font-weight: 800; }
.progress-track { height: 5px; background: var(--surface-strong); }
.progress-track i { width: 0; transition: width .25s ease; }
.lesson-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; }
.lesson-content {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  color: var(--text-soft); line-height: 1.7;
}
.lesson-content:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.micro-lesson-navigation {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(18px, 4vw, 32px);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(8px);
}
.micro-progress-track { display: flex; gap: 5px; margin-top: 7px; }
.micro-progress-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--surface-strong); }
.micro-progress-dot.complete { background: var(--green); }
.micro-navigation-actions { display: flex; gap: 7px; }
.micro-navigation-actions button { min-width: 92px; }
.learning-empty { min-height: 430px; display: grid; place-items: center; align-content: center; padding: 32px; text-align: center; }
.learning-empty strong { color: var(--text); font-size: 18px; }
.learning-empty p { max-width: 470px; }
.course-introduction { padding: 30px; }
.course-introduction h2 { margin: 6px 0 10px; color: var(--text); font-size: 25px; }
.course-introduction h3 { margin-top: 24px; color: var(--text); font-size: 15px; }
.course-evaluation-note, .pedagogy-pending { margin-top: 24px; padding: 16px; border-left: 4px solid var(--yellow); background: var(--yellow-soft); }
.course-evaluation-note p, .pedagogy-pending p { margin: 5px 0 0; }
.exam-source-notice { margin-top: 16px; padding: 16px; border: 1px solid var(--brand); border-left: 4px solid var(--brand); background: var(--brand-soft); color: var(--text); }
.exam-source-notice strong { display: block; margin-bottom: 8px; }
.exam-source-notice p { margin: 6px 0 0; color: var(--text-soft); line-height: 1.6; }
.exam-grounding-note { margin-bottom: 16px; padding: 12px 14px; border-left: 4px solid var(--green); background: var(--green-soft); }
.exam-grounding-note strong { display: block; }
.exam-grounding-note p { margin: 5px 0 0; color: var(--text-soft); }
.loading-copy { color: var(--muted); font-size: 11px; }
.learning-article { max-width: 840px; margin: 0 auto; padding: 30px clamp(22px, 5vw, 56px) 40px; }
.learning-article-head { padding-bottom: 24px; border-bottom: 1px solid var(--border-soft); }
.learning-article-head h2 { margin: 10px 0; color: var(--text); font-size: 25px; line-height: 1.25; }
.learning-article-head p { margin: 0; font-size: 15px; line-height: 1.7; }
.micro-unit-label { display: block; margin-top: 18px; color: var(--brand); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.micro-introduction { margin: 24px 0; padding: 16px 0; color: var(--text); font-size: 16px; line-height: 1.7; }
.micro-introduction p { margin: 0; }
.micro-video { margin: 24px 0; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.micro-video-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.micro-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #101720; object-fit: contain; }
.micro-video p { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.lesson-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-meta-row span { padding: 4px 7px; border-radius: 4px; background: var(--surface-strong); color: var(--text-soft); font-size: 9px; font-weight: 700; }
.why-band, .worked-example, .takeaway-band { margin: 26px 0; padding: 20px; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.why-band p, .worked-example p { margin: 7px 0 0; color: var(--text); }
.worked-example { border-color: var(--green); background: var(--green-soft); }
.worked-example h3 { margin: 5px 0 10px; color: var(--text); font-size: 17px; }
.takeaway-band { border-color: var(--orange); background: var(--orange-soft); }
.learning-section { position: relative; padding: 28px 0; border-top: 1px solid var(--border-soft); }
.learning-section h3 { margin: 0 0 18px 42px; color: var(--text); font-size: 18px; }
.section-number { position: absolute; top: 27px; left: 0; color: var(--brand); font-size: 11px; font-weight: 850; }
.concept-list { margin: 0; }
.concept-list div { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 18px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.concept-list dt { color: var(--text); font-weight: 750; }
.concept-list dd { margin: 0; }
.procedure-steps { margin: 0; padding: 0; list-style: none; }
.procedure-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.procedure-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-size: 11px; font-weight: 800; }
.procedure-steps h4 { margin: 0 0 4px; color: var(--text); font-size: 14px; }
.procedure-steps p { margin: 0; }
.procedure-steps small { display: block; margin-top: 7px; color: var(--text-soft); font-size: 10px; }
.warning-section li { margin: 8px 0; }
.self-check-list details { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.self-check-list summary { cursor: pointer; color: var(--text); font-weight: 700; }
.self-check-list summary:focus-visible, .lesson-trace summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
.self-check-list p { margin: 9px 0 0 20px; }
.takeaway-list { margin: 8px 0 0; padding-left: 20px; }
.takeaway-list li { margin: 7px 0; }
.lesson-trace { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.lesson-trace summary { cursor: pointer; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.lesson-trace p { overflow-wrap: anywhere; font-size: 11px; }
.lesson-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border-soft); }
.exam-panel { margin: 0 18px 18px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); }
.exam-panel h4 { margin: 0 0 12px; }
.exam-question { min-width: 0; margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--border-soft); }
.exam-question:first-of-type { border-top: 0; }
.exam-question legend { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 0; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.5; }
.exam-question-number { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-size: 10px; }
.exam-instruction { margin: 6px 0 12px 36px; color: var(--muted); font-size: 10px; }
.exam-options { display: grid; gap: 8px; margin-left: 36px; }
.exam-option { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--border-soft); background: var(--surface); cursor: pointer; }
.exam-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.exam-option input { margin: 2px 0 0; accent-color: var(--brand); }
.exam-question small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.drag-token-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.drag-token { padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 11px; font-weight: 700; cursor: grab; }
.drag-token.selected { border-color: var(--brand); background: var(--brand-soft); }
.fill-sentence { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--orange); background: var(--orange-soft); color: var(--text); font-weight: 650; }
.fill-drop-zone { min-height: 52px; display: grid; place-items: center; gap: 2px; padding: 10px; border: 2px dashed var(--border); background: var(--surface); color: var(--muted); text-align: center; cursor: pointer; }
.fill-drop-zone.filled { border-style: solid; border-color: var(--green); background: var(--green-soft); color: var(--text); }
.fill-drop-zone span { font-size: 9px; }
.matching-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; margin-top: 14px; }
.matching-column { position: relative; z-index: 1; display: grid; align-content: start; gap: 8px; }
.matching-column > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.match-item { min-height: 52px; padding: 9px 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font-size: 10px; line-height: 1.4; }
.match-item:hover, .match-item.selected { border-color: var(--brand); background: var(--brand-soft); }
.match-item.paired { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.matching-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.matching-lines path { fill: none; stroke: var(--brand); stroke-width: 2; }
.matching-lines marker path { fill: var(--brand); stroke: none; }
.matching-summary { margin-top: 10px; color: var(--text-soft); font-size: 10px; }
.exam-question textarea { width: calc(100% - 36px); margin: 12px 0 0 36px; }
.exam-result { padding: 18px; border-left: 4px solid var(--green); background: var(--green-soft); }
.exam-result.failed { border-color: var(--red); background: var(--red-soft); }
.exam-result strong { display: block; margin: 7px 0; font-size: 26px; }
.exam-result p, .exam-feedback p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.exam-feedback { padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.exam-feedback strong { font-size: 11px; }
.source-link { margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--brand); font-size: 10px; font-weight: 700; }

.approval-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.approval-list { overflow: hidden; }
.approval-item { width: 100%; padding: 14px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left; }
.approval-item:hover, .approval-item.active { background: var(--orange-soft); }
.approval-item .row-top { display: flex; justify-content: space-between; gap: 8px; }
.approval-item strong { font-family: ui-monospace, monospace; font-size: 11px; }
.approval-item small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.approval-detail { min-height: 420px; padding: 20px; }
.empty-detail { display: grid; place-items: center; align-content: center; min-height: 360px; color: var(--muted); text-align: center; }
.empty-detail p { max-width: 480px; font-size: 12px; line-height: 1.6; }
.approval-detail h3 { margin: 3px 0 18px; font-size: 20px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.detail-grid > div { padding: 12px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.detail-grid > div:nth-child(2n) { border-right: 0; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.detail-grid strong { margin-top: 4px; font-size: 12px; }
.payload-box { margin: 14px 0; padding: 13px; border-left: 3px solid var(--orange); background: var(--orange-soft); border-radius: 0 6px 6px 0; }
.payload-box pre { white-space: pre-wrap; word-break: break-word; font-size: 11px; margin: 8px 0 0; }
.decision-actions { display: flex; justify-content: flex-end; gap: 8px; }

.insights-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; align-items: start; }
.insights-layout td:first-child { max-width: 520px; white-space: normal; line-height: 1.45; }
.insights-layout td:last-child { white-space: normal; }
.institutional-loop { margin-top: 18px; }
.institutional-loop .panel-heading { align-items: center; }
.institutional-loop .panel-heading p {
  max-width: 760px; margin: 5px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.5;
}
.institutional-loop td { vertical-align: top; white-space: normal; line-height: 1.45; }
.institutional-loop td strong, .loop-secondary { display: block; }
.loop-secondary { margin-top: 4px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.institutional-loop-note {
  margin: 0; padding: 10px 12px; border-top: 1px solid var(--border-soft);
  color: var(--muted); background: var(--surface-subtle); font-size: 9px;
}
.loop-empty { padding: 24px 12px; text-align: center; }
.loop-empty strong { font-size: 12px; }
.loop-empty p { max-width: 620px; margin: 6px auto 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.table-panel { overflow: hidden; }
.alert-panel { margin-top: 18px; }
.role-admin-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.role-catalog, .role-binding-panel { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.policy-version { color: var(--brand); font: 10px ui-monospace, monospace; }
.role-policy-item { padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.role-policy-item:first-child { border-top: 0; }
.role-policy-item > div { display: flex; align-items: baseline; gap: 8px; }
.role-policy-item strong { font-size: 12px; }
.role-policy-item code, .role-policy-item small { color: var(--muted); font-size: 9px; }
.role-policy-item .status-badge { float: right; margin-top: -20px; }
.role-policy-item p { margin: 6px 0; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.actor-lookup { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(260px, 1.3fr) auto; align-items: end; gap: 14px; padding: 20px; border-bottom: 1px solid var(--border-soft); }
.actor-lookup label, .role-binding-form label { display: grid; gap: 5px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
.actor-id-advanced { grid-column: 1 / -1; padding: 10px 14px; border-radius: 14px; background: var(--surface-subtle); color: var(--text-soft); font-size: 11px; }
.actor-id-advanced summary { cursor: pointer; font-weight: 750; }
.actor-id-advanced label { margin-top: 10px; }
.binding-summary { padding: 13px 14px; background: var(--surface-subtle); }
.binding-summary strong, .binding-summary p { display: block; margin: 0; }
.binding-summary strong { font-size: 12px; }
.binding-summary p { margin-top: 4px; color: var(--muted); font: 9px ui-monospace, monospace; overflow-wrap: anywhere; }
.role-binding-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border-top: 1px solid var(--border); }
.role-binding-form .panel-heading { grid-column: 1 / -1; margin: -14px -14px 2px; }
.role-binding-form button { align-self: end; justify-self: end; }
.binding-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-top: 1px solid var(--border); background: var(--red-soft); }
.binding-danger strong { font-size: 11px; }
.binding-danger p { margin: 3px 0 0; color: var(--text-soft); font-size: 10px; }
.role-binding-panel code { white-space: normal; overflow-wrap: anywhere; font-size: 9px; }
.identity-admin { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.identity-admin > .section-heading { padding: 14px; margin: 0; border-bottom: 1px solid var(--border-soft); }
.invitation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.invitation-form label { display: grid; gap: 5px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
.invitation-form label small { color: var(--muted); font-weight: 400; }
.invitation-form select[multiple] { padding: 4px; }
.invitation-form button { grid-column: 1 / -1; justify-self: end; }
.invitation-result { padding: 14px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
.invitation-result p { margin: 6px 0 10px; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.invitation-result small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
/* El enlace se muestra en un campo de solo lectura, no como texto suelto, para
   que se pueda seleccionar entero de un gesto aunque falle el portapapeles. */
.invitation-link-row { display: flex; gap: 8px; }
.invitation-link-row input { flex: 1; min-width: 0; font: 10px ui-monospace, monospace; }
@media (max-width: 720px) {
  .invitation-form { grid-template-columns: minmax(0, 1fr); }
}
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { padding: 10px 12px; color: var(--muted); background: var(--surface-subtle); text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
td { padding: 11px 12px; border-top: 1px solid var(--border-soft); white-space: nowrap; }

.settings-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.course-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: 20px;
}
.course-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(860px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.course-dialog .dialog-heading { margin-bottom: 12px; }
.course-dialog .course-form-grid {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 8px;
}
.course-dialog .dialog-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; padding-block: 12px; background: var(--surface); }
.course-dialog .course-form-grid {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 58%, var(--border)) transparent;
}
.course-dialog .course-form-grid::-webkit-scrollbar { width: 8px; }
.course-dialog .course-form-grid::-webkit-scrollbar-track { background: transparent; }
.course-dialog .course-form-grid::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 58%, var(--border));
  background-clip: padding-box;
}
.course-dialog .course-form-grid::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: padding-box;
}
.lesson-manager-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.lesson-manager-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(760px, calc(100dvh - 32px)); padding: 0; overflow: hidden; }
.lesson-manager-heading { margin: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.lesson-manager-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.lesson-manager-layout { min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; }
.lesson-manager-sidebar { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--border); background: var(--surface-subtle); }
.lesson-manager-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.lesson-manager-toolbar strong { font-size: 11px; }
.lesson-manager-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.lesson-manager-item { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); text-align: left; }
.lesson-manager-item:hover, .lesson-manager-item.active { background: var(--brand-soft); }
.lesson-manager-item.active { box-shadow: inset 3px 0 0 var(--brand); }
.lesson-manager-item > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: var(--text-soft); font-size: 10px; font-weight: 800; }
.lesson-manager-item strong, .lesson-manager-item small { display: block; }
.lesson-manager-item strong { font-size: 11px; line-height: 1.35; }
.lesson-manager-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.lesson-manager-item em { align-self: center; font-style: normal; }
.lesson-manager-empty { padding: 22px 16px; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.lesson-manager-editor { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 20px; scrollbar-gutter: stable; }
.lesson-editor-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lesson-editor-intro p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.lesson-manager-grid { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 0 12px; }
.lesson-manager-wide { grid-column: 1 / -1; }
.lesson-manager-grid textarea { min-height: 82px; }
.lesson-manager-actions { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.lesson-manager-actions > span { flex: 1; }
.course-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.course-form-wide { grid-column: 1 / -1; }
.course-form-grid textarea { min-height: 90px; }
.first-lesson-authoring {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.lesson-authoring-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.lesson-authoring-heading h3 { margin: 5px 0 0; font-size: 16px; }
.lesson-authoring-heading p { max-width: 390px; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.lesson-step-badge {
  display: inline-flex; padding: 3px 6px; border-radius: 4px;
  background: var(--brand-soft); color: var(--brand); font-size: 9px; font-weight: 800; text-transform: uppercase;
}
.lesson-authoring-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); gap: 0 12px; }
.lesson-authoring-wide { grid-column: 1 / -1; }
.course-save-status {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-subtle); color: var(--text-soft); font-size: 11px; line-height: 1.5;
}
.course-save-status[data-tone="progress"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.course-save-status[data-tone="error"] { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.assignment-picker-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end;
}
.assignment-picker-heading > label { margin-top: 0; }
.assignment-picker-heading > .secondary-button { min-height: 42px; }
.assignment-catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; align-items: center; margin-top: 12px; }
.assignment-catalog-status {
  min-height: 36px; margin: 0; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-subtle); color: var(--text-soft); font-size: 10px; line-height: 1.45;
}
.assignment-catalog-status[data-tone="progress"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.assignment-catalog-status[data-tone="success"] { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.assignment-catalog-status[data-tone="warning"] { border-color: var(--yellow); background: var(--yellow-soft); color: var(--yellow); }
.assignment-catalog-status[data-tone="error"] { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.exam-threshold { margin: -4px 0 10px; color: var(--muted); font-size: 11px; }
.settings-dialog::backdrop { background: rgba(8, 13, 20, .58); backdrop-filter: blur(2px); }
.settings-dialog form { padding: 20px; }
.settings-dialog article { padding: 20px; }
#knowledgeApprovalDialog { max-height: calc(100dvh - 32px); }
#knowledgeApprovalDialog form { max-height: calc(100dvh - 32px); overflow-y: auto; }
#knowledgeApprovalRoles { min-height: 72px; }
#knowledgeApprovalDeniedRoles { min-height: 56px; }
#knowledgeApprovalReason { min-height: 72px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; }
.dialog-heading h2 { margin: 3px 0 0; font-size: 20px; }
.settings-dialog label { display: grid; gap: 5px; margin-top: 11px; font-size: 11px; font-weight: 650; }
/* R42: sin display:grid la etiqueta quedaba en línea y el borde se partía («Activar puntos» en Logros). */
.toggle-row { display: grid; gap: 12px; grid-template-columns: 1fr auto; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 7px; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { margin-top: 3px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.toggle-row input { width: 18px; height: 18px; min-height: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.session-identity { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); }
.session-identity > strong, .session-identity > small { display: block; }
.session-identity > strong { font-size: 11px; }
.session-identity > small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.session-identity input { color: var(--muted); cursor: not-allowed; }
.source-dialog { width: min(760px, calc(100vw - 32px)); }
.confirmation-dialog { width: min(520px, calc(100vw - 32px)); }
.confirmation-message { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.confirmation-details { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.confirmation-details > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 11px; border-top: 1px solid var(--border-soft); }
.confirmation-details > div:first-child { border-top: 0; }
.confirmation-details span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.confirmation-details strong { min-width: 0; color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.source-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.source-meta span { padding: 4px 7px; border-radius: 4px; background: var(--surface-strong); color: var(--text-soft); font: 10px ui-monospace, monospace; }
.source-content { max-height: 55vh; overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); white-space: pre-wrap; line-height: 1.7; font-size: 13px; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 14px);
  max-width: min(540px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 7px;
  background: var(--text); color: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.24);
  opacity: 0; pointer-events: none; transition: .18s ease; z-index: 50; font-size: 12px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-scrim { display: none; }
[hidden] { display: none !important; }

.gamification-principle {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding: 11px 14px;
  border-left: 3px solid var(--green); background: var(--green-soft); color: var(--text-soft);
  font-size: 11px; line-height: 1.5;
}
.gamification-principle strong { color: var(--green); white-space: nowrap; }
.gamification-journey {
  display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; align-items: center;
  gap: 8px; margin-bottom: 16px; padding: 14px 16px; border-block: 1px solid var(--border);
  background: var(--surface-subtle);
}
.gamification-journey a {
  min-width: 0; display: grid; grid-template-columns: 32px 1fr; column-gap: 9px;
  align-items: center; color: var(--text); text-decoration: none;
}
.gamification-journey a > span {
  grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: white; font-size: 11px; font-weight: 800;
}
.gamification-journey strong, .gamification-journey small { display: block; }
.gamification-journey strong { font-size: 11px; }
.gamification-journey small { color: var(--muted); font-size: 9px; }
.gamification-journey i { height: 2px; background: var(--border); }
.gamification-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.gamification-top-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; margin-bottom: 16px; }
.leaderboard-panel, .gamification-settings { margin: 0; }
.leaderboard-list { display: grid; gap: 8px; padding: 14px; }
.leaderboard-entry {
  min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle);
}
.leaderboard-entry.rank-1 { border-color: #d6a826; background: color-mix(in srgb, var(--yellow-soft) 68%, var(--surface)); }
.leaderboard-entry.rank-2 { border-color: #9aa6b2; }
.leaderboard-entry.rank-3 { border-color: #b77943; }
.leaderboard-rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: var(--text); font-weight: 800; }
.leaderboard-entry strong, .leaderboard-entry small { display: block; }
.leaderboard-entry small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.leaderboard-entry b { color: var(--brand); font-size: 12px; white-space: nowrap; }
.gamification-settings { padding: 14px; }
.gamification-settings .panel-heading { padding: 0 0 6px; }
.gamification-settings > label:not(.toggle-row) { display: grid; gap: 5px; margin-top: 10px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
.gamification-settings .primary-button { width: 100%; margin-top: 14px; }
.table-subtitle { display: block; max-width: 420px; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dialog-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#gamificationRuleDialog form, #rewardCampaignDialog form, #rewardGrantDialog form { max-height: calc(100dvh - 32px); overflow-y: auto; }

@media (max-width: 1100px) {
  .top-search { display: none; }
  .top-actions { margin-left: auto; }
  .home-grid { grid-template-columns: 1fr; }
  .knowledge-layout, .insights-layout, .role-admin-layout { grid-template-columns: 1fr; }
  .assistant-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .assistant-trace { grid-column: 1 / -1; }
  .trace-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trace-list div { padding: 10px; border-right: 1px solid var(--border-soft); }
  .human-control-note { margin-top: 6px; }
  .rh-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gamification-top-grid { grid-template-columns: 1fr; }
  .document-list { max-height: 360px; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app.sidebar-compact { grid-template-columns: 1fr; }
  .app.sidebar-compact .brand > span:last-child,
  .app.sidebar-compact .organ-label,
  .app.sidebar-compact .nav-item > span:nth-child(2),
  .app.sidebar-compact .nav-count,
  .app.sidebar-compact .sidebar-status strong,
  .app.sidebar-compact .sidebar-status small { display: initial; }
  .app.sidebar-compact .nav-secondary { display: grid; }
  .app.sidebar-compact .nav-item { grid-template-columns: 28px 1fr auto; justify-items: stretch; padding: 0 10px; }
  .sidebar { position: fixed; left: 0; top: 0; height: calc(100vh - 40px); margin: 20px; border-radius: 20px; box-shadow: 0 16px 38px rgba(17, 28, 43, .18); transform: translateX(calc(-100% - 40px)); width: min(280px, calc(100vw - 40px)); transition: transform .18s ease; }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .mobile-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 18; }
  .menu-button { display: grid; }
  .sidebar-toggle-button { display: none; }
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metrics > div:nth-child(2) { border-right: 0; }
  .home-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
  .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-strip > div:nth-child(2) { border-right: 0; }
  .metrics-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
  .learning-layout, .approval-layout { grid-template-columns: 1fr; }
  .course-form-grid { grid-template-columns: 1fr; }
  .course-form-wide { grid-column: auto; }
  .lesson-authoring-grid { grid-template-columns: 1fr; }
  .lesson-authoring-wide { grid-column: auto; }
  .lesson-manager-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .actor-lookup { grid-template-columns: 1fr 1fr; }
  .actor-lookup button { grid-column: 1 / -1; }
  .assistant-layout { grid-template-columns: 1fr; }
  .assistant-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: auto; }
  .assistant-mode { min-width: 150px; }
  .assistant-trace { grid-column: auto; }
  .module-list, .approval-list { max-height: 300px; overflow: auto; }
  .learning-body { grid-template-columns: 240px minmax(0, 1fr); }
  .gamification-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .workspace { padding: 18px 14px; }
  .topbar { min-height: 64px; margin: 10px 14px 4px; padding: 0 6px; top: 0; gap: 10px; }
  .app[data-active-view="home"] .mobile-home-identity {
    min-width: 0; display: flex; align-items: center; gap: 10px;
  }
  .mobile-home-avatar {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border-radius: 12px; background: var(--sidebar); color: white; font-size: 11px; font-weight: 800;
  }
  .mobile-home-identity > span:last-child { min-width: 0; display: grid; gap: 1px; }
  .mobile-home-identity small { color: var(--muted); font-size: 9px; font-weight: 700; }
  .mobile-home-identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .app[data-active-view="home"] .title-block { display: none; }
  .app[data-active-view="home"] .mobile-activity-button {
    position: relative; display: grid; border: 0; background: var(--surface);
  }
  .top-actions > :is(.environment-badge, .top-progress, #themeButton, .profile-button) { display: none; }
  .top-actions { margin-left: auto; }
  .app:not([data-active-view="home"]) .top-actions { display: none; }
  .mobile-activity-button > span {
    position: absolute; right: -2px; top: -3px; min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px; background: var(--brand); color: white;
    font-size: 8px; font-weight: 800;
  }
  .app[data-mobile-menu-required="false"] .menu-button { display: none; }
  .title-block small { display: none; }
  .title-block h1 { font-size: 17px; }
  .profile-button > span:nth-child(2), .environment-badge { display: none; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading h2 { font-size: 21px; }
  .home-heading { align-items: start; }
  .home-heading .live-indicator { display: none; }
  .home-heading h2 { font-size: 22px; }
  .home-metrics > div { padding: 12px; }
  .home-question-form > div { grid-template-columns: 1fr; }
  .home-question-form .primary-button { width: 100%; }
  .home-action-list { grid-template-columns: 1fr; }
  .home-learning-meta { display: grid; }
  .heading-actions { width: 100%; justify-content: stretch; }
  .heading-actions button { flex: 1 1 140px; }
  .lesson-authoring-heading { display: grid; gap: 8px; }
  .lesson-authoring-heading p { max-width: none; }
  .course-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .course-dialog form { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .course-dialog .dialog-actions { padding: 12px 0 4px; background: var(--surface); }
  .course-dialog .dialog-actions button { flex: 1 1 130px; }
  .lesson-manager-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .lesson-manager-dialog form { height: calc(100dvh - 16px); }
  .lesson-manager-layout { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 32vh) minmax(0, 1fr); }
  .lesson-manager-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .lesson-manager-grid { grid-template-columns: 1fr; }
  .lesson-manager-wide { grid-column: auto; }
  .lesson-manager-actions { flex-wrap: wrap; padding: 10px 14px; }
  .lesson-manager-actions > span { display: none; }
  .lesson-manager-actions button { flex: 1 1 120px; }
  .metrics-strip { grid-template-columns: 1fr 1fr; }
  .metrics-strip > div { padding: 12px; }
  .metrics-strip strong { font-size: 19px; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .access-control { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .document-table-head { display: none; }
  .document-row { grid-template-columns: minmax(0, 1fr) auto; }
  .document-row .document-value { display: none; }
  .document-row .document-badge.confidentiality { display: inline-flex; }
  .detail-grid { grid-template-columns: 1fr; }
  .assistant-modes { display: flex; }
  .assistant-mode { flex: 0 0 160px; }
  .assistant-context { align-items: flex-start; flex-direction: column; }
  #assistantFields { grid-template-columns: 1fr; }
  .assistant-field.wide { grid-column: auto; }
  .assistant-field textarea { min-height: 124px; }
  .assistant-submit-row { align-items: stretch; flex-direction: column; }
  .assistant-submit-row .primary-button { width: 100%; }
  .assistant-message { max-width: 96%; }
  .trace-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid > div { border-right: 0; }
  .actor-lookup, .role-binding-form { grid-template-columns: 1fr; }
  .actor-lookup button, .role-binding-form .panel-heading { grid-column: auto; }
  .binding-danger { align-items: stretch; flex-direction: column; }
  .gamification-principle { align-items: flex-start; flex-direction: column; }
  .gamification-journey { grid-template-columns: 1fr; }
  .gamification-journey i { width: 2px; height: 12px; margin-left: 15px; }
  .leaderboard-entry { grid-template-columns: 34px minmax(0, 1fr); }
  .leaderboard-entry b { grid-column: 2; }
  .dialog-two-columns { grid-template-columns: 1fr; }
  .responsive-table thead { display: none; }
  .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr { padding: 8px 12px; border-top: 1px solid var(--border-soft); }
  .responsive-table td { padding: 6px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .responsive-table td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em;
  }
  .learning-body { grid-template-columns: 1fr; }
  .lesson-navigator { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .lesson-index { max-height: 280px; }
  .learning-body { height: auto; }
  .lesson-stage { height: min(72dvh, 620px); }
  .learning-article { padding: 24px 18px 32px; }
  .learning-article-head h2 { font-size: 22px; }
  .concept-list div { grid-template-columns: 1fr; gap: 4px; }
  .micro-lesson-navigation { align-items: stretch; flex-direction: column; }
  .micro-navigation-actions { width: 100%; }
  .micro-navigation-actions button { flex: 1; }
  .matching-board { grid-template-columns: 1fr; gap: 18px; }
  .matching-lines { display: none; }
  .exam-options, .exam-instruction { margin-left: 0; }
  .exam-question textarea { width: 100%; margin-left: 0; }
  .lesson-actions { justify-content: stretch; }
  .lesson-actions button { flex: 1 1 150px; }
}

/* RC23: one approachable 20px radius across every visible Academy surface.
   True status, identity, progress and choice indicators remain circular. */
.app :where(
  button,
  input,
  select,
  textarea,
  dialog,
  article,
  section,
  [class*="card"],
  [class*="panel"],
  [class*="item"],
  [class*="box"],
  [class*="message"],
  [class*="badge"],
  [class*="chip"],
  [class*="tag"],
  [class*="content"],
  [class*="module"],
  [class*="lesson"],
  [class*="task"],
  [class*="source"],
  [class*="result"],
  [class*="option"],
  [class*="toggle"],
  [class*="identity"],
  [class*="confirmation"]
):not([class*="aiu-"]):not([class*="aiu-"] *):not(.nav-item):not(.brand-mark):not(.nav-icon) {
  /* El :not() acota una unificacion previa a 20px que se aplicaba con
     !important a casi toda la interfaz. El rediseno "Academia AIU" no usa un
     radio unico: paneles a 24, tarjetas de tarea a 17, fichas a 16, botones a
     14 e iconos a 13. Sin esta exclusion ningun radio del diseno se aplicaba.

     La segunda mitad excluye tambien los DESCENDIENTES: las tarjetas de tarea y
     las fichas son <button> sin clase propia dentro de un contenedor `aiu-`, de
     modo que la primera exclusion no las alcanzaba y seguian saliendo a 20px.

     Todo lo que quede fuera del rediseno conserva exactamente el
     comportamiento anterior. */
  border-radius: 20px !important;
}

.app :where(
  .avatar,
  .status-dot,
  .live-indicator i,
  .nav-count,
  .home-progress,
  .progress-track,
  .micro-progress-dot,
  .lesson-step-number,
  .exam-question-number,
  .procedure-steps li > span,
  .assistant-step-list li > span,
  .leaderboard-rank,
  .microlearning-progress-track,
  .microlearning-stage-label > span,
  .microlearning-lesson-index,
  .microlearning-task-dots button,
  .microlearning-spinner,
  input[type="radio"]
) { border-radius: 999px !important; }

/* RC24: didactic learner surfaces. Color identifies purpose without changing
   permissions, content state or the shared web/desktop information model. */
.view[data-view-panel="home"] .home-heading,
.view[data-view-panel="knowledge"] > .section-heading {
  position: relative;
  align-items: center;
  min-height: 128px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface));
  box-shadow: 0 14px 34px rgba(21, 50, 78, .09);
  border-radius: 20px !important;
}
.view[data-view-panel="home"] .home-heading::before,
.view[data-view-panel="knowledge"] > .section-heading::before {
  content: "";
  align-self: stretch;
  width: 7px;
  flex: 0 0 7px;
  background: var(--brand);
  border-radius: 20px;
}
.view[data-view-panel="home"] .home-heading > div,
.view[data-view-panel="knowledge"] > .section-heading > div { flex: 1; }
.view[data-view-panel="home"] .home-heading h2,
.view[data-view-panel="knowledge"] > .section-heading h2 { font-size: clamp(24px, 3vw, 32px); }

.view[data-view-panel="home"] .home-metrics,
.view[data-view-panel="knowledge"] > .metrics-strip {
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.view[data-view-panel="home"] .home-metrics > div,
.view[data-view-panel="knowledge"] > .metrics-strip > div {
  min-height: 100px;
  padding: 18px;
  border: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 20px !important;
}
.view[data-view-panel="home"] .home-metrics > div:nth-child(1),
.view[data-view-panel="knowledge"] > .metrics-strip > div:nth-child(1) {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  background: color-mix(in srgb, var(--brand-soft) 52%, var(--surface));
}
.view[data-view-panel="home"] .home-metrics > div:nth-child(2),
.view[data-view-panel="knowledge"] > .metrics-strip > div:nth-child(2) {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 58%, var(--surface));
}
.view[data-view-panel="home"] .home-metrics > div:nth-child(3),
.view[data-view-panel="knowledge"] > .metrics-strip > div:nth-child(3) {
  border-color: color-mix(in srgb, var(--orange) 25%, var(--border));
  background: color-mix(in srgb, var(--orange-soft) 58%, var(--surface));
}
.view[data-view-panel="home"] .home-metrics > div:nth-child(4),
.view[data-view-panel="knowledge"] > .metrics-strip > div:nth-child(4) {
  border-color: color-mix(in srgb, #9b4d87 28%, var(--border));
  background: color-mix(in srgb, #f7eaf3 58%, var(--surface));
}
.view[data-view-panel="home"] .home-metrics strong,
.view[data-view-panel="knowledge"] > .metrics-strip strong { margin-top: 8px; font-size: 26px; }

.view[data-view-panel="home"] .home-grid { gap: 20px; }
.view[data-view-panel="home"] :is(.home-brain, .home-learning, .home-activity, .home-actions) {
  border-width: 1px;
  border-top-width: 6px;
  box-shadow: 0 12px 28px rgba(21, 50, 78, .08);
}
.view[data-view-panel="home"] .home-brain {
  border-top-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 32%, var(--surface));
}
.view[data-view-panel="home"] .home-learning {
  border-top-color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 32%, var(--surface));
}
.view[data-view-panel="home"] .home-activity {
  border-top-color: var(--orange);
  background: color-mix(in srgb, var(--orange-soft) 26%, var(--surface));
}
.view[data-view-panel="home"] .home-actions {
  border-top-color: #9b4d87;
  background: color-mix(in srgb, #f7eaf3 28%, var(--surface));
}
.view[data-view-panel="home"] .home-panel-heading { padding: 18px 20px 14px; }
.view[data-view-panel="home"] .home-action-list {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  background: transparent;
}
.view[data-view-panel="home"] .home-action-list > button {
  min-height: 76px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.view[data-view-panel="home"] .home-action-list > button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
}
.view[data-view-panel="home"] .home-action-icon { width: 38px; height: 38px; background: var(--brand); color: white; }

.view[data-view-panel="knowledge"] .knowledge-layout { gap: 20px; }
.view[data-view-panel="knowledge"] :is(.query-composer, .answer-panel, .history-panel, .source-column) {
  overflow: hidden;
  border-width: 1px;
  border-top-width: 6px;
  box-shadow: 0 12px 28px rgba(21, 50, 78, .08);
}
.view[data-view-panel="knowledge"] .query-composer {
  padding: 22px;
  border-top-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 34%, var(--surface));
  border-radius: 20px !important;
}
.view[data-view-panel="knowledge"] .answer-panel { border-top-color: var(--green); }
.view[data-view-panel="knowledge"] .history-panel { border-top-color: var(--orange); }
.view[data-view-panel="knowledge"] .source-column {
  border-top-color: #9b4d87;
  background: color-mix(in srgb, #f7eaf3 22%, var(--surface));
}
.view[data-view-panel="knowledge"] .suggestions { gap: 10px; padding: 2px 4px; }
.view[data-view-panel="knowledge"] .suggestions button {
  min-height: 38px;
  padding-inline: 14px;
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  color: var(--brand);
}
.view[data-view-panel="knowledge"] .filter-row { gap: 10px; padding: 16px; background: var(--surface); }
.view[data-view-panel="knowledge"] .ingest-gate {
  margin: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
  background: var(--green-soft);
}

@media (max-width: 720px) {
  .view[data-view-panel="home"] .home-heading,
  .view[data-view-panel="knowledge"] > .section-heading { align-items: flex-start; min-height: 0; padding: 20px; }
  .view[data-view-panel="home"] .home-heading::before,
  .view[data-view-panel="knowledge"] > .section-heading::before { display: none; }
  .view[data-view-panel="home"] .home-metrics,
  .view[data-view-panel="knowledge"] > .metrics-strip { gap: 10px; }
  .view[data-view-panel="home"] .home-metrics > div,
  .view[data-view-panel="knowledge"] > .metrics-strip > div { min-height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Tinta sobre los rellenos de marca en tema oscuro.
   --brand se aclara en oscuro (#5ed3e0) porque su uso dominante es TEXTO sobre
   superficie oscura: 33 reglas lo usan asi. Pero nueve lo usan al reves, como
   relleno con texto blanco, y blanco sobre ese turquesa claro cae a 1.77:1.
   En oscuro esos rellenos llevan tinta oscura, que sobre el mismo turquesa
   supera 9:1. Aparecio midiendo contraste tras cambiar la paleta, no leyendo
   el CSS. */
[data-theme="dark"] .avatar,
/* `.aiu-cta` queda fuera: su fondo no es la variable que se aclara en oscuro
   sino el turquesa fijo #00808d, sobre el que lo legible es el blanco (4.70:1).
   Invertirlo tambien lo dejaba en 4.02:1. */
[data-theme="dark"] .primary-button:not(.aiu-cta),
[data-theme="dark"] .assistant-mode.active .mode-icon,
[data-theme="dark"] .procedure-steps li > span,
[data-theme="dark"] .exam-question-number,
[data-theme="dark"] .gamification-journey a > span,
[data-theme="dark"] .view[data-view-panel="home"] .home-action-icon { color: #08121a; }

/* ==================================================================
   Inicio, reconstruido segun el prototipo "Academia AIU"
   ==================================================================
   Los valores salen medidos del prototipo, no aproximados: heroe de
   radio 24 sobre azul noche con relleno 30/32, tarjetas de metrica de
   radio 20 y relleno 18, paneles de radio 24 y relleno 22, tarjetas de
   tarea de radio 17 con borde #E4EBF0, y la sombra de 1px del sistema.

   Lo que el prototipo inventa -racha de dias, tiempo dedicado, aciertos
   de repaso, certificados por renovar- no se hornea: el backend no
   produce esas cifras y ponerlas seria fabricar datos. Esos huecos los
   ocupan metricas reales con la misma forma.
   ================================================================== */
.aiu-home { display: flex; flex-direction: column; gap: 20px; padding: 22px; }
.aiu-home-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.aiu-home-top.session-hidden { grid-template-columns: minmax(0, 1fr); }
.aiu-week[hidden] { display: none; }

.aiu-eyebrow { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aiu-eyebrow-light { color: #8fe3ec; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.aiu-continue {
  position: relative; overflow: hidden; min-height: 236px; padding: 30px 32px;
  border-radius: 24px; background: var(--sidebar); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* Halo turquesa del heroe: decorativo, detras del contenido. */
.aiu-continue::after {
  content: ""; position: absolute; top: -90px; right: -70px; width: 280px; height: 280px;
  border-radius: 50%; background: radial-gradient(circle, rgba(0,163,182,.38), transparent 68%);
  pointer-events: none;
}
.aiu-continue-inner { position: relative; display: flex; flex-direction: column; gap: 10px; }
.aiu-continue-slot { position: relative; display: contents; }
/* Con asignacion manda el heroe del diseno y el saludo se retira; sin ella, al
   reves. Se oculta por CSS en vez de vaciar el nodo para que #homeGreeting siga
   existiendo y renderHome pueda escribir en el sin reventar. */
.aiu-continue.has-assignment > .aiu-continue-greeting { display: none; }
.aiu-continue h2, .aiu-continue h4 { margin: 0; max-width: 24ch; font-size: 27px; font-weight: 800; line-height: 1.15; }
.aiu-continue p { margin: 0; max-width: 48ch; color: #c6d6e8; font-size: 14px; line-height: 1.5; }
.aiu-continue-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.aiu-continue-meta span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px;
  border: 1px solid rgba(143, 227, 236, .3); border-radius: 999px;
  background: rgba(0, 163, 182, .14); color: #d8f7fa; font-size: 11.5px; font-weight: 750;
}
.aiu-continue .home-empty { color: #c6d6e8; }
.aiu-continue .home-empty strong { color: #fff; }
.aiu-continue:not(.has-assignment) { justify-content: flex-start; gap: 20px; }
.aiu-continue:not(.has-assignment) .home-empty {
  align-self: flex-start; width: 100%; padding: 8px 0 0; text-align: left;
}
.aiu-continue:not(.has-assignment) .home-empty p { margin: 5px 0 0; max-width: 48ch; }

/* El relleno NO usa --brand-accent (#00A3B6): con etiqueta blanca da 3.04:1.
   Un logotipo puede quedar exento de contraste, pero el texto de un boton
   primario tiene que leerse. Se profundiza el mismo turquesa hasta 4.70:1,
   la desviacion minima respecto al diseno que cumple AA. */
.aiu-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  align-self: flex-start; width: auto; min-width: 200px; max-width: 320px; height: 50px; padding: 0 26px;
  border: 2px solid #9ff0f8; border-radius: 14px; background: #00a3b6; color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 12px 28px rgba(0, 163, 182, .55), 0 0 0 4px rgba(0, 163, 182, .22);
  cursor: pointer; text-decoration: none;
}
.aiu-cta:hover, .aiu-cta:focus-visible {
  background: #008ea0; border-color: #fff; outline: none;
  box-shadow: 0 14px 32px rgba(0, 163, 182, .65), 0 0 0 5px rgba(159, 240, 248, .35);
}
.aiu-cta::after { content: "→"; font-size: 18px; font-weight: 700; line-height: 1; }
.aiu-continue-hero { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.aiu-continue-progress { position: relative; display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.aiu-continue-progress > div:first-child { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; }
.aiu-continue-progress > div:last-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; }
.aiu-continue-track { height: 8px; border-radius: 99px; background: rgba(224, 240, 245, .18); overflow: hidden; }
.aiu-continue-track > i { display: block; height: 100%; border-radius: 99px; background: var(--brand-accent); }

.aiu-week {
  display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 22px;
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow);
  min-width: 0; overflow: hidden;
}
.aiu-week-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.aiu-week-head > div { display: flex; flex-direction: column; gap: 4px; }
.aiu-week-head strong { font-size: 17px; font-weight: 800; }
.aiu-week-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--yellow-soft); color: #8f5c07; font-size: 20px; }
/* El ambar del sistema da 4.09:1 sobre su propio tinte; aqui sube a 5.22:1. */
[data-theme="dark"] .aiu-week-icon { color: var(--yellow); }
.aiu-week-body { min-height: 0; overflow: auto; }
.aiu-activity {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 172px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 3px; scrollbar-gutter: stable;
}
.gamification-heading { margin-bottom: 14px; }
.gamification-self-board { margin-top: 18px; }
.gamification-management { display: grid; gap: 16px; margin-top: 18px; }
.gamification-management > :where(.section-heading, .gamification-principle, .gamification-journey, .gamification-metrics, .gamification-top-grid, .table-panel) { margin-bottom: 0; }
.aiu-activity > button {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  flex: 0 0 auto;
  width: 100%; min-height: 48px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-subtle); color: var(--text); text-align: left;
  min-width: 0; overflow: hidden;
}
.aiu-activity > button:hover { border-color: var(--brand); background: var(--brand-soft); }
.aiu-activity > button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 2px; }
.aiu-activity > button > span:first-child { display: grid; gap: 3px; min-width: 0; }
.aiu-activity > button strong {
  display: -webkit-box; overflow: hidden; min-width: 0; max-width: 100%;
  font-size: 12px; font-weight: 750; line-height: 1.3;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow-wrap: anywhere; word-break: break-word;
}
.aiu-activity > button small {
  display: block; min-width: 0; max-width: 100%;
  color: var(--muted); font-size: 10.5px; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.aiu-activity time { font-variant-numeric: tabular-nums; }
.aiu-activity > button > span:last-child { color: var(--brand); font-size: 18px; text-align: center; }

/* Ayuda contextual de Inicio. Es un control real para teclado y tactil; el
   globo tambien aparece con hover/foco y nunca cambia el dato de la tarjeta. */
.aiu-help {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; max-width: 100%;
}
.aiu-help:is(:hover, :focus-within, [data-open="true"]) { z-index: 40; }
.aiu-info-trigger {
  display: inline-grid; place-items: center; flex: 0 0 28px;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 84%, var(--brand-soft));
  color: var(--brand); cursor: help;
}
.aiu-info-trigger svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.aiu-info-trigger:hover { border-color: var(--brand); background: var(--brand-soft); }
.aiu-info-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 2px;
}
.aiu-info-tooltip {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 50;
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 11px 13px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: #0b1735; color: #f7fbff !important;
  box-shadow: 0 16px 36px rgba(8, 18, 42, .28);
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.45;
  text-align: left; overflow-wrap: anywhere;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.aiu-info-tooltip::before {
  content: ""; position: absolute; top: -5px; left: 13px; width: 9px; height: 9px;
  border-top: 1px solid rgba(255, 255, 255, .14); border-left: 1px solid rgba(255, 255, 255, .14);
  background: #0b1735; transform: rotate(45deg);
}
.aiu-help:hover .aiu-info-tooltip,
.aiu-help:focus-within .aiu-info-tooltip,
.aiu-help[data-open="true"] .aiu-info-tooltip {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.aiu-section-title { align-items: center; }
.aiu-section-title > strong { min-width: 0; }
.aiu-metric-title > span:first-child { min-width: 0; }

.aiu-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.aiu-metrics > div {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
  min-width: 0;
}
.aiu-metrics span { color: var(--text-soft); font-size: 11.5px; font-weight: 700; }
.aiu-metrics strong { font-size: 28px; font-weight: 800; line-height: 1.05; }
.aiu-metrics small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.aiu-status-bar {
  order: 0; gap: 14px;
  background: transparent;
}
.aiu-status-bar > div {
  min-height: 110px; padding: 18px; border-radius: 18px;
  border: 1px solid var(--border); box-shadow: none;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.aiu-status-bar > div:nth-child(2) { background: color-mix(in srgb, #22a579 12%, var(--surface)); }
.aiu-status-bar > div:nth-child(3) { background: color-mix(in srgb, #8874d9 12%, var(--surface)); }
.aiu-status-bar > div:nth-child(4) { background: color-mix(in srgb, #dc9a28 14%, var(--surface)); }
.aiu-status-bar strong { font-size: 30px; font-variant-numeric: tabular-nums; color: var(--text); }
.aiu-status-bar > div:nth-child(even) .aiu-info-tooltip { left: auto; right: 0; }
.aiu-status-bar > div:nth-child(even) .aiu-info-tooltip::before { left: auto; right: 9px; }

.aiu-home-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 20px; align-items: stretch; }
.aiu-today, .aiu-ask {
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow);
}
.aiu-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.aiu-panel-head > div { display: flex; flex-direction: column; gap: 4px; }
.aiu-panel-head strong { font-size: 17px; font-weight: 800; line-height: 1.25; }
.aiu-link { border: 0; background: none; color: var(--brand); font-size: 12.5px; font-weight: 700; }

.aiu-task-list { display: flex; flex-direction: column; gap: 10px; }
.aiu-today .aiu-task-list { flex: 1; }
.aiu-today .aiu-task-list > button { flex: 1; }
.aiu-task-list button {
  display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left;
  border: 1px solid #e4ebf0; border-radius: 17px; background: var(--surface); color: inherit;
}
.aiu-task-list button:hover { border-color: var(--brand); background: var(--brand-soft); }
.aiu-task-list button > span:last-child { display: grid; gap: 3px; min-width: 0; }
.aiu-task-list strong { font-size: 13.5px; font-weight: 750; }
.aiu-task-list small { color: var(--muted); font-size: 11.5px; }
.aiu-task-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 13px; background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 800;
}

.aiu-ask-form { display: flex; gap: 10px; }
.aiu-ask-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); color: var(--text);
}
.aiu-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.aiu-quick-origin, .knowledge-suggestion-group { display: grid; gap: 3px; }
.aiu-quick-origin strong, .knowledge-suggestion-group > strong { font-size: 12px; color: var(--text); }
.aiu-quick-origin small, .knowledge-suggestion-group > small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.aiu-chips button {
  padding: 14px 16px; border: 1px solid #dce6ec; border-radius: 16px;
  background: var(--surface-subtle); color: var(--text-soft); font-size: 12.5px; font-weight: 700; text-align: left;
}
.aiu-chips button:hover { border-color: var(--brand); color: var(--brand); }
.aiu-ask-note { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* En oscuro los bordes fijos del prototipo se alinean con la linea del tema. */
[data-theme="dark"] .aiu-task-list button { border-color: var(--border); }
[data-theme="dark"] .aiu-chips button { border-color: var(--border); }
[data-theme="dark"] .aiu-week-icon { background: var(--yellow-soft); color: var(--yellow); }

@media (max-width: 1080px) {
  .aiu-home-top, .aiu-home-bottom { grid-template-columns: minmax(0, 1fr); }
  .aiu-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .aiu-home { padding: 16px; gap: 16px; }
  /* En movil la persona debe ver primero su aprendizaje y sus siguientes
     acciones. La actividad auditada conserva todo su contenido, pero deja de
     desplazar el resumen y las tareas fuera del primer recorrido. */
  .aiu-home-top { display: contents; }
  .aiu-continue { order: 1; }
  .aiu-home-bottom { order: 2; }
  .aiu-week { order: 3; }
  .aiu-metrics { order: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aiu-status-bar > div { min-height: 72px; padding: 12px; }
  .aiu-metrics strong { font-size: 20px; }
  .aiu-continue { padding: 24px 22px; }
  .aiu-info-trigger { width: 30px; height: 30px; flex-basis: 30px; }
  .aiu-info-tooltip { max-width: min(280px, calc(100vw - 32px)); }
}

/* ====================================================================
   "Preguntar a AIU": el chat del agente, segun el prototipo vAIU.
   --------------------------------------------------------------------
   Valores medidos en el prototipo. Las desviaciones son de color y por la
   misma razon que en Inicio y en la senda: los grises del diseno no
   alcanzan AA para texto normal y el relleno turquesa #00A3B6 con
   etiqueta blanca da 3.04:1.
   ==================================================================== */
.aiu-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 20px;
  align-items: stretch;
}
.aiu-chat-main {
  /* Contenedor sticky: el compositor permanece visible y la respuesta no se
     comprime fuera del primer recorrido visual (p3/p12/p55). */
  position: relative;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  min-height: clamp(520px, calc(100dvh - 310px), 760px);
  overflow: visible;
}
.aiu-chat-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.aiu-chat-thread {
  display: flex; flex-direction: column; gap: 16px;
  flex: 1; min-height: 0; max-height: none; overflow-y: auto;
  scroll-padding-bottom: 28px;
  padding: 28px; border-radius: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%); box-shadow: var(--shadow);
}
.aiu-chat-empty { display: flex; flex-direction: column; gap: 6px; }
.aiu-chat-empty strong { font-size: 16px; font-weight: 800; }
.aiu-chat-empty p { margin: 0; max-width: 60ch; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }

.aiu-chat-turn { display: flex; gap: 14px; align-items: flex-start; }
.aiu-chat-turn.is-user { justify-content: flex-end; }
.aiu-chat-turn.is-user .aiu-chat-avatar { order: 2; }
.aiu-chat-turn.is-user .aiu-chat-bubble { max-width: min(76%, 680px); background: var(--brand-soft); }
.aiu-chat-avatar {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 12px; background: var(--border-soft);
  color: var(--text-soft); font-size: 12px; font-weight: 800;
}
.aiu-chat-avatar.is-agent { background: var(--brand); color: #fff; }
.aiu-chat-bubble {
  margin: 0; padding: 13px 16px; border-radius: 16px;
  background: var(--border-soft); color: var(--text);
  font-size: 14.5px; font-weight: 650; line-height: 1.55;
}
.aiu-chat-answer {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%;
  overflow: visible;
}
.aiu-chat-welcome { margin: auto 0; max-width: 760px; }
.aiu-chat-welcome .aiu-chat-answer { padding: 18px 20px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.aiu-chat-welcome.is-compact { margin: 0 0 4px; opacity: .92; }
.aiu-chat-welcome.is-compact .aiu-chat-answer { padding: 12px 14px; }
.aiu-chat-welcome.is-compact .aiu-chat-text p { display: none; }
.aiu-chat-welcome .aiu-chat-text strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 16px; }
.aiu-chat-welcome .aiu-chat-text p { margin: 0; }
.aiu-chat-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.aiu-chat-badge {
  padding: 5px 10px; border-radius: 9px;
  background: var(--green-soft); color: var(--green);
  font-size: 11px; font-weight: 800;
}
.aiu-chat-badge.is-empty { background: var(--yellow-soft); color: var(--yellow); }
.aiu-chat-meta small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.aiu-chat-text {
  margin: 0; max-width: min(70ch, 100%);
  color: var(--text-soft); font-size: 15px; line-height: 1.7;
  white-space: pre-wrap;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aiu-chat-citations { display: flex; flex-direction: column; gap: 8px; }
.aiu-chat-citation {
  display: grid; grid-template-columns: auto minmax(12ch, 1fr); grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 4px; align-items: start;
  padding: 12px 14px; border: 0; border-radius: 14px;
  background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text); font-size: 13px; font-weight: 700; text-align: left;
}
.aiu-chat-citation:hover, .aiu-chat-citation:focus-visible { box-shadow: inset 0 0 0 1.5px var(--brand); }
.aiu-chat-citation-index {
  display: grid; place-items: center; width: 26px; height: 26px;
  grid-row: 1 / span 2;
  border-radius: 8px; background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 800;
}
.aiu-chat-citation-title {
  min-width: 0; overflow-wrap: break-word; word-break: break-word;
  white-space: normal; writing-mode: horizontal-tb;
}
.aiu-chat-citation small { grid-column: 2; margin: 0; color: var(--muted); font-weight: 600; font-size: 11.5px; }

.aiu-chat-feedback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.aiu-chat-feedback > small { color: var(--muted); font-size: 12px; font-weight: 700; }
.aiu-chat-feedback-done { color: var(--brand); font-weight: 700; }
.aiu-chat-rate {
  height: 32px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-soft); font-size: 12px; font-weight: 750;
}
.aiu-chat-rate:hover { border-color: var(--brand); color: var(--brand); }
.aiu-chat-learn {
  margin-left: auto; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800;
}

.aiu-chat-composer {
  position: sticky; bottom: 12px; z-index: 3; flex-shrink: 0; align-self: stretch;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow);
  /* Fondo opaco: la respuesta del hilo no debe tapar ni filtrarse tras el compositor. */
  isolation: isolate;
}
.aiu-chat-composer input[type="text"],
.aiu-chat-composer textarea[name="chat-message"] {
  flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 13px;
  background: var(--surface-subtle); color: var(--text); font-size: 14px;
  resize: vertical; line-height: 1.4; font-family: inherit;
}
.aiu-chat-sources-toggle {
  height: 44px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 13px;
  background: var(--surface); color: var(--text-soft); font-size: 12.5px; font-weight: 750; white-space: nowrap;
}
.aiu-chat-sources-toggle.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
/* Mismo criterio que el resto del rediseno: #00A3B6 con etiqueta blanca da
   3.04:1, asi que el relleno se profundiza a 4.70:1. */
.aiu-chat-send {
  height: 44px; padding: 0 20px; border: 0; border-radius: 13px;
  background: #00808d; color: #fff; font-size: 13.5px; font-weight: 800;
}
.aiu-chat-send[disabled] { opacity: .65; }
.aiu-chat-suggestion[disabled] { cursor: wait; opacity: .55; }

.aiu-chat-popup {
  position: fixed; z-index: 90; left: 50%; top: 50%; right: auto; bottom: auto;
  width: min(680px, calc(100vw - 40px)); max-height: min(680px, calc(100vh - 40px)); overflow: auto;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 0 0 100vmax rgba(8, 18, 42, .42), 0 24px 60px rgba(13, 22, 53, .28);
  border: 1px solid var(--border);
}
.aiu-chat-popup header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aiu-chat-popup header strong { font-size: 14px; font-weight: 800; }
.aiu-chat-popup-close { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.aiu-chat-popup > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.aiu-chat-source-filter {
  height: 38px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-subtle); color: var(--text); font-size: 13px;
}
.aiu-chat-source-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.aiu-chat-source {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px; background: var(--surface-subtle);
}
.aiu-chat-source input { flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.aiu-chat-source span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aiu-chat-source strong { font-size: 12.5px; font-weight: 750; }
.aiu-chat-source small { color: var(--muted); font-size: 11px; }
.aiu-chat-source-empty { margin: 0; color: var(--muted); font-size: 12.5px; }
.aiu-chat-popup footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aiu-chat-popup footer span { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.aiu-chat-clear { border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 800; padding: 0; }

.aiu-chat-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aiu-chat-kicker { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.aiu-chat-new, .aiu-chat-archive, .aiu-chat-rename { border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 800; padding: 0; text-align: left; }
.aiu-chat-rename-form { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-subtle); }
.aiu-chat-rename-form label { color: var(--text); font-size: 12px; font-weight: 750; }
.aiu-chat-rename-form input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.aiu-chat-rename-form small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.aiu-chat-rename-error { margin: 0; color: var(--red); font-size: 12px; font-weight: 700; }
.aiu-chat-rename-actions { display: flex; gap: 12px; align-items: center; }
.aiu-chat-rename-actions button { border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 800; padding: 2px 0; }
.aiu-chat-suggestion {
  padding: 11px 13px; border: 0; border-radius: 13px;
  background: var(--surface-subtle); color: var(--text);
  font-size: 13px; font-weight: 650; line-height: 1.4; text-align: left;
}
.aiu-chat-suggestion:hover, .aiu-chat-suggestion:focus-visible { background: var(--brand-soft); }
.aiu-chat-history { display: flex; flex-direction: column; gap: 9px; }
.aiu-chat-history-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 9px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: transparent; text-align: left;
}
.aiu-chat-history-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.aiu-chat-history-item span { color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.4; }
.aiu-chat-history-item small { color: var(--muted); font-size: 11px; font-weight: 600; }
.aiu-chat-history-item.is-active span { color: var(--brand); }
.aiu-chat-history-empty { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aiu-chat-history-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.aiu-chat-error {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 700;
}
.aiu-chat-error button { border: 0; background: transparent; color: var(--red); font-size: 12px; font-weight: 800; }

.aiu-chat-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 6px;
  width: fit-content; max-width: 100%; border: 1px solid var(--border); border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, var(--brand-soft)); box-shadow: var(--shadow);
}
.aiu-chat-tabs button {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 750;
}
.aiu-chat-tabs button:hover { background: var(--surface); color: var(--text); }
.aiu-chat-tabs button[aria-selected="true"] {
  background: var(--brand); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}

.admin-surface-tabs {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; padding: 6px;
  width: fit-content; max-width: 100%; border: 1px solid var(--border); border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, var(--brand-soft)); box-shadow: var(--shadow);
}
.admin-surface-tabs button {
  min-height: 40px; padding: 0 17px; border: 0; border-radius: 14px;
  background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 750;
}
.admin-surface-tabs button:hover { background: var(--surface); color: var(--text); }
.admin-surface-tabs button[aria-selected="true"] {
  background: var(--brand); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}
.admin-surface-panel { display: grid; gap: 20px; min-width: 0; }
.admin-surface-panel[hidden] { display: none !important; }
.dashboard-filters {
  display: grid; grid-template-columns: minmax(210px, 1.3fr) repeat(3, minmax(150px, .8fr)) auto;
  gap: 14px; align-items: end; padding: 20px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow);
}
.dashboard-filters label { display: grid; gap: 7px; color: var(--text-soft); font-size: 11px; font-weight: 750; }
.dashboard-filters :where(input, select) { min-width: 0; }
.filter-result { margin: -8px 4px 0; color: var(--muted); font-size: 12px; font-weight: 650; }
#rhRows td:first-child strong, #rhRows td:first-child small { display: block; }
#rhRows td:first-child small { margin-top: 3px; color: var(--muted); font-size: 10px; }

@media (max-width: 1080px) {
  .dashboard-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-filters button { justify-self: start; }
}

@media (max-width: 1080px) {
  .aiu-chat { grid-template-columns: minmax(0, 1fr); }
  .aiu-chat-main { min-height: clamp(500px, calc(100dvh - 300px), 700px); }
}
@media (max-width: 720px) {
  /* El compositor es parte de la tarea principal y debe quedar visible sin
     recorrer una pantalla vacia. Las respuestas extensas conservan scroll
     dentro del hilo. */
  .aiu-chat-main { min-height: 0; gap: 12px; }
  .aiu-chat-thread {
    flex: none; min-height: 280px;
    height: 280px; max-height: 280px; padding: 18px;
  }
  .aiu-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .aiu-chat-sources-toggle { grid-column: 1 / -1; justify-self: start; height: 36px; }
  .aiu-chat-composer input[type="text"],
  .aiu-chat-composer textarea[name="chat-message"] { grid-column: 1; width: 100%; }
  .aiu-chat-send { grid-column: 2; min-width: 92px; padding-inline: 14px; }
  .admin-surface-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-surface-tabs button { padding-inline: 10px; }
  .dashboard-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .assignment-picker-heading { grid-template-columns: minmax(0, 1fr); }
}

/* Internal scrolling follows the same quiet, branded visual language as the
   surrounding Academy surfaces while preserving native keyboard scrolling. */
:where(.aiu-activity, .aiu-chat-thread, .aiu-chat-source-list, .aiu-chat-history,
  .module-list, .lesson-index, .lesson-content, .lesson-manager-list,
  .lesson-manager-editor, .home-activity-list, .activity-list, .table-scroll,
  .role-catalog) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 58%, var(--border)) transparent;
}
:where(.aiu-activity, .aiu-chat-thread, .aiu-chat-source-list, .aiu-chat-history,
  .module-list, .lesson-index, .lesson-content, .lesson-manager-list,
  .lesson-manager-editor, .home-activity-list, .activity-list, .table-scroll,
  .role-catalog)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
:where(.aiu-activity, .aiu-chat-thread, .aiu-chat-source-list, .aiu-chat-history,
  .module-list, .lesson-index, .lesson-content, .lesson-manager-list,
  .lesson-manager-editor, .home-activity-list, .activity-list, .table-scroll,
  .role-catalog)::-webkit-scrollbar-track {
  background: transparent;
}
:where(.aiu-activity, .aiu-chat-thread, .aiu-chat-source-list, .aiu-chat-history,
  .module-list, .lesson-index, .lesson-content, .lesson-manager-list,
  .lesson-manager-editor, .home-activity-list, .activity-list, .table-scroll,
  .role-catalog)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 58%, var(--border));
  background-clip: padding-box;
}
:where(.aiu-activity, .aiu-chat-thread, .aiu-chat-source-list, .aiu-chat-history,
  .module-list, .lesson-index, .lesson-content, .lesson-manager-list,
  .lesson-manager-editor, .home-activity-list, .activity-list, .table-scroll,
  .role-catalog)::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: padding-box;
}

/* ====================================================================
   Tableros del rediseno: Logros, Avance del equipo, Certificados,
   Personas y accesos y Estudio de contenido.
   --------------------------------------------------------------------
   Valores medidos sobre el prototipo: tarjeta 24/22px, tarjeta lateral
   22/20px, KPI 20/18px con cifra de 26px tabular, filas de 13px con
   separador de 1px, pastillas 9/5x10 a 11px, mosaicos de persona 30/10
   y barras de 6-7px con radio 99. Las desviaciones son de color y solo
   por AA: el prototipo usa #00A3B6 y #8C96A3 como texto, que no cumplen,
   y aqui van los tokens ya verificados (--brand, --muted).
   ==================================================================== */
.aiu-board { display: flex; flex-direction: column; gap: 20px; }
.aiu-board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.aiu-board-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aiu-board-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.aiu-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-card-sm { gap: 12px; padding: 20px; border-radius: 22px; }
.aiu-card .aiu-eyebrow { color: var(--muted); letter-spacing: .12em; }
.aiu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aiu-card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aiu-card-title { font-size: 17px; font-weight: 800; color: var(--text); }
.aiu-note { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.aiu-board-empty { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.55; }

.aiu-night { background: var(--sidebar); color: #c6d6e8; box-shadow: none; }
.aiu-night .aiu-eyebrow { color: #8fe3ec; }
.aiu-night strong { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; }
.aiu-night small { font-size: 12px; line-height: 1.55; }

.aiu-pill {
  padding: 5px 10px; border-radius: 9px; justify-self: start;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.aiu-pill.success { background: var(--green-soft); color: var(--green); }
.aiu-pill.warn { background: var(--yellow-soft); color: var(--yellow); }
.aiu-pill.danger { background: var(--red-soft); color: var(--red); }
.aiu-pill.brand { background: var(--brand-soft); color: var(--brand); }
.aiu-pill.neutral { background: var(--surface-strong); color: var(--text-soft); }

.aiu-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aiu-chip { padding: 7px 12px; border-radius: 11px; background: var(--surface-strong); color: var(--text-soft); font-size: 12px; font-weight: 700; }
.aiu-avatar {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--surface-strong); color: var(--text-soft);
  font-size: 11px; font-weight: 800;
}
.aiu-avatar.brand { background: var(--brand); color: #fff; }
.aiu-bar {
  display: block; flex: 1 1 auto; align-self: center;
  height: 8px; min-height: 8px; max-height: 8px; line-height: 0;
  border-radius: 99px; background: var(--surface-strong); overflow: hidden;
}
.aiu-bar-fill, .aiu-bar > i {
  display: block; height: 8px; min-height: 8px; max-height: 8px;
  border-radius: 99px; background: var(--brand-accent);
}
.aiu-bar.green .aiu-bar-fill, .aiu-bar.green > i { background: var(--green); }
.aiu-bar.danger .aiu-bar-fill, .aiu-bar.danger > i { background: var(--red); }

.aiu-solid-button {
  height: 40px; padding: 0 16px; border: 0; border-radius: 12px;
  background: #00808d; color: #fff; font-size: 13px; font-weight: 800;
}
.aiu-solid-button:hover { background: var(--brand-strong); }
.aiu-ghost-button {
  height: 40px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-soft); font-size: 13px; font-weight: 750;
}
.aiu-ghost-button:hover { border-color: var(--brand); color: var(--brand); }
.aiu-link-button { border: 0; background: none; padding: 0; color: var(--brand); font-size: 12px; font-weight: 750; }

/* Filas: la rejilla del prototipo, con su cabecera y su separador. */
.aiu-row-list { display: flex; flex-direction: column; }
.aiu-row { display: grid; gap: 12px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--border-soft); }
.aiu-row:last-child { border-bottom: 0; }
.aiu-row-head {
  padding: 0 4px 10px; border-bottom: 1px solid var(--surface-strong);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted);
}
.aiu-row-rh { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) 120px 70px 100px minmax(140px, auto); }
/* La ultima columna crece de 120 a 160: aloja el estado y, cuando la sesion
   puede administrar identidades, la accion de restablecer contrasena. */
.aiu-row-people { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) 120px 160px; }
.aiu-person-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.aiu-person-state .aiu-link-button { text-align: left; line-height: 1.35; }
.aiu-row-people.selected { background: var(--brand-soft); border-radius: 12px; }
.aiu-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aiu-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.aiu-person strong { font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.aiu-person small { font-size: 11px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.aiu-row-text { font-size: 13px; font-weight: 600; color: var(--text-soft); overflow-wrap: anywhere; }
.aiu-row-muted { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.aiu-row-progress { display: flex; align-items: center; gap: 8px; }
.aiu-row-progress small { font-size: 11.5px; font-weight: 800; color: var(--text-soft); }
.aiu-row-score { font-size: 13px; font-weight: 800; color: var(--text); }
.aiu-role-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aiu-role-chip { padding: 4px 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; }
.aiu-directory-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-subtle);
}
.aiu-directory-search > span { grid-column: 1 / -1; color: var(--text-soft); font-size: 11px; font-weight: 800; }
.aiu-directory-search input { min-width: 0; height: 42px; border-radius: 13px; background: var(--surface); }
.aiu-directory-search small { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* KPI */
.aiu-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.aiu-kpi {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-kpi span { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.aiu-kpi strong { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; }
.aiu-kpi small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.aiu-kpi.danger strong { color: var(--red); }
.aiu-kpi.night { background: var(--sidebar); box-shadow: none; }
.aiu-kpi.night span { color: #8fe3ec; }
.aiu-kpi.night strong { color: #fff; }
.aiu-kpi.night small { color: #c6d6e8; }

/* Logros */
.aiu-logros-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.aiu-level {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px; border-radius: 24px; background: var(--sidebar); color: #c6d6e8;
}
.aiu-level-off { min-height: 120px; justify-content: center; }
.aiu-level-off .aiu-board-empty { color: #c6d6e8; }
.aiu-level-head { display: flex; align-items: center; gap: 18px; }
.aiu-level-badge {
  display: grid; place-items: center; flex: none;
  width: 78px; height: 78px; border-radius: 24px;
  background: var(--brand-accent); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 163, 182, .4);
}
.aiu-level-badge span { font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .9; }
.aiu-level-badge strong { font-size: 26px; font-weight: 800; line-height: 1; }
.aiu-level-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.aiu-level-name strong { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.aiu-level-name small { font-size: 13px; font-weight: 600; color: #c6d6e8; }
.aiu-level-progress { display: flex; flex-direction: column; gap: 8px; }
.aiu-level-track { height: 9px; border-radius: 99px; background: rgba(224, 240, 245, .18); overflow: hidden; }
.aiu-level-track > i { display: block; height: 100%; border-radius: 99px; background: var(--brand-accent); }
.aiu-level-scale { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; font-weight: 700; color: #8fe3ec; }
.aiu-level-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.aiu-level-chip { padding: 8px 13px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #e0f0f5; font-size: 12px; font-weight: 700; }

.aiu-team-list { display: flex; flex-direction: column; gap: 8px; }
.aiu-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px; background: var(--surface-subtle); }
.aiu-team-row.mine { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-accent); }
.aiu-team-rank { display: grid; place-items: center; flex: none; width: 22px; font-size: 12px; font-weight: 800; color: var(--muted); }
.aiu-team-row strong { flex: 1; font-size: 13.5px; font-weight: 750; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.aiu-team-points { font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.aiu-team-row.mine .aiu-team-points { color: var(--brand); }

.aiu-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.aiu-badge {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: 18px;
  background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border);
}
.aiu-badge small { font-size: 11.5px; font-weight: 750; color: var(--text); text-align: center; line-height: 1.3; }
.aiu-badge-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--surface); color: var(--brand); font-size: 13px; font-weight: 800; }
.aiu-badge time { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Grupos (avance por area / sucursal) */
.aiu-group-list { display: flex; flex-direction: column; gap: 11px; }
.aiu-group { display: flex; flex-direction: column; gap: 5px; }
.aiu-group-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.aiu-group .aiu-bar { height: 7px; }

/* Certificados */
.aiu-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.aiu-cert {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-cert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.aiu-cert-mark {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 15px;
  background: var(--sidebar); color: #8fe3ec; font-size: 20px;
}
.aiu-cert-copy { display: flex; flex-direction: column; gap: 4px; }
.aiu-cert strong { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; }
.aiu-cert small { font-size: 12.5px; font-weight: 600; color: var(--text-soft); line-height: 1.55; }
.aiu-cert-open { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.aiu-cert-open .aiu-cert-mark { background: var(--surface); color: var(--brand); }
.aiu-cert-track { display: flex; }
.aiu-cert-track .aiu-bar { height: 7px; }
.aiu-cert-action {
  align-self: flex-start; margin-top: auto;
  height: 38px; padding: 0 15px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--brand); font-size: 12.5px; font-weight: 750;
}
.aiu-cert-action:hover { border-color: var(--brand); }

/* Personas y accesos */
.aiu-role-notes { display: flex; flex-direction: column; gap: 9px; }
.aiu-role-note { display: flex; flex-direction: column; gap: 3px; padding: 13px; border-radius: 15px; background: var(--surface-subtle); }
.aiu-role-note.mine { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-accent); }
.aiu-role-note strong { font-size: 13px; font-weight: 800; color: var(--text); }
.aiu-role-note small { font-size: 11.5px; font-weight: 600; color: var(--text-soft); line-height: 1.5; }
.aiu-role-catalog-link { align-self: flex-start; margin-top: 2px; }

/* Estudio de contenido */
.aiu-studio-summary { flex-direction: row; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 22px; }
.aiu-studio-summary > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aiu-studio-summary small { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.aiu-gap-list { display: flex; flex-direction: column; gap: 8px; }
.aiu-gap {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border: 0; border-radius: 14px; text-align: left;
  background: var(--yellow-soft);
}
.aiu-gap.hot { background: var(--red-soft); }
.aiu-gap strong { font-size: 12.5px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.aiu-gap.hot strong { color: var(--red); }
.aiu-gap span { flex: 1; font-size: 12.5px; font-weight: 650; color: var(--text); line-height: 1.4; }
.aiu-gap:hover { filter: brightness(.97); }

@media (max-width: 1180px) {
  .aiu-board-grid, .aiu-logros-top { grid-template-columns: minmax(0, 1fr); }
  .aiu-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .aiu-row-rh, .aiu-row-people { grid-template-columns: minmax(0, 1fr); }
  .aiu-row-head { display: none; }
  .aiu-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .aiu-board-grid { gap: 14px; }
  .aiu-card { padding: 17px; border-radius: 20px; }
  .aiu-card-head { align-items: flex-start; flex-direction: column; }
  .aiu-card-head .aiu-chip-row { width: 100%; }
  .aiu-card-head .aiu-chip-row > button { flex: 1; }
  .aiu-directory-search { grid-template-columns: minmax(0, 1fr); }
  .aiu-directory-search > span { grid-column: auto; }
  .aiu-directory-search small { white-space: normal; }
  .aiu-table .aiu-row-list { gap: 9px; }
  .aiu-table .aiu-row-people:not(.aiu-row-head) {
    position: relative; gap: 10px; padding: 14px 88px 14px 14px;
    border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface-subtle);
  }
  .aiu-table .aiu-row-people:not(.aiu-row-head) > .aiu-pill { position: absolute; right: 14px; top: 14px; }
  .aiu-role-cell { padding-top: 2px; }
}

[data-theme="dark"] .aiu-badge-mark { background: var(--surface-strong); }
[data-theme="dark"] .aiu-gap strong { color: var(--yellow); }
[data-theme="dark"] .aiu-solid-button { background: var(--brand-accent); color: #04222a; }
[data-theme="dark"] .aiu-solid-button:hover { background: #8fe3ec; }

/* ====================================================================
   Disposicion movil del rediseno: barra inferior y pantalla de Perfil.
   --------------------------------------------------------------------
   Valores medidos: pestanas de 52 px con radio 16 y rotulo de 9.5px/800,
   pastilla activa en turquesa suave, tarjeta de identidad 24/24x18 con
   mosaico 66/22, lista de acciones 22/6 con filas 16/14.
   La barra NO duplica el rail: app.js la construye desde los mismos
   .nav-item, de modo que el gateado por capacidad la gobierna igual.
   ==================================================================== */
.aiu-tabbar { display: none; }

@media (max-width: 720px) {
  .aiu-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; gap: 4px;
    padding: 6px max(6px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .aiu-tabbar button {
    position: relative; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 52px; min-width: 0; border: 0; border-radius: 16px;
    background: transparent; color: var(--text-soft);
  }
  .aiu-tabbar button > span:first-child { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
  .aiu-tabbar button > small {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 9.5px; font-weight: 800;
  }
  .aiu-tabbar button[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
  /* La barra ocupa el pie: el contenido necesita sitio para no quedar debajo. */
  .workspace { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

.aiu-profile { display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; max-width: none; }
.aiu-profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 24px 18px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-profile-avatar {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px;
  background: var(--sidebar); color: #8fe3ec; font-size: 20px; font-weight: 800;
}
.aiu-profile-card strong { font-size: 18px; font-weight: 800; color: var(--text); text-align: center; }
.aiu-profile-card small { font-size: 12.5px; font-weight: 650; color: var(--text-soft); text-align: center; }
.aiu-profile-actions {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow);
}
.aiu-profile-actions button {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 0; border-radius: 16px; background: transparent;
  text-align: left; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.aiu-profile-actions button > span { color: var(--text-soft); font-size: 15px; }
.aiu-profile-actions button > i { margin-left: auto; color: var(--muted); font-style: normal; }
.aiu-profile-actions button:hover { background: var(--surface-subtle); }
.aiu-profile-actions button.danger { color: var(--red); }
.aiu-profile .aiu-cert-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.aiu-profile .aiu-cert { padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--border); }


/* Critica Academia p6: toolbar de Mi aprendizaje sin h2 que compita con #viewTitle. */
.learning-toolbar.section-heading {
  margin-bottom: 0.75rem;
  align-items: flex-start;
}
.learning-toolbar-copy {
  margin: 0.15rem 0 0;
  max-width: 42rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted, #5b6b73);
}
.learning-toolbar .heading-actions {
  flex-wrap: wrap;
}
/* p3 closeout: keep sticky composer, tighten vertical rhythm so answers stay visible */
.aiu-chat-main { gap: 10px; height: min(720px, calc(100dvh - 250px)); min-height: 460px; }
.aiu-chat-thread { scroll-padding-bottom: 96px; overscroll-behavior: contain; }
.aiu-chat-composer { bottom: 8px; }
.knowledge-answer-metrics {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.knowledge-answer-metrics > span { display: inline-flex; align-items: baseline; gap: 6px; }
.knowledge-answer-metrics small { color: var(--muted); font-size: 10.5px; }
.knowledge-answer-metrics strong { color: var(--text); font-size: 12px; }
.knowledge-suggestion-group { padding: 2px 4px; }
.document-open-action {
  grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--brand); font-size: 11.5px; font-weight: 800;
}
.document-open-action:hover, .document-open-action:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.login-recovery-button { justify-self: center; margin-top: -4px; }
@media (max-width: 720px) {
  .aiu-chat-main { height: auto; min-height: 0; }
}
.knowledge-layout, .knowledge-board, .view[data-view-panel="knowledge"] .panel-stack { gap: 12px; }
.source-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* p20 self-unlock */
.login-lockout { margin-top: 12px; padding: 12px; border: 1px solid var(--border, #d7dde5); border-radius: 12px; background: color-mix(in srgb, var(--surface, #fff) 92%, #f59e0b 8%); display: grid; gap: 8px; }
.login-lockout[hidden] { display: none !important; }
.login-lockout-countdown { font-weight: 600; }

/* p25 searchable selects */
.academy-searchable-select { display: grid; gap: 6px; }
.academy-searchable-select input[data-searchable-filter] { width: 100%; }
.academy-searchable-select select { max-height: 220px; }

/* p30 RH person row deep-links */
.aiu-row-rh-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.aiu-row-rh-actions button {
  min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border, #d5dee7);
  background: var(--surface, #fff); color: var(--text, #122033); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.aiu-row-rh-actions button:hover { border-color: var(--brand, #00a3b6); color: var(--brand, #00a3b6); }
.aiu-row-rh.aiu-row-head span:last-child { text-align: right; }

/* p24 Studio progressive capture sections */
.academy-step-block {
  display: grid; gap: 12px; padding: 14px 14px 4px; margin: 0 0 14px;
  border: 1px solid var(--border, #d5dee7); border-radius: 16px; background: var(--surface-soft, #f7fafc);
}
.academy-step-block > legend, .academy-step-label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px;
  color: var(--brand, #00a3b6); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.academy-step-block .academy-field-grid { margin: 0; }