@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

/* Bloque consolidado para el centro del reproductor */
.player-container-middle {
    display: flex !important; /* Asegura que se vea */
    flex: 1 !important;
    width: calc(100% - 600px) !important; /* Aumentamos el margen restado para que el bloque izquierdo (botones) tenga sitio */
    height: 35px !important;
    float: left !important;
    align-items: center;
    justify-content: center;
}

/* 3. Estilo para los botones de salto (sin usar la imagen de sprite) */
.jp-jump {
    display: inline-block;
    vertical-align: top;
    width: 26px;
    height: 26px;
    line-height: 24px; /* Centra el texto verticalmente */
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: #888;
    border: 1px solid #444;
    border-radius: 50%;
    margin: 5px 3px 0 3px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.jp-jump:hover {
    color: #FFF;
    border-color: #777;
    background: rgba(255,255,255,0.05);
}

.player-buttons {
    display: flex !important;
    align-items: center !important;
    width: auto !important; /* Que solo ocupe lo que necesitan los botones */
}

/* Permitimos que jPlayer controle la visibilidad de play/pause */
.player-buttons a {
    float: none !important;
    margin: 0 3px !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

/* Esta es la clave: si jPlayer dice que no se vea, le hacemos caso */
.player-buttons a[style*="display: none"] {
    display: none !important;
}

/* --- NUEVA ONDA DE SONIDO DINÁMICA --- */

/* Contenedor principal */
.jp-progress {
    position: relative !important;
    height: 60px !important; /* Altura para ver bien la onda */
    background: #000 !important; /* Fondo negro puro para que resalte el verde */
    border-radius: 4px;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    border: none !important;
}

/* La onda de fondo (Gris apagado) */
.jp-seek-bar {
    width: 100% !important;
    height: 100% !important;
    background-color: #333 !important;
    background-image: repeating-linear-gradient(90deg, #000 0px, #000 2px, transparent 2px, transparent 4px) !important;
    
    /* Esta máscara "muerde" la barra de forma desigual para simular una onda real */
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, black 15%, black 35%, transparent 35%, 
        transparent 45%, black 45%, black 85%, transparent 100%) !important;
    
    /* Añadimos un ligero movimiento para que no parezca estática */
    opacity: 0.8;
}

/* La onda que avanza (VERDE VIBE) */
.jp-play-bar {
    height: 100% !important;
    background-color: #2ecc71 !important; /* Tu verde */
    
    /* Importante: Misma máscara que el fondo para que encajen */
    background-image: repeating-linear-gradient(90deg, #000 0px, #000 2px, transparent 2px, transparent 4px) !important;
    
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%), 
                        linear-gradient(to bottom, transparent 10%, black 10%, black 90%, transparent 90%) !important;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%), 
                linear-gradient(to bottom, transparent 10%, black 10%, black 90%, transparent 90%) !important;
    
    z-index: 2;
    border-right: 2px solid #27ae60 !important;
}

/* Estilo para los Avatares (Para cuando pongamos el JS) */
.wave-comment-avatar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #2ecc71;
    background-size: cover;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* Separar las caras de los usuarios de la barra de reproducción */
.track-sub-content, .track-users-list, .stats-reposts {
    margin-top: 25px !important; /* Ajusta este número hasta que lo veas perfecto */
    clear: both;
}

/* Si las imágenes están dentro de la zona de comentarios */
.wave-comment-avatar {
    margin-bottom: 10px;
}
/* Estructura del icono */
.vote-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 2px; /* Pegado al número para evitar interrogantes de espacio */
}

/* 1. GRIS (Por defecto) */
.icon-like, .icon-dislike {
    background-image: url('images/icons/pulgar-gris.png');
}

/* 2. VERDE (Cuando el contenedor tiene voted-active y es el de Like) */
.vote-btn-wrapper.voted-active[id^="like_btn_"] .icon-like {
    background-image: url('images/icons/pulgar-verde.png');
}
.vote-btn-wrapper.voted-active[id^="like_btn_"] {
    color: #2ecc71 !important;
}

/* 3. ROJO (Cuando el contenedor tiene voted-active y es el de Dislike) */
.vote-btn-wrapper.voted-active[id^="dislike_btn_"] .icon-dislike {
    background-image: url('images/icons/pulgar-rojo.png');
}
.vote-btn-wrapper.voted-active[id^="dislike_btn_"] {
    color: #e74c3c !important;
}

