:root {
  --ud-petroleum: #244f68;
  --ud-petroleum-deep: #17384f;
  --ud-navy: #12365a;
  --ud-ink: #1e3b5b;
  --ud-text: #355271;
  --ud-text-muted: #6d7f93;
  --ud-surface: #fbf7f1;
  --ud-surface-raised: #ffffff;
  --ud-surface-soft: #f3ede6;
  --ud-line: #eadfd2;
  --ud-line-strong: #dbcdbf;
  --ud-coral: #ea7e73;
  --ud-teal: #67b9ad;
  --ud-violet: #8f7de2;
  --ud-success: #4f9b75;
  --ud-warning: #ca8b39;
  --ud-danger: #c46574;
  --ud-focus: #e1b557;
  --ud-font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --ud-font-display: Georgia, "Times New Roman", serif;
  --ud-text-xs: .75rem;
  --ud-text-sm: .875rem;
  --ud-text-md: 1rem;
  --ud-text-lg: 1.125rem;
  --ud-text-xl: 1.375rem;
  --ud-space-1: .25rem;
  --ud-space-2: .5rem;
  --ud-space-3: .75rem;
  --ud-space-4: 1rem;
  --ud-space-5: 1.5rem;
  --ud-space-6: 2rem;
  --ud-space-7: 3rem;
  --ud-radius-sm: 12px;
  --ud-radius-md: 16px;
  --ud-radius-lg: 24px;
  --ud-radius-pill: 999px;
  --ud-control-min: 44px;
  --ud-shadow-sm: 0 10px 26px rgba(45, 65, 87, .07);
  --ud-shadow: 0 24px 55px rgba(45, 65, 87, .10);
  --ud-shadow-lg: 0 34px 82px rgba(45, 65, 87, .14);
}

