/* MIRMC Academia · Premium Course Identity v1
   Low-saturation course palettes designed for fast visual recognition without visual noise. */

:where(
  [data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0),
  [data-course-card="compact"]
) {
  --course-accent: #667085;
  --course-deep: #4b5565;
  --course-surface: #f8f9fb;
  --course-wash: #eef1f5;
  --course-border: #e0e5eb;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--course-accent) 7%, transparent), transparent 34%),
    linear-gradient(142deg, var(--course-surface) 0%, #ffffff 78%) !important;
  border-color: var(--course-border) !important;
}

/* Future-safe fallback palette cycle. Known MIRMC courses below override this by slug. */
[data-portal-area="campus"] .vi-auth-main .grid > a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):nth-child(5n + 1),
[data-course-catalog="public"] .grid > [data-course-card="compact"]:nth-child(5n + 1) {
  --course-accent: #6558c9;
  --course-deep: #4e459e;
  --course-surface: #f8f7fd;
  --course-wash: #efedfa;
  --course-border: #ddd9f2;
}

[data-portal-area="campus"] .vi-auth-main .grid > a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):nth-child(5n + 2),
[data-course-catalog="public"] .grid > [data-course-card="compact"]:nth-child(5n + 2) {
  --course-accent: #3f8a78;
  --course-deep: #2f6f61;
  --course-surface: #f6faf8;
  --course-wash: #eaf5f1;
  --course-border: #d2e8e0;
}

[data-portal-area="campus"] .vi-auth-main .grid > a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):nth-child(5n + 3),
[data-course-catalog="public"] .grid > [data-course-card="compact"]:nth-child(5n + 3) {
  --course-accent: #8a6170;
  --course-deep: #6f4a58;
  --course-surface: #fbf7f8;
  --course-wash: #f4edef;
  --course-border: #e8d8de;
}

[data-portal-area="campus"] .vi-auth-main .grid > a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):nth-child(5n + 4),
[data-course-catalog="public"] .grid > [data-course-card="compact"]:nth-child(5n + 4) {
  --course-accent: #4f7898;
  --course-deep: #3d617c;
  --course-surface: #f6f9fb;
  --course-wash: #eaf1f6;
  --course-border: #d5e2eb;
}

[data-portal-area="campus"] .vi-auth-main .grid > a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):nth-child(5n),
[data-course-catalog="public"] .grid > [data-course-card="compact"]:nth-child(5n) {
  --course-accent: #9a7845;
  --course-deep: #7b5e32;
  --course-surface: #fcf9f4;
  --course-wash: #f5eee3;
  --course-border: #e8dbc8;
}

/* Stable course identities: these stay attached to the course regardless of sorting or enrollment subsets. */
[data-portal-area="campus"] .vi-auth-main a[href$="/intercesion-alto-nivel"]:has(> div.absolute.inset-x-0.top-0),
[data-course-card="compact"][data-course-slug="intercesion-alto-nivel"] {
  --course-accent: #6558c9;
  --course-deep: #4e459e;
  --course-surface: #f8f7fd;
  --course-wash: #efedfa;
  --course-border: #ddd9f2;
}

[data-portal-area="campus"] .vi-auth-main a[href$="/sanidad-interior-y-liberacion"]:has(> div.absolute.inset-x-0.top-0),
[data-course-card="compact"][data-course-slug="sanidad-interior-y-liberacion"] {
  --course-accent: #3f8a78;
  --course-deep: #2f6f61;
  --course-surface: #f6faf8;
  --course-wash: #eaf5f1;
  --course-border: #d2e8e0;
}

[data-portal-area="campus"] .vi-auth-main a[href$="/guerra-espiritual-alto-nivel"]:has(> div.absolute.inset-x-0.top-0),
[data-course-card="compact"][data-course-slug="guerra-espiritual-alto-nivel"] {
  --course-accent: #8a6170;
  --course-deep: #6f4a58;
  --course-surface: #fbf7f8;
  --course-wash: #f4edef;
  --course-border: #e8d8de;
}

