/* ============================================================
   V Jornadas Académicas & MATSDA 2026 — CeL UAEH
   Restyle moderno / colorido — audiencia 18–25 años
   Selectores tomados del HTML real de /events/ja_2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  --ja-purple:      #7C3AED;
  --ja-purple-dark: #5B21B6;
  --ja-pink:        #EC4899;
  --ja-orange:      #FB923C;
  --ja-yellow:      #FDE047;
  --ja-cyan:        #22D3EE;
  --ja-blue:        #3B82F6;
  --ja-green:       #34D399;

  --ja-bg-soft:     #F6F4FF;
  --ja-surface:     #FFFFFF;
  --ja-surface-2:   #EFEAFE;

  --ja-text:        #1B1530;
  --ja-text-soft:   #5B5470;

  --ja-gradient-main: linear-gradient(135deg, var(--ja-purple) 0%, var(--ja-pink) 55%, var(--ja-orange) 100%);
  --ja-gradient-dark: linear-gradient(160deg, #1A1033 0%, #3B1668 45%, #7C3AED 100%);

  --ja-radius-md: 20px;
  --ja-radius-lg: 28px;
  --ja-radius-pill: 999px;

  --ja-shadow-sm: 0 4px 14px rgba(124, 58, 237, .14);
  --ja-shadow-md: 0 12px 32px rgba(124, 58, 237, .20);
  --ja-shadow-lg: 0 20px 50px rgba(91, 33, 182, .28);

  --ja-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ja-font-display: 'Space Grotesk', var(--ja-font);
}

/* ---------- 2. Base ---------- */
body.bg-light{
  background: var(--ja-bg-soft) !important;
  color: var(--ja-text) !important;
  font-family: var(--ja-font) !important;
  -webkit-font-smoothing: antialiased;
}

.display-8, .display-14, h1, h2, h3, h4, h5, .card-title, .fs-3{
  font-family: var(--ja-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

a{ color: var(--ja-purple); }
a:hover{ color: var(--ja-pink); }

::selection{ background: var(--ja-pink); color: #fff; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--ja-bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--ja-gradient-main); border-radius: var(--ja-radius-pill); }

/* ---------- 3. Navbar ---------- */
nav.navbar.fixed-top{
  background: rgba(15, 11, 30, .92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(0,0,0,.25) !important;
}

nav.navbar .navbar-brand span,
nav.navbar .desktop-nav-links .nav-link{
  color: #EDE9FE !important;
  font-weight: 500;
}
nav.navbar .desktop-nav-links .nav-link:hover{
  color: var(--ja-yellow) !important;
}
nav.navbar .navbar-brand img{
  filter: drop-shadow(0 0 8px rgba(124,58,237,.6));
}

.custom-toggler{
  color: #fff !important;
}

/* Mobile sidebar */
.offcanvas.offcanvas-start{
  background: var(--ja-gradient-dark) !important;
  color: #fff !important;
}
.offcanvas .sidebar-nav .nav-link{
  color: #EDE9FE !important;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--ja-radius-md);
  margin: 4px 12px;
  transition: background .2s ease;
}
.offcanvas .sidebar-nav .nav-link:hover{
  background: rgba(255,255,255,.12);
  color: var(--ja-yellow) !important;
}
.offcanvas .btn-outline-primary{
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}

/* ---------- 4. Hero ---------- */
.gradient-aurora-waves{
  background: var(--ja-gradient-dark) !important;
  position: relative;
  overflow: hidden;
}
.gradient-aurora-waves::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(236,72,153,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(34,211,238,.30), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(251,146,60,.22), transparent 55%);
  pointer-events: none;
}
.gradient-aurora-waves > *{ position: relative; z-index: 1; }

#event-hero-info .fs-6{
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff !important;
  padding: 6px 16px;
  border-radius: var(--ja-radius-pill);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .75rem !important;
}

#event-hero-info .display-8{
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  text-shadow: 0 4px 24px rgba(0,0,0,.3);
  margin: 10px 0;
}

#event-hero-info .fs-3{
  color: #E9D5FF !important;
  font-weight: 500 !important;
  font-family: var(--ja-font) !important;
}

#event-hero-info .fs-5{
  color: var(--ja-yellow) !important;
  font-weight: 700 !important;
  font-family: var(--ja-font-display) !important;
}
#event-hero-info .fs-5 svg{
  color: var(--ja-yellow) !important;
}

/* Logo del evento flotante */
.gradient-aurora-waves .bg-white.shadow-3{
  border-radius: var(--ja-radius-lg) !important;
  box-shadow: var(--ja-shadow-lg) !important;
  border: 4px solid rgba(255,255,255,.25) !important;
}

