/* Estilos base y animaciones */
#app { font-family: 'Inter', sans-serif; background-color: white; color: #333; }
#app .fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Ocultar barra de desplazamiento en filtros */
#app .no-scrollbar::-webkit-scrollbar { display: none; }
#app .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Clases de utilidad para mostrar/ocultar secciones */
#app .hidden-section { display: none; }

/* Forzar el recorte de las imágenes en las tarjetas de series */
#app .series-card-img {
    width: 100%;
    height: 10rem; /* 160px, same as h-40 */
    object-fit: cover !important;
}

/* Forzar el color hover en los enlaces del menú de navegación */
#app .nav-link:hover {
    color: #5C2D91 !important;
}

/* Eliminar el recuadro/outline y sombra no deseada en los enlaces del menú al pasar el mouse o enfocar */
#app .nav-link:hover,
#app .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Forzar estilos del campo de búsqueda */
#app .app-search-input {
    padding-left: 2.5rem !important; /* pl-10 is 40px */
}

/* Forzar estilos del icono de búsqueda */
#app .app-search-icon {
    left: 0.75rem !important; /* left-3 is 12px */
    top: 0.625rem !important; /* top-2.5 is 10px */
    width: 1rem !important;   /* w-4 is 16px */
    height: 1rem !important;  /* h-4 is 16px */
}

/* Forzar las dimensiones del logo para evitar conflictos */
#app #app-logo {
    height: 8rem !important; /* 128px, same as h-32 */
    width: auto !important;
}

/* Evitar relleno de color no deseado en los botones de tráiler */
#app .trailer-button:hover {
    background-color: #F9FAFB !important; /* gray-50 */
}