[data-portal-area="campus"] .vi-auth-main a[href$="/suenos-y-visiones"]:has(> div.absolute.inset-x-0.top-0),
[data-course-card="compact"][data-course-slug="suenos-y-visiones"] {
  --course-accent: #4f7898;
  --course-deep: #3d617c;
  --course-surface: #f6f9fb;
  --course-wash: #eaf1f6;
  --course-border: #d5e2eb;
}

[data-portal-area="campus"] .vi-auth-main a[href$="/escuela-profetica"]:has(> div.absolute.inset-x-0.top-0),
[data-course-card="compact"][data-course-slug="escuela-profetica"] {
  --course-accent: #9a7845;
  --course-deep: #7b5e32;
  --course-surface: #fcf9f4;
  --course-wash: #f5eee3;
  --course-border: #e8dbc8;
}

/* Shared premium treatment. */
[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0) > div.absolute.inset-x-0.top-0,
[data-course-card="compact"] > div.absolute.inset-x-0.top-0 {
  background: linear-gradient(90deg, var(--course-accent), color-mix(in srgb, var(--course-accent) 58%, white)) !important;
}

[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0) > div.flex:first-of-type > span[class*="size-"] {
  border: 1px solid color-mix(in srgb, var(--course-accent) 16%, white) !important;
  background: var(--course-wash) !important;
  color: var(--course-deep) !important;
}

[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0) > div.flex:first-of-type > :where(svg, span:first-child),
[data-course-card="compact"] > div.flex:first-of-type > span:first-child {
  color: var(--course-deep) !important;
}

[data-course-card="compact"] > div.flex:first-of-type > span:last-child {
  border: 1px solid color-mix(in srgb, var(--course-accent) 12%, white);
  background: var(--course-wash) !important;
  color: var(--course-deep) !important;
}

