- {classGroups.length > 0 ? (
-
- {classGroups.map((group) => (
-
- ))}
-
- ) : (
-
Sin cursos
- )}
+
+
+
+ {activeArea && showSecondaryNavigation ? (
+
+ ) : null}
+
);
}
diff --git a/src/styles.css b/src/styles.css
index 79ace81..c255fe7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -170,6 +170,11 @@ a {
box-shadow: 0 0 0 2px rgba(196, 107, 27, 0.16);
}
+.app-navigation {
+ position: relative;
+ z-index: 20;
+}
+
.top-tabs {
display: flex;
gap: 8px;
@@ -177,18 +182,23 @@ a {
align-items: center;
padding: 10px 14px 8px;
margin: 14px 14px 0;
- border-radius: 14px 14px 0 0;
+ border-radius: 14px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(145, 169, 216, 0.35);
- border-bottom: 0;
backdrop-filter: blur(6px);
}
+.top-tabs.has-secondary {
+ border-bottom: 0;
+ border-radius: 14px 14px 0 0;
+}
+
.main-module-tabs.section-tabs {
border-bottom: 0;
padding: 0;
gap: 4px;
flex: 1 1 auto;
+ flex-wrap: nowrap;
}
.right-module-tabs.section-tabs {
@@ -296,10 +306,20 @@ a {
color: #344462;
}
+.main-module-tabs .section-tab.compact.featured.organization {
+ border-color: #9eaed0;
+ background: linear-gradient(180deg, #fbfcff 0%, #edf1f9 100%);
+ color: #3e5175;
+}
+
.main-module-tabs .section-tab.compact.featured.reports::before {
background: #60708f;
}
+.main-module-tabs .section-tab.compact.featured.organization::before {
+ background: #657ba4;
+}
+
.main-module-tabs .section-tab.compact.featured.active {
color: #ffffff;
box-shadow: 0 10px 22px rgba(24, 76, 153, 0.24);
@@ -339,6 +359,11 @@ a {
background: linear-gradient(180deg, #71809e 0%, #465675 100%);
}
+.main-module-tabs .section-tab.compact.featured.organization.active {
+ border-color: #4a608b;
+ background: linear-gradient(180deg, #7186ad 0%, #50658e 100%);
+}
+
.main-module-tabs .section-tab.compact span {
overflow: hidden;
text-overflow: ellipsis;
@@ -380,6 +405,85 @@ a {
box-shadow: 0 8px 18px rgba(66, 80, 105, 0.22);
}
+.workflow-subnav {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin: 0 14px;
+ padding: 7px 12px 9px;
+ border: 1px solid rgba(145, 169, 216, 0.35);
+ border-top: 1px solid rgba(145, 169, 216, 0.22);
+ border-radius: 0 0 14px 14px;
+ background: rgba(248, 251, 255, 0.94);
+ box-shadow: 0 8px 18px rgba(40, 74, 128, 0.05);
+}
+
+.workflow-subnav-label {
+ color: #617493;
+ font-size: 0.68rem;
+ font-weight: 900;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+.workflow-subnav-list.section-tabs {
+ display: flex;
+ flex: 1 1 auto;
+ gap: 5px;
+ min-width: 0;
+ padding: 0;
+ border-bottom: 0;
+}
+
+.workflow-subnav-list .section-tab.compact {
+ display: inline-flex;
+ min-width: 108px;
+ min-height: 40px;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 7px 12px;
+ border: 1px solid transparent;
+ border-radius: 8px;
+ color: #526987;
+ font-size: 0.82rem;
+ font-weight: 750;
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+.workflow-subnav-list .section-tab.compact:hover {
+ border-color: #c8d6e9;
+ background: #ffffff;
+ color: #294f7e;
+}
+
+.workflow-subnav-list .section-tab.compact.active {
+ border-color: #a9bfdf;
+ background: #ffffff;
+ color: #1f4b99;
+ box-shadow: 0 3px 10px rgba(31, 75, 153, 0.09);
+}
+
+.workflow-subnav-list .section-tab.compact svg {
+ width: 15px;
+ height: 15px;
+ flex: 0 0 auto;
+ fill: none;
+ stroke: currentColor;
+ stroke-width: 1.9;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
+.main-module-tabs .section-tab.compact:focus-visible,
+.right-module-tabs .section-tab.compact:focus-visible,
+.workflow-subnav-list .section-tab.compact:focus-visible {
+ outline: 3px solid rgba(31, 75, 153, 0.28);
+ outline-offset: 2px;
+}
+
/* Divider between work and management modules */
.top-tabs-divider {
width: 1px;
@@ -490,6 +594,38 @@ a {
opacity: 0.88;
}
+.no-context-cta:focus-visible {
+ outline: 3px solid rgba(31, 75, 153, 0.28);
+ outline-offset: 2px;
+}
+
+.no-context-banner.setup {
+ border-color: #a9c0df;
+ background: linear-gradient(180deg, #f5f9ff 0%, #edf4ff 100%);
+ color: #315478;
+}
+
+.no-context-banner.setup .no-context-icon {
+ color: #1f4b99;
+}
+
+.no-context-banner.setup .no-context-text strong {
+ color: #173d6e;
+}
+
+.no-context-banner.setup .no-context-text span {
+ color: #435b7c;
+}
+
+.no-context-banner.setup .no-context-cta {
+ background: #1f4b99;
+}
+
+.no-context-banner.setup .no-context-cta:hover {
+ background: #183f82;
+ opacity: 1;
+}
+
.attendance-subject-tabs {
display: flex;
gap: 2px;
@@ -2223,34 +2359,35 @@ td {
.onboarding-coach {
position: relative;
display: grid;
- gap: 12px;
+ gap: 14px;
margin: 0 0 16px;
- padding: 16px;
+ padding: 18px;
overflow: hidden;
- border: 1px solid #b9cde8;
- border-radius: 10px;
- background:
- linear-gradient(100deg, rgba(246, 250, 255, 0.98), rgba(255, 252, 242, 0.98)),
- #fff;
- box-shadow: 0 8px 24px rgba(29, 66, 117, 0.08);
+ border: 1px solid #c8d8ee;
+ border-radius: 12px;
+ background: #ffffff;
+ box-shadow: 0 5px 18px rgba(29, 66, 117, 0.07);
}
.onboarding-coach::after {
content: "";
position: absolute;
- top: -64px;
- right: -42px;
- width: 170px;
- height: 170px;
- border: 28px solid rgba(239, 179, 65, 0.09);
- border-radius: 50%;
+ inset: 0 auto auto 0;
+ width: 100%;
+ height: 4px;
+ background: linear-gradient(90deg, #1f4b99 0%, #2f7e8d 58%, #d79a32 100%);
pointer-events: none;
}
.onboarding-coach.compact {
- grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.8fr) auto;
+ grid-template-columns: minmax(300px, 1fr) minmax(190px, 280px) auto;
align-items: center;
- padding-block: 13px;
+ gap: 22px;
+ min-height: 84px;
+ padding: 14px 16px;
+ background:
+ linear-gradient(110deg, rgba(245, 249, 255, 0.82), rgba(255, 255, 255, 0) 48%),
+ #ffffff;
}
.onboarding-coach-heading {
@@ -2263,31 +2400,86 @@ td {
}
.onboarding-coach-heading h2 {
- margin: 2px 0 0;
+ margin: 3px 0 0;
color: #173d6e;
- font-size: 1rem;
- line-height: 1.25;
+ font-size: 1.05rem;
+ line-height: 1.3;
}
.onboarding-eyebrow {
- color: #a35e05;
- font-size: 0.68rem;
+ color: #315b91;
+ font-size: 0.66rem;
font-weight: 900;
- letter-spacing: 0.12em;
+ letter-spacing: 0.1em;
text-transform: uppercase;
}
.onboarding-count {
+ display: inline-flex;
+ min-height: 32px;
+ align-items: center;
+ padding: 0 10px;
+ border: 1px solid #b7c9e3;
+ border-radius: 999px;
+ background: #f2f6fc;
+ color: #315478;
+ font-size: 0.75rem;
+ font-weight: 850;
+ white-space: nowrap;
+}
+
+.onboarding-compact-main {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 12px;
+}
+
+.onboarding-compact-main > div {
+ min-width: 0;
+}
+
+.onboarding-compact-main h2 {
+ margin: 2px 0 3px;
+ color: #173d6e;
+ font-size: 1rem;
+ line-height: 1.25;
+}
+
+.onboarding-compact-copy {
+ margin: 0;
+ color: #5b6f8a;
+ font-size: 0.78rem;
+ line-height: 1.4;
+}
+
+.onboarding-compact-copy strong {
+ color: #294f7e;
+}
+
+.onboarding-compact-progress {
+ position: relative;
+ z-index: 1;
display: grid;
- min-width: 48px;
- min-height: 44px;
- place-items: center;
- border: 1px solid #d7b66a;
- border-radius: 7px;
- background: #fff8df;
- color: #744509;
- font-size: 0.86rem;
- font-weight: 900;
+ gap: 7px;
+ min-width: 0;
+}
+
+.onboarding-progress-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ color: #647894;
+ font-size: 0.7rem;
+ font-weight: 750;
+}
+
+.onboarding-progress-meta strong {
+ color: #294f7e;
+ font-size: 0.72rem;
}
.onboarding-progress-line {
@@ -2303,10 +2495,10 @@ td {
}
.onboarding-progress-track {
- height: 7px;
+ height: 6px;
overflow: hidden;
border-radius: 999px;
- background: #dfe8f4;
+ background: #dfe8f5;
}
.onboarding-progress-track > span {
@@ -2447,10 +2639,25 @@ td {
min-height: 44px;
}
+.onboarding-compact-actions {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+.onboarding-compact-actions .btn {
+ min-width: 104px;
+ min-height: 44px;
+}
+
.onboarding-text-action {
min-height: 44px;
- padding: 6px 4px;
+ padding: 6px 8px;
border: 0;
+ border-radius: 7px;
background: transparent;
color: #536b8d;
font: inherit;
@@ -2461,13 +2668,16 @@ td {
cursor: pointer;
}
-.onboarding-compact-copy {
- position: relative;
- z-index: 1;
+.onboarding-text-action:hover {
+ background: #eef4fc;
+ color: #294f7e;
}
-.onboarding-coach.compact .onboarding-coach-actions {
- justify-content: flex-end;
+.onboarding-text-action:focus-visible,
+.onboarding-coach .btn:focus-visible,
+.onboarding-step-rail a:focus-visible {
+ outline: 3px solid rgba(31, 75, 153, 0.24);
+ outline-offset: 2px;
}
.modal-actions {
@@ -4225,22 +4435,118 @@ td {
@media (max-width: 840px) {
.top-tabs {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 48px;
+ gap: 6px;
margin: 0 10px;
- padding: 8px 10px;
+ padding: 8px;
}
.main-module-tabs.section-tabs {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 3px;
+ width: auto;
+ min-width: 0;
+ overflow: visible;
+ padding: 0;
+ }
+
+ .main-module-tabs .section-tab.compact,
+ .main-module-tabs .section-tab.compact.featured {
+ min-width: 0;
+ min-height: 52px;
+ padding: 6px 2px;
+ border-radius: 8px;
+ flex-direction: column;
+ justify-content: center;
+ gap: 2px;
+ font-size: 0.68rem;
+ line-height: 1.1;
+ }
+
+ .main-module-tabs .section-tab.compact.featured::before {
+ inset: auto 7px 3px;
+ height: 2px;
+ }
+
+ .main-module-tabs .section-tab.compact svg {
+ width: 18px;
+ height: 18px;
+ }
+
+ .primary-navigation-label {
+ max-width: 100%;
+ font-size: 0;
+ line-height: 1;
+ }
+
+ .primary-navigation-label::after {
+ content: attr(data-short-label);
+ font-size: 0.68rem;
+ }
+
+ .right-module-tabs.section-tabs {
+ align-self: stretch;
+ margin-left: 0;
+ }
+
+ .right-module-tabs .section-tab.compact {
+ width: 48px;
+ min-width: 48px;
+ min-height: 52px;
+ justify-content: center;
+ padding: 6px;
+ border-radius: 8px;
+ }
+
+ .right-module-tabs .section-tab.compact span {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+ }
+
+ .right-module-tabs .section-tab.compact svg {
+ width: 19px;
+ height: 19px;
+ }
+
+ .workflow-subnav {
+ display: block;
+ margin: 0 10px;
+ padding: 7px 8px 8px;
+ }
+
+ .workflow-subnav-label {
+ display: none;
+ }
+
+ .workflow-subnav-list.section-tabs {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
+ gap: 4px;
width: 100%;
- flex-wrap: nowrap;
- overflow-x: auto;
- padding-bottom: 4px;
}
- .main-module-tabs .section-tab.compact {
- flex: 0 0 auto;
+ .workflow-subnav-list .section-tab.compact {
+ min-width: 0;
+ min-height: 44px;
+ padding: 6px 4px;
+ font-size: 0.72rem;
+ }
+
+ .workflow-subnav-list .section-tab.compact svg {
+ display: none;
}
.top-tabs-selectors {
+ grid-column: 1 / -1;
width: 100%;
margin-left: 0;
align-items: stretch;
@@ -4409,8 +4715,18 @@ td {
}
.onboarding-coach.compact {
- grid-template-columns: 1fr;
+ grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
+ gap: 12px 16px;
+ }
+
+ .onboarding-compact-progress {
+ grid-column: 1 / -1;
+ }
+
+ .onboarding-compact-actions {
+ grid-column: 2;
+ grid-row: 1;
}
.onboarding-current-step {
@@ -4426,10 +4742,6 @@ td {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
- .onboarding-coach.compact .onboarding-coach-actions {
- justify-content: flex-start;
- }
-
.onboarding-welcome {
grid-template-columns: 1fr;
}
@@ -4458,6 +4770,26 @@ td {
padding: 13px;
}
+ .onboarding-coach.compact {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+
+ .onboarding-compact-main {
+ align-items: flex-start;
+ }
+
+ .onboarding-compact-progress,
+ .onboarding-compact-actions {
+ grid-column: auto;
+ grid-row: auto;
+ }
+
+ .onboarding-compact-actions {
+ align-items: stretch;
+ flex-direction: column-reverse;
+ }
+
.onboarding-coach-heading {
gap: 8px;
}
@@ -4481,6 +4813,7 @@ td {
}
.onboarding-coach-actions .btn,
+ .onboarding-compact-actions .btn,
.onboarding-text-action {
width: 100%;
}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index b492d8b..940bdc9 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -4,9 +4,10 @@
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
"allowSyntheticDefaultImports": true,
"noEmit": true,
"types": ["node"]
},
- "include": ["vite.config.ts", "vite.config.test.ts"]
+ "include": ["vite.config.ts", "vite.config.test.ts", "vitest.config.ts"]
}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..9d01516
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, mergeConfig } from "vitest/config";
+import viteConfig from "./vite.config.ts";
+
+export default defineConfig((configEnvironment) => {
+ const baseConfig = typeof viteConfig === "function" ? viteConfig(configEnvironment) : viteConfig;
+ return mergeConfig(baseConfig, {
+ test: {
+ coverage: {
+ provider: "v8",
+ reporter: ["text", "html"],
+ include: ["src/**/*.{ts,tsx}"],
+ exclude: ["src/**/*.test.{ts,tsx}", "src/vite-env.d.ts"],
+ thresholds: {
+ statements: 17,
+ branches: 15,
+ functions: 13,
+ lines: 18
+ }
+ }
+ }
+ });
+});