/**
 * IUSLEAD — Shell premium: splash, login→panel, focus, topbar
 */

/* Splash alineado a login */
#splash-screen {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(61, 122, 184, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(201, 146, 63, 0.2), transparent 50%),
    linear-gradient(180deg, #0a1628 0%, #0d1f35 45%, #060d18 100%);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.splash-logo-mark {
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-l));
  color: var(--brand-gold);
  box-shadow: var(--sh-gold);
}

.splash-title {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

.splash-bar {
  background: linear-gradient(90deg, var(--brand-navy-l), var(--brand-gold));
}

/* Entrada del panel tras login */
body.panel-entering #content,
body.panel-entering #dock-wrapper,
body.panel-entering #topbar {
  animation: panelEnter var(--duration-slow) var(--ease-out) forwards;
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body.auth-locked #content,
body.auth-locked #dock-wrapper,
body.auth-locked #topbar {
  opacity: 0;
}

.auth-overlay {
  transition: opacity var(--duration-normal) var(--ease-out);
}

.auth-overlay.show {
  animation: authFadeIn var(--duration-normal) var(--ease-out);
}

.auth-overlay.panel-exiting {
  opacity: 0;
  pointer-events: none;
}

@keyframes authFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Topbar glass premium */
#topbar {
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(9, 11, 16, 0.88) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(201, 160, 85, 0.08), var(--elevation-2);
}

.topbar-brand-name {
  font-family: var(--font-display);
}

.topbar-user-avatar {
  background: linear-gradient(135deg, var(--brand-navy-l), var(--brand-gold)) !important;
}

.section-title {
  font-family: var(--font-display);
}

/* Focus accesible global */
:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  #splash-screen,
  body.panel-entering #content,
  body.panel-entering #dock-wrapper,
  body.panel-entering #topbar,
  .auth-overlay.show {
    animation: none !important;
    transition: none !important;
  }
}