/* ============================================================
   RÁDIO ATIVIDADE ESPÍRITA — APP (Versão Play Store)
   ============================================================ */

:root {
  --background-color: #1a1a2e;
  --text-color: #e0e0e0;
  --primary-color: #556080;
  --primary-strong-color: #6c7faf;
  --secondary-color: #7b9c9f;
  --card-bg: #2d2d44;
  --card-shadow: rgba(0, 0, 0, 0.25);
  --button-outline-color: #e74c3c;
  --button-hover-text-color: #FFD700;
  --player-one-bg: #4a4d6f;
  --player-two-bg: #6b4d6b;
  --player-three-bg: #7f6e4a;
  --player-four-bg: #804a4a;
  --player-five-bg: #4a6f7c;
  --border-color: #495057;
  --img-border-color: #e0e0e0;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 2rem;
}

main { padding: 2rem 0; }
h1, h2, h3, h4 {
  color: var(--text-color);
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.player-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   HEADER
   ============================================================ */
header {
  padding: 1.5rem 5%;
  background-color: var(--card-bg);
  box-shadow: 0 4px 12px var(--card-shadow);
}
.header-container {
  display: flex;
  justify-content: center; /* Centraliza a logo no desktop */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.header-logo { border-radius: 12px; object-fit: contain; }
.header-logo.main { max-width: 200px; max-height: 120px; }

/* ============================================================
   BOTÃO PORTAL
   ============================================================ */
.btn-portal {
  display: inline-block;
  background-color: transparent;
  color: var(--primary-strong-color);
  padding: 6px 18px;
  border: 2px solid var(--primary-strong-color);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.2s ease;
  align-self: center;
}
.btn-portal:hover,
.btn-portal:focus {
  background-color: var(--primary-strong-color);
  color: var(--card-bg);
  transform: scale(1.04);
  outline: none;
}

/* ============================================================
   BADGE NO AR — estilo LED neon (ouvintes.html)
   ============================================================ */
.led-display {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 2px 14px;
  gap: 0;
  line-height: 1;
  user-select: none;
}
.led-label {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.led-value {
  font-size: 36px;
  letter-spacing: 4px;
  line-height: 1.1;
}
.led-noar {
  background: rgba(255,59,59,0.10);
  border: 1.5px solid rgba(255,59,59,0.45);
  box-shadow: inset 0 0 10px rgba(255,59,59,0.06), 0 0 10px rgba(255,59,59,0.15);
}
.led-noar .led-label { color: rgba(255,59,59,0.60); }
.led-noar .led-value {
  color: #ff3b3b;
  text-shadow: 0 0 6px #ff3b3b, 0 0 16px #ff3b3b, 0 0 32px rgba(255,59,59,0.45);
  animation: pisca-noar 1.2s ease-in-out infinite;
  letter-spacing: 3px;
  font-size: 28px;
}
@keyframes pisca-noar { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ============================================================
   SEÇÃO DE RÁDIOS / PLAYERS
   ============================================================ */
.radio-players-section { padding: 2rem 5%; max-width: 1200px; margin: 0 auto; }
.radio-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
.player-card {
  background-color: var(--card-bg); border-radius: 12px; padding: 1.5rem;
  text-align: center; box-shadow: 0 8px 16px var(--card-shadow);
}
.player-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--card-shadow); }
.player-card iframe { width: 100%; height: 120px; border: none; border-radius: 10px; }
.player-principal { max-width: 800px; margin: 0 auto; border-top: 5px solid var(--secondary-color);   border-right: 1px solid var(--secondary-color);   border-bottom: 1px solid var(--secondary-color);   border-left: 1px solid var(--secondary-color); }
.player-one   { border-top: 5px solid var(--player-one-bg);   border-right: 1px solid var(--player-one-bg);   border-bottom: 1px solid var(--player-one-bg);   border-left: 1px solid var(--player-one-bg); }
.player-two   { border-top: 5px solid var(--player-two-bg);   border-right: 1px solid var(--player-two-bg);   border-bottom: 1px solid var(--player-two-bg);   border-left: 1px solid var(--player-two-bg); }
.player-three { border-top: 5px solid var(--player-three-bg); border-right: 1px solid var(--player-three-bg); border-bottom: 1px solid var(--player-three-bg); border-left: 1px solid var(--player-three-bg); }
.player-four  { border-top: 5px solid var(--player-four-bg);  border-right: 1px solid var(--player-four-bg);  border-bottom: 1px solid var(--player-four-bg);  border-left: 1px solid var(--player-four-bg); }
.player-five  { border-top: 5px solid var(--player-five-bg);  border-right: 1px solid var(--player-five-bg);  border-bottom: 1px solid var(--player-five-bg);  border-left: 1px solid var(--player-five-bg); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 2rem 5%; background-color: var(--primary-color); color: #fff;
  min-height: 80px; display: flex; align-items: center; justify-content: center;
}
.footer-container { text-align: center; }
.footer-container p { font-weight: 600; }
.footer-container a {
  color: #fff; text-decoration: none;
  transition: color 0.2s;
}
.footer-container a:hover { color: var(--button-hover-text-color); }

/* ============================================================
   BOTÃO VOLTAR AO TOPO
   ============================================================ */
#backToTopBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 30px; right: 30px; z-index: 1600;
  border: none; outline: none;
  background-color: var(--button-outline-color);
  color: white; cursor: pointer; padding: 0;
  border-radius: 50%; width: 50px; height: 50px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s, opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}
#backToTopBtn:hover { background-color: #a93226; }
#backToTopBtn svg { width: 24px; height: 24px; stroke: white; stroke-width: 3; }
#backToTopBtn.show { opacity: 1; visibility: visible; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 992px) {
  .header-container { justify-content: center; }
}

@media (max-width: 600px) {
  .radio-grid { grid-template-columns: 1fr; }
  .player-card { padding: 1rem; }
  .radio-players-section { padding: 1rem 4%; }
}