/* Universidad Internacional — capa visual premium 2026
   Complementa el sistema existente sin alterar flujos ni permisos. */

:root {
  --ui-red: #c5192d;
  --ui-red-dark: #7e0f1c;
  --ui-red-deep: #4d0811;
  --ui-red-soft: #fff1f2;
  --ui-ink: #191417;
  --ui-muted: #675e63;
  --ui-line: #e9e2e4;
  --ui-canvas: #f6f4f5;
  --ui-surface: #ffffff;
  --ui-gold: #c99a3d;
  --ui-radius: 18px;
  --ui-shadow: 0 18px 50px -34px rgba(40, 8, 15, .48), 0 2px 9px rgba(40, 8, 15, .05);
  --ui-shadow-hover: 0 24px 54px -30px rgba(78, 8, 18, .38), 0 4px 14px rgba(40, 8, 15, .07);
}

/* ---------- Accesos ---------- */
body.legacy-login,
body.portal-login {
  background: #f7f5f5;
  color: var(--ui-ink);
}

.legacy-login .admin-brand-panel,
.portal-login .portal-visual {
  isolation: isolate;
  background-color: var(--ui-red-deep) !important;
  background-position: center !important;
  background-size: cover !important;
}

.legacy-login .admin-brand-panel {
  background-image:
    linear-gradient(90deg, rgba(62, 5, 14, .94) 0%, rgba(91, 8, 21, .82) 44%, rgba(91, 8, 21, .28) 100%),
    url("/static/img/premium/login-admin-premium-v2.jpg") !important;
}

.docente-login .portal-visual {
  background-image:
    linear-gradient(90deg, rgba(40, 5, 11, .76) 0%, rgba(73, 7, 18, .48) 45%, rgba(20, 8, 10, .08) 100%),
    url("/static/img/premium/login-docente-premium-v2.jpg") !important;
}

.estudiante-login .portal-visual {
  background-image:
    linear-gradient(90deg, rgba(67, 6, 16, .92) 0%, rgba(113, 10, 27, .68) 42%, rgba(39, 12, 18, .08) 100%),
    url("/static/img/premium/login-estudiante-premium-v2.jpg") !important;
}

.legacy-login .admin-brand-panel::before,
.portal-login .portal-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.15), transparent 28%),
    linear-gradient(180deg, transparent 58%, rgba(23,2,7,.45));
  pointer-events: none;
}

.legacy-login .admin-brand-panel::after,
.portal-login .portal-visual::after {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(3px);
}

.legacy-login .admin-logo,
.portal-login .portal-logo {
  filter: drop-shadow(0 8px 24px rgba(22,0,5,.28));
}

.legacy-login .admin-copy,
.portal-login .portal-copy {
  text-shadow: 0 3px 22px rgba(30, 0, 7, .28);
}

