/* =========================================
   LAYOUT GLOBAL — STREAMING SYSTEM
   ========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html, body{
font-family:'Sora', sans-serif;
background:#070b14;
color:white;
width:100%;
overflow-x:hidden;
touch-action:pan-x pan-y;
}

body{
padding-top:88px;
}

/* MAIN */

.am-main{
padding:30px;
min-height:100vh;
}

/* SECTION */

.am-section{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* ROW */

.am-row{
margin-bottom:25px;
}

/* ROW TITLE */

.am-row-title{
display:flex;
align-items:center;
gap:8px;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}

.am-row-title i{
width:18px;
height:18px;
color:#f59e0b;
}

/* INPUT SYSTEM GLOBAL */

.am-input,
.am-select{
width:100%;
background:#070b14;
border:1px solid #1a2030;
padding:14px 16px;
border-radius:12px;
color:white;
font-size:15px;
transition:.2s;
outline:none;
}

.am-input::placeholder{
color:#6b7280;
}

.am-input:focus,
.am-select:focus{
border-color:#f59e0b;
box-shadow:0 0 0 1px #f59e0b;
}

.am-select{
appearance:none;
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:18px;
}

/* RESPONSIVE */

@media (max-width:768px){

.am-main{
padding:0px;
}

.am-row-title{
font-size:15px;
}

}

/*---------AREA DE ESTILOS PARA COMENTARIOS------------*/
.am-comment-box{
    position:relative;
    width:100%;
}
.am-input-chat{
    width:100%;
    min-height:70px;
    padding:18px 55px 18px 18px;
    border-radius:14px;
    background:rgba(0,0,0,0.2); /* 👈 cambio */
    border:1px solid rgba(255,255,255,0.05);
    color:#fff;
    resize:none;
    outline:none;

    /* 👇 nueva tipografía */
    font-family:'Inter', sans-serif;
    font-size:14px;
}.btn-send-floating{
    position:absolute;
    right:20px;
    bottom:20px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#2563eb;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s ease;
}

.btn-send-floating i{
    width:18px;
    height:18px;
    color:#ffffff; /* 👈 blanco forzado */
}

.btn-send-floating:hover{
    background:#1d4ed8;
    transform:scale(1.08);
}.am-reply{
    margin-left:20px;
    margin-top:10px;
    border-left:2px solid #1f2937;
    padding-left:10px;
}
.am-comment-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.am-avatar-comment{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.am-avatar-initial{
    width:100%;
    height:100%;
    border-radius:50%;
    background:#1f2937;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:600;
}.am-comment strong{
    font-size:13px;
}

.am-comment small{
    font-size:11px;
}

.am-comment p{
    font-size:12px;
    line-height:1.3;
    padding:0px 0px 10px 50px;

}.am-avatar-wrapper{
    position:relative;
    width:40px;
    height:40px;
    min-width:40px;
    flex-shrink:0;
}

.am-avatar-gem{
    position:absolute;
    bottom:3px;
    right:-2px;
    width:14px;
    height:14px;
    background:#a855f7;
    border-radius:50%;
    border:2px solid #0b1220;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2; /* 👈 importante */
    box-shadow:0 0 6px #a855f7;
}

.am-avatar-gem i{
    width:8px;
    height:8px;
    color:white;
}.am-avatar-img{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden; /* 👈 aquí sí */
}.am-comment-link{
    color:#60a5fa;
    text-decoration:none;
    word-break:break-all;
}

.am-comment-link:hover{
    text-decoration:underline;
}.am-link-blocked{
    color:#ef4444;
    font-size:12px;
}.btn_res{
   margin: 2px 2px 10px 50px;
}
/* =========================
   BLOQUES DE COMENTARIOS
========================= */
.am-comment{
    background: rgba(255,255,255,0.0); /* 10% */
    border-radius: 10px;
    padding: 10px;
    transition: background 0.25s ease;
    position: relative;
}

/* hover */
.am-comment:hover{
    background: rgba(255,255,255,0.02); /* 20% */
}

/* =========================
   RESPUESTAS (más suaves)
========================= */
.am-reply{
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
    position: relative;
}

/* =========================
   NUEVO COMENTARIO (prioridad)
========================= */
.am-comment-new{
    animation: highlightNew 1.5s ease;
    background: rgba(168, 85, 247, 0.12) !important;
}

@keyframes highlightNew{
    0% { background: rgba(168, 85, 247, 0.30); }
    100% { background: rgba(168, 85, 247, 0.12); }
}
.am-delete-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: 0.2;
    transition: 0.2s;
}

.am-delete-btn:hover{
    opacity: 0.3;
    color: #ef4444;
}.am-reply .am-delete-btn{
    top: 10px;
    right: 10px;
    font-size: 10px;
}.am-reply-bottom{
    margin-top:10px;
    padding-left:50px;
}.am-reply-input-box{
    margin-top:10px;
}

.am-reply-input-box textarea{
    width:100%;
}.am-reply-box-bottom{
    margin-top:10px;
    padding-left:50px;
}

.am-reply-input-box textarea{
    width:100%;
}.highlight-comment{
    animation: highlightFade 2s ease;
    background: rgba(59,130,246,0.15);
    border-radius: 8px;
}

@keyframes highlightFade{
    0% { background: rgba(59,130,246,0.4); }
    100% { background: transparent; }
}
/* === VER MAS CLEAN === */

.am-card-vermas{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#0f172a; /* mismo tono que tus cards */
    border:1px solid rgba(255,255,255,0.08);

    cursor:pointer;
    transition:.25s;
}

/* overlay siempre visible */
.am-card-vermas .am-overlay{
    opacity:1 !important;
    background:rgba(0,0,0,0.5);
}

/* texto */
.am-card-vermas .am-title{
    color:#fff;
    font-weight:600;
    font-size:16px;
}

/* hover sutil */
.am-card-vermas:hover{
    transform:scale(1.05);
    border-color:rgba(255,255,255,0.2);
}/* === ARROW HIDE === */

.am-scroll-left,
.am-scroll-right{
    transition:opacity .25s ease;
}

.am-scroll-left.hidden,
.am-scroll-right.hidden{
    opacity:0;
    pointer-events:none;
}

.am-row{
    position:relative;
    overflow:hidden;
}

/* capa de fondo */
.am-row::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0.12; /* 🔥 sutil */
    pointer-events:none;
    z-index:0;
}

/* asegurar contenido encima */
.am-row > *{
    position:relative;
    z-index:1;
}

/* POPULARES 🔥 */
.rowPopulares::before{
    background:radial-gradient(circle at left, rgba(239,68,68,0.4), transparent 70%);
}

/* RECIENTES 🆕 */
.rowRecientes::before{
    background:radial-gradient(circle at left, rgba(59,130,246,0.4), transparent 70%);
}

/* ACORDEON 🎹 */
.rowAcordeon::before{
    background:radial-gradient(circle at left, rgba(16,185,129,0.4), transparent 70%);
}

/* GUITARRA 🎸 */
.rowGuitarra::before{
    background:radial-gradient(circle at left, rgba(168,85,247,0.4), transparent 70%);
}

/* BAJOS 🎶 */
.rowBajos::before{
    background:radial-gradient(circle at left, rgba(234,179,8,0.4), transparent 70%);
}

/* BAJO SEXTO 🎵 */
.rowBajoSexto::before{
    background:radial-gradient(circle at left, rgba(244,114,182,0.4), transparent 70%);
}

/*AREA PREMIUM*/
.am-benefit-card{
    width:100%;
    padding:20px;
    border-radius:14px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,.05);
}