.gradient-aurora-waves .fs-4{
  color: #fff !important;
  font-weight: 600 !important;
  font-family: var(--ja-font-display) !important;
}

/* CTA buttons in hero */
.gradient-aurora-waves .btn-gradient-ocean{
  background: var(--ja-gradient-main) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 700 !important;
  box-shadow: var(--ja-shadow-md) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.gradient-aurora-waves .btn-gradient-ocean:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--ja-shadow-lg) !important;
  filter: brightness(1.06);
}

.gradient-aurora-waves .btn-success{
  background: #fff !important;
  color: var(--ja-purple-dark) !important;
  border: none !important;
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.gradient-aurora-waves .btn-success:hover{
  background: var(--ja-yellow) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--ja-shadow-lg) !important;
}

/* ---------- 5. Tabs Información / Programa ---------- */
.nav-tabs{
  border: none !important;
  background: var(--ja-surface-2);
  border-radius: var(--ja-radius-pill);
  padding: 6px;
  gap: 6px;
  display: inline-flex;
}
.nav-tabs .nav-item .nav-link{
  border: none !important;
  border-radius: var(--ja-radius-pill) !important;
  color: var(--ja-text-soft) !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  transition: all .2s ease;
}
.nav-tabs .nav-item .nav-link.active{
  background: var(--ja-gradient-main) !important;
  color: #fff !important;
  box-shadow: var(--ja-shadow-sm);
}
.nav-tabs .nav-item .nav-link:not(.active):hover{
  background: rgba(124,58,237,.08);
  color: var(--ja-purple) !important;
}

/* ---------- 6. Tarjetas generales (.card) ---------- */
.cards .card{
  background: var(--ja-surface) !important;
  border: none !important;
  border-radius: var(--ja-radius-md) !important;
  box-shadow: var(--ja-shadow-sm) !important;
  padding: 22px !important;
  margin-bottom: 20px !important;
}
.cards .card .card-title{
  color: var(--ja-purple-dark) !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cards .card .card-title svg{
  color: var(--ja-pink) !important;
}
.cards .card .card-body strong{
  color: var(--ja-pink);
}
.cards .card .card-body h4{
  color: var(--ja-purple-dark) !important;
  margin-top: 18px;
}
.cards .card .btn-primary{
  background: var(--ja-gradient-main) !important;
  border: none !important;
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 700 !important;
  box-shadow: var(--ja-shadow-sm) !important;
  transition: transform .18s ease !important;
}
.cards .card .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--ja-shadow-md) !important;
}

/* Sidebar: compartir / preguntas / contador */
.col-lg-4 .cards .card{
  text-align: center;
}
.col-lg-4 .cards .card .btn-primary.rounded{
  border-radius: var(--ja-radius-pill) !important;
  text-align: left;
  margin-bottom: 4px;
  background: var(--ja-gradient-main) !important;
  transition: transform .18s ease;
}
.col-lg-4 .cards .card .btn-primary.rounded:hover{
  transform: translateX(4px) scale(1.02);
}
.col-lg-4 .cards .card .text-muted.fs-5{
  font-family: var(--ja-font-display) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  background: var(--ja-gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- 7. Botones de fecha / hora (Programa) ---------- */
.date-btn, .hour-btn{
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-width: 2px !important;
  transition: all .2s ease !important;
}

.date-btn.btn-outline-primary, .hour-btn.btn-outline-primary{
  color: var(--ja-purple-dark) !important;
  border-color: var(--ja-surface-2) !important;
  background: var(--ja-surface) !important;
}
.date-btn.btn-outline-primary:hover, .hour-btn.btn-outline-primary:hover{
  background: var(--ja-purple) !important;
  border-color: var(--ja-purple) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.date-btn.btn-primary, .hour-btn.btn-primary{
  background: var(--ja-gradient-main) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--ja-shadow-sm) !important;
}

.reset-hour-btn{
  background: var(--ja-surface-2) !important;
  color: var(--ja-purple-dark) !important;
  border-color: var(--ja-surface-2) !important;
}

#program-date{
  color: var(--ja-pink) !important;
  font-weight: 800 !important;
}

/* ---------- 8. Tarjetas de sesión (.card-style) ---------- */
.program-grid{
  gap: 1.25rem !important;
}

.card-style{
  background: var(--ja-surface) !important;
  border-radius: var(--ja-radius-md) !important;
  box-shadow: var(--ja-shadow-sm) !important;
  border: none !important;
  border-left: 6px solid var(--ja-cyan) !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.card-style:hover{
  transform: translateY(-4px);
  box-shadow: var(--ja-shadow-md) !important;
}

/* Registration / Ceremony / Reception (bg-gradient-ocean, full width) */
.card-style.bg-gradient-ocean{
  background: var(--ja-gradient-main) !important;
  border-left: none !important;
  color: #fff !important;
}
.card-style.bg-gradient-ocean *{ color: #fff !important; }
.card-style.bg-gradient-ocean svg{ color: #fff !important; }

/* Ponencia / Taller badges (bg-gradient-modern) */
.badge.bg-gradient-modern{
  background: linear-gradient(135deg, var(--ja-orange), var(--ja-pink)) !important;
  color: #fff !important;
  border-radius: var(--ja-radius-pill) !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

/* Speaker badges (bg-gradient-aurora) */
.badge.bg-gradient-aurora{
  background: linear-gradient(135deg, var(--ja-purple), var(--ja-blue)) !important;
  color: #fff !important;
  border-radius: var(--ja-radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  margin: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Session title */
.card-style .fs-5.fw-bold{
  color: var(--ja-text) !important;
  font-family: var(--ja-font-display) !important;
  font-weight: 700 !important;
}

/* Time badge top-right (badge bg-primary) */
.card-style .badge.bg-primary{
  background: var(--ja-purple) !important;
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}
.card-style.bg-gradient-ocean .badge.bg-primary{
  background: rgba(255,255,255,.25) !important;
}

/* Room / location line */
.card-style .mb-2 svg.fa-location-dot,
.card-style .mb-2 svg.fa-building{
  color: var(--ja-pink) !important;
}

/* Session number */
.card-style .text-muted.fs-8{
  color: var(--ja-purple) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Login-to-view-link button */
.card-style .btn-light{
  background: var(--ja-surface-2) !important;
  color: var(--ja-purple-dark) !important;
  border: none !important;
  border-radius: var(--ja-radius-pill) !important;
  font-weight: 600 !important;
}

/* Status bars: Finalizado / Por iniciar / En curso */
.card-style .status-bar.bg-danger{
  background: #E5E7EB !important;
  color: #6B7280 !important;
}
.card-style .status-bar.bg-warning{
  background: linear-gradient(90deg, var(--ja-yellow), var(--ja-orange)) !important;
  color: #7A3E00 !important;
}
.card-style .status-bar.bg-success{
  background: linear-gradient(90deg, var(--ja-green), var(--ja-cyan)) !important;
  color: #04372B !important;
  font-weight: 700;
  animation: ja-pulse 1.8s ease-in-out infinite;
}
@keyframes ja-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(34, 211, 238, .5); }
  50%{ box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); }
}

.card-style.opacity-50{ opacity: .55 !important; }

/* ---------- 9. Botones "compartir" en modal openLocation / sweetalert ---------- */
.swal2-popup{
  border-radius: var(--ja-radius-lg) !important;
  font-family: var(--ja-font) !important;
}
.swal2-title{
  font-family: var(--ja-font-display) !important;
  color: var(--ja-purple-dark) !important;
}

/* ---------- 10. Footer ---------- */
#footer.bg-light{
  background: var(--ja-gradient-dark) !important;
  color: #E9D5FF !important;
  border-radius: var(--ja-radius-lg) var(--ja-radius-lg) 0 0;
  margin-top: 60px !important;
}
#footer h4{
  color: var(--ja-cyan) !important;
  font-weight: 700 !important;
}
#footer a{
  color: #fff !important;
}
#footer a:hover{
  color: var(--ja-yellow) !important;
}
#footer .footer-info p{
  color: #D8CCFB !important;
}
#footer .social-links a svg{
  color: #fff !important;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  padding: 8px;
  width: 36px !important;
  height: 36px !important;
  transition: transform .2s ease, background .2s ease;
}
#footer .social-links a:hover svg{
  background: var(--ja-gradient-main);
  transform: scale(1.15) rotate(-6deg);
}
#footer .copyright, #footer .copyright strong{
  color: #fff !important;
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 767px){
  #event-hero-info .display-8{ font-size: 1.8rem !important; }
  .nav-tabs{ width: 100%; justify-content: center; }
  .date-btn, .hour-btn{ padding: 8px 14px !important; font-size: .85rem; }
}

/* ---------- 12. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

#hero-card {
    min-height: calc(100vh - 70px) !important;
}

#event-hero-logo {
    padding: 0 !important;
}

#event-hero-logo > div > div {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 70vw !important;
    max-width: 620px !important;
}

#event-hero-logo > div > div > img {
    padding: 0 !important;
}