/* ==========================================================================
   ARQUIVO: css/componentes/midias.css - V0.4.0 // CEY MUSIC
   RACKS MODULARES DE EXIBIÇÃO DE VÍDEO 16:9 E DISPLAY DE FILME INLINE
   ========================================================================== */

   .media-rack-container { display: flex; flex-direction: column; gap: 16px; }
   .media-module-box { background: var(--bg-console); border: 1px solid #2d2d2d; border-radius: 6px; padding: 15px; box-shadow: 4px 4px 12px rgba(0,0,0,0.4); }
   .media-module-box h4 { margin: 0 0 12px 0; font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }
   .custom-native-player { width: 100%; border-radius: 4px; }
   .responsive-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; border: 1px solid #111; }
   .responsive-video-wrapper video, .responsive-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
   .docs-download-rack { display: flex; flex-direction: column; gap: 10px; }
   .doc-link { color: var(--text-primary); font-family: monospace; font-size: 13px; text-decoration: none; padding: 8px; background: #111; border: 1px solid #222; border-radius: 4px; }
   .doc-link:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
   
   .inline-studio-player { background: #181818 !important; border: 1px solid #252525 !important; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.01), 4px 4px 12px rgba(0,0,0,0.5) !important; padding: 12px; border-radius: 6px; margin: 15px 0; }
   .embedded-track-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
   .vu-meter-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 5px var(--orange); }
   .inline-player-hardware { display: flex; align-items: center; gap: 1rem; width: 100%; }
   .inline-play-btn { background: #111; border: 1px solid #2d2d2d; border-radius: 4px; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 3px #050505; cursor: pointer; }
   .inline-svg-icon { width: 1rem; height: 1rem; fill: #777; }
   .inline-play-btn.playing .inline-svg-icon { fill: var(--orange); filter: drop-shadow(0 0 3px var(--orange)); }
   .inline-track-timeline { flex-grow: 1; background: #0b0b0b; height: 6px; border-radius: 3px; border: 1px solid #202020; overflow: hidden; }
   .timeline-bar-bg { width: 100%; height: 100%; position: relative; }
   .timeline-progress-led { width: 0%; height: 100%; background: var(--orange); box-shadow: 0 0 4px var(--orange); transition: width 0.1s linear; }
   



   /* ==========================================================================
   🎛️ CIRCUITO DE ESTILIZAÇÃO DOS BOTÕES DE DOWNLOAD (GAVETA DE PDFs)
   ========================================================================== */
.download-rack { 
   border-color: #222222; 
 }
 
 .download-instruction { 
   margin-bottom: 15px !important; 
   font-size: 13px !important; 
   color: var(--text-muted) !important; 
 }
 
 .download-links-container { 
   display: flex; 
   flex-direction: column; 
   gap: 10px; 
 }
 
 .btn-download-rack { 
   display: flex; 
   align-items: center; 
   gap: 12px; 
   background: #121212; 
   border: 1px solid #222222; 
   padding: 10px 15px; 
   border-radius: 4px; 
   text-decoration: none; 
   transition: all 0.2s ease-in-out; 
   box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5); 
 }
 
 .file-icon { 
   font-size: 20px; 
   filter: drop-shadow(0 0 2px rgba(255,255,255,0.1)); 
   flex-shrink: 0;
 }
 
 .file-details { 
   display: flex; 
   flex-direction: column; 
   line-height: 1.3; 
   min-width: 0;
 }
 
 .file-name { 
   font-family: monospace; 
   font-size: 13px; 
   color: var(--text-primary); 
   white-space: nowrap; 
   overflow: hidden; 
   text-overflow: ellipsis; 
 }
 
 .file-size { 
   font-family: 'Orbitron', sans-serif; 
   font-size: 9px; 
   color: var(--text-muted); 
   letter-spacing: 0.5px; 
 }
 
 /* ⚡ DISPARO DO FOCO NEON NO MOUSEOVER */
 .btn-download-rack:hover, 
 .btn-download-rack:focus { 
   border-color: var(--neon-cyan); 
   background: #141919; 
   box-shadow: 0 0 10px rgba(0, 255, 255, 0.1); 
 }
 
 .btn-download-rack:hover .file-name { 
   color: var(--neon-cyan); 
   text-shadow: 0 0 4px rgba(0, 255, 255, 0.4); 
 }
 
 .btn-download-rack:hover .file-size { 
   color: rgba(0, 255, 255, 0.6); 
 }
 





/* ==========================================================================
   SISTEMA DE TRIPINHAS ESQUEMÓRFICAS v0.5.2 - MINI BANDCAMP PURIFICADO
   ========================================================================== */

/* Container Mestre */
.tracks-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 20px !important;
  background: transparent !important; /* Limpa fundos residuais */
  box-shadow: none !important;
  padding: 0 !important;
}

/* DNA Cromático por Variáveis CSS */
.audio-strip.theme-amber { --display-color: #ff5500; --btn-top: #ff7722; --btn-bottom: #b33c00; --btn-active: #802b00; --btn-text: #ffffff; }
.audio-strip.theme-sapphire { --display-color: #00ffff; --btn-top: #00e2fe; --btn-bottom: #008899; --btn-active: #005566; --btn-text: #000000; }
.audio-strip.theme-ruby { --display-color: #ff3333; --btn-top: #ff5555; --btn-bottom: #991111; --btn-active: #660606; --btn-text: #ffffff; }
.audio-strip.theme-emerald { --display-color: #00ff66; --btn-top: #33ff88; --btn-bottom: #009933; --btn-active: #006622; --btn-text: #000000; }

/* O Chassi da Tripinha: Clareado e Blindado contra vazamento de imagens */
.audio-strip {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: clamp(8px, 1.5vw, 14px) !important;
  width: 100% !important;
  height: 52px !important; /* Altura fixa segura para travar Portrait */
  padding: 4px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  
  /* Clareamento do Hardware: Tons mais claros de cinza chumbo para alta visibilidade */
  background: linear-gradient(180deg, #282f3d 0%, #1e232e 100%) !important;
  border-top: 1px solid #444f66 !important;
  border-bottom: 1px solid #11141a !important;
  
  /* Remove qualquer herança de background-image avulsa */
  background-image: linear-gradient(180deg, #282f3d 0%, #1e232e 100%) !important;
  
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.05s ease !important;
}

/* Área Clicável Interna */
.strip-link-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  min-width: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Ajuste da Miniatura de Capa */
.strip-thumb {
  height: 42px !important; /* Força tamanho menor que a tripinha */
  width: 42px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  border: 1px solid #0d1015 !important;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) !important;
  display: block !important;
}

/* Painel de Texto Blindado */
.strip-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}
.strip-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px #000 !important;
}
.strip-meta {
  font-family: 'Plus Jakarta', sans-serif !important;
  font-size: 11px !important;
  color: #a3b8cc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Visor LCD do Preço */
.strip-price {
  font-family: 'JetBrains Variable', monospace !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: var(--display-color) !important;
  background: #07090c !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #1f2733 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8) !important;
  text-shadow: 0 0 5px var(--display-color) !important;
  white-space: nowrap !important;
}

/* Deck de Botões */
.strip-actions-deck {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
}

/* Teclas Mecânicas */
.strip-buy-btn, .strip-play-btn {
  height: 32px !important;
  font-family: 'Orbitron', sans-serif !important;
  border: 1px solid #000 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.strip-buy-btn {
  padding: 0 12px !important;
  font-size: 11px !important;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%) !important;
  color: var(--btn-text) !important;
  text-decoration: none !important;
}

.strip-play-btn {
  width: 42px !important;
  background: linear-gradient(180deg, #3a3a42 0%, #212126 100%) !important;
  color: #ffffff !important;
}
.strip-play-btn svg { width: 24px !important; height: 18px !important; fill: #aaa !important; }

/* Curso de Pressionamento Mecânico */
.strip-buy-btn:active, .strip-play-btn:active, .strip-play-btn.playing {
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.strip-play-btn.playing svg {
  fill: var(--orange, #ff5500) !important;
  filter: drop-shadow(0 0 3px var(--orange)) !important;
}

/* Modo Leitura Sépia */
body.reading-mode-active .audio-strip { background: #1f1e1d !important; background-image: none !important; border-top-color: #2a2928 !important; box-shadow: none !important; }
body.reading-mode-active .strip-price { background: #151413 !important; border-color: #2a2928 !important; text-shadow: none !important; color: #e3ded5 !important; }
body.reading-mode-active .strip-title { color: #fffdf9 !important; }
body.reading-mode-active .strip-meta { color: #a09990 !important; }
body.reading-mode-active .strip-buy-btn, body.reading-mode-active .strip-play-btn { background: #2d2b2a !important; border-color: #44413f !important; color: #e3ded5 !important; box-shadow: none !important; }




/* ==========================================================================
   CALIBRAÇÃO DE VIEWPORT RESPONSIVA COMPACTA (SUGESTÃO 3 - ATUALIZADA V0.5.3)
   ========================================================================== */
   @media screen and (max-width: 480px) {
    /* Altera o grid e eleva a altura para 84px eliminando qualquer corte */
    .audio-strip {
      grid-template-columns: 1fr auto !important; 
      height: 84px !important; 
      padding: 8px 12px !important;
      gap: 6px !important;
      align-items: center !important;
    }
  
    /* Garante o respiro do bloco de conteúdo superior */
    .strip-link-area {
      grid-column: 1 !important;
      grid-row: 1 !important;
      height: auto !important;
    }
  
    /* Ajusta a miniatura para não esticar no chassi mais alto */
    .strip-thumb {
      height: 38px !important;
      width: 38px !important;
    }
  
    /* Visor LCD do preço centralizado na segunda linha com espaço livre */
    .strip-price {
      grid-column: 1 !important; 
      grid-row: 2 !important;
      width: fit-content !important; 
      margin-top: 4px !important;
      padding: 3px 8px !important;
      font-size: 11.5px !important;
      display: inline-block !important;
    }
  
    /* Deck de ações centralizado verticalmente ocupando as duas linhas na direita */
    .strip-actions-deck {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important; 
      flex-direction: column !important;
      justify-content: center !important;
      align-self: center !important;
      gap: 8px !important;
      height: 100% !important;
    }
  
    /* Restaura as dimensões das teclas mecânicas com clique confortável no touch */
    .strip-buy-btn, .strip-play-btn {
      height: 28px !important;
      font-size: 10.5px !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
    }
    .strip-play-btn {
      width: 48px !important;
    }
  }
  



  /* 🔒 CALIBRADOR DO CIRCUITO DE HITBOX DA TRIPINHA NATIVA */
.strip-link-area {
  position: relative !important; /* Cria o ponto de ancoragem para o link absoluto */
}

.strip-spa-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important; /* Fica acima do texto e da imagem, garantindo o clique puro */
  background: rgba(0, 0, 0, 0) !important; /* Totalmente transparente */
}

/* Efeito visual de hover na tripinha quando o mouse passa em qualquer lugar do link */
.strip-link-area:hover .strip-title {
  color: var(--neon-cyan, #00ffff) !important;
  text-shadow: 0 0 4px var(--neon-cyan) !important;
}