/* ============================================================
   RadioCMS — Tema Padrão (Responsivo)
   ============================================================ */

:root{
  --rc-primary: #1f6feb;
  --rc-bg: #0d1117;
  --rc-card: #161b22;
  --rc-border: #30363d;
  --rc-text: #e6edf3;
  --rc-muted: #8b949e;
  --rc-radius: 14px;
  --player-h: 64px;
}

[data-bs-theme="light"]{
  --rc-bg: #f6f8fa;
  --rc-card: #ffffff;
  --rc-border: #d0d7de;
  --rc-text: #1f2328;
  --rc-muted: #57606a;
}

*{ box-sizing: border-box; }

body{
  background: var(--rc-bg);
  color: var(--rc-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a{ color: var(--rc-primary); text-decoration: none; }
a:hover{ color: var(--rc-primary); opacity: .85; }

.brand-text{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--rc-text);
}

/* ─── Player Bar ───────────────────────────────────────────── */
#player-bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
  background: linear-gradient(135deg, #0a0e14, #131a24);
  border-bottom: 1px solid var(--rc-border);
  height: var(--player-h);
  display: flex; align-items: center;
}
#player-spacer{ height: var(--player-h); }
.play-btn{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rc-primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; transition: transform .15s;
}
.play-btn:hover{ transform: scale(1.07); }
.player-title{ font-size: .875rem; font-weight: 600; color: #fff; }
.player-subtitle{ font-size: .75rem; color: #8b949e; }
.volume-range{ width: 80px; accent-color: var(--rc-primary); }
.live-badge{
  display: inline-flex; align-items: center; gap: 6px;
  background: #f8514922; color: #f85149;
  padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 700;
}
.live-dot{
  width: 7px; height: 7px; background: #f85149; border-radius: 50%;
  animation: pulse 1.4s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ─── Navbar ───────────────────────────────────────────────── */
header{ position: sticky; top: var(--player-h); z-index: 1040; }
#mainNav{
  background: var(--rc-card);
  border-bottom: 1px solid var(--rc-border);
  padding: .75rem 0;
}
.navbar-nav .nav-link{
  color: var(--rc-muted) !important;
  font-weight: 500; font-size: .9rem;
  padding: .5rem 1rem !important;
  border-radius: 8px;
  transition: all .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color: var(--rc-text) !important;
  background: var(--rc-primary)15;
}
.navbar-toggler{
  border: none; color: var(--rc-text); font-size: 1.25rem; background: none;
}

/* ─── Hero / Slider ─────────────────────────────────────────── */
.hero-slider{ border-radius: var(--rc-radius); overflow: hidden; margin-bottom: 2rem; }
.hero-slider img{ width: 100%; height: 420px; object-fit: cover; }
.carousel-caption{
  background: linear-gradient(transparent, #000000cc);
  bottom: 0; left: 0; right: 0; text-align: left; padding: 2rem;
}
@media(max-width: 768px){ .hero-slider img{ height: 220px; } }

/* ─── Cards ────────────────────────────────────────────────── */
.rc-card{
  background: var(--rc-card);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}
.rc-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 24px #00000033; }
.rc-card img{ width: 100%; height: 180px; object-fit: cover; }
.rc-card-body{ padding: 1.1rem; }
.rc-card-cat{
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rc-primary); margin-bottom: .4rem;
}
.rc-card-title{
  font-size: 1rem; font-weight: 700; line-height: 1.35;
  margin-bottom: .5rem; color: var(--rc-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-card-meta{ font-size: .75rem; color: var(--rc-muted); }

/* Section title */
.section-title{
  font-size: 1.4rem; font-weight: 800; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .6rem;
}
.section-title i{ color: var(--rc-primary); }
.section-title .see-all{ margin-left: auto; font-size: .8rem; font-weight: 600; }

/* ─── Widgets / Sidebar ────────────────────────────────────── */
.widget-box{
  background: var(--rc-card); border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius); padding: 1.25rem; margin-bottom: 1.5rem;
}
.widget-title{
  font-size: .95rem; font-weight: 700; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.widget-list-item{
  display: flex; gap: .75rem; padding: .6rem 0;
  border-bottom: 1px solid var(--rc-border);
}
.widget-list-item:last-child{ border-bottom: none; padding-bottom: 0; }
.widget-list-item img{
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.widget-list-item .title{
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* On Air widget */
.on-air-box{
  background: linear-gradient(135deg, var(--rc-primary), #6e40c9);
  border-radius: var(--rc-radius); padding: 1.5rem; color: #fff; text-align: center;
}
.on-air-box img{ width: 90px; height: 90px; border-radius: 50%; border: 3px solid #fff; margin-bottom: .75rem; }

/* ─── Timetable / Programação ─────────────────────────────── */
.timetable-table{ width: 100%; border-collapse: collapse; }
.timetable-table th,.timetable-table td{
  padding: .75rem 1rem; border-bottom: 1px solid var(--rc-border);
}
.timetable-table tr.active{ background: var(--rc-primary)18; }
.timetable-badge{
  background: var(--rc-primary); color: #fff; padding: .25rem .6rem;
  border-radius: 6px; font-size: .75rem; font-weight: 600;
}

/* ─── Team ─────────────────────────────────────────────────── */
.team-card{ text-align: center; }
.team-card img{
  width: 130px; height: 130px; object-fit: cover; border-radius: 50%;
  margin: 0 auto 1rem; border: 3px solid var(--rc-border);
}
.team-card .name{ font-weight: 700; font-size: 1.05rem; }
.team-card .role{ color: var(--rc-primary); font-size: .85rem; margin-bottom: .5rem; }

/* ─── Single Page (artigo) ─────────────────────────────────── */
.article-header h1{ font-size: 2rem; font-weight: 800; line-height: 1.25; }
.article-cover{ border-radius: var(--rc-radius); width: 100%; max-height: 480px; object-fit: cover; margin-bottom: 1.5rem; }
.article-content{ font-size: 1.05rem; line-height: 1.8; }
.article-content img{ max-width: 100%; border-radius: 10px; margin: 1rem 0; }
.article-content h2,.article-content h3{ font-weight: 700; margin-top: 1.5rem; }

/* ─── Comments ──────────────────────────────────────────────── */
.comment-item{ display:flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--rc-border); }
.comment-item img{ width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }

/* ─── Chat widget ───────────────────────────────────────────── */
.chat-box{ max-height: 320px; overflow-y: auto; }
.chat-msg{ padding: .5rem .75rem; background: var(--rc-bg); border-radius: 10px; margin-bottom: .5rem; font-size: .85rem; }
.chat-msg .author{ font-weight: 700; color: var(--rc-primary); font-size: .78rem; }

/* ─── Footer ────────────────────────────────────────────────── */
.site-footer{ background: var(--rc-card); border-top: 1px solid var(--rc-border); margin-top: 3rem; }
.footer-title{ font-weight: 700; font-size: .9rem; margin-bottom: 1rem; }
.footer-links{ list-style: none; padding: 0; margin: 0; }
.footer-links li{ margin-bottom: .5rem; }
.footer-links a{ color: var(--rc-muted); font-size: .85rem; }
.footer-links a:hover{ color: var(--rc-primary); }
.footer-divider{ border-color: var(--rc-border); margin: 1.5rem 0; }
.social-btn{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rc-bg); border: 1px solid var(--rc-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--rc-muted); transition: all .2s;
}
.social-btn:hover{ background: var(--rc-primary); color: #fff; border-color: var(--rc-primary); }

/* ─── Misc ─────────────────────────────────────────────────── */
.back-to-top{
  position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px;
  background: var(--rc-primary); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 999;
}
.back-to-top.show{ opacity: 1; pointer-events: auto; }
#whatsapp-button{
  position: fixed; bottom: 80px; right: 24px; width: 52px; height: 52px;
  background: #25D366; color: #fff; border-radius: 50%; z-index: 999;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

.pagination .page-link{ background: var(--rc-card); border-color: var(--rc-border); color: var(--rc-text); }
.pagination .page-item.active .page-link{ background: var(--rc-primary); border-color: var(--rc-primary); }

/* ─── Forms ────────────────────────────────────────────────── */
.form-control, .form-select{
  background: var(--rc-bg); border-color: var(--rc-border); color: var(--rc-text);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus{
  background: var(--rc-bg); color: var(--rc-text); border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px var(--rc-primary)22;
}
.modal-content{ background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: var(--rc-radius); }
.btn-primary{ background: var(--rc-primary); border-color: var(--rc-primary); }
.btn-primary:hover{ filter: brightness(1.1); }

/* ─── Responsividade geral ─────────────────────────────────── */
@media(max-width: 991px){
  header{ top: var(--player-h); }
  .section-title{ font-size: 1.2rem; }
}
@media(max-width: 576px){
  #player-bar .player-subtitle{ display: none; }
  .volume-range{ display: none; }
  .article-header h1{ font-size: 1.5rem; }
}