.legacy-login .admin-kicker,
.portal-login .portal-kicker {
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

.legacy-login .admin-form-panel,
.portal-login .portal-form-wrap {
  background:
    radial-gradient(circle at 100% 0, rgba(197,25,45,.08), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #faf7f8 100%) !important;
}

.legacy-login .login-box,
.portal-login .portal-form-card {
  border: 1px solid rgba(126,15,28,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px -46px rgba(78,8,18,.58), 0 10px 30px -24px rgba(25,20,23,.24) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
}

.legacy-login .login-badge {
  color: var(--ui-red-dark) !important;
  background: var(--ui-red-soft) !important;
  border-color: #f4cbd1 !important;
}

.legacy-login .login-box h2,
.portal-login .portal-form-card h2 {
  color: var(--ui-ink) !important;
  letter-spacing: -.035em !important;
}

.legacy-login .form-control,
.portal-login .form-control {
  min-height: 52px;
  border-radius: 13px !important;
  border-color: #ddd3d6 !important;
  background: #fbfafb !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.legacy-login .form-control:focus,
.portal-login .form-control:focus {
  background: #fff !important;
  border-color: var(--ui-red) !important;
  box-shadow: 0 0 0 4px rgba(197,25,45,.12) !important;
}

.legacy-login .btn-login,
.portal-login .btn-login {
  min-height: 52px;
  border-radius: 13px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ui-red-dark), var(--ui-red)) !important;
  box-shadow: 0 14px 30px -16px rgba(126,15,28,.8) !important;
  font-weight: 750 !important;
}

.legacy-login .btn-login:hover,
.portal-login .btn-login:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 36px -16px rgba(126,15,28,.82) !important;
}

/* ---------- Backoffice ---------- */
body:not(.legacy-login):not(.portal-login) {
  background:
    radial-gradient(circle at 78% -10%, rgba(197,25,45,.07), transparent 27rem),
    var(--ui-canvas) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar {
  background: linear-gradient(180deg, #590a15 0%, #3e0710 100%) !important;
  border-right: 0 !important;
  box-shadow: 10px 0 36px -28px rgba(45,3,11,.8) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar > .p-3.border-bottom,
body:not(.legacy-login):not(.portal-login) .sidebar > div.p-3 {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.11) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-section {
  color: rgba(255,255,255,.68) !important;
  font-size: .68rem !important;
  letter-spacing: .11em !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-link {
  color: rgba(255,255,255,.78) !important;
  border-radius: 11px !important;
  margin-inline: 10px !important;
  width: calc(100% - 20px) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-link i {
  color: rgba(255,255,255,.62) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.11)) !important;
  box-shadow: inset 3px 0 0 #ff8b98, inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .nav-link.active i {
  color: #fff !important;
}

body:not(.legacy-login):not(.portal-login) .sidebar .btn[type="submit"] {
  color: rgba(255,255,255,.78) !important;
  border-color: rgba(255,255,255,.18) !important;
}

body:not(.legacy-login):not(.portal-login) .topbar {
  min-height: 66px !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(126,15,28,.08) !important;
  box-shadow: 0 8px 30px -28px rgba(53,5,14,.5) !important;
  backdrop-filter: blur(18px);
}

body:not(.legacy-login):not(.portal-login) .content,
body:not(.legacy-login):not(.portal-login) main {
  color: var(--ui-ink);
}

body:not(.legacy-login):not(.portal-login) .card {
  border: 1px solid rgba(126,15,28,.09) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
  background: rgba(255,255,255,.96) !important;
}

body:not(.legacy-login):not(.portal-login) .metric-card {
  overflow: hidden;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body:not(.legacy-login):not(.portal-login) .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ui-red), #ed6676);
}

body:not(.legacy-login):not(.portal-login) .metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(197,25,45,.2) !important;
  box-shadow: var(--ui-shadow-hover) !important;
}

body:not(.legacy-login):not(.portal-login) .kpi-icon {
  border-radius: 12px !important;
}

body:not(.legacy-login):not(.portal-login) .card-header {
  border-bottom-color: var(--ui-line) !important;
  background: rgba(255,255,255,.8) !important;
}

body:not(.legacy-login):not(.portal-login) .table thead th {
  background: #f8f5f6 !important;
  color: #5d4c52 !important;
  border-bottom-color: #e8dfe2 !important;
  letter-spacing: .045em;
}

body:not(.legacy-login):not(.portal-login) .table > tbody > tr:hover > * {
  background: #fff6f7 !important;
}

body:not(.legacy-login):not(.portal-login) .btn-primary {
  border-color: var(--ui-red) !important;
  background: linear-gradient(135deg, var(--ui-red-dark), var(--ui-red)) !important;
  box-shadow: 0 10px 22px -14px rgba(126,15,28,.7);
}

.premium-admin-hero {
  min-height: 238px;
  margin-bottom: 22px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(65,5,15,.96) 0%, rgba(100,9,24,.84) 43%, rgba(80,8,20,.24) 100%),
    url("/static/img/premium/login-admin-premium-v2.jpg") center 43% / cover no-repeat;
  box-shadow: 0 26px 60px -35px rgba(71,5,18,.72);
}

.premium-admin-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -50px;
  top: -80px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
}

.premium-admin-hero__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
  color: #fff;
}

.premium-admin-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.premium-admin-hero h1 {
  margin: 18px 0 9px;
  color: #fff !important;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

.premium-admin-hero p {
  max-width: 530px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.65;
}

.premium-admin-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.premium-admin-hero__actions .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  font-weight: 700;
}

.premium-admin-hero__actions .btn-light {
  color: var(--ui-red-dark);
  border-color: #fff;
  background: #fff;
}

.premium-admin-hero__actions .btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.06);
}

