/* Estilos para los modales y componentes de compartir */

/* Modal base */
#share-modal {
    display: none;
    transition: opacity 0.3s ease;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#share-modal > div {
    animation: scaleIn 0.3s ease forwards;
}

@keyframes scaleIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

/* Contenido del modal */
#share-summary {
    max-height: 200px;
    overflow-y: auto;
}

/* Botones de compartir */
#share-whatsapp {
    background-color: #25D366;
}
#share-whatsapp:hover {
    background-color: #128C7E;
}

#share-url {
    background-color: #1877F2;
}
#share-url:hover {
    background-color: #135fc4;
}

/* Estilos para copiar URL */
#share-url-input {
    -webkit-appearance: none;
    border: 1px solid #ddd;
    border-right: none;
}

#share-url-input:focus {
    outline: none;
    box-shadow: none;
    border-color: #3b82f6;
}

#copy-url-btn {
    transition: background-color 0.2s ease;
}

#copy-url-btn:hover {
    background-color: #1e3a8a;
}

/* Botones de compartir en la interfaz principal */
#btn-share-desktop, #btn-share-mobile {
    transition: all 0.2s ease;
}

#btn-share-desktop:hover, #btn-share-mobile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#btn-share-desktop:active, #btn-share-mobile:active {
    transform: translateY(0);
}

/* Elementos para pantallas pequeñas */
@media (max-width: 640px) {
    #share-modal > div {
        width: 90%;
    }
    
    #share-summary {
        max-height: 150px;
    }
}