/* css/directorio.css */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f9fafb; 
    color: #1a1a1a; 
}

/* Buscador Principal */
.input-search { 
    width: 100%; padding: 1.2rem 1.5rem 1.2rem 3.5rem; border-radius: 2rem; border: 2px solid #e5e7eb; 
    background: #ffffff; outline: none; transition: all 0.3s; font-size: 1rem; font-weight: 600;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}
.input-search:focus { border-color: #2563eb; box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.15); }
.search-icon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: #9ca3af; width: 22px; height: 22px; }

/* Tarjetas y Animaciones */
.card-enter { animation: fadeIn 0.4s ease-out forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Tarjetas de Categorías del Lobby */
.cat-card {
    background: white; border: 1px solid #f3f4f6; border-radius: 1.5rem; padding: 1.5rem 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    transition: all 0.2s; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.cat-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1); }
.cat-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.cat-title { font-size: 0.85rem; font-weight: 800; color: #374151; }

/* Transiciones de Pantallas */
.view-transition { transition: opacity 0.3s ease; }

/* ========================================== */
/* INYECCIÓN: ANIMACIÓN INFINITA (MARQUEE) */
/* ========================================== */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}
.animate-scroll:hover {
    animation-play-state: paused;
}