/* ❤️‍🔥 PULSAR BANNER - TEMAS DE HORÁRIO v15.2 */

/* ====================================
   BOTÃO DE ALTERNÂNCIA DE HORÁRIO
==================================== */
.banner-time-toggle {
  position: fixed;
  top: 80px;
  right: 30px;
  z-index: 1001; /* Acima da navegação (nav tem z-index: 1000) */
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  padding: 8px;
  border-radius: 40px;
  border: 2px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6), 0 0 50px rgba(142, 45, 226, 0.3);
}

.time-btn {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.time-btn.active {
  border-color: #00ffff;
  background: rgba(0, 255, 255, 0.25);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
  animation: activePulse 2s infinite;
}

@keyframes activePulse {
  0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.7); }
  50% { box-shadow: 0 0 35px rgba(0, 255, 255, 1); }
}

/* ====================================
   TEMA DIA (6h - 17h)
==================================== */
.banner-3d[data-theme="day"] {
  background: radial-gradient(
    ellipse at center,
    #e0f7ff 0%,
    #b8e6ff 30%,
    #87ceeb 60%,
    #5dade2 100%
  ) !important;
}

.banner-3d[data-theme="day"] .overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(135, 206, 235, 0.2) 50%,
    rgba(93, 173, 226, 0.4) 100%
  ) !important;
}

.banner-3d[data-theme="day"] .building {
  background: linear-gradient(to top, 
    rgba(240, 240, 250, 0.95) 0%, 
    rgba(220, 230, 255, 0.90) 50%,
    rgba(200, 220, 255, 0.85) 100%
  ) !important;
  border-color: rgba(93, 173, 226, 0.4) !important;
  box-shadow: 
    0 0 20px rgba(93, 173, 226, 0.3),
    0 -5px 30px rgba(255, 255, 255, 0.4),
    inset 0 0 40px rgba(255, 255, 255, 0.3) !important;
}

.banner-3d[data-theme="day"] .building.iconic {
  filter: brightness(1.1) saturate(1.1) !important;
}

.banner-3d[data-theme="day"] .building::before {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 16px,
      rgba(0, 100, 200, 0.4) 16px,
      rgba(0, 100, 200, 0.4) 18px,
      transparent 18px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 9px,
      rgba(0, 100, 200, 0.4) 9px,
      rgba(0, 100, 200, 0.4) 11px,
      transparent 11px,
      transparent 20px
    ) !important;
  box-shadow: inset 0 0 30px rgba(0, 100, 200, 0.15) !important;
}

.banner-3d[data-theme="day"] .building.iconic::after {
  opacity: 0.5 !important;
}

.banner-3d[data-theme="day"] .banner-title h1 {
  background: linear-gradient(135deg, #2874A6, #5DADE2, #3498DB) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.banner-3d[data-theme="day"] .banner-title p {
  color: #2874A6 !important;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

.banner-3d[data-theme="day"] .heart-pulse {
  filter: drop-shadow(0 0 25px rgba(255, 100, 150, 0.7)) 
          drop-shadow(0 0 45px rgba(255, 150, 200, 0.5)) !important;
}

/* ====================================
   TEMA SUNSET (17h - 19h)
==================================== */
.banner-3d[data-theme="sunset"] {
  background: radial-gradient(
    ellipse at center,
    #FF6B6B 0%,
    #FF8E53 20%,
    #FE6B8B 40%,
    #8E2DE2 70%,
    #4A00E0 100%
  ) !important;
}

.banner-3d[data-theme="sunset"] .overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(255, 107, 107, 0.3) 0%,
    rgba(255, 142, 83, 0.4) 30%,
    rgba(254, 107, 139, 0.3) 60%,
    rgba(142, 45, 226, 0.5) 100%
  ) !important;
}

.banner-3d[data-theme="sunset"] .building {
  background: linear-gradient(to top, 
    rgba(50, 20, 60, 0.95) 0%, 
    rgba(80, 30, 80, 0.88) 50%,
    rgba(120, 50, 100, 0.80) 100%
  ) !important;
  border-color: rgba(255, 107, 107, 0.5) !important;
  box-shadow: 
    0 0 25px rgba(255, 107, 107, 0.4),
    0 -8px 40px rgba(254, 107, 139, 0.3),
    inset 0 0 45px rgba(142, 45, 226, 0.3) !important;
}

.banner-3d[data-theme="sunset"] .building.iconic {
  filter: brightness(1.25) saturate(1.4) !important;
}

.banner-3d[data-theme="sunset"] .building::before {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 16px,
      rgba(255, 150, 100, 0.7) 16px,
      rgba(255, 150, 100, 0.7) 18px,
      transparent 18px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 9px,
      rgba(255, 150, 100, 0.7) 9px,
      rgba(255, 150, 100, 0.7) 11px,
      transparent 11px,
      transparent 20px
    ) !important;
  box-shadow: inset 0 0 30px rgba(255, 100, 150, 0.2) !important;
}

.banner-3d[data-theme="sunset"] .building.iconic::after {
  opacity: 0.85 !important;
}

.banner-3d[data-theme="sunset"] .banner-title h1 {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53, #FE6B8B) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.6) !important;
}

.banner-3d[data-theme="sunset"] .banner-title p {
  color: #FFE5B4 !important;
  text-shadow: 0 0 15px rgba(255, 142, 83, 0.8) !important;
}

.banner-3d[data-theme="sunset"] .heart-pulse {
  filter: drop-shadow(0 0 30px rgba(255, 107, 107, 0.8)) 
          drop-shadow(0 0 55px rgba(254, 107, 139, 0.6))
          drop-shadow(0 0 80px rgba(255, 142, 83, 0.4)) !important;
}

/* ====================================
   TEMA NOITE (19h - 6h) - PADRÃO
==================================== */
.banner-3d[data-theme="night"] {
  background: radial-gradient(
    ellipse at center,
    #1a0033 0%,
    #0a001a 40%,
    #000010 100%
  ) !important;
}

.banner-3d[data-theme="night"] .overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(26, 0, 51, 0.4) 0%,
    rgba(142, 45, 226, 0.15) 40%,
    rgba(255, 0, 102, 0.2) 80%,
    rgba(0, 0, 16, 0.6) 100%
  ) !important;
}

/* Noite usa estilos padrão já definidos em pulsar-banner.css e pulsar-banner-enhanced.css */

.banner-3d[data-theme="night"] .banner-title h1 {
  background: linear-gradient(135deg, #00FFFF, #8E2DE2, #FF00FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 30px rgba(142, 45, 226, 0.6) !important;
}

.banner-3d[data-theme="night"] .banner-title p {
  color: #FFFFFF !important;
  text-shadow: 0 0 20px rgba(142, 45, 226, 0.8) !important;
}

/* ====================================
   RESPONSIVIDADE
==================================== */
@media (max-width: 768px) {
  .banner-time-toggle {
    top: 70px;
    right: 20px;
    gap: 5px;
    padding: 7px;
  }
  
  .time-btn {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .banner-time-toggle {
    top: 65px;
    right: 15px;
    gap: 4px;
    padding: 6px;
  }
  
  .time-btn {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }
}

/* ====================================
   TRANSIÇÕES SUAVES ENTRE TEMAS
==================================== */
.banner-3d,
.banner-3d .overlay-gradient,
.banner-3d .building,
.banner-3d .building::before,
.banner-3d .banner-title h1,
.banner-3d .banner-title p,
.banner-3d .heart-pulse {
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Modo de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .banner-3d,
  .banner-3d .overlay-gradient,
  .banner-3d .building,
  .banner-3d .building::before,
  .banner-3d .banner-title h1,
  .banner-3d .banner-title p,
  .banner-3d .heart-pulse {
    transition: none !important;
  }
}