/* ==========================================================================
   MUSICA.CSS — Estilos específicos para páginas de openings, endings y música
   Importa especiales.css para hero, player-card, info-card, etc.
   ========================================================================== */
@import url('especiales.css');

/* Lyrics Card (tabla de traducción) */
.lyrics-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 1.5rem; }
.lyrics-card .card-header { background: #f8f9fa; font-weight: 600; border-bottom: 2px solid #17a2b8; padding: 12px 16px; }
.lyrics-card .card-body { padding: 0; }
.lyrics-card .table { margin: 0; font-size: 0.82rem; }
.lyrics-card .table th { font-size: 0.8rem; background: #f8f9fa; border-bottom: 2px solid #dee2e6; padding: 10px 12px; white-space: nowrap; }
.lyrics-card .table td { padding: 8px 12px; vertical-align: middle; }

/* Music List Items (listados de openings/endings) */
.music-list-item { border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 0.5rem; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; transition: transform 0.2s, box-shadow 0.2s; }
.music-list-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.music-list-item .music-title { flex: 1; font-size: 0.9rem; font-weight: 500; color: #2c3e50; }
.music-list-item .btn-ver { background: #17a2b8; color: #fff; border: none; font-size: 0.75rem; padding: 5px 14px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.music-list-item .btn-ver:hover { background: #138496; color: #fff; }

/* Dark Mode — Música */
[data-bs-theme="dark"] .lyrics-card { background: #1e2228; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
[data-bs-theme="dark"] .lyrics-card .card-header { background: #252a30; color: #fff; }
[data-bs-theme="dark"] .lyrics-card .table { background: #1e2228; }
[data-bs-theme="dark"] .lyrics-card .table th { background: #252a30; color: #e0e0e0; border-color: #333; }
[data-bs-theme="dark"] .lyrics-card .table td { color: #ccc; border-color: #2d3238; }
[data-bs-theme="dark"] .music-list-item { background: #1e2228; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
[data-bs-theme="dark"] .music-list-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-bs-theme="dark"] .music-list-item .music-title { color: #e0e0e0; }

/* Mobile — Música */
@media (max-width: 768px) {
    .lyrics-card .table { font-size: 0.72rem; }
    .lyrics-card .table th, .lyrics-card .table td { padding: 6px 8px; }
    .music-list-item { flex-wrap: wrap; }
    .music-list-item .btn-ver { width: 100%; text-align: center; margin-top: 6px; }
}