/* MIRMC Academia · Pastoral Campus v42
   Student-facing visual language. Internal/admin surfaces are untouched. */

html[data-pastoral-language="active"] {
  --pastoral-navy: #10233d;
  --pastoral-teal: #1f8f87;
  --pastoral-violet: #6d45e8;
  --pastoral-paper: #fbfcfa;
  --pastoral-ink: #162033;
  --pastoral-muted: #667085;
  --pastoral-border: rgba(17, 28, 68, 0.11);
  --pastoral-shadow: 0 18px 50px -38px rgba(17, 28, 68, 0.42);
  --campus-pointer-x: 50%;
  --campus-pointer-y: 18%;
  --surface-accent-rgb: 109, 69, 232;
  --surface-accent-2-rgb: 31, 143, 135;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] {
  background:
    radial-gradient(circle at var(--campus-pointer-x) var(--campus-pointer-y), rgba(var(--surface-accent-rgb), 0.105), transparent 19rem),
    radial-gradient(circle at 8% 0%, rgba(31, 143, 135, 0.08), transparent 28rem),
    radial-gradient(circle at 96% 12%, rgba(109, 69, 232, 0.08), transparent 24rem),
    #f7f8fb;
  transition: background 180ms ease-out;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main {
  max-width: 92rem;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > :where(div, section) {
  min-width: 0;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] :where(h1, h2, h3) {
  text-wrap: balance;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] :where(p, li) {
  text-wrap: pretty;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] .uppercase {
  text-transform: none !important;
  letter-spacing: 0.035em !important;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-card,
html[data-pastoral-language="active"] [data-portal-area="campus"] article[class*="rounded-2xl"],
html[data-pastoral-language="active"] [data-portal-area="campus"] section[class*="bg-white"] {
  border-color: var(--pastoral-border);
  box-shadow: var(--pastoral-shadow);
}

html[data-pastoral-language="active"] [data-portal-area="campus"] :where(button, a[href], select, input) {
  min-height: 2.75rem;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] :where(button, a[href], input, select, textarea):focus-visible {
  outline: 3px solid rgba(244, 185, 66, 0.96);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(109, 69, 232, 0.13);
}

/* The large page intros stay expressive, but feel less like technical dashboards. */
html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child[class*="bg-gradient"],
html[data-pastoral-language="active"] [data-portal-area="campus"] [data-campus-progress-home] > section:first-child,
html[data-pastoral-language="active"] [data-portal-area="campus"] [data-course-library] > section:first-child {
  border-radius: 1.65rem !important;
  box-shadow: 0 24px 70px -46px rgba(17, 28, 68, 0.56) !important;
}

/* Route-specific personality without changing business logic. */
html[data-pastoral-surface="home"] [data-portal-area="campus"] [data-campus-progress-home] > section:first-child {
  background-image: linear-gradient(135deg, #0a2f3d 0%, #164f58 54%, #5d45c6 100%) !important;
}

html[data-pastoral-surface="courses"] [data-portal-area="campus"] [data-course-library] > section:first-child {
  background-image: linear-gradient(145deg, #ffffff 0%, #f8fbfa 55%, #eeeaff 100%) !important;
}

html[data-pastoral-surface="learning"] [data-portal-area="campus"] .vi-auth-main {
  --vi-reading-width: 70ch;
}

html[data-pastoral-surface="learning"] [data-portal-area="campus"] .vi-auth-main :where(p, li) {
  line-height: 1.72;
}

html[data-pastoral-surface="notices"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="notifications"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #10233d 0%, #25456b 56%, #6d45e8 100%) !important;
}

html[data-pastoral-surface="agenda"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #0d3340 0%, #155a60 58%, #1f8f87 100%) !important;
}

html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #10233d 0%, #253a62 56%, #1f8f87 100%) !important;
}

/* Fewer tiny dashboard labels, stronger readable hierarchy. */
html[data-pastoral-language="active"] [data-portal-area="campus"] :where(.text-\[9px\], .text-\[10px\]) {
  line-height: 1.25;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] [class*="tracking-[0.16em]"] {
  letter-spacing: 0.05em !important;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] [data-course-card="compact"] {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] [data-course-card="compact"]:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   MIRMC Student Experience v44 · cinematic depth, meaningful motion and
   surface personalities. Motion is progressive enhancement and never required
   for navigation or comprehension.
   -------------------------------------------------------------------------- */

html[data-pastoral-surface="agenda"] { --surface-accent-rgb: 20, 168, 158; --surface-accent-2-rgb: 54, 211, 153; }
html[data-pastoral-surface="activities"],
html[data-pastoral-surface="activity"] { --surface-accent-rgb: 109, 69, 232; --surface-accent-2-rgb: 244, 185, 66; }
html[data-pastoral-surface="notices"],
html[data-pastoral-surface="notifications"] { --surface-accent-rgb: 124, 58, 237; --surface-accent-2-rgb: 244, 63, 94; }
html[data-pastoral-surface="certificates"] { --surface-accent-rgb: 214, 158, 46; --surface-accent-2-rgb: 31, 143, 135; }
html[data-pastoral-surface="library"] { --surface-accent-rgb: 37, 99, 235; --surface-accent-2-rgb: 109, 69, 232; }
html[data-pastoral-surface="payments"] { --surface-accent-rgb: 5, 150, 105; --surface-accent-2-rgb: 244, 185, 66; }
html[data-pastoral-surface="profile"] { --surface-accent-rgb: 14, 116, 144; --surface-accent-2-rgb: 109, 69, 232; }

html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > div {
  animation: campus-surface-enter 520ms cubic-bezier(.22,.72,.26,1) both;
}

html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  isolation: isolate;
}

html[data-pastoral-surface="agenda"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="activities"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="notices"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="certificates"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="payments"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child,
html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 28px 72px -42px rgba(7, 17, 31, .74),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-pastoral-surface="agenda"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="activities"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="notices"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="certificates"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="payments"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before,
html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.16), transparent 19%),
    conic-gradient(from 210deg at 65% 45%, transparent 0 24%, rgba(var(--surface-accent-2-rgb), .22) 31%, transparent 43% 72%, rgba(var(--surface-accent-rgb), .22) 82%, transparent 94%);
  filter: blur(8px);
  animation: campus-aurora-orbit 18s linear infinite;
}

html[data-pastoral-surface="agenda"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="activities"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="notices"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="certificates"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="payments"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after,
html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.09) 42%, transparent 57%),
    radial-gradient(circle at var(--campus-pointer-x) var(--campus-pointer-y), rgba(255,255,255,.12), transparent 18rem);
  background-size: 230% 100%, 100% 100%;
  animation: campus-hero-sheen 9s ease-in-out infinite;
}

