/* =================================================================== */
/* TEMA GLOBAL E PLAYER - RÁDIO PATAÍBA 2.0 (v9 - Definitivo)          */
/* =================================================================== */

:root {
    --cor-primaria: #FFC400;
    --cor-secundaria: #00D1FF;
    --cor-fundo-escuro: #121214;
    --cor-fundo-secao: #1E1E20;
    --cor-texto-principal: #E1E1E6;
    --cor-texto-secundario: #A8A8B3;
    --fonte-principal: 'Inter', sans-serif;
    --fonte-destaque: 'Poppins', sans-serif;
    --player-altura: 80px;
}

body {
    background-color: var(--cor-fundo-escuro) !important;
    color: var(--cor-texto-principal);
    font-family: var(--fonte-principal);
    padding-bottom: var(--player-altura) !important; 
}

h1, h2, h3, h4, h5, .titulo_padrao, .counter_title {
    font-family: var(--fonte-destaque) !important;
    color: var(--cor-texto-principal) !important;
}

/* =================================================================== */
/* PLAYER DE RÁDIO                                                     */
/* =================================================================== */
.radio-player-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--player-altura); z-index: 10000; background: rgba(25, 28, 35, 0.65); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; padding: 0 1rem; box-sizing: border-box; }
.player-content { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.track-info { display: flex; align-items: center; flex: 1; min-width: 0; }
.album-art { width: 50px; height: 50px; background-color: rgba(0,0,0,0.2); border-radius: 8px; margin-right: 15px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: var(--cor-icones); flex-shrink: 0; }
.track-details { display: flex; flex-direction: column; overflow: hidden; }
.track-program { font-family: var(--fonte-destaque); font-weight: 600; font-size: 1rem; color: var(--cor-texto-principal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 0.875rem; color: var(--cor-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0 1rem; }
.player-controls i { font-size: 24px; color: #E0E0E0; background-color: rgba(255, 255, 255, 0.1); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s ease-in-out; }
.player-controls i:hover { color: #FFF; background-color: var(--cor-secundaria); transform: scale(1.1); }
.volume-controls { display: flex; align-items: center; justify-content: flex-end; flex-basis: 150px; }
.volume-controls i { font-size: 20px; color: #E0E0E0; cursor: pointer; margin-right: 15px; transition: color 0.2s ease; }
.volume-controls i:hover { color: #FFF; }
.playing-indicator { display: none; align-items: flex-end; height: 16px; margin-right: 12px; }
.playing-indicator.is-playing { display: flex; }
.playing-bar { width: 3px; height: 100%; background-color: var(--cor-secundaria); margin: 0 1px; animation-name: bounce; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.playing-bar2 { animation-delay: -0.2s; }
.playing-bar3 { animation-delay: -0.4s; }
@keyframes bounce { 0%, 40%, 100% { transform: scaleY(0.3); } 20% { transform: scaleY(1.0); } }
@media (max-width: 768px) { .album-art { display: none; } .track-program, .track-artist { white-space: normal; overflow: visible; text-overflow: clip; } .volume-slider { display: none; } .volume-controls i { margin-right: 0; } .player-controls { margin: 0 0.5rem; } }

/* =================================================================== */
/* PROGRAMAÇÃO (BLINDAGEM FINAL)                                       */
/* =================================================================== */
.programa-card { background-color: var(--cor-fundo-secao) !important; border: 1px solid #333 !important; border-radius: 12px !important; padding: 24px !important; display: flex !important; align-items: center !important; gap: 20px !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; }
.programa-card:hover { transform: translateY(-5px); border-color: var(--cor-primaria) !important; }
.locutor-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor-texto-secundario); flex-shrink: 0; }
.conteudo-programa { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; overflow: hidden; flex-grow: 1; }
.programa-card .horario { font-family: var(--fonte-destaque) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--cor-primaria) !important; background-color: rgba(255, 196, 0, 0.1) !important; padding: 6px 12px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.programa-card .horario::before { content: '\f017'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.875rem; color: var(--cor-texto-secundario); }
.programa-card .detalhes .titulo { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--cor-texto-principal) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; padding: 0 !important; }
.programa-card .detalhes .apresentador { font-size: 1rem !important; color: var(--cor-texto-secundario) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; padding: 0 !important; }
.programa-card.programa-passado { opacity: 0.5; background-color: #18181a !important; }
.programa-card.programa-atual { border: 2px solid var(--cor-secundaria) !important; box-shadow: 0 0 20px rgba(0, 209, 255, 0.3) !important; }
.selo-no-ar { position: absolute; top: -1px; right: -1px; background-color: var(--cor-secundaria); color: #121214; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; border-radius: 0 11px 0 8px; text-transform: uppercase; }

/* =================================================================== */
/* POPUP (DOMINANDO O BOOTSTRAP)                                       */
/* =================================================================== */
#janela_modal .modal-dialog { max-width: 600px; margin: 50px auto; }
#janela_modal .modal-content { background-color: var(--cor-fundo-secao) !important; border: 1px solid #333 !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; }
#janela_modal .modal-body { padding: 0 !important; }
#janela_modal .close { color: white !important; opacity: 0.8 !important; font-size: 2rem !important; text-shadow: none !important; position: absolute; top: 15px; right: 20px; z-index: 10; }
#janela_modal .close:hover { opacity: 1 !important; }

/* =================================================================== */
/* CARROSSEL DE PARCEIROS (INFINITO)                                   */
/* =================================================================== */
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } }
.slider { overflow: hidden; position: relative; width: 100%; padding: 2rem 0; }
.slider::before, .slider::after { background: linear-gradient(to right, #121214 0%, rgba(18, 18, 20, 0) 100%); content: ""; height: 100%; position: absolute; width: 15%; z-index: 2; }
.slider::before { left: 0; top: 0; }
.slider::after { right: 0; top: 0; transform: rotateZ(180deg); }
.slide-track { display: flex; animation: scroll 40s linear infinite; width: calc(250px * 14); }
.slide { height: 100px; width: 250px; display: flex; align-items: center; justify-content: center; padding: 15px; flex-shrink: 0; }
.slide img { max-width: 180px; max-height: 70px; width: auto; height: auto; filter: grayscale(1); opacity: 0.7; transition: all 0.3s ease; }
.slide:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.1); }

/* =================================================================== */
/* FUNDO DE PARTÍCULAS                                                 */
/* =================================================================== */
#particles-js { position: fixed; width: 100%; height: 100%; z-index: -1; }