/* 
 * Arreglo del botón de play y íconos sociales - Centrado perfecto
 * Soluciona el problema de íconos descentrados tanto en el botón de play
 * como en los íconos de redes sociales del navbar
 */

/* === ARREGLO DEL BOTÓN DE PLAY === */

/* Mejorar el centrado del botón de play */
.play-btn {
    font-size: 36px !important; /* Aumentado de 30px a 36px para mejor proporción */
    display: flex !important; /* Cambiar a flexbox para mejor centrado */
    align-items: center !important; /* Centrado vertical perfecto */
    justify-content: center !important; /* Centrado horizontal perfecto */
    line-height: 1 !important; /* Resetear line-height para evitar desalineación */
}

/* Ajuste específico para el ícono mdi-play dentro del botón */
.play-btn .mdi-play {
    font-size: 38px !important; /* Tamaño específico para el ícono de play */
    line-height: 1 !important;  /* Centrado vertical perfecto */
    display: block !important; /* Asegurar que se comporte como bloque */
}

/* Resetear cualquier line-height heredado que cause descentrado */
.play-btn i {
    line-height: 1 !important; /* Eliminar line-height que descentra el ícono */
    margin: 0 !important; /* Eliminar cualquier margen */
    padding: 0 !important; /* Eliminar cualquier padding */
    vertical-align: baseline !important; /* Resetear vertical-align */
}

/* Mejorar la apariencia del contenedor de sombra */
.play-shadow:hover .play-btn {
    transform: scale(1.05) !important;
    transition: all 0.3s ease !important;
}

/* Efecto visual mejorado para el contenedor */
.play-shadow:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* === ARREGLO DE ÍCONOS SOCIALES DEL NAVBAR === */

/* Mejorar el centrado de los íconos sociales en el navbar */
.social-icon-navbar a {
    display: inline-flex !important; /* Usar flexbox para centrado perfecto */
    align-items: center !important; /* Centrado vertical perfecto */
    justify-content: center !important; /* Centrado horizontal perfecto */
    width: 32px !important; /* Tamaño consistente */
    height: 32px !important; /* Tamaño consistente */
    border-radius: 50% !important; /* Círculo perfecto */
    margin: 0 5px !important; /* Espaciado entre íconos */
    transition: all 0.3s ease !important; /* Transición suave */
    line-height: 1 !important; /* Resetear line-height */
}

/* Centrado perfecto de los íconos dentro de los círculos */
.social-icon-navbar a i {
    font-size: 16px !important; /* Tamaño apropiado para el círculo */
    line-height: 1 !important; /* Eliminar line-height problemático */
    margin: 0 !important; /* Eliminar márgenes */
    padding: 0 !important; /* Eliminar padding */
    vertical-align: baseline !important; /* Resetear vertical-align */
}

/* Efecto hover para los íconos sociales */
.social-icon-navbar a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

/* Asegurar que el contenedor de íconos sociales esté alineado */
.social-icon-navbar {
    display: flex !important;
    align-items: center !important;
    margin-left: 15px !important;
}

/* === RESPONSIVE ADJUSTMENTS === */

/* En dispositivos móviles mantener el centrado */
@media (max-width: 768px) {
    .play-btn {
        font-size: 32px !important; /* Ligeramente más pequeño en móviles */
    }
    
    .play-btn .mdi-play {
        font-size: 34px !important;
    }
    
    .social-icon-navbar a {
        width: 28px !important;
        height: 28px !important;
    }
    
    .social-icon-navbar a i {
        font-size: 14px !important;
    }
}