html[data-pastoral-surface="activities"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #111c44 0%, #332a78 57%, #6d45e8 100%) !important;
}

html[data-pastoral-surface="certificates"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #18243f 0%, #3e4a5f 48%, #b98224 100%) !important;
}

html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #0e2442 0%, #164c76 52%, #6046c9 100%) !important;
}

html[data-pastoral-surface="payments"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child {
  background-image: linear-gradient(135deg, #0b2a32 0%, #0f6258 54%, #a8751f 100%) !important;
}

/* Premium card depth across the requested student surfaces. */
html:is(
  [data-pastoral-surface="agenda"],
  [data-pastoral-surface="activities"],
  [data-pastoral-surface="notices"],
  [data-pastoral-surface="certificates"],
  [data-pastoral-surface="library"],
  [data-pastoral-surface="payments"],
  [data-pastoral-surface="profile"]
) [data-portal-area="campus"] .vi-auth-main :where(.vi-card, article[class*="rounded-2xl"], article[class*="rounded-3xl"], a[class*="rounded-2xl"], a[class*="rounded-3xl"]) {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 260ms cubic-bezier(.22,.72,.26,1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease;
}

html:is(
  [data-pastoral-surface="agenda"],
  [data-pastoral-surface="activities"],
  [data-pastoral-surface="notices"],
  [data-pastoral-surface="certificates"],
  [data-pastoral-surface="library"],
  [data-pastoral-surface="payments"],
  [data-pastoral-surface="profile"]
) [data-portal-area="campus"] .vi-auth-main :where(.vi-card, article[class*="rounded-2xl"], article[class*="rounded-3xl"])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(118deg, transparent 25%, rgba(255,255,255,.72) 46%, transparent 64%);
  transform: translateX(-65%);
  transition: opacity 220ms ease, transform 680ms cubic-bezier(.22,.72,.26,1);
}

/* Metric cards breathe subtly when values matter. */
html:is(
  [data-pastoral-surface="agenda"],
  [data-pastoral-surface="activities"],
  [data-pastoral-surface="notices"],
  [data-pastoral-surface="certificates"],
  [data-pastoral-surface="library"],
  [data-pastoral-surface="payments"],
  [data-pastoral-surface="profile"]
) [data-portal-area="campus"] .vi-auth-main > div > section:nth-child(2) > div {
  backdrop-filter: blur(14px);
  border-color: rgba(var(--surface-accent-rgb), .14) !important;
}

/* Calendar-specific depth and selected-day energy. */
html[data-pastoral-surface="agenda"] [data-portal-area="campus"] button[class*="ring-[#6D45E8]"] {
  box-shadow: inset 0 0 0 2px rgba(109,69,232,.72), 0 0 26px rgba(109,69,232,.13);
  animation: campus-selected-day 2.8s ease-in-out infinite;
}

html[data-pastoral-surface="agenda"] [data-portal-area="campus"] button[aria-label*="encuentro"] span[class*="rounded-full"] {
  transition: transform 180ms ease;
}

/* Notices: unread/urgent messages feel alive without becoming distracting. */
html[data-pastoral-surface="notices"] [data-portal-area="campus"] article[class*="border-[#6D45E8]"] {
  box-shadow: 0 18px 48px -34px rgba(109,69,232,.52), inset 3px 0 0 rgba(109,69,232,.75) !important;
}

html[data-pastoral-surface="notices"] [data-portal-area="campus"] article:has(.bg-rose-100) {
  box-shadow: 0 18px 52px -34px rgba(225,29,72,.42), inset 3px 0 0 rgba(225,29,72,.72) !important;
}

/* Certificates: document cards receive a restrained gold edge. */
html[data-pastoral-surface="certificates"] [data-portal-area="campus"] .vi-auth-main :where(article, .vi-card) {
  border-color: rgba(185,130,36,.18);
}

/* Library: media tiles get a cinematic focus frame. */
html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main :where(img, video) {
  transition: transform 420ms cubic-bezier(.22,.72,.26,1), filter 300ms ease;
}

/* Payments stay trustworthy: effects are calmer, with clear focus hierarchy. */
html[data-pastoral-surface="payments"] [data-portal-area="campus"] .vi-auth-main :where(.vi-card, article) {
  box-shadow: 0 18px 48px -38px rgba(5, 92, 72, .38);
}

/* Profile identity cards use a subtle halo on avatars/images. */
html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main img[class*="rounded-full"],
html[data-pastoral-surface="profile"] [data-portal-area="campus"] .vi-auth-main [class*="rounded-full"] > img {
  box-shadow: 0 0 0 4px rgba(255,255,255,.86), 0 0 0 7px rgba(var(--surface-accent-rgb), .2), 0 18px 42px -20px rgba(var(--surface-accent-rgb), .55);
}

/* Buttons feel tactile and consistent across these surfaces. */
html:is(
  [data-pastoral-surface="agenda"],
  [data-pastoral-surface="activities"],
  [data-pastoral-surface="notices"],
  [data-pastoral-surface="certificates"],
  [data-pastoral-surface="library"],
  [data-pastoral-surface="payments"],
  [data-pastoral-surface="profile"]
) [data-portal-area="campus"] .vi-auth-main :where(button, a[href]) {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

html:is(
  [data-pastoral-surface="agenda"],
  [data-pastoral-surface="activities"],
  [data-pastoral-surface="notices"],
  [data-pastoral-surface="certificates"],
  [data-pastoral-surface="library"],
  [data-pastoral-surface="payments"],
  [data-pastoral-surface="profile"]
) [data-portal-area="campus"] .vi-auth-main :where(button, a[href]):active {
  transform: scale(.975);
}

/* Progressive desktop hover effects. */
@media (hover: hover) and (pointer: fine) {
  html:is(
    [data-pastoral-surface="agenda"],
    [data-pastoral-surface="activities"],
    [data-pastoral-surface="notices"],
    [data-pastoral-surface="certificates"],
    [data-pastoral-surface="library"],
    [data-pastoral-surface="payments"],
    [data-pastoral-surface="profile"]
  ) [data-portal-area="campus"] .vi-auth-main :where(.vi-card, article[class*="rounded-2xl"], article[class*="rounded-3xl"], a[class*="rounded-2xl"], a[class*="rounded-3xl"]):hover {
    transform: translateY(-4px) scale(1.004);
    border-color: rgba(var(--surface-accent-rgb), .27) !important;
    box-shadow: 0 28px 72px -44px rgba(var(--surface-accent-rgb), .46), 0 14px 34px -30px rgba(17,28,68,.32) !important;
  }

  html:is(
    [data-pastoral-surface="agenda"],
    [data-pastoral-surface="activities"],
    [data-pastoral-surface="notices"],
    [data-pastoral-surface="certificates"],
    [data-pastoral-surface="library"],
    [data-pastoral-surface="payments"],
    [data-pastoral-surface="profile"]
  ) [data-portal-area="campus"] .vi-auth-main :where(.vi-card, article[class*="rounded-2xl"], article[class*="rounded-3xl"]):hover::after {
    opacity: .22;
    transform: translateX(68%);
  }

  html[data-pastoral-surface="library"] [data-portal-area="campus"] .vi-auth-main :where(a, article):hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
  }

  html[data-pastoral-surface="agenda"] [data-portal-area="campus"] button[aria-label*="encuentro"]:hover span[class*="rounded-full"] {
    transform: scale(1.08);
  }
}

@keyframes campus-surface-enter {
  from { opacity: 0; transform: translateY(12px) scale(.995); filter: saturate(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@keyframes campus-aurora-orbit {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes campus-hero-sheen {
  0%, 100% { background-position: 125% 0, 0 0; opacity: .28; }
  50% { background-position: -25% 0, 0 0; opacity: .48; }
}

@keyframes campus-selected-day {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(109,69,232,.62), 0 0 14px rgba(109,69,232,.08); }
  50% { box-shadow: inset 0 0 0 2px rgba(109,69,232,.84), 0 0 30px rgba(109,69,232,.18); }
}

/* Mobile: breathing room, safe-area and less oversized hero content. */
@media (max-width: 639px) {
  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-top: 1rem !important;
    padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > div {
    gap: 1rem;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main > div > section:first-child[class*="p-6"],
  html[data-pastoral-language="active"] [data-portal-area="campus"] [data-campus-progress-home] > section:first-child,
  html[data-pastoral-language="active"] [data-portal-area="campus"] [data-course-library] > section:first-child {
    padding: 1.1rem !important;
    border-radius: 1.4rem !important;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main h1 {
    font-size: clamp(1.72rem, 8.2vw, 2.18rem) !important;
    line-height: 1.06 !important;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main h2 {
    line-height: 1.15;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] .vi-auth-main p {
    line-height: 1.58;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] :where(.grid-cols-3, .grid-cols-4) {
    min-width: 0;
  }

  html[data-pastoral-language="active"] [data-portal-area="campus"] [class*="sm:min-w-"] {
    min-width: 0 !important;
  }

  html:is(
    [data-pastoral-surface="agenda"],
    [data-pastoral-surface="activities"],
    [data-pastoral-surface="notices"],
    [data-pastoral-surface="certificates"],
    [data-pastoral-surface="library"],
    [data-pastoral-surface="payments"],
    [data-pastoral-surface="profile"]
  ) [data-portal-area="campus"] .vi-auth-main > div > section:first-child::before {
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-pastoral-language="active"] [data-portal-area="campus"] *,
  html[data-pastoral-language="active"] [data-portal-area="campus"] *::before,
  html[data-pastoral-language="active"] [data-portal-area="campus"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}