/* MIRMC Academia · Learning Path Experience v2
   Dense, accessible course -> level -> lesson navigation for student scanning. */

/* Render long academic routes progressively instead of painting every card up front. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
  scroll-margin-top: 6rem;
}

/* The level stack becomes denser without sacrificing the 44px interaction target. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4:has(> article.vi-card > div.flex.flex-col.gap-4.p-5) {
  gap: 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) 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 {
  min-height: 2.75rem !important;
  width: fit-content;
  max-width: 100%;
  border-radius: 0.7rem !important;
  padding: 0.55rem 0.8rem !important;
  line-height: 1.15;
}

/* Empty-level messaging is metadata, not a second oversized content block. */
[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:last-child {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 1.9rem);
  margin: 0 0.95rem 0.8rem;
  padding: 0.35rem 0.65rem !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--level-wash, #f1f5f9) !important;
  color: var(--level-deep, #475569) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  line-height: 1.25;
}

[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:last-child::before {
  content: "•";
  margin-right: 0.35rem;
  color: var(--level-accent, #64748b);
}

/* Lesson rows stay easy to tap, but stop consuming excessive vertical space. */
[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 {
  border-color: color-mix(in srgb, var(--level-accent, #64748b) 12%, #e7eaf0) !important;
  background: color-mix(in srgb, var(--level-wash, #f1f5f9) 48%, white) !important;
  padding-inline: 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.border-t li > :where(a, div) {
  min-height: 2.75rem;
  gap: 0.55rem !important;
  padding-block: 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) > div.border-t li span[class*="h-8"][class*="w-8"] {
  width: 1.7rem !important;
  height: 1.7rem !important;
  border-radius: 0.55rem !important;
  font-size: 0.68rem !important;
}

/* Clear keyboard focus that follows each level identity. */
[data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) :where(a, button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--level-accent, #64748b) 42%, white);
  outline-offset: 3px;
}

/* On larger screens, empty/lightweight levels can be compared side by side.
   Levels that expose lesson rows keep the full reading width. */
@media (min-width: 960px) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4:has(> article.vi-card > div.flex.flex-col.gap-4.p-5) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.border-t ul) {
    grid-column: 1 / -1;
  }

  [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 {
    min-height: 8.5rem;
  }
}

/* Phone layout: one column, compact actions, no horizontal pressure. */
@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:first-child {
    padding-inline: 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) h3 {
    font-size: 1rem !important;
    line-height: 1.25 !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 {
    font-size: 0.78rem !important;
  }
}

@media (pointer: coarse) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) :where(a, button) {
    min-height: 2.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5),
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) :where(a, button) {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
    border-width: 2px !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:last-child {
    border: 1px solid currentColor !important;
  }
}

@media (forced-colors: active) {
  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) {
    border: 1px solid CanvasText !important;
    background: Canvas !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 {
    background: Highlight !important;
  }

  [data-portal-area="campus"] .vi-auth-main div.space-y-4 > article.vi-card:has(> div.flex.flex-col.gap-4.p-5) :where(a, button):focus-visible {
    outline-color: Highlight !important;
  }
}