[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0) > div:last-child,
[data-course-card="compact"] > div:last-child {
  border-color: color-mix(in srgb, var(--course-accent) 12%, #e8ebf2) !important;
}

[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0) > div:last-child > span:last-child,
[data-course-card="compact"] > div:last-child > a {
  color: var(--course-deep) !important;
}

[data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0):hover,
[data-course-card="compact"]:hover {
  border-color: color-mix(in srgb, var(--course-accent) 28%, white) !important;
  box-shadow: 0 16px 34px -27px color-mix(in srgb, var(--course-accent) 38%, #111c44) !important;
}

/* MIRMC Academia · Premium Level Identity v1
   Each academic stage keeps a restrained identity across every course. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #64748b;
  --level-deep: #475569;
  --level-surface: #f8fafc;
  --level-wash: #eef2f6;
  --level-border: #dfe5eb;
  position: relative;
  border-radius: 1rem !important;
  border-color: var(--level-border) !important;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--level-accent) 7%, transparent), transparent 32%),
    linear-gradient(140deg, var(--level-surface) 0%, #ffffff 82%) !important;
  box-shadow: 0 8px 26px -23px color-mix(in srgb, var(--level-accent) 32%, #111c44) !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.22rem;
  background: linear-gradient(180deg, var(--level-accent), color-mix(in srgb, var(--level-accent) 48%, white));
  opacity: 0.9;
}

/* Stable level identities. Level number, not list position, is represented by the ordered card slot. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 1):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #3f806f;
  --level-deep: #2e685a;
  --level-surface: #f7fbf9;
  --level-wash: #e9f4ef;
  --level-border: #d2e5dd;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 2):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #53799a;
  --level-deep: #3f617f;
  --level-surface: #f7f9fb;
  --level-wash: #eaf1f6;
  --level-border: #d8e3eb;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 3):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #6a61a8;
  --level-deep: #514a87;
  --level-surface: #f8f7fb;
  --level-wash: #eeecf7;
  --level-border: #dedaf0;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 4):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #967342;
  --level-deep: #75592f;
  --level-surface: #fcfaf6;
  --level-wash: #f5eee3;
  --level-border: #e8dcc9;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 5):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #976271;
  --level-deep: #774b58;
  --level-surface: #fbf8f9;
  --level-wash: #f4ecef;
  --level-border: #e8d8de;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 6):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #477d80;
  --level-deep: #356467;
  --level-surface: #f6fafb;
  --level-wash: #e8f3f3;
  --level-border: #d2e5e5;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 7):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #5e6e9a;
  --level-deep: #48567b;
  --level-surface: #f7f8fb;
  --level-wash: #ebedf5;
  --level-border: #d9deeb;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n + 8):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #847744;
  --level-deep: #695f32;
  --level-surface: #fbfaf6;
  --level-wash: #f3f0e5;
  --level-border: #e5dfca;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:nth-child(9n):has(> div.flex.flex-col.gap-4.p-5) {
  --level-accent: #765d83;
  --level-deep: #5d4869;
  --level-surface: #faf8fb;
  --level-wash: #f1ecf3;
  --level-border: #e2d8e6;
}

/* Compact level-card anatomy: faster scanning on phones and tablets. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div.flex.flex-col.gap-4.p-5 {
  gap: 0.65rem !important;
  padding: 0.85rem 0.95rem 0.8rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div:first-child > div.flex.min-w-0.flex-1.items-start {
  gap: 0.7rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div:first-child > div.flex.min-w-0.flex-1.items-start > div:first-child {
  width: 2.45rem !important;
  height: 2.45rem !important;
  border-radius: 0.8rem !important;
  border: 1px solid color-mix(in srgb, var(--level-accent) 16%, white) !important;
  background: var(--level-wash) !important;
  color: var(--level-deep) !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) h3 {
  margin-top: 0.2rem !important;
  font-size: 1rem !important;
  line-height: 1.3rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) h3 + p {
  margin-top: 0.25rem !important;
  font-size: 0.76rem !important;
  line-height: 1.15rem !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) h3 ~ p:last-child {
  margin-top: 0.3rem !important;
  font-size: 0.7rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) span.rounded-full {
  border: 1px solid color-mix(in srgb, var(--level-accent) 14%, white) !important;
  background: var(--level-wash) !important;
  color: var(--level-deep) !important;
  padding: 0.28rem 0.55rem !important;
  font-size: 0.64rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) a[href^="/campus/niveles/"],
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) button.bg-primary {
  min-height: 2.35rem !important;
  align-self: flex-start !important;
  border-radius: 0.75rem !important;
  background: var(--level-deep) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.72rem !important;
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--level-accent) 50%, #111c44) !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > p.border-t {
  margin: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  padding: 0 0.95rem 0.8rem 3.95rem !important;
  color: color-mix(in srgb, var(--level-deep) 72%, #64708a) !important;
  font-size: 0.68rem !important;
  line-height: 1rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div.border-t.bg-muted\/15 {
  border-color: color-mix(in srgb, var(--level-accent) 11%, #e8ebf2) !important;
  background: color-mix(in srgb, var(--level-wash) 46%, transparent) !important;
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div.border-t.bg-muted\/15 li :where(a, div) {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5):hover {
  border-color: color-mix(in srgb, var(--level-accent) 28%, white) !important;
  box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--level-accent) 42%, #111c44) !important;
}

[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) + article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
  margin-top: 0.7rem !important;
}

@media (max-width: 639px) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > div.flex.flex-col.gap-4.p-5 {
    padding: 0.78rem 0.85rem 0.72rem !important;
  }

  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) a[href^="/campus/niveles/"],
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) button.bg-primary {
    width: auto !important;
    max-width: 100%;
  }

  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) > p.border-t {
    padding-left: 3.55rem !important;
    padding-right: 0.85rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-portal-area="campus"] .vi-auth-main a[href^="/campus/cursos/"]:has(> div.absolute.inset-x-0.top-0),
  [data-course-card="compact"],
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
    transition: none !important;
  }
}