/* ======================================================
   HERO BACKGROUND (igual buscador estilo tutorials)
   ====================================================== */

.am-lyrics-hero{
position:relative;
background:url('/images/hero-main.jpg') center/cover no-repeat;
padding-top:20px;
padding-bottom:10px;
}

.am-lyrics-hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(7,11,20,.7), rgba(7,11,20,1));
backdrop-filter:blur(4px);
}

/* ======================================================
   SEARCH STICKY
   ====================================================== */

.am-search-sticky{
position:sticky;
top:0;
z-index:50;
margin-bottom:20px;
}

.am-search-sticky,
.am-search-sticky *{
position:relative;
}

/* ======================================================
   BUSCADOR INPUT
   ====================================================== */

.am-search-bar{
display:flex;
gap:14px;
padding:20px 0;
flex-wrap:wrap;
align-items:center;
}

/* ======================================================
   LISTA LETRAS
   ====================================================== */

.lyrics-item{
display:flex;
align-items:center;
gap:14px;
padding:12px;
background:#0b1220;
border-radius:10px;
transition:.2s;
text-decoration:none;
color:white;
margin-bottom:12px;
border:1px solid rgba(255,255,255,.04);
}

.lyrics-item:hover{
background:#111827;
transform:translateY(-2px);
}

.lyrics-item img{
width:30px;
height:30px;
object-fit:cover;
border-radius:4px;
border:3px solid #d6a55c;
}

.lyrics-item-info{
display:flex;
flex-direction:column;
}

.lyrics-item-info strong{
font-size:15px;
}

.lyrics-item-info span{
opacity:.6;
font-size:13px;
}

/* ======================================================
   HERO SONG HEADER
   ====================================================== */

.lyrics-hero{
text-align:center;
margin-bottom:30px;
}

.lyrics-hero h1{
font-size:34px;
font-weight:700;
}

.lyrics-hero p{
opacity:.7;
margin-top:5px;
}

/* ======================================================
   CONTROLES SONG
   ====================================================== */

.lyrics-controls{
margin-top:20px;
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

/* select tonalidad compacto */

.lyrics-controls .am-select{
width:auto;
min-width:90px;
padding:8px 10px;
font-size:14px;
border-radius:8px;
}

/* ======================================================
   BOTONES
   ====================================================== */

.btn-gold{
background:#d6a55c;
border:none;
padding:10px 22px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.btn-gold:hover{
opacity:.9;
}

/* botón volver */

.btn-back{
display:flex;
align-items:center;
gap:6px;
background:#1a2238;
border:1px solid #2d3755;
color:#cbd5e1;
padding:10px 16px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.btn-back svg{
width:16px;
height:16px;
}

.btn-back:hover{
background:#243055;
color:white;
}

/* ======================================================
   CARD LETRA
   ====================================================== */

.lyrics-card{
max-width:900px;
margin:auto;
background:rgba(20,24,40,.75);
padding:35px;
border-radius:16px;
backdrop-filter:blur(6px);
box-shadow:0 20px 60px rgba(0,0,0,.6);
margin-top:20px;
}

/* ======================================================
   TITULO SECCION
   ====================================================== */

.lyrics-section-title{
font-size:26px;
margin-bottom:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

/* ======================================================
   ZOOM CONTROLS
   ====================================================== */

.zoom-controls button{
background:#222;
color:white;
border:none;
padding:6px 12px;
margin-left:6px;
border-radius:6px;
cursor:pointer;
}

/* ======================================================
   TEXTO MUSICAL
   ====================================================== */

#lyricsText{
font-family: monospace;
white-space: pre;
font-size: clamp(12px, 2.5vw, 16px);
line-height:1.5;
color:#e6edf3;
}

/* acordes */

.chord{
color:#d6a55c;
font-weight:700;
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width:600px){

.lyrics-card{
padding:20px;
}

#lyricsText{
font-size:12px;
line-height:1.4;
}

.lyrics-hero h1{
font-size:24px;
}

.lyrics-section-title{
font-size:20px;
}

.btn-back span{
display:none;
}

}