/* search.css: Estilos para la Búsqueda */

#search-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

#search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

#search-term {
    flex-grow: 1;
    padding: 12px;
    font-size: 1.1em;
    border-radius: 8px;
}

#initial-suggestions {
    background-color: var(--color-tarjeta);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    border-left: 5px solid var(--color-secundario);
}

#initial-suggestions h3 {
    color: var(--color-secundario);
    margin-bottom: 15px;
}

.tag-suggestion {
    background-color: #333;
    color: var(--color-texto);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.tag-suggestion:hover {
    background-color: var(--color-principal);
    color: var(--color-fondo);
    box-shadow: var(--sombra-neon);
}

/* ... Estilos de Groups.css para Desktop ... */
/* ... (todo el código original de groups.css) ... */
/* ... */

/* ========================================================================= */
/* --- MEDIA QUERY: ESTILOS RESPONSIVE PARA MÓVILES Y TABLETS (Máx. 768px) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    
    /* Contenedores Principales (Chat/Grupos) */
    #groups-container {
        height: auto; 
        min-height: calc(100vh - 70px); 
        margin: 10px auto; 
        border-radius: 0;
        border: none;
        max-width: 100%;
    }
    
    /* Lista de Conversaciones/Grupos (Panel Lateral) */
    #group-list-panel {
        width: 100%; 
        border-right: none;
        padding: 10px;
    }

    /* Panel Activo (Contenido del Grupo) - Lo ocultamos para priorizar la lista en móvil */
    #active-group-panel {
        display: none; 
    }
}