/* Estilos generales para el contenedor de perfiles */
.perfiles-container {
    position: relative;
    top: 0em;
    display: flex;
    flex-wrap: nowrap; /* Mantiene los perfiles en una sola fila */
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1113cb 0%, #2575fc08 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 3px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    width: 100%; /* Asegúrate de que ocupe todo el ancho disponible */
}

.perfiles-container:hover {
    border-image-source: linear-gradient(135deg, #2575fc, #6a11cb);
}

/* Estilos para el carrusel de perfiles */
/* Estilos base */
.perfil-carousel {
    right: -26em;
    display: flex;
    transition: transform 0.5s ease-in-out;
    position: relative;
    overflow-x: visible; /* Cambia a visible si hidden está causando problemas */
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding: 0; /* Elimina el padding para evitar que se recorte el contenido */
}

/* Pantallas medianas grandes (900px hasta 1199px) */
@media screen and (min-width: 900px) and (max-width: 1199px) {
    .perfil-carousel {
        right: -19em; /* Ajusta la posición derecha */
    }
}

/* Pantallas grandes (1200px hasta 1499px) */
@media screen and (min-width: 1200px) and (max-width: 1499px) {
    .perfil-carousel {
        right: -15em; /* Ajusta la posición derecha */
    }
}

/* Pantallas grandes mayores (1500px hasta 1999px) */
@media screen and (min-width: 1500px) and (max-width: 1999px) {
    .perfil-carousel {
        right: -9em; /* Ajusta la posición derecha */
    }
}

/* Pantallas muy grandes (2000px en adelante) */
@media screen and (min-width: 2000px) {
    .perfil-carousel {
        right: -18em; /* Ajusta la posición derecha para pantallas muy grandes */
    }
}

.perfil {
    min-width: 250px; /* Ancho mínimo del perfil */
    margin-right: 20px; /* Espacio entre perfiles */
    transition: transform 0.5s ease-in-out;
    background-color: #00000059;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 250px; /* Ajusta el ancho según el diseño */
    overflow: hidden; /* Evita que el contenido desborde */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Asegura que los botones estén siempre al final */
    height: 400px; /* Establece una altura fija para los perfiles */
    padding-bottom: 20px; /* Espacio adicional para los botones */
}

.perfil img {
    position: relative;
    top: 2em;
    width: 100%; /* Asegura que la imagen cubra todo el ancho del perfil */
    height: 19em; /* Establece una altura fija para la imagen */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    object-position: center; /* Centra la imagen dentro del contenedor */
    display: block; /* Elimina cualquier espacio extra debajo de la imagen */
}

.perfil h2, .perfil p {
    color: aliceblue;
    padding: 0 10px; /* Agrega padding para no pegar el texto a los bordes */
    margin-bottom: auto; /* Permite que el texto empuje los botones hacia abajo */
}

.perfil a {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #137DC2;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 10px; /* Espacio entre los botones */
}

/* CSS para el botón "Add to Collection" */
.add-collection-form {
    margin-top: 10px;
}

.add-collection-button {
    display: block;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    transition: background-color 0.3s;
    margin-bottom: 10px; /* Espacio inferior para mantener alineación */
}

.add-collection-button:hover {
    background-color: #45a049;
}

/* Estilos para las flechas del carrusel */
.carousel-arrow {
    position: absolute;
    top: 10px;
    font-size: 2em;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1000;
}

/* Estilos base */
.left-arrow {
    left: 10px;
}

/* Pantallas muy pequeñas (300px hasta 479px) */
@media screen and (min-width: 300px) and (max-width: 479px) {
    .left-arrow {
        left: 5px; /* Reduce la posición izquierda para pantallas muy pequeñas */
    }
}

/* Pantallas pequeñas (480px hasta 599px) */
@media screen and (min-width: 480px) and (max-width: 599px) {
    .left-arrow {
        left: 4em; /* Ajusta la posición izquierda para pantallas pequeñas */
    }
}

/* Pantallas medianas pequeñas (600px hasta 767px) */
@media screen and (min-width: 600px) and (max-width: 767px) {
    .left-arrow {
        left: 4em; /* Mantén la posición izquierda original para pantallas medianas pequeñas */
    }
}

/* Pantallas medianas (768px hasta 899px) */
@media screen and (min-width: 768px) and (max-width: 899px) {
    .left-arrow {
        left: 8em; /* Aumenta la posición izquierda para pantallas medianas */
    }
}

/* Pantallas medianas grandes (900px hasta 1199px) */
@media screen and (min-width: 900px) and (max-width: 1199px) {
    .left-arrow {
        left: 8em; /* Aumenta la posición izquierda para pantallas medianas grandes */
    }
}

/* Pantallas grandes (1200px hasta 1499px) */
@media screen and (min-width: 1200px) and (max-width: 1499px) {
    .left-arrow {
        left: 9em; /* Aumenta más la posición izquierda para pantallas grandes */
    }
}

/* Pantallas grandes mayores (1500px hasta 1999px) */
@media screen and (min-width: 1500px) and (max-width: 1999px) {
    .left-arrow {
        left: 10em; /* Aumenta aún más la posición izquierda para pantallas grandes mayores */
    }
}

/* Pantallas muy grandes (2000px en adelante) */
@media screen and (min-width: 2000px) {
    .left-arrow {
        left: 11em; /* Aumenta significativamente la posición izquierda para pantallas muy grandes */
    }
}

.right-arrow {
    right: 10px;
}

.left-arrow:hover, .right-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Media queries para el comportamiento en pantallas más pequeñas */
@media screen and (max-width: 500px) {
    .perfil {
        width: 80%; /* Un perfil casi completo visible en pantallas pequeñas */
    }
}

@media screen and (min-width: 501px) and (max-width: 767px) {
    .perfil {
        width: 50%; /* Dos perfiles visibles en pantallas medianas */
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .perfil {
        width: calc(33.33% - 20px); /* Tres perfiles visibles en pantallas medianas grandes */
    }
}

@media screen and (min-width: 1024px) {
    .perfil {
        width: calc(25% - 20px); /* Cuatro perfiles visibles en pantallas grandes */
    }
}