html, body { max-width: 100%; overflow-x: hidden; }
html { color-scheme: light; scroll-behavior: smooth; }
body { background: linear-gradient(180deg, #f8f3ec 0%, #fbf8f4 48%, #f3f6f1 100%); color: var(--ud-ink); font-family: var(--ud-font-sans); font-size: var(--ud-text-md); line-height: 1.6; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a[href], select, summary, label[for] { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .56; }
:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ud-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(243, 167, 18, .2) !important;
}
:where(.btn, button, select, input:not([type="checkbox"]):not([type="radio"]), textarea) { min-height: var(--ud-control-min); }
:where(input, select, textarea) { border-color: var(--ud-line-strong); border-radius: var(--ud-radius-sm); color: var(--ud-text); background: var(--ud-surface-raised); }
:where(input, select, textarea)::placeholder { color: #71839a; opacity: 1; }
:where(.panel, .card, .profile-card, .context-box, .support-panel, .trace-card) { color: var(--ud-text); }
:where(.panel, .card, .profile-card, .context-box, .support-panel, .trace-card) :where(p, li, label, small) { line-height: 1.55; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.app {
  min-height: calc(100vh - 46px);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(circle at 78% 8%, rgba(255,255,255,.95) 0, rgba(252,247,241,.95) 34%, rgba(242,246,241,.96) 100%);
}
.topbar { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 90; width: 100%; max-width: none; min-height: 82px; padding: 14px clamp(20px, 2.7vw, 42px); border-bottom: 1px solid rgba(234,223,210,.9); box-shadow: 0 8px 28px rgba(38, 57, 78, .05); background: rgba(255,250,246,.93); backdrop-filter: blur(18px); }
.main { grid-column: 2; grid-row: 2; width: 100%; max-width: none; padding: clamp(22px, 3vw, 44px); }
.footer { grid-column: 2; grid-row: 3; width: auto; max-width: none; margin: 0 clamp(22px, 3vw, 44px); }
.topbar > .brand, .topbar > .nav, .topbar > .nav-links, .topbar > .top-actions { display: none !important; }

.ud-sidebar { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 0; align-self: start; height: 100vh; z-index: 110; display: flex; flex-direction: column; padding: 24px 18px 20px; color: var(--ud-ink); background: linear-gradient(180deg, #eef3ee 0%, #f7f1ea 100%); border-right: 1px solid rgba(219,205,191,.75); box-shadow: 12px 0 30px rgba(73, 85, 97, .05); }
.ud-sidebar-brand { display: grid; gap: 15px; padding: 4px 10px 24px; border-bottom: 1px solid rgba(123, 143, 160, .16); justify-items: center; text-align: center; }
.ud-sidebar-brand img { width: 160px; height: 128px; object-fit: contain; object-position: center; filter: none; }
.ud-sidebar-brand strong, .ud-sidebar-brand span { display: block; }
.ud-sidebar-brand strong { font: 700 1rem/1.2 Inter, sans-serif; color: var(--ud-navy); }
.ud-sidebar-brand span { margin-top: 4px; color: #7d8a96; font: 600 .72rem/1.35 Inter, sans-serif; }
.ud-sidebar-nav { display: grid; gap: 6px; padding: 24px 0; }
.ud-sidebar button, .ud-sidebar a { appearance: none; width: 100%; min-height: 48px; display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 14px; padding: 11px 14px; color: var(--ud-ink); background: transparent; text-align: left; text-decoration: none; font: 700 .82rem/1.2 Inter, sans-serif; cursor: pointer; transition: .2s ease; }
.ud-sidebar button:hover, .ud-sidebar a:hover { color: var(--ud-navy); background: rgba(255,255,255,.75); border-color: rgba(219,205,191,.7); transform: translateX(2px); }
.ud-sidebar button.active { color: var(--ud-navy); background: linear-gradient(90deg, #b7e6db, #d8efe9); border-color: #a9d7cc; box-shadow: 0 10px 24px rgba(135, 184, 171, .18); }
.ud-sidebar svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ud-sidebar-bottom { margin-top: auto; display: grid; gap: 5px; padding-top: 15px; border-top: 1px solid rgba(123, 143, 160, .16); }
.ud-sidebar-person { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 8px 0; border-top: 1px solid rgba(123, 143, 160, .16); }
.ud-person-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid rgba(103,185,173,.45); border-radius: 50%; color: var(--ud-navy); background: #fff; font: 800 .67rem Inter, sans-serif; }
.ud-sidebar-person strong, .ud-sidebar-person small { display: block; }
.ud-sidebar-person strong { max-width: 155px; overflow: hidden; color: var(--ud-navy); text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.ud-sidebar-person small { margin-top: 3px; color: #7d8a96; font-size: .62rem; }
.ud-drawer-scrim { display: none; }

.ud-menu-button { display: none; }
.ud-topbar-product { display: flex; align-items: center; gap: 11px; min-width: 235px; }
.ud-product-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d7e7e2; border-radius: 13px; color: #2f7d76; background: #eef7f5; font: 800 .72rem Inter, sans-serif; }
.ud-topbar-product strong, .ud-topbar-product small { display: block; }
.ud-topbar-product strong { font: 750 .98rem/1.2 Inter, sans-serif; color: var(--ud-navy); }
.ud-topbar-product small { margin-top: 3px; color: #69809e; font: 550 .65rem/1.25 Inter, sans-serif; }
.ud-topbar-stats { margin-left: auto; display: flex; align-items: center; gap: clamp(15px, 2.2vw, 35px); }
.ud-topbar-stats > span { width: 1px; height: 32px; background: #e2e9f2; }
.ud-topbar-stats small, .ud-topbar-stats strong { display: block; }
.ud-topbar-stats small { color: #71839d; font: 600 .59rem/1.2 Inter, sans-serif; }
.ud-topbar-stats strong { margin-top: 4px; color: var(--ud-navy); font: 750 .72rem/1.2 Inter, sans-serif; }
.ud-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: clamp(16px, 2vw, 30px); }
.ud-topbar-actions button, .ud-menu-button { min-height: 41px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dce6f2; border-radius: 11px; padding: 8px 11px; color: #274366; background: #fff; font: 650 .68rem Inter, sans-serif; cursor: pointer; }
.ud-topbar-actions button:hover { border-color: #a6cbd3; background: #f5fbfc; }
.ud-topbar-actions svg, .ud-menu-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ud-dashboard, .ud-catalog { position: relative; width: min(100%, 1500px); margin: 0 auto; }
.ud-dashboard h1, .ud-catalog h1 { margin: 4px 0 10px; color: var(--ud-navy); font: 750 clamp(2.25rem, 3.4vw, 3.6rem)/1.02 Georgia, serif; letter-spacing: -.04em; }
.ud-dashboard-heading, .ud-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.ud-dashboard-heading p, .ud-catalog-heading p { max-width: 760px; margin: 0; color: #5e7694; font-size: .88rem; line-height: 1.6; }
.ud-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; margin-bottom: 34px; border: 1px solid rgba(234,223,210,.9); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 18px 42px rgba(73, 85, 97, .07); backdrop-filter: blur(12px); }
.ud-stat-strip article { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.ud-stat-strip article + article { border-left: 1px solid #e5ecf4; }
.ud-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087f89; background: #e6f8f6; font: 800 .69rem Inter, sans-serif; }
.ud-stat-strip small, .ud-stat-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-stat-strip small { color: #7b8ba1; font-size: .59rem; }
.ud-stat-strip strong { margin-top: 4px; color: var(--ud-navy); font-size: .72rem; }
.ud-section-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.ud-section-title h2 { margin: 3px 0 0; color: var(--ud-navy); font: 750 1.45rem/1.18 Georgia, serif; }
.ud-section-title.compact h2 { font-size: 1.18rem; }
.ud-text-button { appearance: none; border: 0; padding: 10px 12px; color: #2f7d76; background: #edf7f4; border-radius: 999px; font: 700 .72rem Inter, sans-serif; cursor: pointer; }

.ud-cycle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ud-cycle-card { position: relative; min-height: 214px; overflow: hidden; display: grid; grid-template-columns: 1fr 43%; align-items: stretch; border: 1px solid rgba(234,223,210,.95); border-radius: 24px; padding: 0; color: var(--ud-ink); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,252,249,.94)); text-align: left; box-shadow: 0 18px 44px rgba(73, 85, 97, .08); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ud-cycle-card:hover { transform: translateY(-4px); box-shadow: var(--ud-shadow); }
.ud-cycle-card.coral { --accent: var(--ud-coral); --soft: #feefea; }
.ud-cycle-card.teal { --accent: var(--ud-teal); --soft: #edf8f5; }
.ud-cycle-card.violet { --accent: var(--ud-violet); --soft: #f4f0ff; }
.ud-cycle-copy { position: relative; z-index: 2; padding: 24px 10px 26px 24px; }
.ud-cycle-copy small { color: var(--accent); font: 750 .57rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.ud-cycle-copy h3 { margin: 9px 0; color: var(--ud-navy); font: 750 1.18rem/1.16 Georgia, serif; }
.ud-cycle-copy p { margin: 0 0 15px; color: #60758d; font-size: .66rem; line-height: 1.5; }
.ud-cycle-copy > span { display: flex; align-items: center; gap: 10px; color: var(--accent); font: 700 .63rem Inter, sans-serif; }
.ud-cycle-copy b { padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--accent), transparent 65%); }
.ud-cycle-photo { position: relative; overflow: hidden; background: var(--soft); }
.ud-cycle-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255,250,246,.96) 0, transparent 34%); }
.ud-cycle-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; transform: scale(1.03); }
.ud-cycle-orb { position: absolute; top: 16px; right: calc(43% - 18px); z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--accent); font: 800 .7rem Inter, sans-serif; box-shadow: 0 9px 18px rgba(73, 85, 97, .18); }
.ud-cycle-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: 4px; background: var(--soft); }
.ud-cycle-progress i { display: block; height: 100%; background: var(--accent); }

.ud-dashboard-lower { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 2fr); gap: 15px; margin-top: 26px; }
.ud-support-column, .ud-featured-column { min-width: 0; padding: 17px; border: 1px solid var(--ud-line); border-radius: 17px; background: rgba(255,255,255,.74); }
.ud-support-module { width: 100%; display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 11px; margin-top: 10px; border: 1px solid #dfe7f0; border-radius: 13px; padding: 14px; color: var(--ud-ink); background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.ud-support-module:hover { border-color: #a8d7d7; transform: translateY(-2px); }
.ud-support-module > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #07868e; background: #e8f9f7; font-weight: 800; }
.ud-support-module strong { display: block; color: var(--ud-navy); font-size: .72rem; }
.ud-support-module p { margin: 4px 0 0; color: #687e97; font-size: .6rem; line-height: 1.45; }
.ud-support-module > b { color: #0b8190; }
.ud-local-note { margin-top: 12px; border-radius: 12px; padding: 13px; color: #365f70; background: #ecf7f8; }
.ud-local-note strong { font-size: .66rem; }
.ud-local-note p { margin: 5px 0 0; font-size: .59rem; line-height: 1.45; }
.ud-featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ud-featured-card { overflow: hidden; display: grid; grid-template-rows: 128px 1fr; min-width: 0; border: 1px solid var(--ud-line); border-radius: 13px; padding: 0; color: var(--ud-ink); background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.ud-featured-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(17,48,80,.10); }
.ud-featured-card.coral { --accent: var(--ud-coral); --soft: #fff0f2; }
.ud-featured-card.teal { --accent: var(--ud-teal); --soft: #eafaf8; }
.ud-featured-card.violet { --accent: var(--ud-violet); --soft: #f1efff; }
.ud-featured-photo { position: relative; overflow: hidden; display: block; background: var(--soft); }
.ud-featured-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 20%; }
.ud-featured-photo b { position: absolute; bottom: 8px; left: 9px; width: 29px; height: 29px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--accent); font: 800 .71rem Inter, sans-serif; }
.ud-featured-photo i { position: absolute; top: 8px; left: 8px; border-radius: 999px; padding: 4px 8px; color: var(--accent); background: rgba(255,255,255,.93); font: 750 .51rem Inter, sans-serif; font-style: normal; }
.ud-featured-copy { display: flex; flex-direction: column; padding: 11px; }
.ud-featured-copy small { color: #7b8ba1; font-size: .51rem; }
.ud-featured-copy strong { display: block; margin-top: 5px; color: var(--ud-navy); font: 750 .68rem/1.3 Inter, sans-serif; }
.ud-featured-copy p { display: -webkit-box; overflow: hidden; margin: 5px 0 8px; color: #60758d; font-size: .55rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ud-featured-copy em { margin-top: auto; color: var(--accent); font: 750 .55rem Inter, sans-serif; font-style: normal; }
.ud-closing-banner { display: flex; align-items: center; gap: 13px; margin-top: 16px; border: 1px solid #d7e4ef; border-radius: 15px; padding: 14px 17px; background: #fff; }
.ud-closing-banner > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #07878f; background: #e9f9f7; font-size: 1.1rem; }
.ud-closing-banner strong { color: var(--ud-navy); font-size: .76rem; }
.ud-closing-banner p { margin: 3px 0 0; color: #647b95; font-size: .6rem; }
.ud-closing-banner .btn { margin-left: auto; }

.ud-catalog-heading { align-items: center; }
.ud-catalog-count { min-width: 120px; border: 1px solid var(--ud-line); border-radius: 13px; padding: 12px 17px; color: #70839d; background: #fff; text-align: center; font-size: .62rem; }
.ud-catalog-count strong { display: block; color: var(--ud-navy); font: 800 1.45rem Inter, sans-serif; }
.ud-catalog-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 17px; padding-bottom: 3px; }
.ud-catalog-tabs { scrollbar-width: none; }
.ud-catalog-tabs::-webkit-scrollbar { display: none; }
.ud-catalog-tabs button { flex: 0 0 auto; border: 1px solid var(--ud-line); border-radius: 999px; padding: 9px 13px; color: #5d738e; background: #fff; font: 700 .65rem Inter, sans-serif; cursor: pointer; }
.ud-catalog-tabs button span { margin-left: 5px; border-radius: 999px; padding: 2px 6px; background: #eef3f8; }
.ud-catalog-tabs button.active { border-color: #078b93; color: #fff; background: #078b93; }
.ud-catalog-tabs button.active span { background: rgba(255,255,255,.2); }
.ud-scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ud-scenario-card { min-width: 0; min-height: 210px; overflow: hidden; display: grid; grid-template-columns: 42% 1fr; border: 1px solid var(--ud-line); border-radius: 16px; padding: 0; color: var(--ud-ink); background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.ud-scenario-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent), #dbe6ef 55%); box-shadow: var(--ud-shadow); }
.ud-scenario-card.coral { --accent: var(--ud-coral); --soft: #fff0f2; }
.ud-scenario-card.teal { --accent: var(--ud-teal); --soft: #eafaf8; }
.ud-scenario-card.violet { --accent: var(--ud-violet); --soft: #f1efff; }
.ud-scenario-photo { position: relative; overflow: hidden; display: block; min-height: 210px; background: var(--soft); }
.ud-scenario-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 20%; }
.ud-scenario-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(3,29,56,.74)); }
.ud-scenario-photo > b { position: absolute; top: 11px; left: 11px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--accent); font: 800 .67rem Inter, sans-serif; }
.ud-scenario-photo > i { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 2; color: #fff; font: 700 .55rem/1.3 Inter, sans-serif; font-style: normal; }
.ud-scenario-copy { min-width: 0; display: flex; flex-direction: column; padding: 18px; }
.ud-scenario-copy > small { color: var(--accent); font: 750 .56rem Inter, sans-serif; }
.ud-scenario-copy > strong { display: block; margin: 7px 0; color: var(--ud-navy); font: 750 .85rem/1.3 Inter, sans-serif; }
.ud-scenario-copy > p { margin: 0 0 12px; color: #60758d; font-size: .64rem; line-height: 1.55; }
.ud-scenario-copy > span { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.ud-scenario-copy em { border-radius: 999px; padding: 5px 8px; color: #667c96; background: #f1f5f9; font: 650 .52rem Inter, sans-serif; font-style: normal; }
.ud-scenario-copy b { margin-left: auto; color: var(--accent); font: 750 .61rem Inter, sans-serif; }
.ud-catalog-footer { display: flex; align-items: center; gap: 18px; margin-top: 18px; border-top: 1px solid var(--ud-line); padding-top: 16px; }
.ud-catalog-footer p { max-width: 600px; margin: 0 auto; color: #71849b; font-size: .59rem; line-height: 1.45; text-align: center; }

/* Premium treatment for the existing guided practice screens. */
.work-shell { grid-template-columns: 230px minmax(0, 1fr) !important; gap: 17px !important; }
.side-rail { position: sticky !important; top: 102px; align-self: start; border: 1px solid #d9e4ef !important; border-radius: 17px !important; padding: 17px !important; background: linear-gradient(180deg, #fff, #f3f8fc) !important; box-shadow: 0 14px 38px rgba(16,49,82,.07); }
.side-rail .rail-title { color: var(--ud-navy); font-weight: 800; }
.side-rail .step { border-radius: 12px !important; padding: 11px 9px !important; }
.side-rail .step.active { color: #fff !important; background: linear-gradient(135deg, #087e88, #0aa99f) !important; box-shadow: 0 8px 22px rgba(4,122,133,.2); }
.side-rail .step.active strong, .side-rail .step.active span { color: #fff !important; }
.side-rail .step-num { width: 29px !important; height: 29px !important; }
.workspace { min-width: 0; }
.workspace > .panel, .annual-shell .panel, .onboarding-shell > * { border-color: #dbe5ef !important; border-radius: 18px !important; box-shadow: 0 15px 45px rgba(17,48,80,.07) !important; }
.big-avatar { width: 150px !important; height: 150px !important; border-radius: 18px !important; box-shadow: 0 12px 28px rgba(15,47,79,.16); }
.big-avatar img, .mini-avatar img, .scenario-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mini-avatar { width: 92px !important; height: 92px !important; border-radius: 16px !important; }
.profile-head { align-items: center !important; gap: 20px !important; }
.sim-layout { grid-template-columns: minmax(0, 1.45fr) minmax(270px, .72fr) !important; gap: 17px !important; }
.chat-shell, .support-panel, .trace-card, .profile-card, .context-box, .evidence-callout { border-radius: 15px !important; }
.message { max-width: 78% !important; border-radius: 15px !important; }
.choice { border-radius: 13px !important; }
.annual-nav { border-radius: 17px !important; box-shadow: 0 14px 38px rgba(16,49,82,.07); }

body.ud-focus-mode .app { grid-template-columns: minmax(0, 1fr); }
body.ud-focus-mode .ud-sidebar { display: none; }
body.ud-focus-mode .topbar, body.ud-focus-mode .main, body.ud-focus-mode .footer { grid-column: 1; }
body.ud-focus-mode .topbar > .brand { display: flex !important; }
body.ud-focus-mode .ud-topbar-product, body.ud-focus-mode .ud-topbar-stats, body.ud-focus-mode .ud-topbar-actions { display: none; }
body.ud-focus-mode .topbar > .top-actions { display: flex !important; }
body.ud-focus-mode .main { width: min(1280px, calc(100% - 2rem)); margin-inline: auto; }

@media (max-width: 1280px) {
  .app { grid-template-columns: 226px minmax(0, 1fr); }
  .ud-sidebar { padding-inline: 13px; }
  .main { padding: 26px; }
  .ud-topbar-stats > div:nth-of-type(3), .ud-topbar-stats > span:nth-of-type(2) { display: none; }
  .ud-cycle-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .ud-featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .topbar, .main, .footer { grid-column: 1; }
  .ud-sidebar { position: fixed; left: 0; top: 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .24s ease; }
  body.ud-drawer-open .ud-sidebar { transform: translateX(0); }
  .ud-drawer-scrim { position: fixed; inset: 0; z-index: 105; display: block; visibility: hidden; border: 0; opacity: 0; background: rgba(2,21,40,.52); transition: .22s ease; }
  body.ud-drawer-open .ud-drawer-scrim { visibility: visible; opacity: 1; }
  .ud-menu-button { display: inline-flex; flex: 0 0 auto; padding-inline: 10px; }
  .ud-topbar-stats { margin-left: auto; }
  .ud-topbar-product { min-width: 205px; }
  .ud-cycle-grid { grid-template-columns: 1fr; }
  .ud-cycle-card { min-height: 178px; grid-template-columns: 1fr 35%; }
  .ud-cycle-orb { right: calc(35% - 18px); }
  .ud-dashboard-lower { grid-template-columns: 1fr; }
  .work-shell { grid-template-columns: 1fr !important; }
  .side-rail { position: static !important; display: block !important; overflow-x: auto; }
  .side-rail .steps { min-width: 700px; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .side-rail .step { min-width: 0; display: flex !important; text-align: left !important; }
  .side-rail .step strong, .side-rail .step span { display: block !important; }
  .side-rail .rail-context, .side-rail .rail-divider { display: none; }
}

@media (max-width: 768px) {
  .nv-pilot-banner { font-size: 10px !important; }
  .topbar { min-height: 66px; padding: 9px 13px; }
  .main { padding: 18px 14px; }
  .footer { margin-inline: 14px; }
  .ud-topbar-product { min-width: 0; }
  .ud-product-mark { width: 36px; height: 36px; }
  .ud-topbar-product small { display: none; }
  .ud-topbar-stats { display: none; }
  .ud-topbar-actions { margin-left: auto; }
  .ud-topbar-actions button { padding-inline: 9px; }
  .ud-topbar-actions span { display: none; }
  .ud-dashboard-heading, .ud-catalog-heading { align-items: flex-start; flex-direction: column; margin-bottom: 17px; }
  .ud-dashboard h1, .ud-catalog h1 { font-size: clamp(1.8rem, 9vw, 2.45rem); }
  .ud-stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ud-stat-strip article + article { border-left: 0; }
  .ud-stat-strip article:nth-child(even) { border-left: 1px solid #e5ecf4; }
  .ud-stat-strip article:nth-child(n+3) { border-top: 1px solid #e5ecf4; }
  .ud-cycle-card { grid-template-columns: 1fr 38%; }
  .ud-cycle-orb { right: calc(38% - 18px); }
  .ud-featured-grid, .ud-scenario-grid { grid-template-columns: 1fr; }
  .ud-featured-card { grid-template-columns: 148px 1fr; grid-template-rows: minmax(145px, auto); }
  .ud-closing-banner { align-items: flex-start; flex-wrap: wrap; }
  .ud-closing-banner .btn { width: 100%; margin-left: 0; }
  .ud-scenario-card { grid-template-columns: 42% 1fr; }
  .ud-catalog-footer { align-items: stretch; flex-direction: column; }
  .ud-catalog-footer p { order: 3; }
  .sim-layout { grid-template-columns: 1fr !important; }
  .brief-grid, .results-grid, .compare-grid, .reflection-grid, .transfer-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .topbar { gap: 7px; }
  .ud-topbar-product strong { font-size: .78rem; }
  .ud-topbar-actions button:nth-child(2) { display: none; }
  .main { padding: 15px 10px; }
  .ud-dashboard-heading .btn { width: 100%; }
  .ud-stat-strip { grid-template-columns: 1fr; }
  .ud-stat-strip article:nth-child(even), .ud-stat-strip article:nth-child(n+3) { border-left: 0; border-top: 1px solid #e5ecf4; }
  .ud-section-title { align-items: flex-start; }
  .ud-section-title .ud-text-button { white-space: nowrap; }
  .ud-cycle-card { min-height: 300px; grid-template-columns: 1fr; grid-template-rows: 1fr 135px; }
  .ud-cycle-copy { padding: 19px 19px 14px; }
  .ud-cycle-photo { grid-row: 2; }
  .ud-cycle-photo::before { background: linear-gradient(180deg, #fff 0, transparent 35%); }
  .ud-cycle-orb { top: auto; right: 15px; bottom: 116px; }
  .ud-featured-card { grid-template-columns: 116px 1fr; }
  .ud-featured-copy p { -webkit-line-clamp: 3; }
  .ud-scenario-card { min-height: 0; grid-template-columns: 1fr; }
  .ud-scenario-photo { min-height: 215px; }
  .ud-scenario-copy { padding: 15px; }
  .big-avatar { width: 112px !important; height: 112px !important; }
  .profile-head { align-items: flex-start !important; }
  .side-rail .steps { min-width: 620px; }
}

@media (max-height: 760px) and (min-width: 1025px) {
  .ud-sidebar { padding-top: 15px; }
  .ud-sidebar-brand { gap: 7px; padding-bottom: 13px; }
  .ud-sidebar-brand img { height: 35px; }
  .ud-sidebar-nav { gap: 3px; padding-block: 13px; }
  .ud-sidebar button, .ud-sidebar a { min-height: 38px; padding-block: 7px; }
  .ud-sidebar-bottom { padding-top: 8px; }
  .ud-sidebar-person { margin-top: 7px; padding-top: 8px; }
}

/* Premium foundation — block 2: calm, legible navigation. */
@media (min-width: 1025px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); }
}
.topbar {
  min-height: 76px;
  border-bottom-color: var(--ud-line);
  box-shadow: 0 4px 18px rgba(13, 42, 77, .04);
}
.ud-sidebar {
  padding: 22px 16px 18px;
  background: var(--ud-petroleum-deep);
  box-shadow: 8px 0 26px rgba(2, 31, 60, .1);
}
.ud-sidebar-brand { gap: 12px; padding: 3px 9px 20px; }
.ud-sidebar-brand img { width: 156px; height: 48px; }
.ud-sidebar-brand strong { font: 750 1rem/1.25 var(--ud-font-sans); }
.ud-sidebar-brand span { color: #bed6e7; font: 550 var(--ud-text-xs)/1.4 var(--ud-font-sans); }
.ud-sidebar-nav { gap: 5px; padding: 20px 0; }
.ud-sidebar button,
.ud-sidebar a {
  min-height: var(--ud-control-min);
  border: 1px solid transparent;
  border-radius: var(--ud-radius-sm);
  padding: 10px 12px;
  font: 650 var(--ud-text-sm)/1.25 var(--ud-font-sans);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.ud-sidebar button:hover,
.ud-sidebar a:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  transform: none;
}
.ud-sidebar button.active {
  border-color: rgba(255,255,255,.16);
  background: #087f89;
  box-shadow: inset 3px 0 0 #7fe1d8;
}
.ud-sidebar-person strong { font-size: var(--ud-text-sm); }
.ud-sidebar-person small { color: #bed6e7; font-size: var(--ud-text-xs); }
.ud-topbar-product { min-width: 260px; }
.ud-product-mark { width: 44px; height: 44px; border-radius: var(--ud-radius-md); }
.ud-topbar-product strong { font: 750 1rem/1.25 var(--ud-font-sans); }
.ud-topbar-product small { color: var(--ud-text-muted); font: 550 var(--ud-text-xs)/1.3 var(--ud-font-sans); }
.ud-topbar-stats small { color: var(--ud-text-muted); font: 600 var(--ud-text-xs)/1.25 var(--ud-font-sans); }
.ud-topbar-stats strong { font: 750 var(--ud-text-sm)/1.25 var(--ud-font-sans); }
.ud-topbar-actions button,
.ud-menu-button {
  min-height: var(--ud-control-min);
  border-color: var(--ud-line-strong);
  border-radius: var(--ud-radius-sm);
  padding: 9px 12px;
  font: 650 var(--ud-text-sm)/1 var(--ud-font-sans);
}
.ud-topbar-actions button:hover { border-color: #73abb1; background: #eef9f9; }

@media (max-width: 1024px) {
  .ud-sidebar { width: min(310px, 88vw); }
  .ud-menu-button { display: inline-flex; }
  .ud-drawer-scrim { background: rgba(2, 21, 40, .62); backdrop-filter: blur(2px); }
}

@media (max-width: 768px) {
  .topbar { min-height: 64px; }
  .ud-topbar-product strong { font-size: var(--ud-text-sm); }
  .ud-product-mark { width: 40px; height: 40px; }
}

/* Premium experience — block 3: purposeful dashboard. */
.ud-dashboard-heading { align-items: center; margin-bottom: var(--ud-space-5); }
.ud-dashboard-heading p,
.ud-catalog-heading p { color: var(--ud-text-muted); font-size: var(--ud-text-md); line-height: 1.6; }
.ud-dashboard-heading .btn { flex: 0 0 auto; }
.ud-dashboard-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  margin-bottom: var(--ud-space-5);
  border: 1px solid #cadce9;
  border-radius: var(--ud-radius-lg);
  padding: clamp(26px, 4.2vw, 56px);
  color: #fff;
  background: linear-gradient(135deg, #052844 0%, #073a61 58%, #096875 100%);
  box-shadow: var(--ud-shadow-lg);
}
.ud-dashboard-hero::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
  pointer-events: none;
}
.ud-dashboard-hero-copy { position: relative; z-index: 1; }
.ud-dashboard-hero .eyebrow { color: #8ce9df; }
.ud-dashboard-hero h2 {
  max-width: 760px;
  margin: var(--ud-space-2) 0 var(--ud-space-4);
  color: #fff;
  font: 750 clamp(2rem, 3.4vw, 3.4rem)/1.06 var(--ud-font-display);
  letter-spacing: -.035em;
}
.ud-dashboard-hero-copy > p { max-width: 760px; margin: 0; color: #d9e9f4; font-size: var(--ud-text-md); line-height: 1.7; }
.ud-dashboard-actions { display: flex; flex-wrap: wrap; gap: var(--ud-space-3); margin-top: var(--ud-space-5); }
.ud-dashboard-hero .btn-primary { background: #fff; color: var(--ud-petroleum-deep); box-shadow: none; }
.ud-dashboard-hero .btn-primary:hover { background: #e8fbf8; }
.ud-dashboard-hero .btn-secondary { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.08); }
.ud-dashboard-hero .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.ud-privacy-inline { display: block; margin-top: var(--ud-space-4); color: #c9dce9; font-size: var(--ud-text-xs); }
.ud-current-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ud-radius-lg);
  padding: var(--ud-space-5);
  background: rgba(2, 31, 60, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.ud-current-card > span { color: #8ce9df; font-size: var(--ud-text-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ud-current-card > strong { display: block; margin: var(--ud-space-2) 0 var(--ud-space-5); color: #fff; font: 750 var(--ud-text-xl)/1.3 var(--ud-font-display); }
.ud-current-card dl { display: grid; gap: var(--ud-space-3); margin: 0; }
.ud-current-card dl div { display: grid; grid-template-columns: 88px 1fr; gap: var(--ud-space-3); padding-top: var(--ud-space-3); border-top: 1px solid rgba(255,255,255,.14); }
.ud-current-card dt { color: #b8cede; font-size: var(--ud-text-xs); }
.ud-current-card dd { margin: 0; color: #fff; font-size: var(--ud-text-sm); font-weight: 650; text-align: right; }
.ud-stat-strip { margin-bottom: var(--ud-space-6); border-radius: var(--ud-radius-md); box-shadow: var(--ud-shadow-sm); }
.ud-stat-strip article { min-height: 88px; padding: var(--ud-space-4) var(--ud-space-5); }
.ud-stat-icon { width: 42px; height: 42px; border-radius: var(--ud-radius-sm); font-size: var(--ud-text-sm); }
.ud-stat-strip small { color: var(--ud-text-muted); font-size: var(--ud-text-xs); }
.ud-stat-strip strong { margin-top: var(--ud-space-1); font-size: var(--ud-text-sm); }
.ud-section-title h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.ud-section-title.compact h2 { font-size: var(--ud-text-xl); }
.ud-text-button { min-height: var(--ud-control-min); padding: 10px 4px; font-size: var(--ud-text-sm); }
.ud-cycle-copy small { font-size: var(--ud-text-xs); }
.ud-cycle-copy h3 { font-size: var(--ud-text-xl); }
.ud-cycle-copy p { font-size: var(--ud-text-sm); }
.ud-cycle-copy > span { font-size: var(--ud-text-sm); }
.ud-support-module strong { font-size: var(--ud-text-sm); }
.ud-support-module p,
.ud-local-note p,
.ud-closing-banner p { font-size: var(--ud-text-xs); }
.ud-local-note strong,
.ud-closing-banner strong { font-size: var(--ud-text-sm); }

@media (max-width: 1024px) {
  .ud-dashboard-hero { grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); padding: 30px; }
}

@media (max-width: 768px) {
  .ud-dashboard-hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .ud-dashboard-hero h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .ud-current-card { padding: var(--ud-space-4); }
  .ud-dashboard-actions .btn { flex: 1 1 180px; }
}

@media (max-width: 480px) {
  .ud-dashboard-hero { padding: 24px 18px; }
  .ud-dashboard-actions { flex-direction: column; }
  .ud-dashboard-actions .btn { width: 100%; flex-basis: auto; }
  .ud-current-card dl div { grid-template-columns: 72px 1fr; }
}

/* Premium experience — block 4: readable scenario catalog. */
.ud-catalog-heading { align-items: center; }
.ud-catalog-count { min-width: 140px; padding: 14px 18px; font-size: var(--ud-text-xs); }
.ud-catalog-count strong { font-size: 1.65rem; }
.ud-catalog-tabs { gap: var(--ud-space-2); margin-bottom: var(--ud-space-5); }
.ud-catalog-tabs button { min-height: var(--ud-control-min); padding: 10px 16px; font-size: var(--ud-text-sm); }
.ud-scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ud-space-4); }
.ud-scenario-card {
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 230px minmax(0, 1fr);
  border-radius: var(--ud-radius-lg);
  color: var(--ud-text);
  background: var(--ud-surface-raised);
  box-shadow: var(--ud-shadow-sm);
  cursor: default;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ud-scenario-card:hover { transform: translateY(-3px); box-shadow: var(--ud-shadow); }
.ud-scenario-photo { min-height: 0; }
.ud-scenario-photo > b { width: 40px; height: 40px; font-size: var(--ud-text-sm); }
.ud-scenario-photo > i { font-size: var(--ud-text-xs); }
.ud-scenario-copy { padding: var(--ud-space-5); }
.ud-scenario-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ud-space-2); }
.ud-scenario-heading > small { color: var(--accent); font-size: var(--ud-text-xs); font-weight: 750; }
.ud-scenario-status { flex: 0 0 auto; border-radius: var(--ud-radius-pill); padding: 5px 8px; color: var(--ud-text-muted); background: var(--ud-surface-soft); font-size: .7rem; font-weight: 700; }
.ud-scenario-copy > strong { margin: var(--ud-space-3) 0; font: 750 var(--ud-text-lg)/1.35 var(--ud-font-sans); }
.ud-scenario-meta { display: grid; gap: var(--ud-space-2); margin: 0 0 var(--ud-space-3); }
.ud-scenario-meta div { display: grid; grid-template-columns: 48px 1fr; gap: var(--ud-space-2); }
.ud-scenario-meta dt { color: var(--ud-text-muted); font-size: var(--ud-text-xs); }
.ud-scenario-meta dd { margin: 0; color: var(--ud-text); font-size: var(--ud-text-xs); font-weight: 650; }
.ud-scenario-details { margin-bottom: var(--ud-space-3); border-top: 1px solid var(--ud-line); border-bottom: 1px solid var(--ud-line); }
.ud-scenario-details summary { min-height: var(--ud-control-min); display: flex; align-items: center; justify-content: space-between; color: #0b6680; font-size: var(--ud-text-sm); font-weight: 700; list-style: none; }
.ud-scenario-details summary::-webkit-details-marker { display: none; }
.ud-scenario-details summary::after { content: '+'; font-size: 1.2rem; }
.ud-scenario-details[open] summary::after { content: '−'; }
.ud-scenario-details p { margin: 0 0 var(--ud-space-3); color: var(--ud-text-muted); font-size: var(--ud-text-sm); line-height: 1.6; }
.ud-scenario-footer { display: flex; align-items: center; gap: var(--ud-space-3); margin-top: auto; }
.ud-scenario-footer > span { display: flex; flex-wrap: wrap; gap: var(--ud-space-2); }
.ud-scenario-footer em { border-radius: var(--ud-radius-pill); padding: 5px 8px; color: var(--ud-text-muted); background: var(--ud-surface-soft); font-size: .7rem; font-style: normal; font-weight: 650; }
.ud-scenario-footer button { min-height: var(--ud-control-min); margin-left: auto; border: 0; border-radius: var(--ud-radius-sm); padding: 9px 12px; color: #fff; background: var(--accent); font-size: var(--ud-text-sm); font-weight: 750; }
.ud-scenario-footer button:hover { filter: brightness(.93); }
.ud-catalog-footer p { font-size: var(--ud-text-xs); }

@media (max-width: 1280px) {
  .ud-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .ud-scenario-grid { grid-template-columns: 1fr; }
  .ud-scenario-card { min-height: 0; grid-template-rows: 240px auto; }
}

@media (max-width: 480px) {
  .ud-scenario-card { grid-template-rows: 215px auto; }
  .ud-scenario-copy { padding: var(--ud-space-4); }
  .ud-scenario-footer { align-items: stretch; flex-direction: column; }
  .ud-scenario-footer button { width: 100%; margin-left: 0; }
}

/* Premium experience — block 5: guided journey and form clarity. */
.work-shell { grid-template-columns: 248px minmax(0, 1fr) !important; gap: var(--ud-space-5) !important; }
.side-rail { top: 96px; border-radius: var(--ud-radius-lg) !important; padding: var(--ud-space-4) !important; box-shadow: var(--ud-shadow-sm); }
.side-rail .steps { display: grid; gap: var(--ud-space-1); }
.side-rail .step { position: relative; min-height: 58px; gap: var(--ud-space-3); border: 1px solid transparent; border-radius: var(--ud-radius-md) !important; padding: 10px !important; color: var(--ud-text-muted); }
.side-rail .step strong { color: var(--ud-text); font-size: var(--ud-text-sm); }
.side-rail .step span:not(.step-num) { display: block; margin-top: 2px; color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.35; }
.side-rail .step-num { width: 32px !important; height: 32px !important; flex: 0 0 auto; border: 1px solid var(--ud-line-strong); background: #fff; font-size: var(--ud-text-xs); }
.side-rail .step.completed { color: var(--ud-success); }
.side-rail .step.completed .step-num { border-color: #83bfb0; color: #fff; background: var(--ud-success); }
.side-rail .step.active { border-color: #73bfc0; background: #087f89 !important; box-shadow: 0 8px 20px rgba(4, 122, 133, .16); }
.side-rail .step.upcoming { opacity: .72; }
.ud-context-notices { display: flex; flex-wrap: wrap; gap: var(--ud-space-2); margin-bottom: var(--ud-space-3); }
.ud-context-chip { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid #d1cfee; border-radius: var(--ud-radius-pill); padding: 6px 11px; color: #534c94; background: #f5f3ff; font-size: var(--ud-text-xs); font-weight: 700; }
.ud-context-chip.local { border-color: #b7d9d4; color: #176b61; background: #ecf8f6; }
.workspace > .panel,
.annual-shell .panel,
.onboarding-shell > * { border-radius: var(--ud-radius-lg) !important; box-shadow: var(--ud-shadow-sm) !important; }
.panel-head { gap: var(--ud-space-5); }
.panel-head h2 { color: var(--ud-navy); font: 750 clamp(1.75rem, 2.8vw, 2.5rem)/1.12 var(--ud-font-display); }
.panel-head p { color: var(--ud-text-muted); font-size: var(--ud-text-md); line-height: 1.65; }
.field label { display: inline-block; margin-bottom: var(--ud-space-2); color: var(--ud-navy); font-size: var(--ud-text-sm); font-weight: 750; }
.field small { display: block; margin-top: var(--ud-space-2); color: var(--ud-text-muted); font-size: var(--ud-text-xs); }
.field :where(input, select, textarea),
.sequence-card textarea,
.reflection-card textarea,
.observation-pad textarea {
  width: 100%;
  border: 1px solid var(--ud-line-strong);
  border-radius: var(--ud-radius-sm);
  padding: 12px 14px;
  color: var(--ud-text);
  background: #fff;
  font-size: var(--ud-text-sm);
  line-height: 1.55;
}
.field :where(input, select):not([type="checkbox"]):not([type="radio"]) { min-height: var(--ud-control-min); }
.field textarea,
.sequence-card textarea,
.reflection-card textarea { min-height: 124px; resize: vertical; }
.sequence-card,
.reflection-card { border-color: var(--ud-line) !important; border-radius: var(--ud-radius-md) !important; background: #fff; }
.sequence-card h3,
.reflection-card h3 { color: var(--ud-navy); font-size: var(--ud-text-md); }
.planner-grid,
.transfer-grid { gap: var(--ud-space-4) !important; }
.planning-sequence { gap: var(--ud-space-4) !important; }
.actions { gap: var(--ud-space-3); }
.actions .btn { min-height: var(--ud-control-min); }

@media (max-width: 1024px) {
  .work-shell { grid-template-columns: 1fr !important; }
  .side-rail .steps { min-width: 820px; grid-template-columns: repeat(6, minmax(126px, 1fr)); gap: var(--ud-space-2); }
  .side-rail .step { min-height: 76px; }
}

@media (max-width: 768px) {
  .planner-grid,
  .planning-sequence,
  .transfer-grid { grid-template-columns: 1fr !important; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .ud-context-notices { align-items: stretch; flex-direction: column; }
  .ud-context-chip { border-radius: var(--ud-radius-sm); }
}

@media (max-width: 480px) {
  .side-rail .steps { min-width: 780px; }
  .actions,
  .actions-right { align-items: stretch !important; flex-direction: column !important; }
  .actions .btn,
  .actions-right .btn { width: 100%; }
}

/* Premium experience — block 6: intervention workspace. */
.sim-layout { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) !important; gap: var(--ud-space-5) !important; align-items: start; }
.sim-sidebar { position: sticky; top: 96px; grid-column: 1; gap: var(--ud-space-3); }
.sim-sidebar > article { border: 1px solid var(--ud-line) !important; border-radius: var(--ud-radius-md) !important; background: #fff; box-shadow: var(--ud-shadow-sm); }
.student-card,
.observation-pad,
.support-side { padding: var(--ud-space-4) !important; }
.student-mini { gap: var(--ud-space-3); }
.student-mini strong { color: var(--ud-navy); font-size: var(--ud-text-md); }
.student-mini span { color: var(--ud-text-muted); font-size: var(--ud-text-xs); }
.meter-label { font-size: var(--ud-text-xs); }
.observation-pad h3,
.support-side h3 { color: var(--ud-navy); font-size: var(--ud-text-md); }
.observation-pad p,
.support-side p { color: var(--ud-text-muted); font-size: var(--ud-text-xs) !important; line-height: 1.55; }
.observation-pad textarea { min-height: 110px; }
.support-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ud-space-2); }
.support-toolbar button,
.tip { min-height: var(--ud-control-min); border-radius: var(--ud-radius-sm); font-size: var(--ud-text-xs); }
.chat { grid-column: 2; min-width: 0; border: 1px solid var(--ud-line) !important; border-radius: var(--ud-radius-lg) !important; box-shadow: var(--ud-shadow); }
.chat-head { min-height: 76px; padding: var(--ud-space-4) var(--ud-space-5); border-bottom: 1px solid var(--ud-line); background: #fff; }
.chat-head strong { color: var(--ud-navy); font-size: var(--ud-text-lg); }
.chat-head small { color: var(--ud-text-muted); font-size: var(--ud-text-xs); }
.turn-pill { border-radius: var(--ud-radius-pill); padding: 7px 11px; color: #176b61; background: #e8f7f5; font-size: var(--ud-text-xs); font-weight: 750; }
.messages { min-height: 480px; max-height: 60vh; gap: var(--ud-space-3); padding: var(--ud-space-5); background: #f4f7fb; }
.message { max-width: min(78%, 720px) !important; border: 1px solid var(--ud-line); border-radius: var(--ud-radius-md) !important; padding: 13px 15px; font-size: var(--ud-text-sm); line-height: 1.6; box-shadow: 0 5px 15px rgba(22,49,82,.05); }
.message small { font-size: .7rem; }
.message.student { border-bottom-left-radius: 4px !important; }
.message.trainee { border-color: #0d6485; border-bottom-right-radius: 4px !important; background: #0a5278; }
.message.system { max-width: min(90%, 780px) !important; border-color: #ead8af; background: #fff8e8; font-size: var(--ud-text-xs); }
.incident { border: 1px solid #e7c7a4; border-radius: var(--ud-radius-md); padding: var(--ud-space-4); background: #fff8ed; }
.incident p { font-size: var(--ud-text-sm); line-height: 1.6; }
.incident-actions { display: grid; gap: var(--ud-space-2); }
.mini-choice { min-height: var(--ud-control-min); text-align: left; }
.composer { padding: var(--ud-space-4) var(--ud-space-5); border-top-color: var(--ud-line); }
.composer textarea { min-height: 120px; border: 1px solid var(--ud-line-strong); border-radius: var(--ud-radius-sm); padding: 13px 14px; font-size: var(--ud-text-sm); line-height: 1.55; resize: vertical; }
.tip-row { display: flex; flex-wrap: wrap; gap: var(--ud-space-2); margin-top: var(--ud-space-3); }
.tip { flex: 0 1 auto; padding: 9px 12px; }
.composer-foot { gap: var(--ud-space-3); }
.composer-foot small { color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.45; }

@media (max-width: 1180px) {
  .sim-layout { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) !important; gap: var(--ud-space-4) !important; }
}

@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr !important; }
  .sim-sidebar,
  .chat { position: static; grid-column: 1; }
  .sim-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat { grid-row: 2; }
}

@media (max-width: 640px) {
  .sim-sidebar { grid-template-columns: 1fr; }
  .chat-head { align-items: flex-start; flex-direction: column; padding: var(--ud-space-4); }
  .messages { min-height: 360px; max-height: none; padding: var(--ud-space-4); }
  .message { max-width: 94% !important; }
  .composer { padding: var(--ud-space-4); }
  .support-toolbar { grid-template-columns: 1fr; }
  .tip { flex: 1 1 100%; }
  .composer-foot { align-items: stretch; flex-direction: column; }
  .composer-foot .btn { width: 100%; }
}

/* Premium experience — block 7: formative synthesis and source hierarchy. */
.results-hero { grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--ud-space-6); align-items: center; border: 1px solid #c8dedf; border-radius: var(--ud-radius-lg); padding: var(--ud-space-6); background: linear-gradient(135deg, #edf8f8, #f4f3ff); }
.score-ring { width: 132px; height: 132px; margin-bottom: 28px; }
.score-ring strong { font-size: 2rem; }
.ud-score-caption { position: absolute; top: calc(100% + 9px); left: 50%; z-index: 2; width: 150px; transform: translateX(-50%); color: var(--ud-text-muted); font-size: .7rem; font-weight: 700; line-height: 1.3; text-align: center; }
.results-hero h2 { color: var(--ud-navy); font: 750 clamp(1.75rem, 2.8vw, 2.5rem)/1.15 var(--ud-font-display); }
.results-hero p { color: var(--ud-text-muted); font-size: var(--ud-text-sm); line-height: 1.6; }
.confidence-pill { display: inline-flex; align-items: center; min-height: 34px; margin-top: var(--ud-space-3); border-radius: var(--ud-radius-pill); padding: 6px 10px; font-size: var(--ud-text-xs); }
.result-kpis { min-width: 190px; }
.result-kpi { border-color: var(--ud-line) !important; }
.result-kpi strong { font-size: var(--ud-text-lg); }
.result-kpi span { font-size: var(--ud-text-xs); }
.feedback-layers { gap: var(--ud-space-3) !important; }
.feedback-layer { border-color: var(--ud-line) !important; border-radius: var(--ud-radius-md) !important; padding: var(--ud-space-4) !important; }
.feedback-layer strong { color: var(--ud-navy); font-size: var(--ud-text-sm); }
.feedback-layer p { color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.55; }
.dimension,
.feedback-item,
.compare-box { border-color: var(--ud-line) !important; border-radius: var(--ud-radius-md) !important; padding: var(--ud-space-4) !important; }
.dimension strong,
.feedback-item strong,
.compare-box strong { color: var(--ud-navy); font-size: var(--ud-text-sm); }
.dimension p,
.feedback-item p,
.compare-box p { color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.55; }
.sources-list { gap: var(--ud-space-3); }
.source-item { grid-template-columns: auto minmax(0, 1fr); gap: var(--ud-space-3); border-color: var(--ud-line); border-radius: var(--ud-radius-md); padding: var(--ud-space-4); background: #fff; }
.source-number { width: 38px; height: 38px; border-radius: var(--ud-radius-sm); font-size: var(--ud-text-xs); }
.source-item strong { margin-top: 5px; font-size: var(--ud-text-sm); }
.source-item span:not(.source-number):not(.ud-source-type) { color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.55; }
.ud-source-type { display: inline-flex !important; width: fit-content; margin: 0 !important; border-radius: var(--ud-radius-pill); padding: 4px 8px; color: #3f5f75 !important; background: #edf3f7; font-size: .68rem !important; font-weight: 750; line-height: 1.2 !important; }
.source-item[data-source-type="official"] { border-left: 4px solid #087f89; }
.source-item[data-source-type="official"] .ud-source-type { color: #176b61 !important; background: #e7f6f3; }
.source-item[data-source-type="scientific"] { border-left: 4px solid var(--ud-violet); }
.source-item[data-source-type="scientific"] .ud-source-type { color: #5749a8 !important; background: #efedff; }
.resource-table { gap: var(--ud-space-3) !important; }
.resource-row { border-color: var(--ud-line) !important; border-radius: var(--ud-radius-md) !important; padding: var(--ud-space-4) !important; }
.resource-row strong { font-size: var(--ud-text-sm); }
.resource-row span { color: var(--ud-text-muted); font-size: var(--ud-text-xs); line-height: 1.55; }
dialog { border-radius: var(--ud-radius-lg) !important; }
.modal-head { padding: var(--ud-space-5) !important; }
.modal-body { padding: var(--ud-space-5) !important; }
.close-btn { min-height: var(--ud-control-min); }

@media (max-width: 900px) {
  .results-hero { grid-template-columns: 140px minmax(0, 1fr); }
  .result-kpis { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .results-hero { grid-template-columns: 1fr; padding: var(--ud-space-5); text-align: center; }
  .score-ring { margin: 0 auto 34px; }
  .result-kpis { grid-template-columns: 1fr; }
  .resource-row { grid-template-columns: auto 1fr !important; }
  .resource-row > div:last-child { grid-column: 2; }
  .modal-head { align-items: flex-start !important; gap: var(--ud-space-3); }
}

/* Premium experience — block 8: responsive and accessible resilience. */
img, svg, video, canvas { max-width: 100%; }
.main,
.screen,
.workspace,
.panel,
.ud-dashboard,
.ud-catalog,
.ud-dashboard-hero > *,
.ud-scenario-copy,
.results-hero > * { min-width: 0; }
:where(p, li, dd, td, th, .source-item span, .trace-row strong) { overflow-wrap: anywhere; }
:where(.btn, button, a, summary) { touch-action: manipulation; }
.btn { min-height: var(--ud-control-min); border-radius: var(--ud-radius-sm); padding: 10px 16px; font-size: var(--ud-text-sm); font-weight: 750; }
.btn-primary { box-shadow: 0 8px 20px rgba(8, 82, 120, .15); }
.btn-primary:hover { filter: brightness(.94); }
.btn-secondary,
.btn-soft { border-color: var(--ud-line-strong); }
.eyebrow { font-size: var(--ud-text-xs); letter-spacing: .08em; }
.badge { min-height: 32px; display: inline-flex; align-items: center; font-size: var(--ud-text-xs); }
.notice,
.academic-note { font-size: var(--ud-text-sm); line-height: 1.6; }
dialog { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
dialog::backdrop { background: rgba(2, 21, 40, .66); backdrop-filter: blur(3px); }
[id] { scroll-margin-top: 100px; }

@media (max-width: 1279px) {
  .main { padding: 26px 22px; }
  .ud-dashboard-lower { grid-template-columns: 1fr; }
  .ud-cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ud-cycle-grid .ud-cycle-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  body.ud-drawer-open { overflow: hidden; }
  .topbar { padding-inline: 16px; }
  .ud-sidebar { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .ud-cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ud-cycle-card { min-height: 210px; }
  .ud-cycle-grid .ud-cycle-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .main { padding: 18px 14px; }
  .footer { margin-inline: 14px; }
  .ud-cycle-grid { grid-template-columns: 1fr; }
  .ud-cycle-grid .ud-cycle-card:last-child { grid-column: auto; }
  .ud-cycle-card { min-height: 290px; grid-template-columns: 1fr; grid-template-rows: auto 135px; }
  .ud-cycle-photo { grid-row: 2; }
  .ud-cycle-orb { top: auto; right: 15px; bottom: 116px; }
  .ud-stat-strip article { min-height: 78px; padding: var(--ud-space-3) var(--ud-space-4); }
  .ud-catalog-count { width: 100%; }
  .ud-featured-card { grid-template-columns: 132px minmax(0, 1fr); }
  .annual-form-grid { grid-template-columns: 1fr !important; }
  .field.wide { grid-column: auto !important; }
  .brief-grid,
  .results-grid,
  .compare-grid,
  .reflection-grid,
  .transfer-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  .main { padding: 14px 10px; }
  .topbar { padding-inline: 10px; }
  .ud-menu-button,
  .ud-topbar-actions button { padding-inline: 9px; }
  .ud-dashboard h1,
  .ud-catalog h1 { font-size: clamp(1.8rem, 10vw, 2.25rem); }
  .ud-dashboard-hero h2 { font-size: clamp(1.85rem, 10vw, 2.35rem); }
  .ud-dashboard-hero,
  .panel,
  .results-hero { border-radius: var(--ud-radius-md) !important; }
  .ud-featured-card { grid-template-columns: 110px minmax(0, 1fr); }
  .ud-scenario-heading { align-items: flex-start; flex-direction: column; }
  .modal-head,
  .modal-body { padding: var(--ud-space-4) !important; }
  dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  :where(.ud-cycle-card, .ud-featured-card, .ud-scenario-card, .ud-support-module):hover { transform: none; }
}

@media (forced-colors: active) {
  :where(.ud-sidebar button.active, .side-rail .step.active, .btn-primary, .ud-scenario-footer button) { border: 2px solid ButtonText; }
  :where(.ud-context-chip, .ud-source-type, .badge, .turn-pill) { border: 1px solid CanvasText; }
  .ud-dashboard-hero::after { display: none; }
}

/* =========================================================
   Núcleo Vivo · Umbral Docente
   Corrección de encuadre y responsive — 2026-08-04
   Mantiene intacta la lógica y la persistencia.
   ========================================================= */

/* Evita que cualquier hijo de las grillas fuerce el ancho del viewport. */
.app,
.topbar,
.main,
.footer,
#root,
.screen,
.work-shell,
.workspace,
.workspace > *,
.panel,
.panel > *,
.brief-grid,
.brief-grid > *,
.profile-card,
.trace-card,
.context-box,
.evidence-callout {
  min-width: 0 !important;
  max-width: 100%;
}

/* El contenido principal nunca debe crecer más allá de la columna disponible. */
.main {
  overflow-x: clip;
}

#root,
.screen,
.workspace {
  width: 100%;
}

/* Recorrido lateral + área de trabajo: dimensiones seguras. */
.work-shell {
  width: 100%;
  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.side-rail {
  width: 100%;
  max-width: 248px;
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* La ficha y la trazabilidad crecen según su propio contenido,
   sin igualar alturas ni crear vacíos artificiales. */
.brief-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr) !important;
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

.brief-grid > *,
.profile-card,
.trace-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

.profile-card,
.trace-card {
  display: block !important;
  overflow: hidden;
}

.profile-head {
  min-width: 0;
}

.profile-head > div {
  min-width: 0;
}

.profile-head h3,
.profile-head p,
.profile-head .badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* La trazabilidad no puede imponer un ancho mínimo excesivo. */
.trace-card {
  width: 100%;
  padding: 18px !important;
}

.trace-row {
  width: 100%;
  grid-template-columns: minmax(84px, 112px) minmax(0, 1fr) !important;
  align-items: start;
  gap: 10px !important;
  padding: 12px 0 !important;
}

.trace-row span,
.trace-row strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.principles {
  align-items: flex-start;
}

/* Impide alturas heredadas o estiramiento en tarjetas interiores. */
.context-box,
.evidence-callout,
.support-card,
.feedback-item {
  height: auto !important;
  min-height: 0 !important;
}

.workspace > .panel {
  overflow: visible;
}

/* En portátiles y zoom elevado, la trazabilidad pasa debajo del perfil. */
@media (max-width: 1365px) {
  .app {
    grid-template-columns: 226px minmax(0, 1fr);
  }

  .main {
    padding: 24px 20px;
  }

  .work-shell {
    grid-template-columns: minmax(205px, 224px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .side-rail {
    max-width: 224px;
  }

  .brief-grid {
    grid-template-columns: 1fr !important;
  }

  .trace-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .trace-card > .eyebrow,
  .trace-card > .principles {
    grid-column: 1 / -1;
  }
}

/* Tablet: menú lateral móvil, recorrido horizontal y una sola columna. */
@media (max-width: 1024px) {
  .main {
    overflow-x: hidden;
  }

  .work-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .side-rail {
    position: static !important;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  .side-rail .steps {
    min-width: 780px !important;
  }

  .brief-grid,
  .sim-layout,
  .results-grid,
  .compare-grid,
  .reflection-grid,
  .transfer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .trace-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Móvil: todo fluye en una columna, sin paneles laterales permanentes. */
@media (max-width: 767px) {
  .main {
    width: 100%;
    padding: 18px 14px;
  }

  .panel {
    width: 100%;
    padding: 18px !important;
  }

  .profile-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .big-avatar {
    width: 120px !important;
    height: 120px !important;
  }

  .trace-card {
    display: block !important;
  }

  .trace-row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .side-rail .steps {
    min-width: 720px !important;
  }
}

/* Zoom 200 % y teléfonos angostos. */
@media (max-width: 480px) {
  .main {
    padding: 14px 10px;
  }

  .panel,
  .profile-card,
  .trace-card {
    border-radius: 14px !important;
  }

  .panel-head h2 {
    font-size: clamp(1.65rem, 9vw, 2.1rem);
  }

  .big-avatar {
    width: 104px !important;
    height: 104px !important;
  }
}

/* En navegadores sin soporte de overflow: clip. */
@supports not (overflow: clip) {
  .main {
    overflow-x: hidden;
  }
}


.ud-dashboard::before, .ud-catalog::before { content:""; position:absolute; right:3.5rem; top:5.3rem; width:150px; height:92px; background: radial-gradient(circle at 25% 30%, rgba(103,185,173,.8) 0 15%, transparent 16%), radial-gradient(circle at 72% 40%, rgba(234,126,115,.35) 0 38%, transparent 39%), radial-gradient(circle at 72% 78%, rgba(207,223,235,.8) 0 20%, transparent 21%); opacity:.9; pointer-events:none; }
.ud-dashboard .eyebrow, .ud-catalog .eyebrow { color: var(--ud-coral); letter-spacing: .08em; }
.ud-current-card { border:1px solid rgba(234,223,210,.92) !important; background:linear-gradient(180deg,#ffffff,#fffaf5) !important; box-shadow:0 16px 40px rgba(73,85,97,.07) !important; border-radius:24px !important; }
.ud-topbar-product small { color:#7d8a96; }
.ud-topbar-stats strong { color: var(--ud-navy); }
.ud-topbar-actions button { border-color:#e3d8cb; background:#fffaf6; }
.ud-topbar-actions button:hover { border-color:#d1c3b4; background:#fff; }
.ud-stat-icon { background:#eff7f4; color:#2f7d76; }
.ud-cycle-card:hover, .ud-featured-card:hover, .ud-support-module:hover { border-color:#d8c8b9; }
@media (max-width: 1100px){ .ud-dashboard::before, .ud-catalog::before{right:1rem; top:4rem; width:110px; height:72px;} }
@media (max-width: 760px){ .ud-dashboard::before, .ud-catalog::before{display:none;} .ud-sidebar-brand img{width:132px;height:108px;} }

/* ======================================================================
   UMBRAL DOCENTE v1.2 AUDITADA
   Capa final y autoritativa: identidad premium, contraste y legibilidad.
   ====================================================================== */
:root {
  --ud-petroleum: #086377;
  --ud-petroleum-deep: #062f4a;
  --ud-navy: #082a42;
  --ud-ink: #102d45;
  --ud-text: #263f54;
  --ud-text-muted: #4b6275;
  --ud-surface: #faf8f3;
  --ud-surface-raised: #ffffff;
  --ud-surface-soft: #eef5f4;
  --ud-line: #d7e0e5;
  --ud-line-strong: #bccbd3;
  --ud-coral: #d9a936;
  --ud-teal: #258b91;
  --ud-violet: #5e7694;
  --ud-focus: #d9a936;
  --ud-warning: #b47a22;
  --ud-danger: #a84452;
  --ud-shadow-sm: 0 12px 30px rgba(8,42,66,.08);
  --ud-shadow: 0 24px 58px rgba(8,42,66,.12);
  --ud-shadow-lg: 0 34px 82px rgba(8,42,66,.16);
}

body {
  background: linear-gradient(180deg, #fbfaf7 0%, #f5f7f6 52%, #eef4f3 100%);
  color: var(--ud-ink);
}

/* No texto depende del hover para ser legible. */
:where(.muted, .profile-lead, .route-note, .ud-dashboard-heading p, .ud-catalog-heading p) {
  color: var(--ud-text-muted) !important;
  opacity: 1 !important;
}
:where(.panel, .card, .profile-card, .profile-form, .context-box, .support-panel, .trace-card, .notice, .route-note) {
  color: var(--ud-text);
}
:where(.panel, .card, .profile-card, .profile-form, .context-box, .support-panel, .trace-card, .notice, .route-note) :where(p, li, label, small, span) {
  opacity: 1;
}

.app {
  background: radial-gradient(circle at 82% 7%, #fff 0%, #faf8f3 42%, #eff5f3 100%);
}

/* Sidebar clara, sobria y coherente con el logotipo. */
.ud-sidebar {
  color: var(--ud-ink);
  background: linear-gradient(180deg, #fffdfa 0%, #f8f6f1 66%, #f2f6f4 100%) !important;
  border-right-color: #dce4e5 !important;
  box-shadow: 12px 0 34px rgba(8,42,66,.06) !important;
}
.ud-sidebar-brand {
  min-height: 176px;
  padding: 4px 8px 22px;
  border-bottom-color: #dce4e5;
}
.ud-sidebar-brand img {
  width: 190px !important;
  height: 150px !important;
  object-fit: contain;
  object-position: center;
}
.ud-sidebar button,
.ud-sidebar a {
  color: var(--ud-ink) !important;
  font-size: .86rem;
}
.ud-sidebar button:hover,
.ud-sidebar a:hover {
  color: var(--ud-navy) !important;
  background: #f0f6f5 !important;
  border-color: #cbdcdd !important;
}
.ud-sidebar button.active {
  color: #fff !important;
  background: linear-gradient(135deg, #062f4a 0%, #07566d 100%) !important;
  border-color: #0a6376 !important;
  box-shadow: 0 12px 28px rgba(6,47,74,.18) !important;
}
.ud-sidebar button.active svg { color: #f2c961; }
.ud-sidebar-bottom { border-top-color: #dce4e5; }
.ud-sidebar-person { border-top-color: #dce4e5; }
.ud-sidebar-person strong { color: var(--ud-navy); }
.ud-sidebar-person small { color: var(--ud-text-muted); }

/* Encabezado del dashboard. */
.topbar {
  background: rgba(255,253,250,.95) !important;
  border-bottom-color: #dce4e5 !important;
  box-shadow: 0 8px 28px rgba(8,42,66,.06) !important;
}
.ud-product-mark {
  overflow: hidden;
  width: 46px;
  height: 46px;
  padding: 4px;
  border-color: #d5dfdf;
  background: #fff;
}
.ud-product-mark img { width: 100%; height: 100%; object-fit: contain; }
.ud-topbar-product strong { color: var(--ud-navy); }
.ud-topbar-product small,
.ud-topbar-stats small { color: var(--ud-text-muted) !important; }
.ud-topbar-stats strong { color: var(--ud-ink) !important; }
.ud-topbar-actions button {
  color: var(--ud-navy) !important;
  border-color: #cfdadd !important;
  background: #fff !important;
}
.ud-topbar-actions button:hover { background: #eef6f5 !important; }

/* En las pantallas de bienvenida/perfil, el logo correcto es la marca principal. */
body.ud-focus-mode .topbar { min-height: 96px; }
body.ud-focus-mode .topbar > .brand { min-width: 0; }
body.ud-focus-mode .nv-official-logo,
body.ud-focus-mode .product-divider,
body.ud-focus-mode .brand-copy { display: none !important; }
body.ud-focus-mode .nv-app-logo {
  display: block !important;
  width: clamp(190px, 22vw, 260px) !important;
  height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
body.ud-focus-mode .top-actions .icon-btn,
body.ud-focus-mode .top-actions .lab-back {
  color: var(--ud-navy) !important;
  border-color: #cfdadd !important;
  background: #fff !important;
}

/* Se elimina el adorno rojizo que competía con el contenido. */
.ud-dashboard::before,
.ud-catalog::before { display: none !important; }
.ud-dashboard .eyebrow,
.ud-catalog .eyebrow,
.profile-form > .eyebrow { color: #b5811b !important; }

/* Inicio: hero premium con alto contraste. */
.ud-dashboard-heading { align-items: center; }
.ud-dashboard-heading h1 { color: var(--ud-navy) !important; }
.ud-dashboard-heading p { max-width: 850px; font-size: .98rem; }
.ud-dashboard-hero {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr) !important;
  gap: clamp(28px, 4vw, 58px) !important;
  overflow: hidden;
  border: 1px solid rgba(217,169,54,.35) !important;
  border-radius: 30px !important;
  padding: clamp(34px, 4vw, 58px) !important;
  background:
    radial-gradient(circle at 100% 100%, rgba(31,157,164,.34), transparent 40%),
    linear-gradient(135deg, #052c48 0%, #063c5b 50%, #075d70 100%) !important;
  box-shadow: 0 26px 62px rgba(6,47,74,.18) !important;
}
.ud-dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.025), transparent 55%);
}
.ud-dashboard-hero::after {
  right: -145px;
  bottom: -170px;
  width: 500px;
  height: 500px;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 0 0 62px rgba(255,255,255,.028), 0 0 0 124px rgba(255,255,255,.018);
}
.ud-dashboard-hero .eyebrow { color: #f2c961 !important; }
.ud-dashboard-hero h2 {
  color: #fff !important;
  font-size: clamp(2.35rem, 4.15vw, 4.35rem) !important;
  line-height: 1.03 !important;
}
.ud-dashboard-hero-copy > p {
  color: #edf5f7 !important;
  font-size: 1.04rem !important;
  line-height: 1.72 !important;
}
.ud-dashboard-hero .btn-primary {
  color: #092f48 !important;
  background: linear-gradient(135deg, #edbd4c, #f5d682) !important;
  border-color: #f4d583 !important;
  box-shadow: 0 12px 26px rgba(217,169,54,.22) !important;
}
.ud-dashboard-hero .btn-primary:hover { background: #f7dc91 !important; }
.ud-dashboard-hero .btn-secondary {
  color: #fff !important;
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(4,39,62,.42) !important;
}
.ud-dashboard-hero .btn-secondary:hover { background: rgba(255,255,255,.13) !important; }
.ud-privacy-inline { color: #dcebef !important; }

/* Tarjeta de actividad: todos los textos son visibles sin hover. */
.ud-current-card {
  align-self: center;
  border: 1px solid #e1e4e1 !important;
  border-radius: 26px !important;
  padding: 28px !important;
  color: var(--ud-ink) !important;
  background: linear-gradient(180deg, #fff 0%, #fffdf8 100%) !important;
  box-shadow: 0 20px 50px rgba(5,35,55,.18) !important;
  backdrop-filter: none !important;
}
.ud-current-card > span {
  color: #086377 !important;
  font-size: .77rem !important;
  font-weight: 850 !important;
}
.ud-current-card > strong {
  margin: 10px 0 22px !important;
  color: var(--ud-navy) !important;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem) !important;
  line-height: 1.16 !important;
}
.ud-current-card dl { gap: 10px !important; }
.ud-current-card dl div {
  min-height: 54px;
  align-items: center;
  grid-template-columns: 105px minmax(0,1fr) !important;
  gap: 12px !important;
  border: 1px solid #dce4e5 !important;
  border-radius: 14px;
  padding: 12px 14px !important;
  background: #fbfcfa;
}
.ud-current-card dt {
  color: #164765 !important;
  font-size: .78rem !important;
  font-weight: 800;
}
.ud-current-card dd {
  color: #17384f !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
}
.ud-current-action,
.ud-current-help {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  font-weight: 800;
}
.ud-current-action {
  margin-top: 16px;
  border: 1px solid #9bcdd0;
  color: #07485c;
  background: linear-gradient(135deg, #d6eeee, #b9dfe1);
}
.ud-current-action:hover { color: #fff; background: #086377; }
.ud-current-help {
  margin-top: 8px;
  border: 0;
  color: #086377;
  background: transparent;
}
.ud-current-help:hover { text-decoration: underline; background: #eef6f5; }

/* Tarjetas y textos sobre superficies claras. */
.ud-stat-strip,
.ud-cycle-card,
.ud-featured-card,
.ud-support-module,
.ud-local-note,
.ud-closing-banner {
  border-color: #d7e0e5 !important;
}
.ud-stat-strip small,
.ud-cycle-copy p,
.ud-featured-copy p,
.ud-support-module p,
.ud-local-note p,
.ud-closing-banner p,
.ud-catalog-footer p { color: var(--ud-text-muted) !important; }
.ud-stat-strip strong,
.ud-cycle-copy h3,
.ud-featured-copy strong,
.ud-support-module strong,
.ud-local-note strong,
.ud-closing-banner strong { color: var(--ud-navy) !important; }
.ud-stat-icon { color: #086377 !important; background: #e8f3f2 !important; }

/* Perfil formativo. */
.onboarding-shell {
  grid-template-columns: minmax(380px, .82fr) minmax(0, 1.18fr) !important;
  gap: 20px !important;
  align-items: stretch;
}
.onboarding-intro {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  border: 1px solid rgba(217,169,54,.34) !important;
  border-radius: 28px !important;
  padding: clamp(30px, 4vw, 54px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 15% 100%, rgba(37,139,145,.45), transparent 38%),
    linear-gradient(145deg, #052f4b 0%, #063d58 64%, #075d69 100%) !important;
  box-shadow: 0 24px 55px rgba(6,47,74,.16) !important;
}
.onboarding-intro::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018);
}
.onboarding-brand-mark {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border: 1px solid rgba(242,201,97,.4);
  border-radius: 18px;
  padding: 8px;
  background: rgba(255,255,255,.08);
}
.onboarding-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.onboarding-intro > .eyebrow { color: #f2c961 !important; }
.onboarding-intro h2 {
  position: relative;
  z-index: 1;
  margin: 12px 0 20px;
  color: #fff !important;
  font: 750 clamp(2.35rem, 3.5vw, 3.85rem)/1.06 var(--ud-font-display) !important;
  letter-spacing: -.035em;
}
.onboarding-intro h2 em { color: #f2c961; font-style: normal; }
.onboarding-intro > p {
  position: relative;
  z-index: 1;
  max-width: 590px;
  color: #edf5f7 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
.profile-benefits { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 28px; }
.profile-benefit {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(2,31,52,.25);
}
.profile-benefit b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #082a42 !important;
  background: #f2c961;
}
.profile-benefit strong { display: block; color: #fff !important; font-size: .88rem; }
.profile-benefit span { display: block; margin-top: 2px; color: #dcebee !important; font-size: .76rem; line-height: 1.5; }
.onboarding-privacy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: 22px;
  border: 1px solid rgba(242,201,97,.32);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(2,31,52,.38);
}
.onboarding-privacy strong { color: #f2c961 !important; }
.onboarding-privacy span { color: #f1f6f7 !important; font-size: .76rem; line-height: 1.5; }

.profile-form {
  border: 1px solid #d7e0e5 !important;
  border-radius: 28px !important;
  padding: clamp(30px, 4vw, 54px) !important;
  color: var(--ud-text) !important;
  background: #fff !important;
  box-shadow: 0 24px 55px rgba(8,42,66,.09) !important;
}
.profile-form > h2 {
  margin: 8px 0 6px;
  color: var(--ud-navy) !important;
  font: 750 clamp(2.2rem, 3.4vw, 3.45rem)/1.08 var(--ud-font-display) !important;
  letter-spacing: -.03em;
}
.profile-lead { margin: 0 0 20px; font-size: .94rem; }
.profile-privacy {
  margin: 0 0 24px !important;
  border: 1px solid #b9d8dc !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  color: #17384f !important;
  background: #eef7f7 !important;
  line-height: 1.58 !important;
}
.profile-privacy strong { color: #082a42 !important; }
.profile-form .field label { color: var(--ud-navy) !important; }
.profile-form .field input,
.profile-form .field select {
  min-height: 52px !important;
  border-color: #cbd7dc !important;
  color: #17384f !important;
  background: #fff !important;
}
.profile-form .field input:focus,
.profile-form .field select:focus { border-color: #258b91 !important; }
.profile-form .route-note {
  border-color: #d7e0e5 !important;
  color: var(--ud-text) !important;
  background: #fafbf9 !important;
}
.profile-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  border-top: 1px solid #dce4e5;
  padding-top: 20px;
}
.profile-form-foot > p { max-width: 500px; margin: 0; color: var(--ud-text-muted) !important; font-size: .76rem; line-height: 1.55; }
.profile-form-foot .actions { margin: 0; flex: 0 0 auto; }
.profile-form .btn-primary {
  color: #fff !important;
  border-color: #07566d !important;
  background: linear-gradient(135deg, #062f4a, #07566d) !important;
  box-shadow: 0 12px 24px rgba(6,47,74,.16) !important;
}
.profile-form .btn-primary:hover { background: #086377 !important; }
.profile-form .btn-secondary { color: var(--ud-navy) !important; border-color: #cbd7dc !important; background: #fff !important; }

/* Encuadres: rostro completo y contexto, no sólo la frente. */
.ud-cycle-photo img,
.ud-featured-photo img,
.ud-scenario-photo img,
.big-avatar img,
.mini-avatar img,
.scenario-avatar img,
.student-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 38% !important;
}
.big-avatar {
  width: 172px !important;
  height: 150px !important;
  border-radius: 18px !important;
}

/* Estados de error conservan rojo sólo donde comunica riesgo real. */
.notice.error,
.badge-red,
[aria-invalid="true"] { color: #7d2734 !important; }

@media (max-width: 1180px) {
  .ud-dashboard-hero { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important; }
  .onboarding-shell { grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr) !important; }
  .profile-form-foot { align-items: stretch; flex-direction: column; }
  .profile-form-foot .actions { justify-content: flex-end; }
}

@media (max-width: 900px) {
  .ud-dashboard-hero,
  .onboarding-shell { grid-template-columns: 1fr !important; }
  .onboarding-intro { min-height: auto; }
  .ud-current-card { width: 100%; }
}

@media (max-width: 760px) {
  .ud-sidebar-brand { min-height: 152px; }
  .ud-sidebar-brand img { width: 166px !important; height: 128px !important; }
  body.ud-focus-mode .topbar { min-height: 78px; }
  body.ud-focus-mode .nv-app-logo { width: 180px !important; height: 58px !important; }
  .ud-dashboard-heading { align-items: flex-start; flex-direction: column; }
  .ud-dashboard-hero { padding: 28px 22px !important; }
  .ud-dashboard-hero h2 { font-size: clamp(2.05rem, 10vw, 3rem) !important; }
  .profile-form,
  .onboarding-intro { padding: 26px 22px !important; }
  .profile-form-foot .actions { flex-direction: column-reverse; }
  .profile-form-foot .actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .ud-current-card { padding: 20px !important; }
  .ud-current-card dl div { grid-template-columns: 82px minmax(0,1fr) !important; }
  .onboarding-intro h2 { font-size: 2.25rem !important; }
  .profile-form > h2 { font-size: 2.15rem !important; }
}

/* Integración final con el módulo audiovisual: sin acentos rojos decorativos. */
:root {
  --um-coral: #b5811b;
  --um-peach: #f7edcf;
  --um-mint: #a7d7d4;
  --um-mint-deep: #086377;
}
.btn-soft {
  color: #07566d !important;
  border-color: #bdd6d8 !important;
  background: #eaf5f4 !important;
}
.btn-soft:hover { color: #fff !important; background: #086377 !important; }
.ud-model-entry .btn-primary,
.ud-closing-banner .btn-primary,
[data-open-ud-model].btn-primary {
  color: #fff !important;
  border-color: #07566d !important;
  background: linear-gradient(135deg, #062f4a, #086377) !important;
  box-shadow: 0 10px 24px rgba(6,47,74,.16) !important;
}
.ud-model-card-body b,
.ud-progress-cases b { color: #9c721c !important; }
.ud-model-card-body i { color: #8a681d !important; background: #f7edcf !important; }

body.ud-focus-mode .nv-app-logo {
  width: 62px !important;
  height: 62px !important;
  max-height: 62px !important;
  object-position: center !important;
}
body.ud-focus-mode .brand-copy {
  display: block !important;
  min-width: 210px;
}
body.ud-focus-mode .brand-copy strong {
  color: var(--ud-navy) !important;
  font: 750 1.08rem/1.15 var(--ud-font-display);
}
body.ud-focus-mode .brand-copy small {
  color: #9c721c !important;
  font-size: .67rem;
}
@media (max-width:560px) {
  body.ud-focus-mode .brand-copy { display: block !important; min-width: 0; }
  body.ud-focus-mode .brand-copy small { display: none !important; }
  body.ud-focus-mode .nv-app-logo { width: 48px !important; height: 48px !important; }
}
body.ud-focus-mode .brand-logo { display: none !important; }

/* v2.0 · Reorganización de rutas + estilo más educacional */
:root {
  --ud-petroleum: #1c5d73;
  --ud-petroleum-deep: #123b5d;
  --ud-navy: #123b5d;
  --ud-ink: #17324d;
  --ud-text: #35516a;
  --ud-text-muted: #66798b;
  --ud-surface: #f8fbfc;
  --ud-surface-raised: #ffffff;
  --ud-surface-soft: #eef6fb;
  --ud-line: #dbe7f0;
  --ud-line-strong: #c7d7e4;
  --ud-coral: #f0a392;
  --ud-teal: #2a8b8f;
  --ud-violet: #7d8ee6;
  --ud-success: #5a9d73;
  --ud-warning: #f2c94c;
  --ud-danger: #d9737a;
  --ud-focus: #f2c94c;
  --ud-font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --ud-font-display: Inter, "Segoe UI", Arial, sans-serif;
  --ud-shadow-sm: 0 10px 28px rgba(20, 48, 78, .08);
  --ud-shadow: 0 18px 45px rgba(20, 48, 78, .10);
  --ud-shadow-lg: 0 28px 72px rgba(20, 48, 78, .12);
}

body {
  background: linear-gradient(180deg, #f7fafc 0%, #f9fcff 52%, #f5fbf8 100%);
}

.app {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,251,253,.98) 100%);
}

.ud-sidebar {
  background: linear-gradient(180deg, #f5fbfd 0%, #eef7fb 100%);
  border-right: 1px solid rgba(199, 215, 228, .9);
  box-shadow: 10px 0 24px rgba(20, 48, 78, .05);
}

.ud-sidebar-brand {
  padding-bottom: 18px;
}

.ud-sidebar-brand img {
  width: 148px;
  height: 110px;
}

.ud-sidebar button,
.ud-sidebar a {
  border-radius: 12px;
  font-size: .8rem;
}

.ud-sidebar button:hover,
.ud-sidebar a:hover {
  background: #ffffff;
  border-color: rgba(199, 215, 228, .85);
  transform: none;
}

.ud-sidebar button.active {
  background: linear-gradient(135deg, #dff4f1, #eaf3fb);
  border-color: #c7dce8;
  box-shadow: 0 8px 20px rgba(42, 139, 143, .10);
}

.topbar {
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(219, 231, 240, .95);
  box-shadow: 0 8px 26px rgba(20, 48, 78, .04);
}

.ud-topbar-product strong,
.ud-dashboard h1,
.ud-dashboard h2,
.ud-catalog h1,
.ud-section-title h2,
.ud-route-panel h2,
.ud-current-card strong,
.ud-support-module strong,
.ud-scenario-copy strong,
.ud-catalog-count strong {
  font-family: var(--ud-font-display);
}

.ud-dashboard h1,
.ud-catalog h1 {
  font-size: clamp(2.15rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.ud-dashboard-heading,
.ud-catalog-heading {
  align-items: center;
  margin-bottom: 18px;
}

.ud-dashboard-heading p,
.ud-catalog-heading p {
  max-width: 780px;
  color: var(--ud-text-muted);
  font-size: .95rem;
}

.eyebrow {
  color: var(--ud-teal) !important;
  letter-spacing: .08em;
}

.ud-dashboard-hero-clean {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 18px;
  margin-bottom: 22px;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy,
.ud-dashboard-hero-clean .ud-current-card {
  border: 1px solid var(--ud-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--ud-shadow-sm);
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy {
  padding: 22px 24px;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy h2 {
  margin: 6px 0 10px;
  color: var(--ud-navy);
  font-size: 1.7rem;
  line-height: 1.12;
}

.ud-dashboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ud-dashboard-chips span,
.ud-route-meta span,
.ud-scenario-status-line em {
  border-radius: 999px;
  padding: 7px 10px;
  background: #edf5fb;
  color: var(--ud-ink);
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
}

.ud-current-card {
  padding: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
}

.ud-current-card > span {
  color: var(--ud-teal);
}

.ud-current-card strong {
  font-size: 1.18rem;
  line-height: 1.2;
}

.ud-current-card dl div {
  border-bottom: 1px dashed var(--ud-line);
}

.ud-current-action,
.ud-current-help,
.ud-scenario-copy button {
  border-radius: 12px;
}

.ud-route-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.ud-route-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--ud-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--ud-shadow-sm);
}

.ud-route-panel.situated {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

.ud-route-panel.audiovisual {
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%);
}

.ud-route-kicker {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f5f5;
  color: var(--ud-teal);
  font-size: .7rem;
  font-weight: 800;
}

.ud-route-panel h2 {
  margin: 0;
  color: var(--ud-navy);
  font-size: 1.45rem;
  line-height: 1.15;
}

.ud-route-panel p {
  margin: 0;
  color: var(--ud-text-muted);
}

.ud-route-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ud-text);
}

.ud-route-list li + li {
  margin-top: 6px;
}

.ud-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.ud-dashboard-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ud-support-module,
.ud-local-note,
.ud-route-tip {
  border-color: var(--ud-line);
  background: #fff;
  box-shadow: var(--ud-shadow-sm);
}

.ud-local-note {
  border-radius: 18px;
}

.ud-catalog-tabs button {
  border-color: var(--ud-line);
  padding: 10px 14px;
  color: var(--ud-text);
  background: #fff;
}

.ud-catalog-tabs button.active {
  background: var(--ud-petroleum);
  border-color: var(--ud-petroleum);
}

.ud-route-tip {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ud-line);
  border-radius: 14px;
  color: var(--ud-text);
  font-size: .82rem;
}

.ud-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ud-scenario-card {
  grid-template-columns: 38% 1fr;
  min-height: 195px;
  border-radius: 18px;
  border-color: var(--ud-line);
  box-shadow: var(--ud-shadow-sm);
}

.ud-scenario-photo {
  min-height: 195px;
}

.ud-scenario-copy {
  padding: 16px;
}

.ud-scenario-copy > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: 12px;
  font-size: .72rem;
}

.ud-scenario-copy button {
  align-self: flex-start;
  margin-top: auto;
  border: 0;
  padding: 10px 14px;
  color: #fff;
  background: var(--ud-petroleum);
  font-weight: 700;
}

.ud-scenario-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.ud-catalog-footer {
  gap: 12px;
  border-top-color: var(--ud-line);
}

.work-shell {
  grid-template-columns: 190px minmax(0, 1fr) !important;
}

.side-rail {
  top: 96px;
  padding: 14px !important;
  border-radius: 16px !important;
}

.side-rail .rail-title {
  font-size: .82rem;
}

.side-rail .step {
  padding: 9px 8px !important;
}

.side-rail .step strong {
  font-size: .72rem;
}

.side-rail .step span {
  font-size: .63rem;
}

.workspace > .panel,
.annual-shell .panel,
.onboarding-shell > * {
  border-radius: 18px !important;
}

@media (max-width: 1024px) {
  .ud-dashboard-hero-clean,
  .ud-route-duo,
  .ud-dashboard-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ud-scenario-grid {
    grid-template-columns: 1fr;
  }

  .ud-scenario-card {
    grid-template-columns: 1fr;
  }

  .ud-scenario-photo {
    min-height: 180px;
  }
}

/* v2.1 · Segunda pasada: menos solemnidad, mayor foco cognitivo */
.screen h1,
.screen h2,
.screen h3,
.screen h4,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.onboarding-shell h1,
.onboarding-shell h2,
.annual-shell h1,
.annual-shell h2 {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -.025em !important;
}

.screen h2,
.panel h2 {
  line-height: 1.14 !important;
}

.btn-primary {
  background: linear-gradient(135deg, #123b5d, #23868b) !important;
  box-shadow: 0 10px 24px rgba(35,134,139,.16) !important;
}

.btn-soft {
  background: #eaf7f5 !important;
  color: #1e6f73 !important;
}

.ud-topbar-stats {
  gap: 22px;
}

.ud-topbar-stats strong {
  font-size: .7rem;
}

.ud-dashboard-heading-minimal,
.ud-catalog-heading-minimal {
  padding-bottom: 4px;
}

.ud-dashboard-heading-minimal h1,
.ud-catalog-heading-minimal h1 {
  max-width: 760px;
}

.ud-dashboard-heading-minimal .btn,
.ud-catalog-heading-minimal .btn {
  flex: 0 0 auto;
}

/* Reduce persistent chrome while working */
body[data-ud-screen="brief"] .ud-topbar-stats,
body[data-ud-screen="planner"] .ud-topbar-stats,
body[data-ud-screen="simulation"] .ud-topbar-stats,
body[data-ud-screen="reflection"] .ud-topbar-stats,
body[data-ud-screen="results"] .ud-topbar-stats,
body[data-ud-model-route="active"] .ud-topbar-stats {
  display: none;
}

body[data-ud-screen="brief"] .main,
body[data-ud-screen="planner"] .main,
body[data-ud-screen="simulation"] .main,
body[data-ud-screen="reflection"] .main,
body[data-ud-screen="results"] .main {
  padding-top: 24px;
}

/* Make the situated-practice rail supportive, not dominant */
.side-rail .step:not(.active):not(.completed) span:not(.step-num) {
  display: none;
}

.side-rail .step:not(.active):not(.completed) {
  min-height: 42px;
}

.side-rail .step.completed span:not(.step-num) {
  opacity: .72;
}

/* Gentle educational accents */
.ud-route-panel.situated { border-top: 4px solid #7ab6e8; }
.ud-route-panel.audiovisual { border-top: 4px solid #64b8aa; }
.ud-dashboard-tools .ud-support-module:nth-child(1) { border-top: 3px solid #f2c94c; }
.ud-dashboard-tools .ud-support-module:nth-child(2) { border-top: 3px solid #64b8aa; }
.ud-dashboard-tools .ud-local-note { border-top: 3px solid #9db4e7; }

/* v2.1.1 · Corrección de contraste y menú lateral */
/* El dashboard limpio no debe heredar el hero oscuro de versiones anteriores. */
.ud-dashboard-hero.ud-dashboard-hero-clean {
  position: relative;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ud-dashboard-hero.ud-dashboard-hero-clean::before,
.ud-dashboard-hero.ud-dashboard-hero-clean::after {
  display: none !important;
  content: none !important;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy {
  color: var(--ud-ink) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f4fbff 100%) !important;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy .eyebrow {
  color: #b78319 !important;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy h2 {
  color: var(--ud-navy) !important;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem) !important;
  line-height: 1.1 !important;
}

.ud-dashboard-hero-clean .ud-dashboard-hero-copy > p {
  color: #49647a !important;
  font-size: .98rem !important;
  line-height: 1.65 !important;
}

.ud-dashboard-hero-clean .ud-dashboard-chips span {
  color: #17324d !important;
  background: #edf5fb !important;
}

/* Sidebar always stays usable inside the viewport. */
.ud-sidebar {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8cbd8 transparent;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.ud-sidebar::-webkit-scrollbar { width: 7px; }
.ud-sidebar::-webkit-scrollbar-thumb { background: #b8cbd8; border-radius: 999px; }
.ud-sidebar::-webkit-scrollbar-track { background: transparent; }

.ud-sidebar-brand {
  min-height: 0 !important;
  padding: 2px 8px 12px !important;
}

.ud-sidebar-brand img {
  width: 132px !important;
  height: 88px !important;
}

.ud-sidebar-nav {
  gap: 4px !important;
  padding: 12px 0 !important;
}

.ud-sidebar button,
.ud-sidebar a {
  min-height: 43px !important;
  padding: 9px 12px !important;
}

.ud-sidebar-bottom {
  padding-top: 10px !important;
}

.ud-sidebar-person {
  margin-top: 8px !important;
  padding-top: 9px !important;
}

/* Keep text readable in every light card. */
.ud-dashboard :where(.ud-route-panel,.ud-current-card,.ud-support-module,.ud-local-note) :where(h1,h2,h3,strong,dt,dd,p,span) {
  text-shadow: none !important;
}

.ud-route-panel p,
.ud-support-module p,
.ud-local-note p {
  color: #526a7f !important;
}

@media (max-height: 760px) and (min-width: 1025px) {
  .ud-sidebar-brand img { width: 112px !important; height: 72px !important; }
  .ud-sidebar button, .ud-sidebar a { min-height: 39px !important; padding-block: 7px !important; }
  .ud-sidebar-nav { padding-block: 8px !important; }
  .ud-sidebar-person { margin-top: 5px !important; }
}


/* v2.1.3 · inicio más ordenado */
.ud-dashboard {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ud-route-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.ud-route-intro h2 {
  margin: 0;
  font-family: var(--ud-font-display);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ud-navy);
}

.ud-route-intro p {
  margin: 0;
  color: var(--ud-text-muted);
  font-size: 1rem;
  max-width: 62ch;
}

.ud-continuity-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--ud-line);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
  box-shadow: var(--ud-shadow-sm);
}

.ud-continuity-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--ud-teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ud-continuity-copy strong {
  display: block;
  margin: 0 0 4px;
  color: var(--ud-navy);
  font-family: var(--ud-font-display);
  font-size: 1.22rem;
  line-height: 1.2;
}

.ud-continuity-copy p {
  margin: 0;
  color: var(--ud-text-muted);
  font-size: .92rem;
}

.ud-continuity-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ud-current-action,
.ud-current-help {
  margin: 0 !important;
}

.ud-current-action {
  min-width: 216px;
}

.ud-current-help {
  min-width: 132px;
}

.ud-route-duo {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  align-items: stretch;
  margin: 0;
}

.ud-route-panel {
  min-height: 100%;
  padding: 26px;
  gap: 14px;
}

.ud-route-panel p {
  max-width: 48ch;
}

.ud-route-list {
  margin-top: 2px;
}

.ud-route-list li {
  line-height: 1.5;
}

.ud-route-meta {
  margin-top: auto;
  padding-top: 6px;
}

.ud-route-panel .btn {
  width: 100%;
  margin-top: 2px;
  align-self: stretch;
}

.ud-dashboard-tools {
  margin-top: 4px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.ud-support-module,
.ud-local-note {
  min-height: 132px;
}

@media (max-width: 1080px) {
  .ud-continuity-bar {
    grid-template-columns: 1fr;
  }

  .ud-continuity-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .ud-route-duo,
  .ud-dashboard-tools {
    grid-template-columns: 1fr;
  }
}

/* v2.2 · paleta más lúdica y educacional inspirada en cristic */
:root {
  --ud-navy: #1f496f;
  --ud-ink: #234766;
  --ud-text: #46657f;
  --ud-text-muted: #6a8398;
  --ud-petroleum: #1dbcc5;
  --ud-petroleum-deep: #1595a4;
  --ud-teal: #1dbcc5;
  --ud-coral: #f7b8d8;
  --ud-warning: #f3d96b;
  --ud-line: #d8ecf1;
  --ud-line-strong: #c6e3ea;
  --ud-surface: #f9fdff;
  --ud-surface-soft: #eefafc;
  --ud-shadow-sm: 0 12px 28px rgba(38, 117, 147, .08);
  --ud-shadow: 0 22px 52px rgba(38, 117, 147, .11);
  --ud-font-display: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --ud-font-sans: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

body {
  background: linear-gradient(180deg, #fbfeff 0%, #f3fbfd 48%, #f9fdff 100%) !important;
}

.topbar {
  background: linear-gradient(180deg, #fff4c9 0%, #fff6d9 100%) !important;
  border-bottom-color: #f0dc8d !important;
}

.topbar .alert-banner,
.ud-pilot-banner {
  color: #7b6220 !important;
}

.ud-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f3fbfd 60%, #f9fdff 100%) !important;
  border-right: 1px solid #d8ecf1 !important;
}

.ud-sidebar-brand {
  position: relative;
  margin: 4px 6px 10px !important;
  border: 1px solid #d8ecf1;
  border-radius: 26px;
  background: linear-gradient(160deg, #ffffff 0%, #f6fcfe 75%);
  box-shadow: var(--ud-shadow-sm);
}

.ud-sidebar-brand::before,
.ud-sidebar-brand::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  opacity: .55;
  pointer-events: none;
}

.ud-sidebar-brand::before {
  width: 58px;
  height: 58px;
  right: 16px;
  top: 12px;
  background: #d6f5f6;
}

.ud-sidebar-brand::after {
  width: 42px;
  height: 42px;
  left: 18px;
  bottom: 12px;
  background: #fbe0ef;
}

.ud-sidebar-brand img {
  width: 118px !important;
  height: 80px !important;
  position: relative;
  z-index: 1;
}

.ud-sidebar-nav {
  gap: 8px !important;
}

.ud-sidebar button,
.ud-sidebar a {
  border-radius: 18px !important;
  border: 1px solid transparent;
  color: var(--ud-ink) !important;
  font-weight: 700;
}

.ud-sidebar button:hover,
.ud-sidebar a:hover {
  background: #eefafd !important;
  border-color: #d5edf1 !important;
}

.ud-sidebar button.active {
  background: linear-gradient(135deg, #19bcc6 0%, #32c6d6 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(29, 188, 197, .22) !important;
}

.ud-sidebar button.active svg,
.ud-sidebar button.active i,
.ud-sidebar button.active span,
.ud-sidebar button.active path {
  color: inherit !important;
  fill: currentColor;
  stroke: currentColor;
}

.ud-sidebar-bottom {
  margin-top: 4px;
  border-top: 1px solid #dceff3 !important;
}

.ud-person-card,
.ud-sidebar-person {
  background: transparent !important;
}

.ud-dashboard,
.ud-catalog {
  max-width: 1220px;
}

.ud-continuity-bar {
  background: linear-gradient(135deg, #edfbfc 0%, #ffffff 62%, #fff8d8 100%) !important;
  border-color: #d5edf1 !important;
  border-radius: 26px !important;
}

.ud-continuity-kicker,
.eyebrow,
.ud-route-kicker {
  color: #1aa7b7 !important;
}

.ud-route-intro {
  max-width: 680px;
}

.ud-route-intro h2,
.ud-dashboard h1,
.ud-dashboard h2,
.ud-catalog h1,
.ud-route-panel h2,
.ud-current-card strong {
  color: #214c74 !important;
  letter-spacing: -.02em;
}

.ud-route-intro p {
  color: #648198 !important;
}

.ud-route-duo {
  gap: 26px !important;
}

.ud-route-panel {
  position: relative;
  border-radius: 28px !important;
  border: 1px solid #d5edf1 !important;
  overflow: hidden;
}

.ud-route-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
}

.ud-route-panel.situated {
  background: linear-gradient(180deg, #ffffff 0%, #f7fdff 100%) !important;
}

.ud-route-panel.situated::before {
  background: linear-gradient(90deg, #53b6f0, #80d2ff);
}

.ud-route-panel.audiovisual {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%) !important;
}

.ud-route-panel.audiovisual::before {
  background: linear-gradient(90deg, #1cc2c8, #86ddd1);
}

.ud-route-kicker {
  display: inline-flex;
  gap: 8px;
  padding: 8px 14px !important;
  background: #ecfbfd !important;
  border: 1px solid #d2eef2;
  border-radius: 999px !important;
}

.ud-route-list {
  color: #49657a !important;
}

.ud-route-list li::marker {
  color: #7d8be7;
}

.ud-route-meta span,
.ud-dashboard-chips span {
  background: #eef7ff !important;
  color: #46657f !important;
  border: 1px solid #ddebf7;
}

.ud-route-panel .btn-primary,
.ud-current-action,
.ud-scenario-copy button {
  background: linear-gradient(90deg, #17bac4, #2ec8d3) !important;
  border: none !important;
  color: #fff !important;
}

.ud-route-panel .btn-secondary,
.ud-current-help,
.ud-catalog-footer .btn-soft,
.ud-catalog-tabs button.active {
  background: #eef7ff !important;
  color: #31537a !important;
  border-color: #d7e7f6 !important;
}

.ud-support-module,
.ud-local-note,
.ud-current-card,
.ud-route-panel,
.ud-catalog-count,
.ud-route-tip,
.ud-scenario-card,
.ud-catalog-tabs button,
.ud-topbar-product,
.ud-model-top {
  box-shadow: var(--ud-shadow-sm) !important;
}

.ud-dashboard-tools {
  gap: 20px !important;
}

.ud-support-module {
  border-radius: 22px !important;
  background: #fff !important;
}

.ud-support-module:nth-child(1) {
  border-top: 6px solid #72c8f4;
}

.ud-support-module:nth-child(2) {
  border-top: 6px solid #61d1c2;
}

.ud-local-note {
  border-top: 6px solid #f2d76c;
  background: linear-gradient(180deg, #fffdf3 0%, #fff 100%) !important;
}

.ud-catalog-heading-minimal,
.ud-model-heading {
  margin-bottom: 18px;
}

.ud-catalog-tabs {
  gap: 10px;
  flex-wrap: wrap;
}

.ud-catalog-tabs button {
  border-radius: 16px !important;
}

.ud-route-tip {
  background: linear-gradient(180deg, #f7fcff 0%, #fff 100%) !important;
  border-left: 5px solid #72c8f4;
}

.ud-scenario-grid {
  gap: 20px !important;
}

.ud-scenario-card {
  border-radius: 24px !important;
  overflow: hidden;
}

.ud-scenario-photo {
  background: linear-gradient(180deg, #dff8fb 0%, #eef8ff 100%) !important;
}

.ud-scenario-copy small {
  color: #7d8be7 !important;
  font-weight: 700;
}

.ud-scenario-status-line em:first-child {
  background: #edf6ff !important;
}

.ud-scenario-status-line em:last-child {
  background: #eefbf7 !important;
}

.ud-catalog-footer {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .ud-sidebar-brand {
    border-radius: 20px;
  }
  .ud-route-panel,
  .ud-continuity-bar { border-radius: 22px !important; }
}

/* === UMBRAL TABLET/IPAD FIX v2.2.6 START === */
/* Corrige iPad/tablet sin alterar logica, datos ni persistencia. */
@media (min-width: 769px) and (max-width: 1024px) {
  html,
  body,
  #root,
  .app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar,
  .main,
  .footer {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main {
    padding: 22px 24px !important;
    overflow-x: hidden !important;
  }

  .main > #root,
  #root > .screen,
  .screen.ud-dashboard,
  .screen.ud-catalog,
  .ud-dashboard,
  .ud-catalog {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .ud-dashboard {
    gap: 22px !important;
  }

  /* Sidebar: drawer real, nunca reserva columna en tablet. */
  .ud-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(320px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    z-index: 120 !important;
    overflow-y: auto !important;
  }

  body.ud-drawer-open .ud-sidebar {
    transform: translateX(0) !important;
  }

  .ud-menu-button {
    display: inline-flex !important;
  }

  /* Header tablet: dos filas legibles en lugar de comprimir todo. */
  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu brand actions"
      "stats stats stats" !important;
    align-items: center !important;
    gap: 10px 14px !important;
    min-height: auto !important;
    padding: 12px 18px !important;
  }

  .ud-menu-button {
    grid-area: menu;
    align-self: center;
  }

  .ud-topbar-product {
    grid-area: brand;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ud-topbar-product > div {
    min-width: 0 !important;
  }

  .ud-topbar-product strong,
  .ud-topbar-product small {
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .ud-topbar-product small {
    display: block !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  .ud-topbar-actions {
    grid-area: actions;
    margin-left: 0 !important;
    justify-self: end;
    flex-wrap: nowrap !important;
  }

  .ud-topbar-stats {
    grid-area: stats;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 58px;
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  .ud-topbar-stats > div {
    min-width: 0 !important;
    max-width: 220px;
  }

  .ud-topbar-stats strong {
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  /* Dashboard: ocupa el ancho real del iPad. */
  .ud-dashboard > *,
  .ud-catalog > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .ud-continuity-bar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
  }

  .ud-continuity-copy,
  .ud-continuity-actions {
    min-width: 0 !important;
  }

  .ud-continuity-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .ud-current-action,
  .ud-current-help {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .ud-route-intro {
    width: 100% !important;
    max-width: 760px !important;
  }

  .ud-route-intro h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.45rem) !important;
    line-height: 1.08 !important;
  }

  .ud-route-intro p {
    max-width: 66ch !important;
    font-size: .96rem !important;
    line-height: 1.6 !important;
  }

  /* Portrait: una ruta por fila; evita tarjetas estrechas. */
  .ud-route-duo {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .ud-route-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .ud-route-panel p {
    max-width: 64ch !important;
  }

  .ud-dashboard-tools {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .ud-dashboard-tools .ud-local-note {
    grid-column: 1 / -1;
    min-height: 0 !important;
  }

  .ud-support-module,
  .ud-local-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Tablet horizontal: aprovecha espacio adicional sin volver al layout de escritorio. */
@media (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {
  .ud-route-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ud-dashboard-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ud-dashboard-tools .ud-local-note {
    grid-column: auto;
  }
}

/* Refuerzo movil: nunca heredar un ancho residual del escritorio. */
@media (max-width: 768px) {
  .main > #root,
  #root > .screen,
  .screen.ud-dashboard,
  .screen.ud-catalog,
  .ud-dashboard,
  .ud-catalog {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }
}
/* === UMBRAL TABLET/IPAD FIX v2.2.6 END === */

/* === UMBRAL MOBILE FIX v2.2.7 START === */
@media (max-width: 768px) {
  html, body, .app, .topbar, .main, .footer, #root, #root > .screen, .screen,
  .work-shell, .workspace, .workspace > .panel {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html, body { overflow-x: clip !important; }
  .app { display: block !important; }

  .ud-sidebar {
    position: fixed !important; inset: 0 auto 0 0 !important;
    width: min(310px, 88vw) !important; max-width: 88vw !important;
    height: 100dvh !important; transform: translateX(-105%) !important; z-index: 140 !important;
  }
  body.ud-drawer-open .ud-sidebar { transform: translateX(0) !important; }
  .ud-drawer-scrim { z-index: 135 !important; }

  .topbar {
    position: sticky !important; top: 0 !important; z-index: 120 !important;
    display: grid !important; grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important; gap: 10px !important; min-height: 72px !important;
    padding: 10px 14px !important;
  }
  .ud-menu-button {
    display: inline-flex !important; width: 48px !important; min-width: 48px !important;
    height: 48px !important; justify-content: center !important; padding: 0 !important;
  }
  .ud-topbar-product { width: 100% !important; min-width: 0 !important; gap: 10px !important; }
  .ud-topbar-product > div { min-width: 0 !important; }
  .ud-topbar-product strong {
    display: block !important; overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important; font-size: clamp(.92rem,4.2vw,1.08rem) !important;
  }
  .ud-topbar-product small, .ud-topbar-stats, .ud-topbar-actions { display: none !important; }
  .ud-product-mark { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; }

  .nv-pilot-banner, .ud-pilot-banner {
    width: 100% !important; max-width: 100% !important; padding: 14px 18px !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    font-size: .78rem !important; line-height: 1.45 !important;
  }

  .main {
    width: 100% !important; margin: 0 !important;
    padding: 16px max(14px,env(safe-area-inset-right)) 24px max(14px,env(safe-area-inset-left)) !important;
    overflow: visible !important;
  }
  .footer { width: auto !important; margin: 0 14px !important; }

  .work-shell {
    display: grid !important; grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 14px !important;
  }

  /* El recorrido deja de medir 620-820px. La etapa activa usa el espacio y las otras quedan compactas. */
  .side-rail {
    position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow: hidden !important; margin: 0 !important; padding: 14px !important; border-radius: 20px !important;
  }
  .side-rail .rail-title { margin: 0 0 10px !important; font-size: .78rem !important; line-height: 1.25 !important; }
  .side-rail .steps {
    display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    gap: 6px !important; overflow: hidden !important;
  }
  .side-rail .step {
    min-width: 0 !important; min-height: 52px !important; flex: 0 0 38px !important;
    align-items: center !important; justify-content: center !important; gap: 7px !important;
    padding: 6px !important; border-radius: 13px !important;
  }
  .side-rail .step.active { flex: 1 1 150px !important; justify-content: flex-start !important; padding-inline: 9px !important; }
  .side-rail .step > div { min-width: 0 !important; }
  .side-rail .step:not(.active) > div { display: none !important; }
  .side-rail .step.active > div { display: block !important; }
  .side-rail .step-num {
    width: 30px !important; height: 30px !important; min-width: 30px !important; flex: 0 0 30px !important;
    font-size: .7rem !important;
  }
  .side-rail .step.active strong, .side-rail .step.active span:not(.step-num) {
    display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .side-rail .step.active strong { font-size: .78rem !important; }
  .side-rail .step.active span:not(.step-num) { margin-top: 3px !important; font-size: .66rem !important; }
  .side-rail .rail-context, .side-rail .rail-divider { display: none !important; }

  .workspace, .workspace > *, .workspace > .panel, .panel, .panel-head,
  .profile-head, .context-box, .support-panel, .trace-card, .sequence-card,
  .reflection-card, .observation-pad, .chat, .chat-shell, .sim-sidebar {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
  }
  .workspace > .panel, .annual-shell .panel, .onboarding-shell > * { padding: 18px !important; border-radius: 20px !important; }
  .panel-head { gap: 10px !important; margin-bottom: 16px !important; }
  .panel-head h1, .panel-head h2, .workspace h1, .workspace h2 {
    max-width: 100% !important; font-size: clamp(1.55rem,7.2vw,2.05rem) !important;
    line-height: 1.12 !important; overflow-wrap: break-word !important;
  }

  .planner-grid, .planning-sequence, .transfer-grid, .brief-grid, .results-grid,
  .compare-grid, .reflection-grid, .sim-layout, .ud-continuity-bar, .ud-route-duo,
  .ud-dashboard-tools, .ud-scenario-grid {
    display: grid !important; grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 14px !important;
  }
  .sim-sidebar, .chat { position: static !important; grid-column: 1 !important; }
  .sim-sidebar { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }

  .field, .field input, .field select, .field textarea,
  .sequence-card textarea, .reflection-card textarea, .observation-pad textarea {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .actions, .actions-right, .composer-foot, .ud-continuity-actions {
    width: 100% !important; align-items: stretch !important; flex-direction: column !important; gap: 9px !important;
  }
  .actions .btn, .actions-right .btn, .ud-current-action, .ud-current-help {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }

  .messages { min-width: 0 !important; padding: 14px !important; }
  .message, .message.system { max-width: 92% !important; overflow-wrap: anywhere !important; }
  .composer { padding: 14px !important; }
  .ud-route-panel, .ud-support-module, .ud-local-note, .ud-scenario-card {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .ud-scenario-card { grid-template-columns: minmax(0,1fr) !important; }
  .ud-scenario-photo { min-height: 210px !important; }
  img, video, iframe, canvas, svg { max-width: 100%; }
  video, iframe { width: 100% !important; }
  dialog { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin-inline: 12px !important; }
}

@media (max-width: 430px) {
  .side-rail { padding: 12px !important; }
  .side-rail .steps { gap: 5px !important; }
  .side-rail .step { flex-basis: 34px !important; min-height: 48px !important; padding: 4px !important; }
  .side-rail .step.active { flex-basis: 132px !important; }
  .side-rail .step-num { width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important; }
  .workspace > .panel, .annual-shell .panel, .onboarding-shell > * { padding: 16px !important; }
  .ud-route-panel { padding: 20px !important; }
}
/* === UMBRAL MOBILE FIX v2.2.7 END === */