/* MIRMC Academia · Platform Visual Refresh v2 · A+ expansion
   Progressive visual system loaded after Tailwind.
   Scope: administration, teacher workspace, student campus and Director #110.
   It improves hierarchy, density, accessibility and mobile ergonomics without
   changing authorization, routes or business logic. */

:root {
  --mirmc-page: #f5f7fb;
  --mirmc-surface: rgba(255, 255, 255, 0.96);
  --mirmc-surface-soft: #fafbfe;
  --mirmc-border: #e1e6ef;
  --mirmc-border-strong: #d5dce8;
  --mirmc-ink: #111c44;
  --mirmc-text: #38445f;
  --mirmc-muted: #6c7890;
  --mirmc-violet: #6d45e8;
  --mirmc-teal: #1fb8ae;
  --mirmc-gold: #f4b942;
  --mirmc-focus: #f4b942;
  --mirmc-shadow-sm: 0 12px 35px -30px rgba(17, 28, 68, 0.42);
  --mirmc-shadow-md: 0 22px 58px -38px rgba(17, 28, 68, 0.38);
  --mirmc-shadow-float: 0 22px 62px -34px rgba(17, 28, 68, 0.46);
  --mirmc-control-radius: 0.85rem;
  --mirmc-card-radius: 1.35rem;
  --mirmc-section-gap: clamp(1rem, 1.7vw, 1.65rem);
  --portal-accent: var(--mirmc-violet);
  --portal-accent-soft: rgba(109, 69, 232, 0.1);
}

[data-portal-area="teacher"] {
  --portal-accent: #13857f;
  --portal-accent-soft: rgba(19, 133, 127, 0.11);
}

[data-portal-area="campus"] {
  --portal-accent: #5a35c8;
  --portal-accent-soft: rgba(90, 53, 200, 0.1);
}

html {
  background: var(--mirmc-page);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 92% 4%, rgba(109, 69, 232, 0.07), transparent 24rem),
    radial-gradient(circle at 8% 28%, rgba(31, 184, 174, 0.055), transparent 20rem),
    var(--mirmc-page);
}

::selection {
  background: color-mix(in srgb, var(--portal-accent) 20%, white);
  color: var(--mirmc-ink);
}

:where(button, a[href], input, select, textarea, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a[href], input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid rgba(244, 185, 66, 0.94);
  outline-offset: 3px;
}

.vi-auth-main {
  position: relative;
  isolation: isolate;
}

.vi-auth-main > :first-child {
  width: 100%;
}

.vi-auth-main :where(h1, h2, h3) {
  text-wrap: balance;
}

.vi-auth-main :where(p, li, td, th) {
  text-wrap: pretty;
}

.vi-auth-main :where(section, article, div)[class*="bg-white"][class*="rounded-2xl"],
.vi-auth-main :where(section, article, div)[class*="bg-white"][class*="rounded-3xl"] {
  border-color: var(--mirmc-border);
}

.vi-auth-main :where(section, article)[class*="shadow-sm"][class*="bg-white"] {
  box-shadow: var(--mirmc-shadow-sm);
}

.vi-auth-main :where(section, article)[class*="rounded-3xl"][class*="border"][class*="bg-white"] {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .vi-auth-main :where(a, button)[class*="rounded-xl"],
  .vi-auth-main :where(a, button)[class*="rounded-2xl"] {
    transition-property: transform, box-shadow, border-color, background-color, color, opacity;
    transition-duration: 180ms;
    transition-timing-function: ease;
  }

  .vi-auth-main :where(button, a[href])[class*="shadow"]:not(:disabled):hover {
    box-shadow: var(--mirmc-shadow-float);
  }
}

.vi-auth-main :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--mirmc-border-strong);
  background-color: rgba(255, 255, 255, 0.96);
  border-radius: var(--mirmc-control-radius);
}

.vi-auth-main :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]):hover {
  border-color: #c6cfdd;
}

.vi-auth-main :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: color-mix(in srgb, var(--portal-accent) 65%, white);
  box-shadow: 0 0 0 4px var(--portal-accent-soft);
}

.vi-auth-main :where(input, textarea)::placeholder {
  color: #939db0;
  opacity: 1;
}

.vi-auth-main :where(table) {
  width: 100%;
  font-variant-numeric: tabular-nums;
  border-collapse: separate;
  border-spacing: 0;
}