/* ---------- Portales internos ---------- */
.p-theme {
  --bg-main: #f6f3f4 !important;
  --bg-subtle: #fbf8f9 !important;
  --border: #e8dfe2 !important;
  --text-primary: var(--ui-ink) !important;
  --text-secondary: #574b50 !important;
  --text-muted: var(--ui-muted) !important;
  --brand: var(--ui-red) !important;
  --brand-dark: var(--ui-red-dark) !important;
}

.p-theme .p-sidebar {
  background: linear-gradient(180deg, #630b18 0%, #410811 100%) !important;
  box-shadow: 10px 0 36px -28px rgba(45,3,11,.86) !important;
}

.p-theme .p-topbar {
  height: 64px !important;
  background: rgba(255,255,255,.9) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(126,15,28,.08) !important;
  backdrop-filter: blur(18px);
}

.p-theme .p-content {
  background:
    radial-gradient(circle at 85% -10%, rgba(197,25,45,.07), transparent 26rem),
    var(--ui-canvas) !important;
}

.p-theme .card,
.p-theme .student-kpi,
.p-theme .teacher-kpi,
.p-theme .action-card {
  border: 1px solid rgba(126,15,28,.09) !important;
  border-radius: 17px !important;
  box-shadow: var(--ui-shadow) !important;
  background: rgba(255,255,255,.96) !important;
}

.p-theme .action-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.p-theme .action-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(197,25,45,.22) !important;
  box-shadow: var(--ui-shadow-hover) !important;
}

.p-theme .student-hero,
.p-theme .teacher-hero {
  min-height: 270px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 28px 62px -38px rgba(66,5,17,.82) !important;
}

.p-theme .student-hero-bg,
.p-theme .teacher-hero-bg {
  inset: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.p-theme .student-hero-bg {
  background:
    linear-gradient(90deg, rgba(67,6,16,.96) 0%, rgba(111,9,26,.78) 44%, rgba(42,9,15,.12) 100%),
    url("/static/img/premium/login-estudiante-premium-v2.jpg") center 46% / cover no-repeat !important;
}

.p-theme .teacher-hero-bg {
  background:
    linear-gradient(90deg, rgba(54,5,14,.94) 0%, rgba(85,8,20,.73) 45%, rgba(29,8,12,.12) 100%),
    url("/static/img/premium/login-docente-premium-v2.jpg") center 48% / cover no-repeat !important;
}

.p-theme .student-hero-content,
.p-theme .teacher-hero-content {
  position: relative;
  z-index: 2;
  min-height: 270px;
  align-items: flex-end !important;
  padding: clamp(24px, 4vw, 42px) !important;
}

.p-theme .student-hero-avatar,
.p-theme .teacher-hero-avatar {
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
  backdrop-filter: blur(12px);
}

.p-theme .student-hero-title,
.p-theme .teacher-hero-title,
.p-theme .student-hero-eyebrow,
.p-theme .teacher-hero-eyebrow {
  color: #fff !important;
  text-shadow: 0 3px 18px rgba(30,0,7,.28);
}

.p-theme .hero-chip {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(10px);
}

.p-theme .section-title h3 {
  color: var(--ui-ink) !important;
}

.p-theme .section-bar {
  background: linear-gradient(180deg, var(--ui-red-dark), var(--ui-red)) !important;
}

@media (max-width: 767px) {
  .legacy-login .admin-brand-panel,
  .portal-login .portal-visual {
    min-height: 330px !important;
    background-position: 62% center !important;
  }

  .legacy-login .admin-brand-panel {
    background-image:
      linear-gradient(90deg, rgba(62,5,14,.95), rgba(94,8,22,.66)),
      url("/static/img/premium/login-admin-premium-v2.jpg") !important;
  }

  .premium-admin-hero {
    min-height: 260px;
    background-position: 62% center;
  }

  .premium-admin-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(56,4,14,.2);
  }

  .p-theme .student-hero,
  .p-theme .teacher-hero,
  .p-theme .student-hero-content,
  .p-theme .teacher-hero-content {
    min-height: 300px !important;
  }

  .p-theme .student-hero-bg,
  .p-theme .teacher-hero-bg {
    background-position: 64% center !important;
  }

  .p-theme .student-hero-content,
  .p-theme .teacher-hero-content {
    align-items: flex-end !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}