body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8f7f5; 
    color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/fondo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.font-serif { font-family: 'Playfair Display', serif; }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.file-input-button { cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: 2px dashed #d1d5db; border-radius: 0.5rem; transition: all 0.3s ease; }
.file-input-button:hover { border-color: #a3a3a3; background-color: #f9fafb; }
.control-btn.selected { background-color: #1a1a1a; color: #f8f7f5; border-color: #1a1a1a; }
.result-card { position: relative; overflow: hidden; cursor: pointer; }
.result-card .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; padding: 0.75rem; }
.result-card:hover .overlay { opacity: 1; }
.feedback-btn.liked { background-color: #10B981; }
.feedback-btn.disliked { background-color: #EF4444; }
.avatar-preview { border: 3px solid transparent; transition: border-color 0.3s ease; }
.avatar-preview.selected { border-color: #1a1a1a; }
.modal { display: none; position: fixed; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 1200px; border-radius: 0.5rem; position: relative; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-btn:hover, .close-btn:focus { color: black; text-decoration: none; }
.magnifier-container { position: relative; cursor: none; }
.magnifier-lens { position: absolute; border: 3px solid #000; border-radius: 50%; width: 150px; height: 150px; pointer-events: none; display: none; }
.magnifier-result { border: 1px solid #d4d4d4; width: 300px; height: 300px; display: none; background-repeat: no-repeat; }
#login-prompt {
    background-color: transparent;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
#app-container {
    background-color: rgba(248, 247, 245, 0.9); /* Fondo semi-transparente para la app */
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}