/* Botones menu Siberbas */
.menu-siderbar-button {
    /* ADAPTACIÓN AL ANCHO DEL SIDEBAR */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px); /* Ocupa todo el ancho menos los márgenes */
    margin: 0px 20px 12px 20px; /* Centrado con margen lateral de 20px */
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    
    /* Dimensiones y Texto */
    min-height: 42px;
    padding: 10px 15px;
    text-transform: uppercase;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: center;
    
    /* Estética y Verde Corporativo */
    border: none;
    border-radius: 6px; 
    background-color: #218838;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(33, 136, 56, 0.2);
    cursor: pointer;
    outline: none;
    
    /* Transición suave */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* EFECTO HOVER (Optimizado para no romper el layout) */
.menu-siderbar-button:hover {
    background-color: #84bd00; 
    transform: translateX(5px); /* Desplazamiento sutil */
    box-shadow: 0 4px 12px rgba(132, 189, 0, 0.3);
    filter: brightness(1.05);
}

/* EFECTO CLIC */
.menu-siderbar-button:active {
    transform: translateX(2px);
    filter: brightness(0.9);
}

/* RESPONSIVIDAD PARA MÓVILES */
@media (max-width: 768px) {
    .menu-siderbar-button {
        width: calc(100% - 20px); /* Más ancho en pantallas pequeñas */
        margin: 0px 10px 10px 10px;
        min-height: 48px; /* Botón más grande para facilitar el toque táctil */
        font-size: 14px; /* Texto un poco más grande */
    }
}

/* Estilo Etiquets nuevas Upload */
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: #444444 !important;
    border-radius: 4px;
    min-height: 45px;
    align-items: center;
    cursor: text;
    border: 1px solid #444444;
    transition: all 0.2s ease;
}

.tags-input-container:hover {
    border-color: #ffffff !important;
}

.tags-input-container:focus-within {
    border-color: #84bd00 !important;
    box-shadow: 0 0 5px rgba(132, 189, 0, 0.3);
}

.tag-bubble {
    background: #84bd00 !important;
    color: #fff !important;
    padding: 4px 10px;
    margin: 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
}

.tag-bubble .remove-tag {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}

#tag-visual-input {
    border: none !important;
    outline: none !important;
    flex-grow: 1;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 14px;
    height: 30px !important;
}

#tag-visual-input::placeholder {
    color: #dddcd1 !important;
    opacity: 1;
}

.notification-box-error {
    position: relative;
    padding-right: 35px;
}
/* Si phpSound usa un botón de cierre estándar, aseguramos que se vea */
.notification-box-error .close-notification {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* --- 1. La Esfera del Avatar --- */
.cover-avatar img {
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important; /* Crea la forma circular */
    object-fit: cover !important;  /* Evita que la foto se deforme */
    border: 3px solid #ffffff !important; /* Borde blanco sutil */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; /* Sombra para dar relieve */
    background-color: #fff;
}

/* Asegurar que el contenedor no corte la esfera ni la sombra */
.cover-avatar-content, .cover-avatar {
    overflow: visible !important;
}

/* --- 2. El Fondo para ver el Nombre (Legibilidad) --- */
.cover-text-container {
    background: rgba(0, 0, 0, 0.55) !important; /* Fondo oscuro semi-transparente */
    padding: 10px 18px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px); /* Efecto cristal desenfocado */
    -webkit-backdrop-filter: blur(8px);
    display: inline-block !important; /* Para que el fondo solo ocupe lo que mide el nombre */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde muy fino */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Forzar que el nombre sea blanco brillante */
.cover-username a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Estilo para la ubicación */
.cover-location {
    color: #f0f0f0 !important;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* --- Mejora de Legibilidad en Perfil (Nombre y Ciudad) --- */

/* --- INTERVENCIÓN MÍNIMA PARA SEPARAR NOMBRE DE AVATAR --- */

/* 1. Empujamos el contenedor del nombre a la derecha */
.cover-description-content {
    /* El avatar mide 112px + 20px de margen original = 132px. 
       Le damos 150px para que haya aire entre la foto y el texto. */
    margin-left: 150px !important; 
    float: none !important; /* Quitamos el float para que el margen funcione bien */
    display: block !important;
}

/* 2. El fondo de legibilidad para que no pise nada */
.cover-text-container {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-block !important; /* Evita que la caja negra ocupe todo el ancho */
}

/* 3. Aseguramos que la esfera sea esfera sin moverla de su sitio original */
.cover-avatar img {
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
}

/* --- AJUSTE PARA MÓVIL --- */
@media screen and (max-width: 768px) {
    .cover-description-content {
        /* En móvil el avatar original mide 86px. 
           Ajustamos el margen para que no se monte tampoco en pantallas pequeñas */
        margin-left: 110px !important; 
    }
    .cover-username a {
        font-size: 18px !important;
    }
}