.vi-auth-main :where(th) {
  color: #66728a;
  font-size: 0.72rem;
  letter-spacing: 0.035em;
}

.vi-auth-main :where(td) {
  color: #34405a;
}

.vi-auth-main :where(tbody tr) {
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .vi-auth-main :where(tbody tr):hover {
    background-color: rgba(246, 247, 251, 0.82);
  }
}

.vi-auth-main :where([class*="overflow-x-auto"], [class*="overflow-auto"]) {
  scrollbar-width: thin;
  scrollbar-color: #c7cfdd transparent;
  overscroll-behavior-inline: contain;
}

[data-portal-area] .vi-auth-main > div[class*="space-y"] {
  --tw-space-y-reverse: 0;
}

[data-portal-area] .vi-auth-main > div > section:first-child[class*="bg-gradient"] {
  box-shadow: 0 26px 72px -44px rgba(8, 18, 48, 0.72);
}

.integral-dashboard {
  container-type: inline-size;
}

.integral-dashboard article {
  contain: layout paint;
}

.integral-dashboard > section {
  scroll-margin-top: 6rem;
}

@supports (content-visibility: auto) {
  .vi-auth-main > div > section:nth-child(n + 5) {
    content-visibility: auto;
    contain-intrinsic-size: auto 460px;
  }
}

[data-portal-area] > div[class*="lg:pl-64"] > header,
[data-portal-area] header[class*="sticky"] {
  border-color: rgba(225, 230, 239, 0.86);
}

[data-portal-area] .vi-auth-main {
  max-width: 100rem;
}

@media (max-width: 1023px) {
  .vi-auth-main {
    padding-bottom: 0.25rem;
  }

  .vi-auth-main :where(button, a[href], [role="button"]) {
    touch-action: manipulation;
  }

  .vi-auth-main :where(button, [role="button"]):not([class*="size-"]):not([class*="h-"]) {
    min-height: 2.75rem;
  }
}

@media (max-width: 767px) {
  .vi-auth-main {
    --mobile-card-padding: 1rem;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child[class*="bg-gradient"] {
    border-radius: 1.45rem;
    padding: 1.15rem;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child[class*="bg-gradient"] h1 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.08;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child[class*="bg-gradient"] p[class*="leading-7"] {
    line-height: 1.55;
  }

  .integral-dashboard > section:first-child {
    border-radius: 1.45rem;
    padding: 1.15rem;
  }

  .integral-dashboard > section:first-child h1 {
    font-size: clamp(1.75rem, 8.5vw, 2.2rem);
  }

  .vi-auth-main :where(li, article, section) :where(.truncate) {
    min-width: 0;
  }
}

@media (max-width: 639px) {
  body {
    background:
      radial-gradient(circle at 100% 0%, rgba(109, 69, 232, 0.06), transparent 15rem),
      var(--mirmc-page);
  }

  .vi-auth-main {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-top: 1rem;
  }

  .vi-auth-main :where(h1) {
    overflow-wrap: anywhere;
  }

  .vi-auth-main :where(p, li) {
    overflow-wrap: break-word;
  }

  .integral-dashboard {
    margin-inline: -0.05rem;
  }

  .integral-dashboard [aria-label="Métricas principales"] article {
    min-height: 6.65rem;
    padding: 0.8rem;
  }

  .integral-dashboard [aria-label="Métricas principales"] article p[class*="text-2xl"] {
    font-size: 1.45rem;
  }

  .vi-auth-main :where(input, select, textarea) {
    font-size: max(1rem, 16px);
  }

  .vi-auth-main :where([class*="overflow-x-auto"]):has(table) {
    margin-inline: -0.35rem;
    padding-inline: 0.35rem;
    scroll-padding-inline: 0.35rem;
  }
}

@media (min-width: 1280px) {
  .vi-auth-main {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .vi-auth-main *,
  .vi-auth-main *::before,
  .vi-auth-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --mirmc-border: #c8d0de;
    --mirmc-border-strong: #aeb9ca;
    --mirmc-muted: #556178;
  }

  .vi-auth-main :where([class*="text-[#64708A]"], [class*="text-[#7A8499]"]) {
    color: #4e5b73 !important;
  }
}

@media (forced-colors: active) {
  :where(button, a[href], input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid Highlight;
  }

  .integral-dashboard :where(section, article, div) {
    forced-color-adjust: auto;
  }
}