/* MIRMC Academia · Platform Experience v3
   Adaptive density and mobile ergonomics layered after Platform Visual Refresh v2.
   This file intentionally contains no business logic. */

:root {
  --mirmc-mobile-gap: 0.7rem;
  --mirmc-mobile-card-radius: 1.05rem;
  --mirmc-mobile-card-padding: 0.85rem;
  --mirmc-mobile-stat-min-height: 6rem;
}

/* Primary portal dashboards: the first metric band after the hero should never
   become a vertical tunnel on a phone. Only grids with >=4 direct items qualify. */
@media (max-width: 639px) {
  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mirmc-mobile-gap) !important;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) > :where(a, article, div) {
    min-width: 0;
    min-height: var(--mirmc-mobile-stat-min-height);
    border-radius: var(--mirmc-mobile-card-radius) !important;
    padding: var(--mirmc-mobile-card-padding) !important;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) :where(p, span)[class*="text-2xl"],
  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) :where(p, span)[class*="text-3xl"] {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }

  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) :where(p, span)[class*="text-xs"] {
    line-height: 1.25 !important;
  }

  /* Dashboard rhythm: reduce dead vertical space without touching nested content. */
  [data-portal-area] .vi-auth-main > div[class*="space-y-7"] > :not([hidden]) ~ :not([hidden]),
  [data-portal-area] .vi-auth-main > div[class*="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;
  }

  /* Hero actions become thumb-friendly and predictable. */
  [data-portal-area] .vi-auth-main > div > section:first-child :where(a, button)[class*="rounded-2xl"],
  [data-portal-area] .vi-auth-main > div > section:first-child :where(a, button)[class*="rounded-xl"] {
    min-height: 2.85rem;
  }

  /* Rows with trailing actions should preserve readable text rather than allowing
     the action to squeeze the content to a few characters. */
  .vi-auth-main li[class*="flex"][class*="items-center"] > :where(div)[class*="min-w-0"] {
    min-width: 0;
  }

  .vi-auth-main li[class*="flex"][class*="items-center"] > a[class*="shrink-0"] {
    min-height: 2.5rem;
    padding-inline: 0.7rem;
  }

  /* Compact authenticated chrome. The floating dock already provides the primary
     navigation, so the header should privilege title + essential status. */
  [data-portal-area] header[class*="sticky"] > div[class*="min-h"] {
    min-height: 4rem !important;
    gap: 0.55rem !important;
    padding-inline: 0.75rem !important;
  }

  [data-portal-area] header[class*="sticky"] h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  /* Floating decision intelligence sits above the PWA dock without covering the
     system browser bar or safe-area inset. */
  [aria-label="Inteligencia de decisión académica v6.7"] {
    max-width: calc(100vw - 1.5rem);
  }

  /* Sonner should not dominate narrow screens. */
  [data-sonner-toaster] {
    max-width: calc(100vw - 1.5rem) !important;
  }
}

/* Tablet: prioritize two-column operational reading over overly wide cards. */
@media (min-width: 640px) and (max-width: 1023px) {
  [data-portal-area] .vi-auth-main > div > section:first-child + section[class*="grid"]:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop surfaces gain subtle depth hierarchy while preserving each feature's
   own semantic palette. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .vi-auth-main :where(section, article)[class*="bg-white"][class*="border"]:hover {
    border-color: color-mix(in srgb, var(--portal-accent) 16%, var(--mirmc-border));
  }

  .vi-auth-main > div > section[class*="grid"] > :where(a, article)[class*="shadow-sm"]:hover {
    transform: translateY(-1px);
  }
}

/* Long operational pages should preserve anchor visibility beneath sticky chrome. */
.vi-auth-main :where(section, article, [id]) {
  scroll-margin-top: 5.75rem;
}

/* Numeric dashboards are easier to scan when digits do not shift width. */
.vi-auth-main :where([class*="font-black"], [class*="font-extrabold"]):has(> span),
.vi-auth-main :where(.tabular-nums) {
  font-variant-numeric: tabular-nums;
}

/* Safe-area support for standalone/PWA mode. */
@media (display-mode: standalone) {
  [data-portal-area] header[class*="sticky"] {
    padding-top: env(safe-area-inset-top);
  }

  .vi-auth-main {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  [aria-label="Inteligencia de decisión académica v6.7"] * {
    transition: none !important;
  }
}