.emoji-tool-main { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.emoji-container {
    background: #0a0a0a; border: 1px solid #222; border-radius: 20px;
    padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Buscador */
.search-bar {
    display: flex; align-items: center; background: #111;
    border: 1px solid #333; border-radius: 10px; padding: 10px 15px;
    margin-bottom: 20px; transition: border-color 0.3s;
}
.search-bar:focus-within { border-color: var(--primary-color); }
.search-icon { margin-right: 10px; font-size: 1.2rem; }
.search-bar input {
    background: transparent; border: none; color: white; width: 100%;
    font-size: 1rem; outline: none;
}

/* Categorías */
.emoji-categories {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 15px;
    margin-bottom: 10px; border-bottom: 1px solid #222;
}
.cat-btn {
    background: #111; border: 1px solid #333; color: #888;
    padding: 8px 16px; border-radius: 20px; cursor: pointer;
    white-space: nowrap; transition: all 0.2s; font-weight: 600;
}
.cat-btn:hover { color: white; border-color: #555; }
.cat-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* Grid */
.emoji-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px; max-height: 400px; overflow-y: auto; padding-right: 5px;
}

/* Scrollbar bonita */
.emoji-grid::-webkit-scrollbar { width: 8px; }
.emoji-grid::-webkit-scrollbar-track { background: #111; border-radius: 4px; }
.emoji-grid::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.emoji-item {
    font-size: 2rem; background: #111; border: 1px solid #222;
    border-radius: 10px; cursor: pointer; transition: transform 0.1s, background 0.2s;
    display: flex; justify-content: center; align-items: center; height: 50px;
}
.emoji-item:hover { transform: scale(1.2); background: #222; border-color: var(--primary-color); z-index: 1; }
.emoji-item:active { transform: scale(0.95); }

/* Toast Notification */
.toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: rgba(40, 167, 69, 0.9); color: white; padding: 12px 24px;
    border-radius: 30px; font-weight: 600; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 1000;
    backdrop-filter: blur(5px);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }